mirror of
https://github.com/valitydev/dashboard.git
synced 2024-11-06 02:25:23 +00:00
Bump angular 18 (#182)
This commit is contained in:
Ildar Galeev
GitHub
parent
1368639ac7
commit
a785856303
@ -1,7 +1,7 @@
|
||||
module.exports = {
|
||||
extends: '@vality/eslint-config',
|
||||
extends: '@vality/eslint-config-ng',
|
||||
overrides: [
|
||||
...require('@vality/eslint-config/configs').angular('dsh').overrides,
|
||||
...require('@vality/eslint-config/configs').importOrder(['@dsh/**']).overrides,
|
||||
...require('@vality/eslint-config-ng/configs').angular('dsh').overrides,
|
||||
...require('@vality/eslint-config-ng/configs').importOrder(['@dsh/**']).overrides,
|
||||
],
|
||||
};
|
||||
|
||||
9240
package-lock.json
generated
9240
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
66
package.json
66
package.json
@ -25,36 +25,33 @@
|
||||
"spell:fix": "cspell --no-progress --show-suggestions --show-context **"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.2.1",
|
||||
"@angular/cdk": "~17.2.0",
|
||||
"@angular/common": "^17.2.1",
|
||||
"@angular/compiler": "^17.2.1",
|
||||
"@angular/core": "^17.2.1",
|
||||
"@angular/forms": "^17.2.1",
|
||||
"@angular/material": "~17.2.0",
|
||||
"@angular/material-moment-adapter": "^17.2.0",
|
||||
"@angular/platform-browser": "^17.2.1",
|
||||
"@angular/platform-browser-dynamic": "^17.2.1",
|
||||
"@angular/router": "^17.2.1",
|
||||
"@angular/animations": "^18.0.4",
|
||||
"@angular/cdk": "~18.0.4",
|
||||
"@angular/common": "^18.0.4",
|
||||
"@angular/compiler": "^18.0.4",
|
||||
"@angular/core": "^18.0.4",
|
||||
"@angular/forms": "^18.0.4",
|
||||
"@angular/material": "~18.0.4",
|
||||
"@angular/material-moment-adapter": "^18.0.4",
|
||||
"@angular/platform-browser": "^18.0.4",
|
||||
"@angular/platform-browser-dynamic": "^18.0.4",
|
||||
"@angular/router": "^18.0.4",
|
||||
"@ngneat/transloco": "^6.0.4",
|
||||
"@ngneat/until-destroy": "^9.0.0",
|
||||
"@sentry/angular-ivy": "^7.100.1",
|
||||
"@sentry/integrations": "^7.100.1",
|
||||
"@sentry/tracing": "^7.100.1",
|
||||
"@vality/ng-core": "^17.2.1-pr-57-0134d85.0",
|
||||
"@vality/swag-anapi-v2": "2.0.1-32ed85f.0",
|
||||
"@vality/swag-api-keys-v2": "0.1.2-f0ece04.0",
|
||||
"@vality/swag-claim-management": "0.1.1-6b6711b.0",
|
||||
"@vality/swag-organizations": "1.0.1-de0cd06.0",
|
||||
"@vality/swag-payments": "0.1.3-5dc6d9f.0",
|
||||
"@vality/swag-url-shortener": "0.1.0",
|
||||
"@vality/swag-wallet": "0.1.3-3b8984e.0",
|
||||
"@vality/ng-core": "18.0.1-pr-63-9e315a6.0",
|
||||
"@vality/swag-anapi-v2": "2.0.1-2eda808.0",
|
||||
"@vality/swag-api-keys-v2": "0.1.2-321124b.0",
|
||||
"@vality/swag-claim-management": "0.1.1-b5248eb.0",
|
||||
"@vality/swag-organizations": "1.0.1-e863566.0",
|
||||
"@vality/swag-payments": "0.1.3-5760b7e.0",
|
||||
"@vality/swag-url-shortener": "0.1.1-9659896.0",
|
||||
"@vality/swag-wallet": "0.1.3-54f56db.0",
|
||||
"angular-file": "^3.0.1",
|
||||
"apexcharts": "^3.19.2",
|
||||
"css-element-queries": "1.2.3",
|
||||
"humanize-duration": "^3.19.0",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"keycloak-angular": "^15.1.0",
|
||||
"keycloak-angular": "16.0.1",
|
||||
"keycloak-js": "^18.0.1",
|
||||
"lodash-es": "^4.17.21",
|
||||
"moment": "2.29.4",
|
||||
@ -67,30 +64,27 @@
|
||||
"zone.js": "~0.14.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-builders/custom-webpack": "^17.0.0",
|
||||
"@angular-devkit/build-angular": "^17.2.0",
|
||||
"@angular-eslint/builder": "^17.2.0",
|
||||
"@angular-eslint/schematics": "^17.2.0",
|
||||
"@angular/cli": "^17.2.0",
|
||||
"@angular/compiler-cli": "^17.2.1",
|
||||
"@angular/language-service": "^17.2.1",
|
||||
"@angular-builders/custom-webpack": "^18.0.0",
|
||||
"@angular-devkit/build-angular": "^18.0.5",
|
||||
"@angular-eslint/builder": "^18.0.1",
|
||||
"@angular-eslint/schematics": "^18.0.1",
|
||||
"@angular/cli": "^18.0.5",
|
||||
"@angular/compiler-cli": "^18.0.4",
|
||||
"@angular/language-service": "^18.0.4",
|
||||
"@ngneat/transloco-keys-manager": "^3.8.0",
|
||||
"@ngneat/transloco-optimize": "^5.0.3",
|
||||
"@types/d3": "^5.7.0",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/humanize-duration": "^3.18.0",
|
||||
"@types/jasmine": "~5.1.4",
|
||||
"@types/jwt-decode": "^3.1.0",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/moment": "2.13.0",
|
||||
"@types/prettier": "^3.0.0",
|
||||
"@vality/cspell-config": "^8.0.1-pr-57-482a037.0",
|
||||
"@vality/eslint-config": "^8.2.0",
|
||||
"@vality/eslint-config-ng": "18.0.1-pr-63-e72dd8e.0",
|
||||
"@vality/prettier-config": "3.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"cspell": "^8.3.2",
|
||||
"dotenv": "^16.0.3",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint": "^8.57.0",
|
||||
"glob": "^7.1.6",
|
||||
"jasmine-core": "~5.1.1",
|
||||
"jasmine-marbles": "0.9.2",
|
||||
@ -103,6 +97,6 @@
|
||||
"prettier": "^3.1.1",
|
||||
"ts-mockito": "^2.6.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~5.2.2"
|
||||
"typescript": "~5.4.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,9 +20,8 @@ type DeepOnlyMutable<T> = T extends object
|
||||
type ApiArgs = [Injector];
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
type MethodParams<P extends Record<PropertyKey, any>, K extends PropertyKey> = RequiredKeys<
|
||||
Omit<P, K>
|
||||
> extends never
|
||||
type MethodParams<P extends Record<PropertyKey, any>, K extends PropertyKey> =
|
||||
RequiredKeys<Omit<P, K>> extends never
|
||||
? void | Overwrite<P, { [N in K]?: P[N] }>
|
||||
: Overwrite<P, { [N in K]?: P[N] }>;
|
||||
type Method<M, P extends PropertyKey> = M extends (
|
||||
|
||||
@ -1,18 +1,15 @@
|
||||
import { Component, OnInit, isDevMode } from '@angular/core';
|
||||
import * as sentry from '@sentry/angular-ivy';
|
||||
import { take } from 'rxjs/operators';
|
||||
import { Component, isDevMode } from '@angular/core';
|
||||
|
||||
import { LanguageService, Language } from '@dsh/app/language';
|
||||
|
||||
import { BootstrapService } from './bootstrap.service';
|
||||
import { ContextOrganizationService } from './shared';
|
||||
|
||||
@Component({
|
||||
selector: 'dsh-root',
|
||||
templateUrl: 'app.component.html',
|
||||
providers: [BootstrapService],
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
export class AppComponent {
|
||||
bootstrapped$ = this.bootstrapService.bootstrapped$;
|
||||
isDev = isDevMode();
|
||||
|
||||
@ -22,16 +19,9 @@ export class AppComponent implements OnInit {
|
||||
|
||||
constructor(
|
||||
private bootstrapService: BootstrapService,
|
||||
private contextOrganizationService: ContextOrganizationService,
|
||||
public languageService: LanguageService,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.contextOrganizationService.organization$
|
||||
.pipe(take(1))
|
||||
.subscribe(({ party }) => sentry.setUser({ id: party }));
|
||||
}
|
||||
|
||||
async setLanguage(language: Language) {
|
||||
await this.languageService.set(language);
|
||||
window.location.reload();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
|
||||
import { APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule, isDevMode } from '@angular/core';
|
||||
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
import { APP_INITIALIZER, LOCALE_ID, NgModule, isDevMode } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import {
|
||||
DateAdapter,
|
||||
@ -18,9 +18,7 @@ import {
|
||||
} from '@angular/material-moment-adapter';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { Router } from '@angular/router';
|
||||
import { TranslocoModule, provideTransloco, TRANSLOCO_SCOPE } from '@ngneat/transloco';
|
||||
import * as sentry from '@sentry/angular-ivy';
|
||||
import { QUERY_PARAMS_SERIALIZERS } from '@vality/ng-core';
|
||||
import { FlexLayoutModule } from 'ng-flex-layout';
|
||||
|
||||
@ -45,13 +43,12 @@ import { IconsModule, IconsService } from './icons';
|
||||
import { initializer } from './initializer';
|
||||
import { LanguageService } from './language';
|
||||
import { SectionsModule } from './sections';
|
||||
import { SentryErrorHandler } from './sentry-error-handler.service';
|
||||
import { SentryHttpInterceptor } from './sentry-http-interceptor';
|
||||
import { ThemeManager } from './theme-manager';
|
||||
import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent],
|
||||
bootstrap: [AppComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
BrowserModule,
|
||||
@ -60,7 +57,6 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
|
||||
AuthModule,
|
||||
HomeModule,
|
||||
KeycloakAngularModule,
|
||||
HttpClientModule,
|
||||
TranslocoModule,
|
||||
ErrorModule,
|
||||
IconsModule,
|
||||
@ -83,14 +79,7 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
|
||||
{
|
||||
provide: APP_INITIALIZER,
|
||||
useFactory: initializer,
|
||||
deps: [
|
||||
ConfigService,
|
||||
KeycloakService,
|
||||
LanguageService,
|
||||
ThemeManager,
|
||||
IconsService,
|
||||
sentry.TraceService,
|
||||
],
|
||||
deps: [ConfigService, KeycloakService, LanguageService, ThemeManager, IconsService],
|
||||
multi: true,
|
||||
},
|
||||
{
|
||||
@ -123,25 +112,12 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
|
||||
loader: TranslocoHttpLoaderService,
|
||||
}),
|
||||
{ provide: ENV, useValue: environment },
|
||||
{
|
||||
provide: ErrorHandler,
|
||||
useClass: SentryErrorHandler,
|
||||
},
|
||||
{
|
||||
provide: HTTP_INTERCEPTORS,
|
||||
useClass: SentryHttpInterceptor,
|
||||
multi: true,
|
||||
},
|
||||
{
|
||||
provide: sentry.TraceService,
|
||||
deps: [Router],
|
||||
},
|
||||
{
|
||||
provide: QUERY_PARAMS_SERIALIZERS,
|
||||
useValue: [createDateRangeWithPresetSerializer()],
|
||||
},
|
||||
{ provide: TRANSLOCO_SCOPE, useValue: 'app' },
|
||||
provideHttpClient(withInterceptorsFromDi()),
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
||||
@ -31,8 +31,7 @@ export class RoleAccessService {
|
||||
return this.contextOrganizationService.member$.pipe(
|
||||
map((member) => {
|
||||
const memberRoles = member.roles.map((r) => r.roleId);
|
||||
return roleAccessNames[type](
|
||||
(access) =>
|
||||
return roleAccessNames[type]((access) =>
|
||||
ROLE_ACCESSES_OBJECT[access]?.some((role) => memberRoles.includes(role)),
|
||||
);
|
||||
}),
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
|
||||
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
|
||||
import { getTestBed, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { config, mockConfig } from './config-stub';
|
||||
@ -7,8 +8,12 @@ import { ConfigService } from './config.service';
|
||||
describe('ConfigService', () => {
|
||||
function createService() {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [HttpClientTestingModule],
|
||||
providers: [ConfigService],
|
||||
imports: [],
|
||||
providers: [
|
||||
ConfigService,
|
||||
provideHttpClient(withInterceptorsFromDi()),
|
||||
provideHttpClientTesting(),
|
||||
],
|
||||
});
|
||||
const injector = getTestBed();
|
||||
const service: ConfigService = injector.inject(ConfigService);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { RouterModule } from '@angular/router';
|
||||
@ -6,8 +6,9 @@ import { RouterModule } from '@angular/router';
|
||||
import { BrandComponent } from './brand.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule, MatIconModule, HttpClientModule],
|
||||
declarations: [BrandComponent],
|
||||
exports: [BrandComponent],
|
||||
imports: [RouterModule, MatIconModule],
|
||||
providers: [provideHttpClient(withInterceptorsFromDi())],
|
||||
})
|
||||
export class BrandModule {}
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.dsh-mobile-nav-item-active {
|
||||
color: mat.get-color-from-palette($primary, default);
|
||||
color: mat.m2-get-color-from-palette($primary, default);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dsh-mobile-menu-nav-item-typography($config) {
|
||||
.dsh-mobile-menu-nav-item {
|
||||
@include mat.typography-level($config, title);
|
||||
@include mat.m2-typography-level($config, title);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
|
||||
@mixin dsh-mobile-user-bar-typography($config) {
|
||||
.dsh-mobile-user-bar-username {
|
||||
@include mat.typography-level($config, body-2);
|
||||
@include mat.m2-typography-level($config, body-2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import * as sentry from '@sentry/angular-ivy';
|
||||
import { Integrations } from '@sentry/tracing';
|
||||
import isNil from 'lodash-es/isNil';
|
||||
|
||||
import { environment } from '../environments';
|
||||
|
||||
export const initSentry = (dsn: string): void => {
|
||||
if (isNil(dsn)) {
|
||||
return null;
|
||||
}
|
||||
sentry.init({
|
||||
dsn,
|
||||
integrations: [
|
||||
new Integrations.BrowserTracing({
|
||||
routingInstrumentation: sentry.routingInstrumentation,
|
||||
}),
|
||||
],
|
||||
|
||||
// Set tracesSampleRate to 1.0 to capture 100%
|
||||
// of transactions for performance monitoring.
|
||||
tracesSampleRate: 1,
|
||||
autoSessionTracking: true,
|
||||
environment: environment.production ? 'production' : 'development',
|
||||
});
|
||||
};
|
||||
@ -3,7 +3,6 @@ import { environment } from '../environments';
|
||||
import { KeycloakService } from './auth/keycloak';
|
||||
import { ConfigService } from './config';
|
||||
import { IconsService } from './icons';
|
||||
import { initSentry } from './init-sentry';
|
||||
import { LanguageService } from './language';
|
||||
import { ThemeManager } from './theme-manager';
|
||||
|
||||
@ -20,7 +19,6 @@ export const initializer =
|
||||
configService.init({ configUrl: environment.appConfigPath }).then(() =>
|
||||
Promise.all([
|
||||
themeManager.init(),
|
||||
initSentry(configService.sentryDsn),
|
||||
keycloakService.init({
|
||||
config: environment.authConfigPath,
|
||||
initOptions: {
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.positive-percent-difference {
|
||||
color: mat.get-color-from-palette($accent, default);
|
||||
color: mat.m2-get-color-from-palette($accent, default);
|
||||
}
|
||||
|
||||
.negative-percent-difference {
|
||||
color: mat.get-color-from-palette($warn, 300);
|
||||
color: mat.m2-get-color-from-palette($warn, 300);
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
.dsh-balances {
|
||||
&-title {
|
||||
color: mat.get-color-from-palette($foreground, secondary-text);
|
||||
color: mat.m2-get-color-from-palette($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -13,13 +13,13 @@
|
||||
@mixin dsh-balances-typography($config) {
|
||||
.dsh-balances {
|
||||
&-title {
|
||||
@include mat.typography-level($config, caption);
|
||||
@include mat.m2-typography-level($config, caption);
|
||||
}
|
||||
&-balance-lg {
|
||||
@include mat.typography-level($config, title);
|
||||
@include mat.m2-typography-level($config, title);
|
||||
}
|
||||
&-balance-md {
|
||||
@include mat.typography-level($config, subheading-2);
|
||||
@include mat.m2-typography-level($config, subheading-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.dsh-no-shops-action {
|
||||
color: mat.get-color-from-palette($primary, default);
|
||||
color: mat.m2-get-color-from-palette($primary, default);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dsh-no-shops-alert-typography($config) {
|
||||
.dsh-no-shops-content {
|
||||
@include mat.typography-level($config, subheading-2);
|
||||
@include mat.m2-typography-level($config, subheading-2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
fxLayout="column"
|
||||
fxLayoutGap="32px"
|
||||
>
|
||||
<nav mat-tab-nav-bar>
|
||||
<nav [tabPanel]="tabPanel" mat-tab-nav-bar>
|
||||
<ng-container *ngFor="let link of links">
|
||||
<a
|
||||
#rla="routerLinkActive"
|
||||
@ -18,8 +18,8 @@
|
||||
</a>
|
||||
</ng-container>
|
||||
</nav>
|
||||
<div>
|
||||
<mat-tab-nav-panel #tabPanel>
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</mat-tab-nav-panel>
|
||||
</div>
|
||||
<dsh-scroll-up [hideAfter]="200"></dsh-scroll-up>
|
||||
|
||||
@ -12,10 +12,10 @@ export class CreateRefundService {
|
||||
|
||||
createRefund(data: CreateRefundDialogData): Observable<CreateRefundDialogResponse> {
|
||||
return this.dialog
|
||||
.open<CreateRefundDialogComponent, CreateRefundDialogData>(
|
||||
.open<
|
||||
CreateRefundDialogComponent,
|
||||
{ data },
|
||||
)
|
||||
CreateRefundDialogData
|
||||
>(CreateRefundDialogComponent, { data })
|
||||
.afterClosed();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { HttpClientTestingModule } from '@angular/common/http/testing';
|
||||
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
import { provideHttpClientTesting } from '@angular/common/http/testing';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
@ -35,6 +36,7 @@ describe('PaymentsPanelsComponent', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [PaymentsPanelsComponent, MockRowHeaderComponent, MockRowComponent],
|
||||
imports: [
|
||||
FlexLayoutModule,
|
||||
SpinnerModule,
|
||||
@ -44,7 +46,6 @@ describe('PaymentsPanelsComponent', () => {
|
||||
ShowMorePanelModule,
|
||||
PaymentsDetailsModule,
|
||||
NoopAnimationsModule,
|
||||
HttpClientTestingModule,
|
||||
TranslocoTestingModule.withLangs(
|
||||
{
|
||||
ru: {
|
||||
@ -57,7 +58,7 @@ describe('PaymentsPanelsComponent', () => {
|
||||
},
|
||||
),
|
||||
],
|
||||
declarations: [PaymentsPanelsComponent, MockRowHeaderComponent, MockRowComponent],
|
||||
providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
|
||||
@ -15,8 +15,7 @@ export class ShopsBalanceService {
|
||||
return of([]);
|
||||
}
|
||||
return this.analyticsService.getCurrentShopBalances({ shopIDs }).pipe(
|
||||
map(
|
||||
({ result }) =>
|
||||
map(({ result }) =>
|
||||
result?.map(({ id, amountResults = [] }) => ({
|
||||
id,
|
||||
data: amountResults?.length ? amountResults[0] : null,
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
import { ErrorHandler as AngularErrorHandler, Injectable } from '@angular/core';
|
||||
import * as sentry from '@sentry/angular-ivy';
|
||||
|
||||
import { extractError } from '@dsh/utils';
|
||||
|
||||
import { environment } from '../environments';
|
||||
|
||||
/**
|
||||
* Options used to configure the behavior of the Angular ErrorHandler.
|
||||
*/
|
||||
export interface ErrorHandlerOptions {
|
||||
logErrors?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Implementation of Angular's ErrorHandler provider that can be used as a drop-in replacement for the stock one.
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class SentryErrorHandler implements AngularErrorHandler {
|
||||
private readonly options: ErrorHandlerOptions;
|
||||
|
||||
constructor() {
|
||||
this.options = {
|
||||
logErrors: !environment.production,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Method called for every value captured through the ErrorHandler
|
||||
*/
|
||||
public handleError(error: unknown): void {
|
||||
const extractedError = extractError(error) || 'Handled unknown error';
|
||||
|
||||
this.captureChunkLoadError(extractedError);
|
||||
|
||||
// Capture handled exception and send it to Sentry.
|
||||
sentry.captureException(extractedError);
|
||||
|
||||
if (this.options.logErrors) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(extractedError);
|
||||
}
|
||||
}
|
||||
|
||||
private captureChunkLoadError(error: { message?: string }): void {
|
||||
const chunkFailedMessage = /Loading chunk [\d]+ failed/;
|
||||
const chunkLoadError = /ChunkLoadError [\d]+ failed/;
|
||||
const errorMessage = error?.message;
|
||||
if (!errorMessage) {
|
||||
return;
|
||||
}
|
||||
if (chunkFailedMessage.test(errorMessage) || chunkLoadError.test(errorMessage)) {
|
||||
// TODO Temporary log for checking error capture efficiency
|
||||
sentry.captureMessage('Chunk load error captured');
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import * as sentry from '@sentry/angular-ivy';
|
||||
import isNil from 'lodash-es/isNil';
|
||||
import { Observable, throwError } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class SentryHttpInterceptor implements HttpInterceptor {
|
||||
intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
|
||||
return next.handle(req).pipe(
|
||||
catchError((resp) => {
|
||||
const xRequestId = req.headers.get('x-request-id');
|
||||
if (!isNil(xRequestId)) {
|
||||
sentry.setTag('x-request-id', xRequestId);
|
||||
}
|
||||
return throwError(resp);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -34,33 +34,36 @@
|
||||
&.dsh-primary {
|
||||
@include button(
|
||||
map-get($background, card),
|
||||
mat.get-color-from-palette($primary, default)
|
||||
mat.m2-get-color-from-palette($primary, default)
|
||||
);
|
||||
@include focused-background(mat.get-color-from-palette($primary, default, 0.88));
|
||||
@include focused-background(mat.m2-get-color-from-palette($primary, default, 0.88));
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: mat.get-color-from-palette($primary, default, 0.88) !important;
|
||||
background: mat.m2-get-color-from-palette($primary, default, 0.88) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.dsh-accent {
|
||||
@include button(
|
||||
map-get($background, card),
|
||||
mat.get-color-from-palette($accent, default)
|
||||
mat.m2-get-color-from-palette($accent, default)
|
||||
);
|
||||
@include focused-background(mat.get-color-from-palette($primary, default, 0.88));
|
||||
@include focused-background(mat.m2-get-color-from-palette($primary, default, 0.88));
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: mat.get-color-from-palette($primary, default, 0.88) !important;
|
||||
background: mat.m2-get-color-from-palette($primary, default, 0.88) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.dsh-warn {
|
||||
@include button(map-get($background, card), mat.get-color-from-palette($warn, 400));
|
||||
@include focused-background(mat.get-color-from-palette($warn, default, 0.88));
|
||||
@include button(
|
||||
map-get($background, card),
|
||||
mat.m2-get-color-from-palette($warn, 400)
|
||||
);
|
||||
@include focused-background(mat.m2-get-color-from-palette($warn, default, 0.88));
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: mat.get-color-from-palette($warn, default, 0.88) !important;
|
||||
background: mat.m2-get-color-from-palette($warn, default, 0.88) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,29 +74,29 @@
|
||||
|
||||
&-text-button {
|
||||
&.dsh-primary {
|
||||
@include button(mat.get-color-from-palette($primary, default), transparent);
|
||||
@include focused-background(mat.get-color-from-palette($primary, default, 0.12));
|
||||
@include button(mat.m2-get-color-from-palette($primary, default), transparent);
|
||||
@include focused-background(mat.m2-get-color-from-palette($primary, default, 0.12));
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: mat.get-color-from-palette($primary, default, 0.2) !important;
|
||||
background: mat.m2-get-color-from-palette($primary, default, 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.dsh-accent {
|
||||
@include button(mat.get-color-from-palette($primary, default), transparent);
|
||||
@include focused-background(mat.get-color-from-palette($primary, default, 0.12));
|
||||
@include button(mat.m2-get-color-from-palette($primary, default), transparent);
|
||||
@include focused-background(mat.m2-get-color-from-palette($primary, default, 0.12));
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: mat.get-color-from-palette($primary, default, 0.2) !important;
|
||||
background: mat.m2-get-color-from-palette($primary, default, 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.dsh-warn {
|
||||
@include button(mat.get-color-from-palette($warn, 400), transparent);
|
||||
@include focused-background(mat.get-color-from-palette($warn, default, 0.88));
|
||||
@include button(mat.m2-get-color-from-palette($warn, 400), transparent);
|
||||
@include focused-background(mat.m2-get-color-from-palette($warn, default, 0.88));
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: mat.get-color-from-palette($warn, default, 0.2) !important;
|
||||
background: mat.m2-get-color-from-palette($warn, default, 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,22 +111,25 @@
|
||||
&.dsh-primary {
|
||||
@include button(
|
||||
map-get($background, card),
|
||||
mat.get-color-from-palette($primary, default)
|
||||
mat.m2-get-color-from-palette($primary, default)
|
||||
);
|
||||
@include focused-background(mat.get-color-from-palette($primary, 300));
|
||||
@include focused-background(mat.m2-get-color-from-palette($primary, 300));
|
||||
}
|
||||
|
||||
&.dsh-accent {
|
||||
@include button(
|
||||
map-get($background, card),
|
||||
mat.get-color-from-palette($accent, default)
|
||||
mat.m2-get-color-from-palette($accent, default)
|
||||
);
|
||||
@include focused-background(mat.get-color-from-palette($accent, 200));
|
||||
@include focused-background(mat.m2-get-color-from-palette($accent, 200));
|
||||
}
|
||||
|
||||
&.dsh-warn {
|
||||
@include button(map-get($background, card), mat.get-color-from-palette($warn, 400));
|
||||
@include focused-background(mat.get-color-from-palette($warn, 300));
|
||||
@include button(
|
||||
map-get($background, card),
|
||||
mat.m2-get-color-from-palette($warn, 400)
|
||||
);
|
||||
@include focused-background(mat.m2-get-color-from-palette($warn, 300));
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@ -139,9 +145,9 @@
|
||||
&-text-button,
|
||||
&-icon-button {
|
||||
font: {
|
||||
family: mat.font-family($config, button);
|
||||
size: mat.font-size($config, button);
|
||||
weight: mat.font-weight($config, button);
|
||||
family: mat.m2-font-family($config, button);
|
||||
size: mat.m2-font-size($config, button);
|
||||
weight: mat.m2-font-weight($config, button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,16 +7,16 @@
|
||||
|
||||
.apexcharts {
|
||||
&-text {
|
||||
fill: mat.get-color-from-palette($foreground, text);
|
||||
fill: mat.m2-get-color-from-palette($foreground, text);
|
||||
}
|
||||
|
||||
&-legend-text {
|
||||
color: mat.get-color-from-palette($foreground, text) !important;
|
||||
color: mat.m2-get-color-from-palette($foreground, text) !important;
|
||||
}
|
||||
|
||||
&-tooltip {
|
||||
@include dsh-shadow($theme);
|
||||
background-color: mat.get-color-from-palette($background, card);
|
||||
background-color: mat.m2-get-color-from-palette($background, card);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -27,9 +27,9 @@
|
||||
line-height: 20px;
|
||||
|
||||
font: {
|
||||
family: mat.font-family($config, caption) !important;
|
||||
size: mat.font-size($config, caption) !important;
|
||||
weight: mat.font-weight($config, caption) !important;
|
||||
family: mat.m2-font-family($config, caption) !important;
|
||||
size: mat.m2-font-size($config, caption) !important;
|
||||
weight: mat.m2-font-weight($config, caption) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
@mixin dsh-date-range-filter-theme($theme) {
|
||||
.dsh-date-range-filter-preset-active {
|
||||
color: mat.get-color-from-palette(map-get($theme, primary));
|
||||
color: mat.m2-get-color-from-palette(map-get($theme, primary));
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,27 +10,27 @@
|
||||
color: map-get($foreground, text);
|
||||
|
||||
&:hover:enabled {
|
||||
border-color: mat.get-color-from-palette($primary, default);
|
||||
border-color: mat.m2-get-color-from-palette($primary, default);
|
||||
}
|
||||
|
||||
&-active:enabled {
|
||||
border-color: mat.get-color-from-palette($primary, default);
|
||||
color: mat.get-color-from-palette($primary, default);
|
||||
background-color: mat.get-color-from-palette($primary, default, 0.14);
|
||||
border-color: mat.m2-get-color-from-palette($primary, default);
|
||||
color: mat.m2-get-color-from-palette($primary, default);
|
||||
background-color: mat.m2-get-color-from-palette($primary, default, 0.14);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: mat.get-color-from-palette($foreground, disabled-text, 0.38);
|
||||
color: mat.m2-get-color-from-palette($foreground, disabled-text, 0.38);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dsh-filter-button-typography($config) {
|
||||
.dsh-filter-button {
|
||||
@include mat.typography-level($config, body-1);
|
||||
@include mat.m2-typography-level($config, body-1);
|
||||
|
||||
&-active {
|
||||
@include mat.typography-level($config, body-2);
|
||||
@include mat.m2-typography-level($config, body-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
[ngClass]="{
|
||||
'dsh-format-input-element': true,
|
||||
'mat-input-element': true,
|
||||
'dsh-format-input-element-full-size': !size
|
||||
'dsh-format-input-element-full-size': !size,
|
||||
}"
|
||||
[placeholder]="placeholder"
|
||||
(change)="writeValue($event.target.value)"
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.dsh-last-updated {
|
||||
color: mat.get-color-from-palette($foreground, secondary-text);
|
||||
color: mat.m2-get-color-from-palette($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,6 +14,6 @@
|
||||
}
|
||||
|
||||
.dsh-last-updated {
|
||||
@include mat.typography-level($config, caption);
|
||||
@include mat.m2-typography-level($config, caption);
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,6 +44,6 @@
|
||||
|
||||
@mixin dsh-status-typography($config) {
|
||||
.dsh-status-label {
|
||||
@include mat.typography-level($config, body-1);
|
||||
@include mat.m2-typography-level($config, body-1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.dsh-accordion-item-content-header-label {
|
||||
color: mat.get-color-from-palette($foreground, secondary-text);
|
||||
color: mat.m2-get-color-from-palette($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dsh-accordion-item-content-header-typography($config) {
|
||||
.dsh-accordion-item-content-header-label {
|
||||
@include mat.typography-level($config, caption);
|
||||
@include mat.m2-typography-level($config, caption);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,6 @@
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.dsh-alert {
|
||||
background-color: mat.get-color-from-palette($primary, default, 0.12);
|
||||
background-color: mat.m2-get-color-from-palette($primary, default, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,20 +6,20 @@
|
||||
|
||||
.dsh-card {
|
||||
@include dsh-shadow($theme);
|
||||
background-color: mat.get-color-from-palette($background, card);
|
||||
background-color: mat.m2-get-color-from-palette($background, card);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dsh-card-typography($config) {
|
||||
.dsh-card {
|
||||
font-family: mat.font-family($config);
|
||||
font-family: mat.m2-font-family($config);
|
||||
}
|
||||
|
||||
.dsh-card-header .dsh-card-title {
|
||||
font-size: mat.font-size($config, title);
|
||||
font-size: mat.m2-font-size($config, title);
|
||||
}
|
||||
|
||||
.dsh-card-content {
|
||||
font-size: mat.font-size($config, body-1);
|
||||
font-size: mat.m2-font-size($config, body-1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { HttpClientTestingModule } from '@angular/common/http/testing';
|
||||
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
import { provideHttpClientTesting } from '@angular/common/http/testing';
|
||||
import { Component } from '@angular/core';
|
||||
import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
|
||||
import { MatIconRegistry } from '@angular/material/icon';
|
||||
@ -34,8 +35,9 @@ describe('CollapseComponent', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CollapseModule, NoopAnimationsModule, HttpClientTestingModule],
|
||||
declarations: [MockCollapseComponent, MockCollapseUpComponent],
|
||||
imports: [CollapseModule, NoopAnimationsModule],
|
||||
providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
.dsh-details-item {
|
||||
&-title {
|
||||
color: mat.get-color-from-palette($foreground, secondary-text);
|
||||
color: mat.m2-get-color-from-palette($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -13,11 +13,11 @@
|
||||
@mixin dsh-details-item-typography($config) {
|
||||
.dsh-details-item {
|
||||
&-title {
|
||||
@include mat.typography-level($config, caption);
|
||||
@include mat.m2-typography-level($config, caption);
|
||||
}
|
||||
|
||||
&-content {
|
||||
@include mat.typography-level($config, body-1);
|
||||
@include mat.m2-typography-level($config, body-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,13 +10,13 @@
|
||||
|
||||
&,
|
||||
&-triangle {
|
||||
background-color: mat.get-color-from-palette($background, card);
|
||||
background-color: mat.m2-get-color-from-palette($background, card);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dsh-dropdown-typography($config) {
|
||||
.dsh-dropdown {
|
||||
@include mat.typography-level($config, body-1);
|
||||
@include mat.m2-typography-level($config, body-1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
|
||||
.dsh-limited-list {
|
||||
&-title {
|
||||
color: mat.get-color-from-palette($foreground, secondary-text);
|
||||
color: mat.m2-get-color-from-palette($foreground, secondary-text);
|
||||
}
|
||||
|
||||
&-show-more {
|
||||
color: mat.get-color-from-palette($primary, default);
|
||||
color: mat.m2-get-color-from-palette($primary, default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,6 @@
|
||||
@mixin dsh-link-label-typography($config) {
|
||||
.dsh-link-label-content {
|
||||
text-decoration: underline;
|
||||
@include mat.typography-level($config, body-1);
|
||||
@include mat.m2-typography-level($config, body-1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,10 +16,10 @@
|
||||
.dsh-panel {
|
||||
@include panel(map-get($background, card));
|
||||
&-primary {
|
||||
@include panel(mat.get-color-from-palette($primary, 50));
|
||||
@include panel(mat.m2-get-color-from-palette($primary, 50));
|
||||
}
|
||||
&-accent {
|
||||
@include panel(mat.get-color-from-palette($accent, 50));
|
||||
@include panel(mat.m2-get-color-from-palette($accent, 50));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -27,9 +27,9 @@
|
||||
@mixin dsh-panel-typography($config) {
|
||||
.dsh-panel-header-content {
|
||||
font: {
|
||||
family: mat.font-family($config, body-1);
|
||||
size: mat.font-size($config, body-1);
|
||||
weight: mat.font-weight($config, body-1);
|
||||
family: mat.m2-font-family($config, body-1);
|
||||
size: mat.m2-font-size($config, body-1);
|
||||
weight: mat.m2-font-weight($config, body-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
[ngClass]="{
|
||||
'dsh-panel': true,
|
||||
'dsh-panel-primary': color === 'primary',
|
||||
'dsh-panel-accent': color === 'accent'
|
||||
'dsh-panel-accent': color === 'accent',
|
||||
}"
|
||||
>
|
||||
<ng-content></ng-content>
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.dsh-row {
|
||||
background-color: mat.get-color-from-palette($background, card);
|
||||
background-color: mat.m2-get-color-from-palette($background, card);
|
||||
&.dsh-primary {
|
||||
background-color: mat.get-color-from-palette($primary, 50);
|
||||
background-color: mat.m2-get-color-from-palette($primary, 50);
|
||||
}
|
||||
|
||||
&-header-label {
|
||||
color: mat.get-color-from-palette($foreground, secondary-text);
|
||||
color: mat.m2-get-color-from-palette($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -20,10 +20,10 @@
|
||||
@mixin dsh-row-typography($config) {
|
||||
.dsh-row {
|
||||
&-header-label {
|
||||
@include mat.typography-level($config, body-2);
|
||||
@include mat.m2-typography-level($config, body-2);
|
||||
}
|
||||
&-label {
|
||||
@include mat.typography-level($config, body-1);
|
||||
@include mat.m2-typography-level($config, body-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,6 @@
|
||||
|
||||
@mixin dsh-link-typography($config) {
|
||||
.dsh-link {
|
||||
@include mat.typography-level($config, body-1);
|
||||
@include mat.m2-typography-level($config, body-1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,6 +10,6 @@
|
||||
|
||||
@mixin dsh-breadcrumb-typography($config) {
|
||||
.dsh-breadcrumb {
|
||||
@include mat.typography-level($config, subheading-2);
|
||||
@include mat.m2-typography-level($config, subheading-2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.dsh-navbar-item-active {
|
||||
background: mat.get-color-from-palette($primary, default, 0.12);
|
||||
background: mat.m2-get-color-from-palette($primary, default, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dsh-navbar-item-typography($config) {
|
||||
.dsh-navbar-item-content {
|
||||
@include mat.typography-level($config, subheading-2);
|
||||
@include mat.m2-typography-level($config, subheading-2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,16 +19,16 @@
|
||||
// The class order directly affects the order of applying styles (for example, both .warn and .selected)
|
||||
&.success {
|
||||
mat-icon {
|
||||
@include fill(mat.get-color-from-palette($accent, default));
|
||||
@include fill(mat.m2-get-color-from-palette($accent, default));
|
||||
}
|
||||
}
|
||||
&.warn {
|
||||
mat-icon {
|
||||
@include fill(mat.get-color-from-palette($warn, 300));
|
||||
@include fill(mat.m2-get-color-from-palette($warn, 300));
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
color: mat.get-color-from-palette($primary, default);
|
||||
color: mat.m2-get-color-from-palette($primary, default);
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,15 +40,15 @@
|
||||
|
||||
// The class order directly affects the order of applying styles (for example, both .warn and .selected)
|
||||
&.success {
|
||||
background: mat.get-color-from-palette($accent, default);
|
||||
background: mat.m2-get-color-from-palette($accent, default);
|
||||
color: map-get($accent-text, 300);
|
||||
}
|
||||
&.warn {
|
||||
background: mat.get-color-from-palette($warn, 300);
|
||||
background: mat.m2-get-color-from-palette($warn, 300);
|
||||
color: map-get($warn-text, 300);
|
||||
}
|
||||
&.selected {
|
||||
background: mat.get-color-from-palette($primary, default);
|
||||
background: mat.m2-get-color-from-palette($primary, default);
|
||||
color: map-get($primary-text, 400);
|
||||
}
|
||||
}
|
||||
@ -59,7 +59,7 @@
|
||||
@mixin dsh-state-nav-typography($config) {
|
||||
.dsh-state-nav {
|
||||
&-item {
|
||||
@include mat.typography-level($config, subheading-2);
|
||||
@include mat.m2-typography-level($config, subheading-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,19 +2,19 @@
|
||||
|
||||
@function dsh-typography-config(
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
||||
$display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
|
||||
$display-3: mat.define-typography-level(56px, 64px, 400, $letter-spacing: -0.02em),
|
||||
$display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
|
||||
$display-1: mat.define-typography-level(34px, 48px, 400),
|
||||
$headline: mat.define-typography-level(24px, 32px, 400),
|
||||
$title: mat.define-typography-level(20px, 32px, 500),
|
||||
$subheading-2: mat.define-typography-level(16px, 32px, 400),
|
||||
$subheading-1: mat.define-typography-level(15px, 24px, 400),
|
||||
$body-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-1: mat.define-typography-level(14px, 24px, 400),
|
||||
$caption: mat.define-typography-level(12px, 16px, 400),
|
||||
$button: mat.define-typography-level(14px, 16px, 500),
|
||||
$input: mat.define-typography-level(14px, 1.15, 400)
|
||||
$display-4: mat.m2-define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
|
||||
$display-3: mat.m2-define-typography-level(56px, 64px, 400, $letter-spacing: -0.02em),
|
||||
$display-2: mat.m2-define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
|
||||
$display-1: mat.m2-define-typography-level(34px, 48px, 400),
|
||||
$headline: mat.m2-define-typography-level(24px, 32px, 400),
|
||||
$title: mat.m2-define-typography-level(20px, 32px, 500),
|
||||
$subheading-2: mat.m2-define-typography-level(16px, 32px, 400),
|
||||
$subheading-1: mat.m2-define-typography-level(15px, 24px, 400),
|
||||
$body-2: mat.m2-define-typography-level(14px, 24px, 500),
|
||||
$body-1: mat.m2-define-typography-level(14px, 24px, 400),
|
||||
$caption: mat.m2-define-typography-level(12px, 16px, 400),
|
||||
$button: mat.m2-define-typography-level(14px, 16px, 500),
|
||||
$input: mat.m2-define-typography-level(14px, 1.15, 400)
|
||||
) {
|
||||
// Declare an initial map with all of the levels.
|
||||
$config: (
|
||||
@ -54,7 +54,7 @@
|
||||
|
||||
// Add the base font family to the config.
|
||||
@return map-merge(
|
||||
map-merge(mat.define-typography-config(), $config),
|
||||
map-merge(mat.m2-define-typography-config(), $config),
|
||||
(
|
||||
font-family: $font-family,
|
||||
)
|
||||
@ -72,65 +72,65 @@
|
||||
@mixin dsh-base-typography($config, $selector: '.dsh-typography') {
|
||||
.dsh-headline,
|
||||
#{$selector} h1 {
|
||||
@include mat.typography-level($config, headline);
|
||||
@include mat.m2-typography-level($config, headline);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dsh-title,
|
||||
#{$selector} h2 {
|
||||
@include mat.typography-level($config, title);
|
||||
@include mat.m2-typography-level($config, title);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dsh-subheading-2,
|
||||
#{$selector} h3 {
|
||||
@include mat.typography-level($config, subheading-2);
|
||||
@include mat.m2-typography-level($config, subheading-2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dsh-subheading-1,
|
||||
#{$selector} h4 {
|
||||
@include mat.typography-level($config, subheading-1);
|
||||
@include mat.m2-typography-level($config, subheading-1);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dsh-body-2 {
|
||||
@include mat.typography-level($config, body-2);
|
||||
@include mat.m2-typography-level($config, body-2);
|
||||
}
|
||||
|
||||
.dsh-body-1,
|
||||
#{$selector} {
|
||||
@include mat.typography-level($config, body-1);
|
||||
@include mat.m2-typography-level($config, body-1);
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dsh-caption {
|
||||
@include mat.typography-level($config, caption);
|
||||
@include mat.m2-typography-level($config, caption);
|
||||
}
|
||||
|
||||
.dsh-display-4,
|
||||
#{$selector} .dsh-display-4 {
|
||||
@include mat.typography-level($config, display-4);
|
||||
@include mat.m2-typography-level($config, display-4);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dsh-display-3,
|
||||
#{$selector} .dsh-display-3 {
|
||||
@include mat.typography-level($config, display-3);
|
||||
@include mat.m2-typography-level($config, display-3);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dsh-display-2,
|
||||
#{$selector} .dsh-display-2 {
|
||||
@include mat.typography-level($config, display-2);
|
||||
@include mat.m2-typography-level($config, display-2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dsh-display-1,
|
||||
#{$selector} .dsh-display-1 {
|
||||
@include mat.typography-level($config, display-1);
|
||||
@include mat.m2-typography-level($config, display-1);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,9 +19,9 @@
|
||||
@mixin mat-radio-button-override-typography($config) {
|
||||
.mat-mdc-radio-button {
|
||||
font: {
|
||||
family: mat.font-family($config, body-1);
|
||||
size: mat.font-size($config, body-1);
|
||||
weight: mat.font-weight($config, body-1);
|
||||
family: mat.m2-font-family($config, body-1);
|
||||
size: mat.m2-font-size($config, body-1);
|
||||
weight: mat.m2-font-weight($config, body-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,14 +50,14 @@
|
||||
@mixin mat-tabs-override-typography($config) {
|
||||
.mat-mdc-tab-links {
|
||||
.mat-mdc-tab-link {
|
||||
@include mat.typography-level($config, subheading-1);
|
||||
@include mat.m2-typography-level($config, subheading-1);
|
||||
}
|
||||
}
|
||||
|
||||
.dsh-top-tab-nav-bar {
|
||||
.mat-mdc-tab-links {
|
||||
.mat-mdc-tab-link {
|
||||
@include mat.typography-level($config, subheading-2);
|
||||
@include mat.m2-typography-level($config, subheading-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,32 +6,32 @@ $background: (
|
||||
// Overrides
|
||||
background: #f0f7f7,
|
||||
// Custom
|
||||
hover: map-get(mat.$grey-palette, 200),
|
||||
selected-button: map-get(mat.$grey-palette, 100)
|
||||
hover: map-get(mat.$m2-grey-palette, 200),
|
||||
selected-button: map-get(mat.$m2-grey-palette, 100)
|
||||
);
|
||||
|
||||
$foreground: (
|
||||
// Overrides
|
||||
// Custom
|
||||
contrast-text: $light-text,
|
||||
light-text: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette), 500),
|
||||
border: map-get(mat.$grey-palette, 200)
|
||||
light-text: mat.m2-get-color-from-palette(mat.m2-define-palette(mat.$m2-grey-palette), 500),
|
||||
border: map-get(mat.$m2-grey-palette, 200)
|
||||
);
|
||||
|
||||
$config: (
|
||||
// Overrides
|
||||
color:
|
||||
(
|
||||
primary: mat.define-palette($dsh-eastern, 700),
|
||||
accent: mat.define-palette($dsh-eastern, 700),
|
||||
warn: mat.define-palette($dsh-warn, 300),
|
||||
primary: mat.m2-define-palette($dsh-eastern, 700),
|
||||
accent: mat.m2-define-palette($dsh-eastern, 700),
|
||||
warn: mat.m2-define-palette($dsh-warn, 300),
|
||||
),
|
||||
is-dark: false,
|
||||
// Custom
|
||||
name: 'eastern',
|
||||
success-base: mat.get-color-from-palette(mat.define-palette($dsh-success), 400),
|
||||
pending-base: mat.get-color-from-palette(mat.define-palette($dsh-pending), 800),
|
||||
warn-base: mat.get-color-from-palette(mat.define-palette($dsh-warn), 300)
|
||||
success-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-success), 400),
|
||||
pending-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-pending), 800),
|
||||
warn-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-warn), 300)
|
||||
);
|
||||
|
||||
@include theme($config, $background, $foreground);
|
||||
|
||||
@ -6,29 +6,29 @@ $background: (
|
||||
// Overrides
|
||||
background: #f1f7fb,
|
||||
// Custom
|
||||
hover: map-get(mat.$grey-palette, 200),
|
||||
selected-button: map-get(mat.$grey-palette, 100)
|
||||
hover: map-get(mat.$m2-grey-palette, 200),
|
||||
selected-button: map-get(mat.$m2-grey-palette, 100)
|
||||
);
|
||||
|
||||
$foreground: (
|
||||
// Overrides
|
||||
// Custom
|
||||
contrast-text: $light-text,
|
||||
light-text: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette), 500),
|
||||
border: map-get(mat.$grey-palette, 200)
|
||||
light-text: mat.m2-get-color-from-palette(mat.m2-define-palette(mat.$m2-grey-palette), 500),
|
||||
border: map-get(mat.$m2-grey-palette, 200)
|
||||
);
|
||||
|
||||
$config: (
|
||||
// Overrides
|
||||
primary: mat.define-palette($dsh-slateblue, 400),
|
||||
accent: mat.define-palette($dsh-palegreen, 300),
|
||||
warn: mat.define-palette($dsh-warn, 300),
|
||||
primary: mat.m2-define-palette($dsh-slateblue, 400),
|
||||
accent: mat.m2-define-palette($dsh-palegreen, 300),
|
||||
warn: mat.m2-define-palette($dsh-warn, 300),
|
||||
is-dark: false,
|
||||
// Custom
|
||||
name: 'main',
|
||||
success-base: mat.get-color-from-palette(mat.define-palette($dsh-success), 400),
|
||||
pending-base: mat.get-color-from-palette(mat.define-palette($dsh-pending), 800),
|
||||
warn-base: mat.get-color-from-palette(mat.define-palette($dsh-warn), 300)
|
||||
success-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-success), 400),
|
||||
pending-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-pending), 800),
|
||||
warn-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-warn), 300)
|
||||
);
|
||||
|
||||
@include theme($config, $background, $foreground);
|
||||
|
||||
@ -6,32 +6,32 @@ $background: (
|
||||
// Overrides
|
||||
background: #ecf4f4,
|
||||
// Custom
|
||||
hover: map-get(mat.$grey-palette, 200),
|
||||
selected-button: map-get(mat.$grey-palette, 100)
|
||||
hover: map-get(mat.$m2-grey-palette, 200),
|
||||
selected-button: map-get(mat.$m2-grey-palette, 100)
|
||||
);
|
||||
|
||||
$foreground: (
|
||||
// Overrides
|
||||
// Custom
|
||||
contrast-text: $light-text,
|
||||
light-text: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette), 500),
|
||||
border: map-get(mat.$grey-palette, 200)
|
||||
light-text: mat.m2-get-color-from-palette(mat.m2-define-palette(mat.$m2-grey-palette), 500),
|
||||
border: map-get(mat.$m2-grey-palette, 200)
|
||||
);
|
||||
|
||||
$config: (
|
||||
// Overrides
|
||||
color:
|
||||
(
|
||||
primary: mat.define-palette($dsh-smalt, 900),
|
||||
accent: mat.define-palette($dsh-persian-green, 400),
|
||||
warn: mat.define-palette($dsh-warn, 300),
|
||||
primary: mat.m2-define-palette($dsh-smalt, 900),
|
||||
accent: mat.m2-define-palette($dsh-persian-green, 400),
|
||||
warn: mat.m2-define-palette($dsh-warn, 300),
|
||||
),
|
||||
is-dark: false,
|
||||
// Custom
|
||||
name: 'persian-green',
|
||||
success-base: mat.get-color-from-palette(mat.define-palette($dsh-success), 400),
|
||||
pending-base: mat.get-color-from-palette(mat.define-palette($dsh-pending), 800),
|
||||
warn-base: mat.get-color-from-palette(mat.define-palette($dsh-warn), 300)
|
||||
success-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-success), 400),
|
||||
pending-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-pending), 800),
|
||||
warn-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-warn), 300)
|
||||
);
|
||||
|
||||
@include theme($config, $background, $foreground);
|
||||
|
||||
@ -6,32 +6,32 @@ $background: (
|
||||
// Overrides
|
||||
background: #f5f5f7,
|
||||
// Custom (deprecated)
|
||||
hover: map-get(mat.$grey-palette, 200),
|
||||
selected-button: map-get(mat.$grey-palette, 100)
|
||||
hover: map-get(mat.$m2-grey-palette, 200),
|
||||
selected-button: map-get(mat.$m2-grey-palette, 100)
|
||||
);
|
||||
|
||||
$foreground: (
|
||||
// Overrides
|
||||
// Custom
|
||||
contrast-text: $light-text,
|
||||
light-text: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette), 500),
|
||||
border: map-get(mat.$grey-palette, 200)
|
||||
light-text: mat.m2-get-color-from-palette(mat.m2-define-palette(mat.$m2-grey-palette), 500),
|
||||
border: map-get(mat.$m2-grey-palette, 200)
|
||||
);
|
||||
|
||||
$config: (
|
||||
// Overrides
|
||||
color:
|
||||
(
|
||||
primary: mat.define-palette($dsh-black, 900),
|
||||
accent: mat.define-palette($dsh-black, 900),
|
||||
warn: mat.define-palette($dsh-warn, 300),
|
||||
primary: mat.m2-define-palette($dsh-black, 900),
|
||||
accent: mat.m2-define-palette($dsh-black, 900),
|
||||
warn: mat.m2-define-palette($dsh-warn, 300),
|
||||
),
|
||||
is-dark: false,
|
||||
// Custom
|
||||
name: 'solitude',
|
||||
success-base: mat.get-color-from-palette(mat.define-palette($dsh-success), 400),
|
||||
pending-base: mat.get-color-from-palette(mat.define-palette($dsh-pending), 800),
|
||||
warn-base: mat.get-color-from-palette(mat.define-palette($dsh-warn), 300)
|
||||
success-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-success), 400),
|
||||
pending-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-pending), 800),
|
||||
warn-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-warn), 300)
|
||||
);
|
||||
|
||||
@include theme($config, $background, $foreground);
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
@mixin dsh-shadow($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$shadow-color: mat.get-color-from-palette($primary, default);
|
||||
$shadow-color: mat.m2-get-color-from-palette($primary, default);
|
||||
|
||||
box-shadow: #{get-shadow($shadow-color, 0.12)} !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user