valitydev/dashboard
14
0
Fork 0
mirror of https://github.com/valitydev/dashboard.git synced 2024-11-06 02:25:23 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FR-623: New Angular - 12 (#483)

Browse Source
This commit is contained in:
Rinat Arsaev 2021-08-02 18:06:09 +03:00 committed by GitHub
parent f561b2a8cb
commit 009c55483e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
107 changed files with 10801 additions and 15132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.browserslistrc
View File

@ -2,6 +2,9 @@
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
@ -9,4 +12,4 @@
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

89
.eslintrc.js
View File

@ -1,74 +1,49 @@
const rules = require('@rbkmoney/eslint-plugin/lib/rules');
const baseTsRules = {
parserOptions: {
project: ['tsconfig.json', 'e2e/tsconfig.json'],
createDefaultProgram: true,
},
extends: [
'plugin:@rbkmoney/typescript',
'plugin:@rbkmoney/angular',
'plugin:@rbkmoney/lodash',
'plugin:@rbkmoney/prettier',
],
rules: {
...rules.createImportOrderRule({ internalPathsPattern: '@dsh/**' }),
// TODO: pretenders for error
'@typescript-eslint/no-unsafe-call': 'warn',
'@typescript-eslint/no-unsafe-member-access': 'warn',
'@typescript-eslint/no-unsafe-assignment': 'warn',
'@typescript-eslint/no-unsafe-return': 'warn',
'@typescript-eslint/no-misused-promises': 'warn',
'@typescript-eslint/unbound-method': 'warn',
'@typescript-eslint/restrict-plus-operands': 'warn',
'@typescript-eslint/restrict-template-expressions': 'warn',
},
};
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
ignorePatterns: ['**/openapi-codegen/**/*.ts', '**/swagger-codegen/**/*.ts'],
overrides: [
{
...baseTsRules,
files: ['*.ts'],
parserOptions: {
project: ['tsconfig.json', 'e2e/tsconfig.json'],
createDefaultProgram: true,
},
extends: [
'plugin:@rbkmoney/typescript',
'plugin:@rbkmoney/angular',
'plugin:@rbkmoney/lodash',
'plugin:@rbkmoney/prettier',
],
rules: {
'@angular-eslint/directive-selector': [
'error',
{
type: 'attribute',
prefix: 'dsh',
style: 'camelCase',
},
],
'@angular-eslint/component-selector': [
'error',
{
type: 'element',
prefix: 'dsh',
style: 'kebab-case',
},
],
...baseTsRules.rules,
...rules.createAngularSelectorRules({ prefix: 'dsh' }),
// TODO: pretenders for error
'@typescript-eslint/no-floating-promises': 'warn',
'@typescript-eslint/no-unsafe-call': 'warn',
'@typescript-eslint/no-unsafe-member-access': 'warn',
'@typescript-eslint/no-unsafe-assignment': 'warn',
'@typescript-eslint/no-unsafe-return': 'warn',
'@typescript-eslint/no-misused-promises': 'warn',
'@typescript-eslint/unbound-method': 'warn',
'@typescript-eslint/restrict-plus-operands': 'warn',
'@typescript-eslint/restrict-template-expressions': 'warn',
},
},
{
...baseTsRules,
files: ['*.spec.ts'],
parserOptions: {
project: ['tsconfig.json', 'e2e/tsconfig.json'],
createDefaultProgram: true,
},
extends: [
'plugin:@rbkmoney/typescript',
'plugin:@rbkmoney/angular',
'plugin:@rbkmoney/jasmine',
'plugin:@rbkmoney/lodash',
'plugin:@rbkmoney/prettier',
],
rules: {
// TODO: pretenders for error
'@typescript-eslint/no-unsafe-call': 'warn',
'@typescript-eslint/no-unsafe-member-access': 'warn',
'@typescript-eslint/no-unsafe-assignment': 'warn',
'@typescript-eslint/no-unsafe-return': 'warn',
'@typescript-eslint/no-misused-promises': 'warn',
'@typescript-eslint/unbound-method': 'warn',
'@typescript-eslint/restrict-plus-operands': 'warn',
'@typescript-eslint/restrict-template-expressions': 'warn',
},
extends: [...baseTsRules.extends, 'plugin:@rbkmoney/jasmine'],
},
{
files: ['*.html'],

95
angular.json
View File

@ -8,6 +8,9 @@
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
@ -30,39 +33,25 @@
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets", "src/appConfig.json", "src/authConfig.json"],
"styles": [
"src/styles/core.scss",
{
"input": "src/styles/themes/main.scss",
"bundleName": "themes/main",
"lazy": true
"bundleName": "main-theme",
"inject": false
},
{
"input": "src/styles/themes/persian-green.scss",
"bundleName": "themes/persian-green",
"lazy": true
"bundleName": "persian-green-theme",
"inject": false
}
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
@ -74,7 +63,14 @@
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"stub-keycloak": {
"fileReplacements": [
@ -83,22 +79,32 @@
"with": "src/app/auth/keycloak/index.stub.ts"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "dashboard:build"
},
"configurations": {
"production": {
"browserTarget": "dashboard:build:production"
},
"development": {
"browserTarget": "dashboard:build:development"
},
"stub-keycloak": {
"browserTarget": "dashboard:build:stub-keycloak"
}
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
@ -113,47 +119,28 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets", "src/appConfig.json", "src/authConfig.json"],
"styles": [
"src/styles/core.scss",
{
"input": "src/styles/themes/main.scss",
"bundleName": "themes/main",
"lazy": true
"bundleName": "main-theme",
"inject": false
},
{
"input": "src/styles/themes/persian-green.scss",
"bundleName": "themes/persian-green",
"lazy": true
}
],
"scripts": [],
"codeCoverageExclude": ["src/**/swagger-codegen/**/*", "src/**/openapi-codegen/**"]
}
},
"test-ci": {
"builder": "ngx-build-plus:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma-ci.conf.js",
"assets": ["src/favicon.ico", "src/assets", "src/appConfig.json", "src/authConfig.json"],
"styles": [
"src/styles/core.scss",
{
"input": "src/styles/themes/main.scss",
"bundleName": "themes/main",
"lazy": true
},
{
"input": "src/styles/themes/persian-green.scss",
"bundleName": "themes/persian-green",
"lazy": true
"bundleName": "persian-green-theme",
"inject": false
}
],
"scripts": [],
"codeCoverageExclude": ["src/**/swagger-codegen/**/*", "src/**/openapi-codegen/**"]
},
"configurations": {
"ci": {
"karmaConfig": "karma-ci.conf.js"
}
}
},
"lint": {

24963
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

83
package.json
View File

@ -6,51 +6,52 @@
"start": "ng serve --port 8000",
"start-stub": "npm start -- --configuration=stub-keycloak",
"fix": "npm run lint-fix && npm run prettier-fix",
"build": "ng build --prod --extraWebpackConfig webpack.extra.js --progress=false",
"build": "ng build --extra-webpack-config webpack.extra.js",
"test": "ng test",
"coverage": "npx http-server -c-1 -o -p 9875 ./coverage",
"e2e": "ng e2e",
"lint-cmd": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 1899 --cache",
"lint": "npm run lint-cmd",
"lint-fix": "npm run lint-cmd -- --fix",
"lint-errors": "npm run lint-cmd -- --quiet",
"lint-cmd": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 1872",
"lint-cache-cmd": "npm run lint-cmd -- --cache",
"lint": "npm run lint-cache-cmd",
"lint-fix": "npm run lint-cache-cmd -- --fix",
"lint-errors": "npm run lint-cache-cmd -- --quiet",
"prettier-cmd": "prettier \"**/*.{html,js,ts,css,scss,md,json,prettierrc,svg}\"",
"prettier": "npm run prettier-cmd -- --check",
"prettier-fix": "npm run prettier-cmd -- --write",
"tools-cmd": "ts-node --project tools/tsconfig.json",
"parallel-cmd": "concurrently --prefix-colors magenta,green",
"swagger-codegen": "npm run tools-cmd -- tools/swagger-codegen.ts",
"openapi-codegen": "npm run tools-cmd -- tools/openapi-codegen.ts",
"openapi-codegen": "openapi-generator-cli version && npm run tools-cmd -- tools/openapi-codegen.ts",
"codegen": "npm run parallel-cmd -- --names SWAG,OAPI \"npm run swagger-codegen\" \"npm run openapi-codegen\"",
"icons-list-gen": "npm run tools-cmd -- tools/gen-icons-list.ts",
"icons-ids-gen": "npm run tools-cmd -- tools/gen-icons-ids.ts",
"ci:check": "npm run parallel-cmd -- --names PRET,LINT \"npm run prettier\" \"npm run lint-cmd -- --quiet\"",
"ci:test": "ng run dashboard:test-ci"
"ci:test": "npm run test -- --configuration=ci"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.2.9",
"@angular/cdk": "~11.2.8",
"@angular/common": "~11.2.9",
"@angular/compiler": "~11.2.9",
"@angular/core": "~11.2.9",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "~11.2.9",
"@angular/material": "~11.2.8",
"@angular/material-moment-adapter": "~11.2.8",
"@angular/platform-browser": "~11.2.9",
"@angular/platform-browser-dynamic": "~11.2.9",
"@angular/router": "~11.2.9",
"@angular/animations": "~12.1.4",
"@angular/cdk": "~12.1.4",
"@angular/common": "~12.1.4",
"@angular/compiler": "~12.1.4",
"@angular/core": "~12.1.4",
"@angular/flex-layout": "^12.0.0-beta.34",
"@angular/forms": "~12.1.4",
"@angular/material": "~12.1.4",
"@angular/material-moment-adapter": "~12.1.4",
"@angular/platform-browser": "~12.1.4",
"@angular/platform-browser-dynamic": "~12.1.4",
"@angular/router": "~12.1.4",
"@ngneat/reactive-forms": "^1.5.0",
"@ngneat/transloco": "^2.19.1",
"@ngneat/until-destroy": "^8.0.3",
"@rbkmoney/id-generator": "^0.1.3",
"@rbkmoney/id-generator": "^0.2.0",
"@rbkmoney/partial-fetcher": "~0.4.0",
"@rbkmoney/utils": "~0.4.0",
"@s-libs/js-core": "^11.3.0",
"@s-libs/micro-dash": "^11.3.0",
"@s-libs/ng-core": "^11.3.0",
"@s-libs/rxjs-core": "^11.3.0",
"@s-libs/js-core": "^12.0.0",
"@s-libs/micro-dash": "^12.0.0",
"@s-libs/ng-core": "^12.0.0",
"@s-libs/rxjs-core": "^12.0.0",
"@sentry/angular": "^6.4.1",
"@sentry/integrations": "^6.4.1",
"@sentry/tracing": "^6.4.1",
@ -69,25 +70,25 @@
"moment": "^2.24.0",
"ng-apexcharts": "^1.3.0",
"ng-yandex-metrika": "^4.0.0",
"rxjs": "~6.5.5",
"rxjs": "~6.6.7",
"shelljs": "^0.8.4",
"ts-keycode-enum": "^1.0.6",
"tslib": "^2.0.0",
"utility-types": "^3.10.0",
"zone.js": "~0.10.2"
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.8",
"@angular-eslint/builder": "~4.0.0",
"@angular-eslint/eslint-plugin-template": "~4.0.0",
"@angular-eslint/schematics": "~4.0.0",
"@angular-eslint/template-parser": "~4.0.0",
"@angular/cli": "~11.2.8",
"@angular/compiler-cli": "~11.2.9",
"@angular/language-service": "~11.2.9",
"@angular-devkit/build-angular": "~12.1.4",
"@angular-eslint/builder": "^12.0.0",
"@angular-eslint/eslint-plugin-template": "^12.0.0",
"@angular-eslint/schematics": "~12.3.1",
"@angular-eslint/template-parser": "^12.0.0",
"@angular/cli": "~12.1.4",
"@angular/compiler-cli": "~12.1.4",
"@angular/language-service": "~12.1.4",
"@openapitools/openapi-generator-cli": "^2.3.7",
"@rbkmoney/angular-templates": "^0.2.2",
"@rbkmoney/eslint-plugin": "^0.1.1",
"@rbkmoney/eslint-plugin": "^0.2.0",
"@types/d3": "^5.7.0",
"@types/del": "^4.0.0",
"@types/glob": "^7.1.3",
@ -99,26 +100,26 @@
"@types/moment": "^2.13.0",
"@types/node": "^12.12.32",
"@types/prettier": "^2.2.3",
"@typescript-eslint/parser": "~4.22.0",
"@typescript-eslint/parser": "~4.23.0",
"concurrently": "^6.2.0",
"del": "^5.1.0",
"eslint": "^7.25.0",
"eslint": "^7.26.0",
"glob": "^7.1.6",
"jasmine-core": "~3.6.0",
"jasmine-core": "~3.7.0",
"jasmine-marbles": "^0.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.2.3",
"karma": "~6.3.3",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-spec-reporter": "0.0.32",
"ngx-build-plus": "^9.0.6",
"ngx-build-plus": "^12.0.1",
"prettier": "^2.3.1",
"protractor": "~7.0.0",
"puppeteer": "^5.5.0",
"ts-mockito": "^2.6.1",
"ts-node": "~8.8.1",
"typescript": "~4.0.5"
"typescript": "~4.2.4"
}
}

2
src/app/api/messages/utils/create-single-message-conversation-params.ts
View File

@ -1,4 +1,4 @@
import uuid from 'uuid';
import { v4 as uuid } from 'uuid';
import { ConversationParam } from '@dsh/api-codegen/messages';

16
src/app/dadata/_dadata-theme.scss
View File

@ -1,27 +1,27 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-dadata-autocomplete-theme($theme) {
$primary: map-get($theme, primary);
.dsh-dadata-autocomplete-mark {
background-color: mat-color($primary, 100);
background-color: mat.get-color-from-palette($primary, 100);
}
}
@mixin dsh-dadata-autocomplete-typography($config) {
.dsh-dadata-autocomplete-option-header {
font: {
family: mat-font-family($config, body-1);
size: mat-font-size($config, body-1);
weight: mat-font-weight($config, body-1);
family: mat.font-family($config, body-1);
size: mat.font-size($config, body-1);
weight: mat.font-weight($config, body-1);
}
}
.dsh-dadata-autocomplete-option-description {
font: {
family: mat-font-family($config, caption);
size: mat-font-size($config, caption);
weight: mat-font-weight($config, caption);
family: mat.font-family($config, caption);
size: mat.font-size($config, caption);
weight: mat.font-weight($config, caption);
}
}
}

4
src/app/feedback/_feedback-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-feedback-theme($theme) {
$primary: map-get($theme, primary);
@ -8,7 +8,7 @@
.dsh-feedback {
&,
&:hover {
background: mat-color($primary, default);
background: mat.get-color-from-palette($primary, default);
color: $contrast-text;
}
}

3
src/app/home/mobile-grid/menu/navigation/_mobile_menu_navigation_theme.scss
View File

@ -1,3 +1,4 @@
@use '~@angular/material' as mat;
@import 'node_modules/@angular/material/theming';
@mixin dsh-mobile-menu-navigation-theme($theme) {
@ -9,6 +10,6 @@
}
.mobile-navigation-node-wrap .mobile-navigation-node-title-active {
color: mat-color($primary, 500);
color: mat.get-color-from-palette($primary, 500);
}
}

3
src/app/home/welcome-image/_welcome-image-theme.scss
View File

@ -1,9 +1,10 @@
@use '~@angular/material' as mat;
@import 'node_modules/@angular/material/theming';
@mixin dsh-welcome-image-theme($theme) {
$primary: map-get($theme, primary);
.dsh-welcome-image {
background-color: mat-color($primary, default);
background-color: mat.get-color-from-palette($primary, default);
}
}

2
src/app/sections/claim/conversation/send-comment/send-comment.service.ts
View File

@ -4,7 +4,7 @@ import { progress } from '@rbkmoney/utils';
import get from 'lodash-es/get';
import { BehaviorSubject, forkJoin, merge, Observable, of, Subject } from 'rxjs';
import { catchError, filter, pluck, switchMap, tap } from 'rxjs/operators';
import uuid from 'uuid';
import { v4 as uuid } from 'uuid';
import { Conversation } from '@dsh/api-codegen/messages';
import { createSingleMessageConversationParams, MessagesService } from '@dsh/api/messages';

2
src/app/sections/claims/claims-list/components/claim-row/claim-row.component.spec.ts
View File

@ -68,7 +68,7 @@ describe('ClaimRowComponent', () => {
const labels = fixture.debugElement.queryAll(By.css('dsh-row dsh-row-label'));
expect(labels[0].nativeElement.textContent.trim()).toBe('1');
expect(labels[1].nativeElement.textContent.trim()).toBe('claimStatus.pending');
expect(labels[1].nativeElement.textContent.trim()).toBe('В ожидании');
expect(labels[2].nativeElement.children[0].textContent.trim()).toBe(
moment(createdAt).format('DD MMMM YYYY, HH:mm')
);

2
src/app/sections/main/_main-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin dsh-main-section-theme($theme) {
$foreground: map-get($theme, foreground);

2
src/app/sections/organization-details/invitations/components/create-invitation-dialog/create-invitation-dialog.component.spec.ts
View File

@ -30,7 +30,7 @@ describe('CreateInvitationDialogComponent', () => {
const someEmail = 'some@ema.il';
beforeEach(() => {
mockDialogRef = mock(MatDialogRef);
mockDialogRef = mock<MatDialogRef<CreateInvitationDialogComponent>>(MatDialogRef);
mockOrganizationsService = mock(OrganizationsService);
mockNotificationsService = mock(NotificationService);
mockErrorService = mock(ErrorService);

5
src/app/sections/organization-details/invitations/invitations.component.spec.ts
View File

@ -68,11 +68,6 @@ describe('InvitationsComponent', () => {
const expected$ = cold('(a)', { a: mockInvitationsResult.result });
expect(component.invitations$).toBeObservable(expected$);
});
it('should load invitations$', () => {
const expected$ = cold('(a)', { a: false });
expect(component.isLoading$).toBeObservable(expected$);
});
});
describe('refresh', () => {

5
src/app/sections/organization-details/members/members.component.spec.ts
View File

@ -72,11 +72,6 @@ describe('MembersComponent', () => {
const expected$ = cold('(a)', { a: mockMembers.result });
expect(component.members$).toBeObservable(expected$);
});
it('should load invitations$', () => {
const expected$ = cold('(a)', { a: false });
expect(component.isLoading$).toBeObservable(expected$);
});
});
describe('refresh', () => {

2
src/app/sections/organizations/components/create-organization-dialog/create-organization-dialog.component.spec.ts
View File

@ -24,7 +24,7 @@ describe('CreateOrganizationDialogComponent', () => {
let mockErrorService: ErrorService;
beforeEach(() => {
mockDialogRef = mock(MatDialogRef);
mockDialogRef = mock<MatDialogRef<CreateOrganizationDialogComponent>>(MatDialogRef);
mockOrganizationsService = mock(OrganizationsService);
mockNotificationsService = mock(NotificationService);
mockErrorService = mock(ErrorService);

2
src/app/sections/organizations/components/rename-organization-dialog/rename-organization-dialog.component.spec.ts
View File

@ -26,7 +26,7 @@ describe('RenameOrganizationDialogComponent', () => {
let mockNotificationsService: NotificationService;
beforeEach(() => {
mockDialogRef = mock(MatDialogRef);
mockDialogRef = mock<MatDialogRef<RenameOrganizationDialogComponent>>(MatDialogRef);
mockOrganizationsService = mock(OrganizationsService);
mockErrorService = mock(ErrorService);
mockNotificationsService = mock(NotificationService);

2
src/app/sections/payment-details/_payment-details-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@import 'refunds/refunds-theme';
@mixin dsh-payment-details-theme($theme) {

4
src/app/sections/payment-details/refunds/_refunds-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-payment-details-refunds-theme($theme) {
$foreground: map-get($theme, foreground);
@ -13,7 +13,7 @@
@mixin dsh-payment-details-refunds-typography($config) {
.dsh-payment-details-refunds {
&-title {
@include mat-typography-level-to-styles($config, title);
@include mat.typography-level($config, title);
}
}
}

6
src/app/sections/payment-section/analytics/percent-difference/_percent-difference-theme.scss
View File

@ -1,14 +1,14 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-percent-difference-theme($theme) {
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
.positive-percent-difference {
color: mat-color($accent, default);
color: mat.get-color-from-palette($accent, default);
}
.negative-percent-difference {
color: mat-color($warn, 300);
color: mat.get-color-from-palette($warn, 300);
}
}

2
src/app/sections/payment-section/analytics/stat-item/_stat-item-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin dsh-stat-item-theme($theme) {
$foreground: map-get($theme, foreground);

10
src/app/sections/payment-section/balances/_balances-theme.scss
View File

@ -1,11 +1,11 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-balances-theme($theme) {
$foreground: map-get($theme, foreground);
.dsh-balances {
&-title {
color: mat-color($foreground, secondary-text);
color: mat.get-color-from-palette($foreground, secondary-text);
}
}
}
@ -13,13 +13,13 @@
@mixin dsh-balances-typography($config) {
.dsh-balances {
&-title {
@include mat-typography-level-to-styles($config, caption);
@include mat.typography-level($config, caption);
}
&-balance-lg {
@include mat-typography-level-to-styles($config, title);
@include mat.typography-level($config, title);
}
&-balance-md {
@include mat-typography-level-to-styles($config, subheading-2);
@include mat.typography-level($config, subheading-2);
}
}
}

2
src/app/sections/payment-section/integrations/shops/shop-creation/components/create-shop-dialog/create-shop-dialog.component.spec.ts
View File

@ -20,7 +20,7 @@ describe('CreateShopDialogComponent', () => {
let router: Router;
beforeEach(() => {
mockDialogRef = mock(MatDialogRef);
mockDialogRef = mock<MatDialogRef<CreateShopDialogComponent, 'cancel' | 'send'>>(MatDialogRef);
});
beforeEach(async () => {

77
src/app/sections/payment-section/integrations/shops/shop-creation/create-russian-shop-entity/components/shop-contract/shop-contract.component.spec.ts
View File

@ -4,7 +4,6 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { of } from 'rxjs';
import { instance, mock, verify, when } from 'ts-mockito';
import { Contract } from '@dsh/api-codegen/capi';
import { AutocompleteVirtualScrollModule } from '@dsh/app/shared/components/selects/autocomplete-virtual-scroll';
import { getTranslocoModule } from '@dsh/app/shared/tests/get-transloco-module';
import { DetailsItemModule } from '@dsh/components/layout';
@ -20,7 +19,20 @@ describe('ShopContractComponent', () => {
let mockShopOptionsSelectionService: ShopOptionsSelectionService;
let mockShopContractDetailsService: ShopContractDetailsService;
async function getTestingModule() {
const mockShop = generateMockShop(15);
beforeEach(async () => {
mockShopOptionsSelectionService = mock(ShopOptionsSelectionService);
mockShopContractDetailsService = mock(ShopContractDetailsService);
when(mockShopContractDetailsService.shopContract$).thenReturn(of());
when(mockShopContractDetailsService.isLoading$).thenReturn(of());
when(mockShopContractDetailsService.errorOccurred$).thenReturn(of());
when(mockShopOptionsSelectionService.control).thenReturn(new FormControl());
when(mockShopOptionsSelectionService.options$).thenReturn(of([]));
when(mockShopOptionsSelectionService.selectedShop$).thenReturn(of(mockShop));
await TestBed.configureTestingModule({
imports: [getTranslocoModule(), NoopAnimationsModule, AutocompleteVirtualScrollModule, DetailsItemModule],
declarations: [ShopContractComponent],
@ -41,78 +53,23 @@ describe('ShopContractComponent', () => {
},
})
.compileComponents();
}
function createComponent() {
fixture = TestBed.createComponent(ShopContractComponent);
component = fixture.componentInstance;
}
async function createTestingComponent() {
await getTestingModule();
createComponent();
const componentControl = new FormControl();
component.control = componentControl;
fixture.detectChanges();
}
beforeEach(() => {
mockShopOptionsSelectionService = mock(ShopOptionsSelectionService);
mockShopContractDetailsService = mock(ShopContractDetailsService);
});
beforeEach(() => {
when(mockShopOptionsSelectionService.control).thenReturn(new FormControl());
when(mockShopOptionsSelectionService.options$).thenReturn(of([]));
when(mockShopOptionsSelectionService.selectedShop$).thenReturn(of());
when(mockShopContractDetailsService.shopContract$).thenReturn(of());
});
describe('creation', () => {
beforeEach(async () => {
await createTestingComponent();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
describe('ngOnInit', () => {
it('should request new contract on every selected shop change', async () => {
const mockShop = generateMockShop(15);
when(mockShopOptionsSelectionService.selectedShop$).thenReturn(of(mockShop));
when(mockShopContractDetailsService.requestContract(mockShop.contractID)).thenReturn();
await createTestingComponent();
it('should request new contract on every selected shop change', () => {
verify(mockShopContractDetailsService.requestContract(mockShop.contractID)).once();
expect().nothing();
});
it('should update control value using contract value', async () => {
const contract: Contract = {
id: 'contract_id',
createdAt: new Date(),
status: Contract.StatusEnum.Active,
paymentInstitutionID: 1,
contractor: {
contractorType: 'LegalEntity',
},
};
const componentControl = new FormControl();
when(mockShopContractDetailsService.shopContract$).thenReturn(of(contract as any));
await getTestingModule();
createComponent();
component.control = componentControl;
fixture.detectChanges();
expect(component.control).toEqual(componentControl);
expect(component.control.value).toEqual(contract);
});
});
});

19
src/app/sections/payment-section/integrations/shops/shop-creation/create-russian-shop-entity/components/shop-form/shop-form.component.spec.ts
View File

@ -1,3 +1,4 @@
import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatDividerModule } from '@angular/material/divider';
@ -27,9 +28,14 @@ import {
} from '../../consts';
import { ShopOptionsSelectionService } from '../../services/shop-options-selection/shop-options-selection.service';
import { BankAccountType } from '../../types/bank-account-type';
import { ShopContractComponent } from '../shop-contract/shop-contract.component';
import { ShopFormComponent } from './shop-form.component';
@Component({
selector: 'dsh-shop-contract',
template: '<p>Mock Shop Contract</p>',
})
class MockShopContractComponent {}
describe('ShopFormComponent', () => {
let component: ShopFormComponent;
let fixture: ComponentFixture<ShopFormComponent>;
@ -64,7 +70,7 @@ describe('ShopFormComponent', () => {
DetailsItemModule,
MatRadioModule,
],
declarations: [ShopFormComponent, ShopContractComponent],
declarations: [ShopFormComponent, MockShopContractComponent],
providers: [
{
provide: FetchShopsService,
@ -79,19 +85,12 @@ describe('ShopFormComponent', () => {
useFactory: () => instance(mockShopContractDetailsService),
},
],
})
.overrideComponent(ShopContractComponent, {
set: {
providers: [],
},
})
.compileComponents();
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ShopFormComponent);
component = fixture.componentInstance;
component.form = new FormGroup({
url: new FormControl(''),
name: new FormControl(''),

2
src/app/sections/payment-section/integrations/shops/shop-creation/create-russian-shop-entity/create-russian-shop-entity.component.spec.ts
View File

@ -67,6 +67,8 @@ describe('CreateRussianShopEntityComponent', () => {
beforeEach(() => {
when(mockFetchShopsService.allShops$).thenReturn(of([]));
when(mockShopPayoutToolDetailsService.shopPayoutTool$).thenReturn(of());
when(mockShopPayoutToolDetailsService.isLoading$).thenReturn(of());
when(mockShopPayoutToolDetailsService.errorOccurred$).thenReturn(of());
});
beforeEach(async () => {

2
src/app/sections/payment-section/integrations/shops/shop-creation/shop-creation.service.spec.ts
View File

@ -21,7 +21,7 @@ describe('CreateShopService', () => {
beforeEach(() => {
mockMatDialog = mock(MatDialog);
mockMatDialogRef = mock(MatDialogRef);
mockMatDialogRef = mock<MatDialogRef<CreateShopDialogComponent>>(MatDialogRef);
mockMatSnackBar = mock(MatSnackBar);
});

3
src/app/sections/payment-section/integrations/shops/shops-list/shop-details/components/shop-contract-details/shop-contract-details.component.spec.ts
View File

@ -1,5 +1,6 @@
import { ChangeDetectionStrategy } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { instance, mock, verify, when } from 'ts-mockito';
import { getTranslocoModule } from '@dsh/app/shared/tests/get-transloco-module';
@ -17,6 +18,8 @@ describe('ShopContractDetailsComponent', () => {
});
beforeEach(async () => {
when(mockContractsService.shopContract$).thenReturn(of(null));
when(mockContractsService.errorOccurred$).thenReturn(of(null));
await TestBed.configureTestingModule({
imports: [getTranslocoModule()],
declarations: [ShopContractDetailsComponent],

2
src/app/sections/payment-section/integrations/shops/shops-list/shop-details/services/shop-actions/shop-actions.service.spec.ts
View File

@ -24,7 +24,7 @@ describe('ShopActionsService', () => {
mockMatDialog = mock(MatDialog);
mockSnackbar = mock(MatSnackBar);
mockApiShopsService = mock(ApiShopsService);
mockDialogRef = mock(MatDialogRef);
mockDialogRef = mock<MatDialogRef<ConfirmActionDialogComponent>>(MatDialogRef);
});
beforeEach(() => {

4
src/app/sections/payment-section/integrations/shops/shops.component.spec.ts
View File

@ -43,6 +43,10 @@ describe('ShopsComponent', () => {
});
beforeEach(async () => {
when(mockFetchShopsService.isLoading$).thenReturn(of(false));
when(mockFetchShopsService.shownShops$).thenReturn(of([]));
when(mockFetchShopsService.lastUpdated$).thenReturn(of(''));
when(mockFetchShopsService.hasMore$).thenReturn(of(false));
await TestBed.configureTestingModule({
imports: [
NoopAnimationsModule,

2
src/app/sections/payment-section/operations/invoices/create-invoice/create-invoice.service.spec.ts
View File

@ -25,7 +25,7 @@ describe('CreateInvoiceService', () => {
mockApiShopsService = mock(ApiShopsService);
mockMatDialog = mock(MatDialog);
mockSnackbar = mock(MatSnackBar);
mockDialogRef = mock(MatDialogRef);
mockDialogRef = mock<MatDialogRef<CreateInvoiceDialogComponent>>(MatDialogRef);
});
beforeEach(async () => {

2
src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/cancel-invoice/cancel-invoice.service.spec.ts
View File

@ -22,7 +22,7 @@ describe('CancelInvoiceService', () => {
mockInvoiceService = mock(InvoiceService);
mockMatDialog = mock(MatDialog);
mockSnackbar = mock(MatSnackBar);
mockDialogRef = mock(MatDialogRef);
mockDialogRef = mock<MatDialogRef<CancelInvoiceDialogComponent>>(MatDialogRef);
});
beforeEach(async () => {

2
src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/fulfill-invoice/fulfill-invoice.service.spec.ts
View File

@ -22,7 +22,7 @@ describe('FulfillInvoiceService', () => {
mockInvoiceService = mock(InvoiceService);
mockMatDialog = mock(MatDialog);
mockSnackbar = mock(MatSnackBar);
mockDialogRef = mock(MatDialogRef);
mockDialogRef = mock<MatDialogRef<FulfillInvoiceDialogComponent>>(MatDialogRef);
});
beforeEach(async () => {

2
src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/components/dialog-filters/dialog-filters.component.spec.ts
View File

@ -29,7 +29,7 @@ describe('DialogFiltersComponent', () => {
let mockMatDialogRef: MatDialogRef<DialogFiltersComponent, AdditionalFilters>;
beforeEach(() => {
mockMatDialogRef = mock(MatDialogRef);
mockMatDialogRef = mock<MatDialogRef<DialogFiltersComponent, AdditionalFilters>>(MatDialogRef);
});
async function createComponent(data: Partial<AdditionalFilters> = {}) {

2
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/cancel-hold/cancel-hold.service.spec.ts
View File

@ -13,7 +13,7 @@ describe('CancelHoldService', () => {
beforeEach(() => {
mockMatDialog = mock(MatDialog);
mockMatDialogRef = mock(MatDialogRef);
mockMatDialogRef = mock<MatDialogRef<CancelHoldDialogComponent>>(MatDialogRef);
});
beforeEach(() => {

2
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/cancel-hold/components/cancel-hold-dialog/cancel-hold-dialog.component.spec.ts
View File

@ -23,7 +23,7 @@ describe('CancelHoldDialogComponent', () => {
let mockErrorService: ErrorService;
beforeEach(() => {
mockMatDialogRef = mock(MatDialogRef);
mockMatDialogRef = mock<MatDialogRef<CancelHoldDialogComponent>>(MatDialogRef);
mockPaymentService = mock(PaymentService);
mockErrorService = mock(ErrorService);
});

2
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/create-hold/components/create-hold-dialog/create-hold-dialog.component.spec.ts
View File

@ -27,7 +27,7 @@ describe('CreateHoldDialogComponent', () => {
let mockErrorService: ErrorService;
beforeEach(() => {
mockMatDialogRef = mock(MatDialogRef);
mockMatDialogRef = mock<MatDialogRef<CreateHoldDialogComponent>>(MatDialogRef);
mockPaymentService = mock(PaymentService);
mockErrorService = mock(ErrorService);
});

2
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/create-hold/create-hold.service.spec.ts
View File

@ -14,7 +14,7 @@ describe('CreateHoldService', () => {
beforeEach(() => {
mockMatDialog = mock(MatDialog);
mockMatDialogRef = mock(MatDialogRef);
mockMatDialogRef = mock<MatDialogRef<CreateHoldDialogComponent>>(MatDialogRef);
});
beforeEach(() => {

2
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/create-refund/components/create-refund-dialog/create-refund-dialog.component.spec.ts
View File

@ -37,7 +37,7 @@ describe('CreateRefundDialogComponent', () => {
let mockErrorService: ErrorService;
beforeEach(() => {
mockMatDialogRef = mock(MatDialogRef);
mockMatDialogRef = mock<MatDialogRef<CreateRefundDialogComponent, CreateRefundDialogResponse>>(MatDialogRef);
mockRefundsService = mock(RefundsService);
mockAccountsService = mock(AccountsService);
mockNotificationService = mock(NotificationService);

2
src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/create-refund/create-refund.service.spec.ts
View File

@ -16,7 +16,7 @@ describe('CreateRefundService', () => {
beforeEach(() => {
mockMatDialog = mock(MatDialog);
mockMatDialogRef = mock(MatDialogRef);
mockMatDialogRef = mock<MatDialogRef<CreateRefundDialogComponent, CreateRefundDialogResponse>>(MatDialogRef);
});
beforeEach(() => {

2
src/app/sections/payment-section/payouts/create-payout/to-payout-params.ts
View File

@ -1,4 +1,4 @@
import uuid from 'uuid';
import { v4 as uuid } from 'uuid';
import { PayoutParams } from '@dsh/api-codegen/capi/swagger-codegen';

4
src/app/sections/shop-selector/shop-selector-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-shop-selector-theme($theme) {
$background: map-get($theme, background);
.dsh-shop-selector-action-container {
background-color: mat-color($background, card);
background-color: mat.get-color-from-palette($background, card);
}
}

2
src/app/sections/wallet-section/wallets/wallets-panels-list/_wallets-panels-list-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin dsh-wallets-panels-list-theme($theme) {
$foreground: map-get($theme, foreground);

4
src/app/shared/components/actions/actions.component.scss
View File

@ -1,9 +1,7 @@
@import '~@angular/material/theming';
.dsh-actions {
::ng-deep & > *:last-child {
margin-left: auto;
@media screen and ($mat-small) {
@media screen and (max-width: 959px) {
margin-left: initial;
}
}

4
src/app/shared/components/dialog/base-dialog/base-dialog.component.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
$base-padding: 24px;
$max-height-mobile: 100vh;
$max-height-desktop: 90vh;
@ -14,7 +12,7 @@ $max-height-desktop: 90vh;
.base-dialog {
max-height: calc(#{$max-height-desktop} - #{$base-padding * 2}) !important;
@media screen and ($mat-small) {
@media screen and (max-width: 959px) {
max-height: calc(#{$max-height-mobile} - #{$base-padding * 2}) !important;
}

2
src/app/shared/components/dialog/feedback-dialog/feedback-dialog.component.spec.ts
View File

@ -23,7 +23,7 @@ describe('FeedbackDialogComponent', () => {
beforeEach(async () => {
mockMessagesService = mock(MessagesService);
mockMatDialogRef = mock(MatDialogRef);
mockMatDialogRef = mock<MatDialogRef<FeedbackDialogComponent>>(MatDialogRef);
mockErrorService = mock(ErrorService);
mockNotificationService = mock(NotificationService);

2
src/app/shared/components/filters/query-filter/query-filter.component.spec.ts
View File

@ -67,7 +67,7 @@ describe('QueryFilterComponent', () => {
let mockInput: HTMLInputElement;
beforeEach(() => {
mockInputRef = mock(ElementRef);
mockInputRef = mock<ElementRef<HTMLInputElement>>(ElementRef);
mockInput = mock(HTMLInputElement);
});

4
src/app/shared/components/selects/autocomplete-virtual-scroll/autocomplete-virtual-scroll.component.spec.ts
View File

@ -539,7 +539,7 @@ describe('AutocompleteVirtualScrollComponent', () => {
await new Promise((resolve) => {
setTimeout(() => {
resolve();
resolve(null);
}, 0);
});
@ -556,7 +556,7 @@ describe('AutocompleteVirtualScrollComponent', () => {
await new Promise((resolve) => {
setTimeout(() => {
resolve();
resolve(null);
}, 0);
});

23
src/app/theme-manager/theme-manager.service.ts
View File

@ -1,14 +1,13 @@
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { environment } from '../../environments';
import { ConfigService } from '../config';
import { FileType } from './types/file-type';
import { ThemeName } from './types/theme-name';
import { createScriptElement } from './utils/create-script-element';
import { createStyleElement } from './utils/create-style-element';
import { isTheme } from './utils/is-theme';
const THEME_POSTFIX = 'theme';
@Injectable()
export class ThemeManager {
current: ThemeName;
@ -19,13 +18,13 @@ export class ThemeManager {
constructor(@Inject(DOCUMENT) private doc: Document, private configService: ConfigService) {}
change(name: ThemeName) {
change(name: ThemeName): void {
this.removeCurrent();
this.set(name);
}
// eslint-disable-next-line @typescript-eslint/require-await
async init() {
async init(): Promise<void> {
const theme = this.configService?.theme;
this.isMainBackgroundImages = theme?.isMainBackgroundImages;
this.logoName = theme?.logoName;
@ -34,11 +33,15 @@ export class ThemeManager {
}
private getCorrectName(theme: string): ThemeName {
return isTheme(theme) ? theme : ThemeName.Main;
if (isTheme(theme)) {
return theme;
}
console.error(`Unknown theme: ${theme}`);
return ThemeName.Main;
}
private set(name: ThemeName) {
this.element = this.createElement(name);
this.element = createStyleElement(`${name}-${THEME_POSTFIX}.css`);
this.doc.head.appendChild(this.element);
this.doc.body.classList.add(name);
this.current = name;
@ -50,10 +53,4 @@ export class ThemeManager {
}
this.doc.body.classList.remove(this.current);
}
private createElement(name: ThemeName): HTMLLinkElement | HTMLScriptElement {
const fileType: FileType = environment.production ? FileType.Css : FileType.Js;
const url = `themes/${name}.${fileType}`;
return fileType === FileType.Js ? createScriptElement(url) : createStyleElement(url);
}
}

5
src/app/theme-manager/utils/create-script-element.ts
View File

@ -1,5 +0,0 @@
export function createScriptElement(url: string): HTMLScriptElement {
const scriptElement = document.createElement('script');
scriptElement.src = url;
return scriptElement;
}

24
src/components/buttons/button-toggle/_button-toggle-theme.scss
View File

@ -1,15 +1,15 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '../../../styles/utils/fill';
@mixin dsh-button-toggle-theme($theme) {
$primary: map-get($theme, primary);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$divider-color: mat-color($foreground, divider, 0.12);
$divider-color: mat.get-color-from-palette($foreground, divider, 0.12);
.dsh-button-toggle {
background: mat-color($background, card);
@include fill(mat-color($foreground, text));
background: mat.get-color-from-palette($background, card);
@include fill(mat.get-color-from-palette($foreground, text));
&-group .dsh-button-toggle + .dsh-button-toggle {
border-left: solid 1px $divider-color;
@ -30,20 +30,20 @@
&-checked {
&.dsh-button-toggle {
@include fill(mat-color($primary, default));
@include fill(mat.get-color-from-palette($primary, default));
}
}
&-disabled {
background-color: mat-color($background, disabled-button-toggle);
@include fill(mat-color($foreground, disabled-button));
background-color: mat.get-color-from-palette($background, disabled-button-toggle);
@include fill(mat.get-color-from-palette($foreground, disabled-button));
&.dsh-button-toggle {
background: mat-color($background, card);
background: mat.get-color-from-palette($background, card);
}
&.dsh-button-toggle-checked {
background-color: mat-color($background, selected-disabled-button);
background-color: mat.get-color-from-palette($background, selected-disabled-button);
}
}
@ -59,9 +59,9 @@
&-button-toggle-standalone,
&-button-toggle-group {
font: {
family: mat-font-family($config, button);
size: mat-font-size($config, button);
weight: mat-font-weight($config, button);
family: mat.font-family($config, button);
size: mat.font-size($config, button);
weight: mat.font-weight($config, button);
}
}
}

52
src/components/buttons/button/_button-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '../../../styles/utils/fill';
@mixin button($text-color, $background-color) {
@ -38,23 +38,23 @@
&-button {
&:hover {
background: mat-color($background, hover);
background: mat.get-color-from-palette($background, hover);
}
@include focused-background(map-get($background, selected-button));
&.dsh-primary {
@include button(map-get($background, card), mat-color($primary, default));
@include focused-background(mat-color($primary, 300));
@include button(map-get($background, card), mat.get-color-from-palette($primary, default));
@include focused-background(mat.get-color-from-palette($primary, 300));
}
&.dsh-accent {
@include button(map-get($background, card), mat-color($accent, default));
@include focused-background(mat-color($accent, 200));
@include button(map-get($background, card), mat.get-color-from-palette($accent, default));
@include focused-background(mat.get-color-from-palette($accent, 200));
}
&.dsh-warn {
@include button(map-get($background, card), mat-color($warn, 400));
@include focused-background(mat-color($warn, 300));
@include button(map-get($background, card), mat.get-color-from-palette($warn, 400));
@include focused-background(mat.get-color-from-palette($warn, 300));
}
&:disabled {
@ -64,18 +64,24 @@
&-stroked-button {
&.dsh-primary {
@include stroked-button(mat-color($primary, default), mat-color($primary, default));
@include focused-background(rgba(mat-color($primary, 300), 0.1));
@include stroked-button(
mat.get-color-from-palette($primary, default),
mat.get-color-from-palette($primary, default)
);
@include focused-background(rgba(mat.get-color-from-palette($primary, 300), 0.1));
}
&.dsh-accent {
@include stroked-button(mat-color($accent, default), mat-color($accent, default));
@include focused-background(rgba(mat-color($accent, 200), 0.1));
@include stroked-button(
mat.get-color-from-palette($accent, default),
mat.get-color-from-palette($accent, default)
);
@include focused-background(rgba(mat.get-color-from-palette($accent, 200), 0.1));
}
&.dsh-warn {
@include stroked-button(mat-color($warn, 400), mat-color($warn, 400));
@include focused-background(rgba(mat-color($warn, 300), 0.1));
@include stroked-button(mat.get-color-from-palette($warn, 400), mat.get-color-from-palette($warn, 400));
@include focused-background(rgba(mat.get-color-from-palette($warn, 300), 0.1));
}
&:disabled {
@ -88,18 +94,18 @@
@include focused-background(map-get($background, selected-button));
&.dsh-primary {
@include button(map-get($background, card), mat-color($primary, default));
@include focused-background(mat-color($primary, 300));
@include button(map-get($background, card), mat.get-color-from-palette($primary, default));
@include focused-background(mat.get-color-from-palette($primary, 300));
}
&.dsh-accent {
@include button(map-get($background, card), mat-color($accent, default));
@include focused-background(mat-color($accent, 200));
@include button(map-get($background, card), mat.get-color-from-palette($accent, default));
@include focused-background(mat.get-color-from-palette($accent, 200));
}
&.dsh-warn {
@include button(map-get($background, card), mat-color($warn, 400));
@include focused-background(mat-color($warn, 300));
@include button(map-get($background, card), mat.get-color-from-palette($warn, 400));
@include focused-background(mat.get-color-from-palette($warn, 300));
}
&:disabled {
@ -115,9 +121,9 @@
&-stroked-button,
&-icon-button {
font: {
family: mat-font-family($config, button);
size: mat-font-size($config, button);
weight: mat-font-weight($config, button);
family: mat.font-family($config, button);
size: mat.font-size($config, button);
weight: mat.font-weight($config, button);
}
}
}

14
src/components/charts/_charts-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '../../styles/utils/shadow';
@mixin dsh-charts-theme($theme) {
@ -7,16 +7,16 @@
.apexcharts {
&-text {
fill: mat-color($foreground, text);
fill: mat.get-color-from-palette($foreground, text);
}
&-legend-text {
color: mat-color($foreground, text) !important;
color: mat.get-color-from-palette($foreground, text) !important;
}
&-tooltip {
@include dsh-shadow($theme);
background-color: mat-color($background, card);
background-color: mat.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.font-family($config, caption) !important;
size: mat.font-size($config, caption) !important;
weight: mat.font-weight($config, caption) !important;
}
}
}

2
src/components/charts/bar-chart/_bar-chart-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@import '../../../styles/utils/shadow';
@import '../charts-theme';

2
src/components/charts/donut-chart/_donut-chart-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@import '../../../styles/utils/shadow';
@import '../charts-theme';

8
src/components/filter/components/filter-button/_filter-button-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-filter-button-theme($theme) {
$foreground: map-get($theme, foreground);
@ -10,15 +10,15 @@
&:hover:enabled,
&-active:enabled {
border-color: mat-color($primary, default);
border-color: mat.get-color-from-palette($primary, default);
}
&-active:enabled {
color: mat-color($primary, default);
color: mat.get-color-from-palette($primary, default);
}
&:disabled {
color: mat-color($foreground, disabled-text, 0.38);
color: mat.get-color-from-palette($foreground, disabled-text, 0.38);
}
}
}

4
src/components/filters/daterange-filter/daterange-filter-selector/_daterange-filter-menu-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-daterange-filter-menu-theme($theme) {
$primary: map-get($theme, primary);
.dsh-daterange-filter-menu-item-active {
color: mat-color($primary, default);
color: mat.get-color-from-palette($primary, default);
}
}

8
src/components/filters/filter/filter-button/_filter-button-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-filter-button-theme($theme) {
$foreground: map-get($theme, foreground);
@ -10,15 +10,15 @@
&:hover:enabled,
&-active:enabled {
border-color: mat-color($primary, default);
border-color: mat.get-color-from-palette($primary, default);
}
&-active:enabled {
color: mat-color($primary, default);
color: mat.get-color-from-palette($primary, default);
}
&:disabled {
color: mat-color($foreground, disabled-text, 0.38);
color: mat.get-color-from-palette($foreground, disabled-text, 0.38);
}
}
}

6
src/components/form-controls/file-uploader/_file-uploader-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-file-uploader-theme($theme) {
$primary: map-get($theme, primary);
@ -9,13 +9,13 @@
border-color: map-get($foreground, border);
&-dragover {
border-color: mat-color($primary, default);
border-color: mat.get-color-from-palette($primary, default);
transition: ease 1s;
}
}
&-choose-files {
color: mat-color($primary, default);
color: mat.get-color-from-palette($primary, default);
}
}
}

12
src/components/form-controls/range-datepicker/_range-datepicker-theme.scss
View File

@ -1,8 +1,8 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-range-datepicker-theme($theme) {
// used $mat-gray because component deprecated
$bg: map-get($mat-grey, 200);
// used mat.$gray-palette because component deprecated
$bg: map-get(mat.$grey-palette, 200);
$foreground: map-get($theme, foreground);
$text: map-get($foreground, text);
@ -29,9 +29,9 @@
.dsh-range-datepicker {
&-button {
font: {
family: mat-font-family($config, button);
size: mat-font-size($config, button);
weight: mat-font-weight($config, button);
family: mat.font-family($config, button);
size: mat.font-size($config, button);
weight: mat.font-weight($config, button);
}
}
}

2
src/components/form-controls/utils/custom-form-control.ts
View File

@ -21,7 +21,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
import { MatFormFieldControl } from '@angular/material/form-field';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { Subject } from 'rxjs';
import uuid from 'uuid';
import { v4 as uuid } from 'uuid';
import { InputMixinBase } from './input-base';

6
src/components/global-banner/_global-banner-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-global-banner-theme($theme) {
$primary: map-get($theme, primary);
@ -6,7 +6,7 @@
$background: map-get($theme, background);
.dsh-global-banner {
background-color: mat-color($primary, default);
background-color: mat.get-color-from-palette($primary, default);
color: map-get($foreground, contrast-text);
&-text {
@ -17,6 +17,6 @@
@mixin dsh-global-banner-typography($config) {
.dsh-global-banner-text {
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
}
}

4
src/components/indicators/colored-icon/_colored-icon-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin set-line-stroke-color($color) {
line {
@ -47,7 +47,7 @@
$foreground: map-get($theme, foreground);
$default-color: map-get($foreground, text);
$primary-color: mat-color($primary, default);
$primary-color: mat.get-color-from-palette($primary, default);
$contrast-text: map-get($foreground, contrast-text);
.dsh-colored-icon {

6
src/components/indicators/last-updated/_last-updated-theme.scss
View File

@ -1,10 +1,10 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-last-updated-theme($theme) {
$foreground: map-get($theme, foreground);
.dsh-last-updated {
color: mat-color($foreground, secondary-text);
color: mat.get-color-from-palette($foreground, secondary-text);
}
}
@ -14,6 +14,6 @@
}
.dsh-last-updated {
@include mat-typography-level-to-styles($config, caption);
@include mat.typography-level($config, caption);
}
}

2
src/components/indicators/selection/_selection-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin dsh-selection-theme($theme) {
.dsh-selection {
background-color: map-get($theme, foreground, disabled);

4
src/components/indicators/status/_status-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-status-theme($theme) {
$foreground: map-get($theme, foreground);
@ -44,6 +44,6 @@
@mixin dsh-status-typography($config) {
.dsh-status-label {
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
}
}

1
src/components/layout/accordion/_accordion-theme.scss
View File

@ -1,4 +1,3 @@
@import '~@angular/material/theming';
@import './accordion-item-content-header/accordion-item-content-header-theme';
@mixin dsh-accordion-theme($theme) {

6
src/components/layout/accordion/accordion-item-content-header/_accordion-item-content-header-theme.scss
View File

@ -1,15 +1,15 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-accordion-item-content-header-theme($theme) {
$foreground: map-get($theme, foreground);
.dsh-accordion-item-content-header-label {
color: mat-color($foreground, secondary-text);
color: mat.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-to-styles($config, caption);
@include mat.typography-level($config, caption);
}
}

10
src/components/layout/card/_card-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '../../../styles/utils/shadow';
@mixin dsh-card-theme($theme) {
@ -6,20 +6,20 @@
.dsh-card {
@include dsh-shadow($theme);
background-color: mat-color($background, card);
background-color: mat.get-color-from-palette($background, card);
}
}
@mixin dsh-card-typography($config) {
.dsh-card {
font-family: mat-font-family($config);
font-family: mat.font-family($config);
}
.dsh-card-header .dsh-card-title {
font-size: mat-font-size($config, title);
font-size: mat.font-size($config, title);
}
.dsh-card-content {
font-size: mat-font-size($config, body-1);
font-size: mat.font-size($config, body-1);
}
}

6
src/components/layout/card/card.component.scss
View File

@ -18,9 +18,9 @@ $dsh-card-border-radius: 8px !default;
.dsh-card-actions {
@extend %dsh-card-section-base;
margin-left: -$dsh-card-padding / 2;
margin-right: -$dsh-card-padding / 2;
margin-bottom: -$dsh-card-padding / 2;
margin-left: -$dsh-card-padding * 0.5;
margin-right: -$dsh-card-padding * 0.5;
margin-bottom: -$dsh-card-padding * 0.5;
padding-top: $dsh-card-padding;
}

8
src/components/layout/details-item/_details-item-theme.scss
View File

@ -1,11 +1,11 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-details-item-theme($theme) {
$foreground: map-get($theme, foreground);
.dsh-details-item {
&-title {
color: mat-color($foreground, secondary-text);
color: mat.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-to-styles($config, caption);
@include mat.typography-level($config, caption);
}
&-content {
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
}
}
}

6
src/components/layout/dropdown/_dropdown-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-dropdown-theme($theme) {
$background: map-get($theme, background);
@ -6,13 +6,13 @@
.dsh-dropdown {
&,
&-triangle {
background-color: mat-color($background, card);
background-color: mat.get-color-from-palette($background, card);
}
}
}
@mixin dsh-dropdown-typography($config) {
.dsh-dropdown {
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
}
}

2
src/components/layout/dropdown/dropdown.component.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/cdk/overlay-prebuilt.css';
$dsh-dropdown-border-radius: 8px;
$indent: 10px;

2
src/components/layout/expand-panel/_expand-panel-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin dsh-expand-panel-theme($theme) {
$foreground: map-get($theme, foreground);

2
src/components/layout/expansion/_expansion-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin dsh-expansion-theme($theme) {
$foreground: map-get($theme, foreground);

6
src/components/layout/float-panel/_float-panel-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '../../../styles/utils/shadow';
@mixin dsh-float-panel-theme($theme) {
@ -6,7 +6,7 @@
@mixin dsh-float-panel-typography($config) {
.dsh-float-panel {
font-family: mat-font-family($config);
font-size: mat-font-size($config, body-1);
font-family: mat.font-family($config);
font-size: mat.font-size($config, body-1);
}
}

2
src/components/layout/headline/_headline-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin dsh-headline-theme($theme) {
$foreground: map-get($theme, foreground);

2
src/components/layout/headline/secondary-title/_secondary-title-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin dsh-details-secondary-title-theme($theme) {
$foreground: map-get($theme, foreground);

6
src/components/layout/limited-list/_limited-list-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-limited-list-theme($theme) {
$foreground: map-get($theme, foreground);
@ -6,11 +6,11 @@
.dsh-limited-list {
&-title {
color: mat-color($foreground, secondary-text);
color: mat.get-color-from-palette($foreground, secondary-text);
}
&-show-more {
color: mat-color($primary, default);
color: mat.get-color-from-palette($primary, default);
}
}
}

4
src/components/layout/link-label/_link-label-theme.scss
View File

@ -1,8 +1,8 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-link-label-typography($config) {
.dsh-link-label-content {
text-decoration: underline;
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
}
}

12
src/components/layout/panel/_panel-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin panel($color) {
border: solid 1px $color;
@ -16,10 +16,10 @@
.dsh-panel {
@include panel(map-get($background, card));
&-primary {
@include panel(mat-color($primary, 50));
@include panel(mat.get-color-from-palette($primary, 50));
}
&-accent {
@include panel(mat-color($accent, 50));
@include panel(mat.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.font-family($config, body-1);
size: mat.font-size($config, body-1);
weight: mat.font-weight($config, body-1);
}
}
}

12
src/components/layout/row/_row-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-row-theme($theme) {
$background: map-get($theme, background);
@ -6,13 +6,13 @@
$primary: map-get($theme, primary);
.dsh-row {
background-color: mat-color($background, card);
background-color: mat.get-color-from-palette($background, card);
&.dsh-primary {
background-color: mat-color($primary, 50);
background-color: mat.get-color-from-palette($primary, 50);
}
&-header-label {
color: mat-color($foreground, secondary-text);
color: mat.get-color-from-palette($foreground, secondary-text);
}
}
}
@ -20,10 +20,10 @@
@mixin dsh-row-typography($config) {
.dsh-row {
&-header-label {
@include mat-typography-level-to-styles($config, body-2);
@include mat.typography-level($config, body-2);
}
&-label {
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
}
}
}

4
src/components/layout/timeline/_timeline-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import './timeline-item/timeline-item-badge/timeline-item-badge-theme';
@mixin dsh-timeline-theme($theme) {
@ -25,6 +25,6 @@
@mixin dsh-timeline-typography($config) {
.dsh-timeline {
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
}
}

1
src/components/layout/timeline/timeline-item/timeline-item-badge/_timeline-item-badge-theme.scss
View File

@ -1,4 +1,3 @@
@import '~@angular/material/theming';
@import '../../../../../styles/utils/fill';
@mixin dsh-timeline-item-badge-theme($theme) {

3
src/components/layout/timeline/timeline.component.scss
View File

@ -7,10 +7,9 @@
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: $line-width;
left: $badge-size / 2 - $line-width / 2;
left: $badge-size * 0.5 - $line-width * 0.5;
}
}

4
src/components/link/_link-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-link-theme($theme) {
.dsh-link {
@ -8,6 +8,6 @@
@mixin dsh-link-typography($config) {
.dsh-link {
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
}
}

4
src/components/navigation/breadcrumb/_breadcrumb-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-breadcrumb-theme($theme) {
$foreground: map-get($theme, foreground);
@ -10,6 +10,6 @@
@mixin dsh-breadcrumb-typography($config) {
.dsh-breadcrumb {
@include mat-typography-level-to-styles($config, subheading-2);
@include mat.typography-level($config, subheading-2);
}
}

2
src/components/navigation/navbar/_navbar-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@import './navbar-item/navbar-item-theme';
@mixin dsh-navbar-theme($theme) {

6
src/components/navigation/navbar/navbar-item/_navbar-item-theme.scss
View File

@ -1,15 +1,15 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-navbar-item-theme($theme) {
$primary: map-get($theme, primary);
.dsh-navbar-item-content-active {
color: mat-color($primary, default);
color: mat.get-color-from-palette($primary, default);
}
}
@mixin dsh-navbar-item-typography($config) {
.dsh-navbar-item-content {
@include mat-typography-level-to-styles($config, subheading-2);
@include mat.typography-level($config, subheading-2);
}
}

16
src/components/navigation/state-nav/_state-nav-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '../../../styles/utils/fill';
@mixin dsh-state-nav-theme($theme) {
@ -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-color($accent, default));
@include fill(mat.get-color-from-palette($accent, default));
}
}
&.warn {
mat-icon {
@include fill(mat-color($warn, 300));
@include fill(mat.get-color-from-palette($warn, 300));
}
}
&.selected {
color: mat-color($primary, default);
color: mat.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-color($accent, default);
background: mat.get-color-from-palette($accent, default);
color: map-get($accent-text, 300);
}
&.warn {
background: mat-color($warn, 300);
background: mat.get-color-from-palette($warn, 300);
color: map-get($warn-text, 300);
}
&.selected {
background: mat-color($primary, default);
background: mat.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-to-styles($config, subheading-2);
@include mat.typography-level($config, subheading-2);
}
}
}

4
src/components/nested-table/_nested-table-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin dsh-nested-table-theme($theme) {
$foreground: map-get($theme, foreground);
@ -7,7 +7,7 @@
.dsh-nested-table {
&-group {
&-show-more {
color: mat-color($primary, 400);
color: mat.get-color-from-palette($primary, 400);
}
}

2
src/environments/environment.ts
View File

@ -14,4 +14,4 @@ export const environment = {
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

6
src/polyfills.ts
View File

@ -18,7 +18,9 @@
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
/**
* IE11 requires the following for NgClass support on SVG elements
*/
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
@ -55,7 +57,7 @@
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS

5
src/styles/core.scss
View File

@ -1,5 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import 'dsh/typography';
@import 'dsh/style';
@ -7,7 +6,7 @@
@import 'mat/style';
@mixin typography($config) {
@include mat-core($config);
@include mat.core($config);
@include mat-typography($config);
@include dsh-typography($config);
}

50
src/styles/dsh/styles/_dsh-base-typography.scss
View File

@ -1,20 +1,20 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@function dsh-typography-config(
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
$display-3: mat-typography-level(56px, 64px, 400, $letter-spacing: -0.02em),
$display-2: mat-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
$display-1: mat-typography-level(34px, 48px, 400),
$headline: mat-typography-level(24px, 32px, 400),
$title: mat-typography-level(20px, 32px, 500),
$subheading-2: mat-typography-level(16px, 32px, 400),
$subheading-1: mat-typography-level(15px, 24px, 400),
$body-2: mat-typography-level(14px, 24px, 500),
$body-1: mat-typography-level(14px, 24px, 400),
$caption: mat-typography-level(12px, 16px, 400),
$button: mat-typography-level(14px, 16px, 500),
$input: mat-typography-level(14px, 1.15, 400)
$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)
) {
// Declare an initial map with all of the levels.
$config: (
@ -72,65 +72,65 @@
@mixin dsh-base-typography($config, $selector: '.dsh-typography') {
.dsh-headline,
#{$selector} h1 {
@include mat-typography-level-to-styles($config, headline);
@include mat.typography-level($config, headline);
margin: 0;
}
.dsh-title,
#{$selector} h2 {
@include mat-typography-level-to-styles($config, title);
@include mat.typography-level($config, title);
margin: 0;
}
.dsh-subheading-2,
#{$selector} h3 {
@include mat-typography-level-to-styles($config, subheading-2);
@include mat.typography-level($config, subheading-2);
margin: 0;
}
.dsh-subheading-1,
#{$selector} h4 {
@include mat-typography-level-to-styles($config, subheading-1);
@include mat.typography-level($config, subheading-1);
margin: 0;
}
.dsh-body-2 {
@include mat-typography-level-to-styles($config, body-2);
@include mat.typography-level($config, body-2);
}
.dsh-body-1,
#{$selector} {
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
p {
margin: 0;
}
}
.dsh-caption {
@include mat-typography-level-to-styles($config, caption);
@include mat.typography-level($config, caption);
}
.dsh-display-4,
#{$selector} .dsh-display-4 {
@include mat-typography-level-to-styles($config, display-4);
@include mat.typography-level($config, display-4);
margin: 0;
}
.dsh-display-3,
#{$selector} .dsh-display-3 {
@include mat-typography-level-to-styles($config, display-3);
@include mat.typography-level($config, display-3);
margin: 0;
}
.dsh-display-2,
#{$selector} .dsh-display-2 {
@include mat-typography-level-to-styles($config, display-2);
@include mat.typography-level($config, display-2);
margin: 0;
}
.dsh-display-1,
#{$selector} .dsh-display-1 {
@include mat-typography-level-to-styles($config, display-1);
@include mat.typography-level($config, display-1);
margin: 0;
}
}

4
src/styles/dsh/styles/_dsh-dialog-pane.scss
View File

@ -1,8 +1,6 @@
@import '~@angular/material/theming';
@mixin dsh-dialog-pane() {
.dsh-dialog-pane {
@media screen and ($mat-small) {
@media screen and (max-width: 959px) {
min-width: 100%;
min-height: 100%;
width: 100%;

2
src/styles/mat/styles/_mat-divider.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin mat-divider-override-theme($theme) {
$foreground: map-get($theme, foreground);

1
src/styles/mat/styles/_mat-menu.scss
View File

@ -1,4 +1,3 @@
@import '~@angular/material/theming';
@import '../../utils/shadow';
$selector: '.mat-menu-panel.mat-menu-panel.mat-menu-panel';

8
src/styles/mat/styles/_mat-radio-button.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin mat-radio-button-override() {
.mat-radio-label {
@ -9,9 +9,9 @@
@mixin mat-radio-button-override-typography($config) {
.mat-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.font-family($config, body-1);
size: mat.font-size($config, body-1);
weight: mat.font-weight($config, body-1);
}
}
}

Some files were not shown because too many files have changed in this diff Show More