Compare commits
No commits in common. "master" and "RED-5908" have entirely different histories.
269
.eslintrc.js
269
.eslintrc.js
@ -1,269 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
globals: {
|
||||
NodeJS: true,
|
||||
},
|
||||
ignorePatterns: ['!**/*', 'jest.config.ts'],
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.ts'],
|
||||
extends: ['plugin:@typescript-eslint/recommended'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
project: './tsconfig.json',
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
rules: {
|
||||
'@typescript-eslint/no-explicit-any': 'error',
|
||||
'@typescript-eslint/explicit-member-accessibility': [
|
||||
'error',
|
||||
{
|
||||
accessibility: 'no-public',
|
||||
},
|
||||
],
|
||||
'@typescript-eslint/unbound-method': 'error',
|
||||
'@typescript-eslint/no-floating-promises': 'off',
|
||||
'@typescript-eslint/naming-convention': [
|
||||
'error',
|
||||
{
|
||||
selector: 'memberLike',
|
||||
modifiers: ['private'],
|
||||
format: ['camelCase'],
|
||||
leadingUnderscore: 'allow',
|
||||
},
|
||||
{
|
||||
selector: 'memberLike',
|
||||
modifiers: ['protected'],
|
||||
format: ['camelCase'],
|
||||
leadingUnderscore: 'allow',
|
||||
},
|
||||
{
|
||||
selector: 'memberLike',
|
||||
modifiers: ['private'],
|
||||
format: ['UPPER_CASE', 'camelCase'],
|
||||
leadingUnderscore: 'allow',
|
||||
},
|
||||
],
|
||||
'@typescript-eslint/restrict-template-expressions': 'off',
|
||||
'@typescript-eslint/lines-between-class-members': 'off',
|
||||
'@typescript-eslint/member-ordering': [
|
||||
'warn',
|
||||
{
|
||||
default: [
|
||||
// Index signature
|
||||
'signature',
|
||||
'call-signature',
|
||||
|
||||
// Fields
|
||||
'#private-static-field',
|
||||
'private-static-field',
|
||||
'protected-static-field',
|
||||
'public-static-field',
|
||||
|
||||
'#private-instance-field',
|
||||
'private-instance-field',
|
||||
'protected-instance-field',
|
||||
'public-instance-field',
|
||||
|
||||
'private-decorated-field',
|
||||
'protected-decorated-field',
|
||||
'public-decorated-field',
|
||||
|
||||
'protected-abstract-field',
|
||||
'public-abstract-field',
|
||||
|
||||
'#private-field',
|
||||
'private-field',
|
||||
'protected-field',
|
||||
'public-field',
|
||||
|
||||
'static-field',
|
||||
'instance-field',
|
||||
'abstract-field',
|
||||
|
||||
'decorated-field',
|
||||
|
||||
'field',
|
||||
|
||||
// Static initialization
|
||||
'static-initialization',
|
||||
|
||||
// Constructors
|
||||
'public-constructor',
|
||||
'protected-constructor',
|
||||
'private-constructor',
|
||||
|
||||
'constructor',
|
||||
|
||||
// Getters
|
||||
'public-static-get',
|
||||
'protected-static-get',
|
||||
'private-static-get',
|
||||
'#private-static-get',
|
||||
|
||||
'public-decorated-get',
|
||||
'protected-decorated-get',
|
||||
'private-decorated-get',
|
||||
|
||||
'public-instance-get',
|
||||
'protected-instance-get',
|
||||
'private-instance-get',
|
||||
'#private-instance-get',
|
||||
|
||||
'public-abstract-get',
|
||||
'protected-abstract-get',
|
||||
|
||||
'public-get',
|
||||
'protected-get',
|
||||
'private-get',
|
||||
'#private-get',
|
||||
|
||||
'static-get',
|
||||
'instance-get',
|
||||
'abstract-get',
|
||||
|
||||
'decorated-get',
|
||||
|
||||
'get',
|
||||
|
||||
// Setters
|
||||
'public-static-set',
|
||||
'protected-static-set',
|
||||
'private-static-set',
|
||||
'#private-static-set',
|
||||
|
||||
'public-decorated-set',
|
||||
'protected-decorated-set',
|
||||
'private-decorated-set',
|
||||
|
||||
'public-instance-set',
|
||||
'protected-instance-set',
|
||||
'private-instance-set',
|
||||
'#private-instance-set',
|
||||
|
||||
'public-abstract-set',
|
||||
'protected-abstract-set',
|
||||
|
||||
'public-set',
|
||||
'protected-set',
|
||||
'private-set',
|
||||
'#private-set',
|
||||
|
||||
'static-set',
|
||||
'instance-set',
|
||||
'abstract-set',
|
||||
|
||||
'decorated-set',
|
||||
|
||||
'set',
|
||||
|
||||
// Methods
|
||||
'public-static-method',
|
||||
'protected-static-method',
|
||||
'private-static-method',
|
||||
'#private-static-method',
|
||||
|
||||
'public-decorated-method',
|
||||
'protected-decorated-method',
|
||||
'private-decorated-method',
|
||||
|
||||
'public-instance-method',
|
||||
'protected-instance-method',
|
||||
'private-instance-method',
|
||||
'#private-instance-method',
|
||||
|
||||
'public-abstract-method',
|
||||
'protected-abstract-method',
|
||||
|
||||
'public-method',
|
||||
'protected-method',
|
||||
'private-method',
|
||||
'#private-method',
|
||||
|
||||
'static-method',
|
||||
'instance-method',
|
||||
'abstract-method',
|
||||
|
||||
'decorated-method',
|
||||
|
||||
'method',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['*.ts'],
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@angular-eslint/recommended',
|
||||
'plugin:@angular-eslint/template/process-inline-templates',
|
||||
'plugin:prettier/recommended',
|
||||
'plugin:rxjs/recommended',
|
||||
],
|
||||
rules: {
|
||||
'rxjs/no-ignored-subscription': 'error',
|
||||
'@angular-eslint/prefer-standalone': 'off',
|
||||
'@angular-eslint/directive-selector': [
|
||||
'error',
|
||||
{
|
||||
type: 'attribute',
|
||||
prefix: 'iqser',
|
||||
style: 'camelCase',
|
||||
},
|
||||
],
|
||||
'@angular-eslint/component-selector': [
|
||||
'error',
|
||||
{
|
||||
type: 'element',
|
||||
prefix: 'iqser',
|
||||
style: 'kebab-case',
|
||||
},
|
||||
],
|
||||
'@angular-eslint/prefer-on-push-component-change-detection': 'error',
|
||||
'@angular-eslint/use-lifecycle-interface': 'error',
|
||||
'@angular-eslint/no-input-prefix': 'error',
|
||||
'@angular-eslint/no-input-rename': 'error',
|
||||
'@angular-eslint/no-output-on-prefix': 'error',
|
||||
'@angular-eslint/no-output-rename': 'error',
|
||||
'@angular-eslint/prefer-output-readonly': 'error',
|
||||
'no-underscore-dangle': 'off',
|
||||
'no-param-reassign': 'error',
|
||||
'no-dupe-class-members': 'off',
|
||||
'no-redeclare': 'off',
|
||||
'no-unused-vars': 'off',
|
||||
'consistent-return': 'off',
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['*.html'],
|
||||
extends: ['plugin:@angular-eslint/template/recommended'],
|
||||
},
|
||||
{
|
||||
files: ['*.html'],
|
||||
excludedFiles: ['*inline-template-*.component.html'],
|
||||
extends: ['plugin:prettier/recommended'],
|
||||
rules: {
|
||||
'prettier/prettier': [
|
||||
'error',
|
||||
{
|
||||
parser: 'angular',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/*.spec.ts'],
|
||||
env: {
|
||||
node: true,
|
||||
jest: true,
|
||||
},
|
||||
rules: {
|
||||
'@angular-eslint/prefer-on-push-component-change-detection': 'off',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
68
.eslintrc.json
Normal file
68
.eslintrc.json
Normal file
@ -0,0 +1,68 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"ignorePatterns": ["!**/*"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["**/*.ts"],
|
||||
"rules": {
|
||||
"@angular-eslint/directive-selector": [
|
||||
"error",
|
||||
{
|
||||
"type": "attribute",
|
||||
"prefix": "iqser",
|
||||
"style": "camelCase"
|
||||
}
|
||||
],
|
||||
"@angular-eslint/component-selector": [
|
||||
"error",
|
||||
{
|
||||
"type": "element",
|
||||
"prefix": "iqser",
|
||||
"style": "kebab-case"
|
||||
}
|
||||
],
|
||||
"@angular-eslint/prefer-on-push-component-change-detection": "error",
|
||||
"@angular-eslint/use-lifecycle-interface": "error",
|
||||
"@angular-eslint/no-input-prefix": "error",
|
||||
"@angular-eslint/no-input-rename": "error",
|
||||
"@angular-eslint/no-output-on-prefix": "error",
|
||||
"@angular-eslint/no-output-rename": "error",
|
||||
"@angular-eslint/prefer-output-readonly": "error",
|
||||
"@typescript-eslint/unbound-method": "error",
|
||||
"@typescript-eslint/no-floating-promises": "off",
|
||||
"@typescript-eslint/naming-convention": [
|
||||
"error",
|
||||
{
|
||||
"selector": "memberLike",
|
||||
"modifiers": ["private"],
|
||||
"format": ["camelCase"],
|
||||
"leadingUnderscore": "allow"
|
||||
},
|
||||
{
|
||||
"selector": "memberLike",
|
||||
"modifiers": ["protected"],
|
||||
"format": ["camelCase"],
|
||||
"leadingUnderscore": "allow"
|
||||
},
|
||||
{
|
||||
"selector": "memberLike",
|
||||
"modifiers": ["private"],
|
||||
"format": ["UPPER_CASE", "camelCase"],
|
||||
"leadingUnderscore": "allow"
|
||||
}
|
||||
],
|
||||
"no-underscore-dangle": "off",
|
||||
"no-param-reassign": "error",
|
||||
"no-dupe-class-members": "off",
|
||||
"no-redeclare": "off",
|
||||
"no-unused-vars": "off",
|
||||
"consistent-return": "off",
|
||||
"@typescript-eslint/restrict-template-expressions": "off",
|
||||
"@typescript-eslint/lines-between-class-members": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
sonarqube:
|
||||
stage: test
|
||||
image:
|
||||
name: sonarsource/sonar-scanner-cli:11.1
|
||||
entrypoint:
|
||||
- ''
|
||||
variables:
|
||||
SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"
|
||||
GIT_DEPTH: '0'
|
||||
cache:
|
||||
key: "${CI_JOB_NAME}"
|
||||
paths:
|
||||
- ".sonar/cache"
|
||||
script:
|
||||
- sonar-scanner
|
||||
rules:
|
||||
- if: $CI_PIPELINE_SOURCE == "merge_request_event"
|
||||
- if: "$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH"
|
||||
- if: "$CI_COMMIT_BRANCH =~ /^release/"
|
||||
@ -77,7 +77,6 @@ Update `styles` and `stylePreprocessorOptions` in `angular.json`:
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Add theming classes (`light` or `dark`) to the `<body>` element.
|
||||
|
||||
Configure light and dark theme variables in `styles.scss`.
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
import type { Config } from 'jest';
|
||||
import { defaults } from 'jest-config';
|
||||
|
||||
export default {
|
||||
...defaults,
|
||||
displayName: 'common-ui',
|
||||
preset: 'jest-preset-angular',
|
||||
setupFilesAfterEnv: ['./setup-jest.ts'],
|
||||
coverageDirectory: '../../coverage/libs/common-ui',
|
||||
transform: {
|
||||
'^.+\\.(ts|mjs|js|html)$': [
|
||||
'jest-preset-angular',
|
||||
{
|
||||
tsconfig: './tsconfig.spec.json',
|
||||
stringifyContentPathRegex: '\\.(html|svg)$',
|
||||
},
|
||||
],
|
||||
},
|
||||
testEnvironment: 'jest-environment-jsdom',
|
||||
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
|
||||
snapshotSerializers: [
|
||||
'jest-preset-angular/build/serializers/no-ng-attributes',
|
||||
'jest-preset-angular/build/serializers/ng-snapshot',
|
||||
'jest-preset-angular/build/serializers/html-comment',
|
||||
],
|
||||
} as Config;
|
||||
@ -1 +0,0 @@
|
||||
import 'jest-preset-angular/setup-jest';
|
||||
@ -1,2 +0,0 @@
|
||||
sonar.projectKey=common-ui
|
||||
sonar.qualitygate.wait=false
|
||||
@ -1,14 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="12px" viewBox="0 0 12 12" width="12px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="User-Management" stroke="none" stroke-width="1">
|
||||
<g id="01.2-Bulk-Actions" transform="translate(-876.000000, -468.000000)">
|
||||
<rect fill="#FFFFFF" height="900" width="1440" x="0" y="0"></rect>
|
||||
<polygon fill="#FFFFFF" id="Rectangle" points="201 449 1087 449 1087 499 201 499"></polygon>
|
||||
<g fill="#DD4D50" id="Group-19" transform="translate(876.000000, 171.000000)">
|
||||
<path
|
||||
d="M6.00002308,297 C9.30875217,297 12.0000462,299.690683 12.0000462,302.999359 C12.0000462,306.309082 9.30898674,309 6.00002308,309 C2.69105942,309 2.27373675e-13,306.309082 2.27373675e-13,302.999359 C2.27373675e-13,299.690683 2.69129399,297 6.00002308,297 Z M6.00002308,298.846154 C3.71080282,298.846154 1.84615385,300.71038 1.84615385,302.999359 C1.84615385,305.289458 3.71064029,307.153846 6.00002308,307.153846 C8.28940586,307.153846 10.1538923,305.289458 10.1538923,302.999359 C10.1538923,300.71038 8.28924333,298.846154 6.00002308,298.846154 Z M6.89921108,303.700197 L6.89921108,305.678219 L5.10100111,305.678219 L5.10100111,303.700197 L6.89921108,303.700197 Z M6.89921108,300.103957 L6.89921108,302.801137 L5.10100111,302.801137 L5.10100111,300.103957 L6.89921108,300.103957 Z"
|
||||
id="Combined-Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,15 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="calendar" stroke="none" stroke-width="1">
|
||||
<path
|
||||
d="M35,70 L35,80 L25,80 L25,70 L35,70 Z M55,70 L55,80 L45,80 L45,70 L55,70 Z M35,55 L35,65 L25,65 L25,55 L35,55 Z M55,55 L55,65 L45,65 L45,55 L55,55 Z M75,55 L75,65 L65,65 L65,55 L75,55 Z M55,40 L55,50 L45,50 L45,40 L55,40 Z M75,40 L75,50 L65,50 L65,40 L75,40 Z"
|
||||
fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
|
||||
<path
|
||||
d="M90,0 L10,0 C4.5,0 0,4.5 0,10 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,10 C100,4.5 95.5,0 90,0 Z M10,90 L10,10 L90,10 L90,90 L10,90 Z"
|
||||
fill="currentColor" fill-rule="nonzero" id="Shape"></path>
|
||||
<path
|
||||
d="M90,20 L10,20 C4.5,20 0,24.5 0,30 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,30 C100,24.5 95.5,20 90,20 Z M10,90 L10,30 L90,30 L90,90 L10,90 Z"
|
||||
fill="currentColor" fill-rule="nonzero" id="Shape"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,3 +0,0 @@
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 7.4L0 1.4L1.4 0L6 4.6L10.6 0L12 1.4L6 7.4Z" fill="currentColor" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 184 B |
@ -1,3 +0,0 @@
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 2.8L1.4 7.4L0 6L6 0L12 6L10.6 7.4L6 2.8Z" fill="currentColor" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 182 B |
@ -1,15 +0,0 @@
|
||||
<svg id="Capa_1" style="enable-background:new 0 0 464.736 464.736;" viewBox="0 0 464.736 464.736"
|
||||
x="0px"
|
||||
xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
|
||||
<g>
|
||||
<path d="M446.598,18.143c-24.183-24.184-63.393-24.191-87.592-0.008l-16.717,16.717c-8.98-8.979-23.525-8.979-32.504,0
|
||||
c-8.981,8.972-8.981,23.533,0,32.505l5.416,5.419L134.613,253.377h-0.016l-62.685,62.691c-4.982,4.982-7.919,11.646-8.235,18.684
|
||||
l-0.15,3.344c0,0.016,0,0.03,0,0.046l-2.529,56.704c-0.104,2.633,0.883,5.185,2.739,7.048c1.751,1.759,4.145,2.738,6.63,2.738
|
||||
c0.135,0,0.269,0,0.42-0.008l30.064-1.331h0.016l18.318-0.815l8.318-0.366c9.203-0.412,17.944-4.259,24.469-10.776l240.898-240.891
|
||||
l4.506,4.505c4.49,4.488,10.372,6.733,16.252,6.733c5.881,0,11.764-2.245,16.253-6.733c8.98-8.973,8.98-23.534,0-32.505
|
||||
l16.716-16.718C470.782,81.544,470.782,42.334,446.598,18.143z M272.639,227.33l-84.6,15.96l137.998-138.004l34.332,34.316
|
||||
L272.639,227.33z" fill="currentColor" />
|
||||
<path d="M64.5,423.872c-35.617,0-64.5,9.145-64.5,20.435c0,11.284,28.883,20.428,64.5,20.428s64.486-9.143,64.486-20.428
|
||||
C128.986,433.016,100.117,423.872,64.5,423.872z" fill="currentColor" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -3,11 +3,11 @@
|
||||
<svg id="Layer_1" style="enable-background:new 0 0 14 14;" version="1.1" viewBox="0 0 14 14" x="0px"
|
||||
xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
|
||||
<style type="text/css">
|
||||
#csv-svg .st0 {
|
||||
.st0 {
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
<g id="csv-svg">
|
||||
<g id="Styleguide">
|
||||
<g id="Export-just-icons" transform="translate(-979.000000, -252.000000)">
|
||||
<g id="Group" transform="translate(979.000000, 252.000000)">
|
||||
<g id="list-view">
|
||||
|
||||
|
Before Width: | Height: | Size: 812 B After Width: | Height: | Size: 806 B |
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="minimize" stroke="none" stroke-width="1">
|
||||
<path
|
||||
d="M40,60 L40,90 L30,90 L30,77 L7,100 L0,93 L23,70 L10,70 L10,60 L40,60 Z M90,60 L90,70 L77,70 L100,93 L93,100 L70,77 L70,90 L60,90 L60,60 L90,60 Z M93,0 L100,7 L77,30 L90,30 L90,40 L60,40 L60,10 L70,10 L70,23 L93,0 Z M7,0 L30,23 L30,10 L40,10 L40,40 L10,40 L10,30 L23,30 L0,7 L7,0 Z"
|
||||
fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 642 B |
@ -1,3 +0,0 @@
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 12V10H11V12H7ZM3 7V5H15V7H3ZM0 2V0H18V2H0Z" fill="currentColor" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 186 B |
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="full-screen" stroke="none" stroke-width="1">
|
||||
<path
|
||||
d="M36.5,56.5 L43.5,63.5 L17,90 L30,90 L30,100 L0,100 L0,70 L10,70 L10,83 L36.5,56.5 Z M63.5,56.5 L90,83 L90,70 L100,70 L100,100 L70,100 L70,90 L83,90 L56.5,63.5 L63.5,56.5 Z M100,0 L100,30 L90,30 L90,17 L63.5,43.5 L56.5,36.5 L83,10 L70,10 L70,0 L100,0 Z M30,0 L30,10 L17,10 L43.5,36.5 L36.5,43.5 L10,17 L10,30 L0,30 L0,0 L30,0 Z"
|
||||
fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 691 B |
@ -1,14 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g fill="none" fill-rule="evenodd" id="Help-Mode" stroke="none" stroke-width="1">
|
||||
<g fill="currentColor" fill-rule="nonzero" id="01.-Help-button" transform="translate(-1408.000000, -645.000000)">
|
||||
<g id="help-button" transform="translate(1294.000000, 635.000000)">
|
||||
<g id="help" transform="translate(114.000000, 10.000000)">
|
||||
<path
|
||||
d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@ -3,11 +3,11 @@
|
||||
<svg id="Layer_1" style="enable-background:new 0 0 14 14;" version="1.1" viewBox="0 0 14 14" x="0px"
|
||||
xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
|
||||
<style type="text/css">
|
||||
#lanes-svg .st0 {
|
||||
.st0 {
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
<g id="lanes-svg">
|
||||
<g id="Styleguide">
|
||||
<g id="Export-just-icons" transform="translate(-979.000000, -294.000000)">
|
||||
<g id="Group" transform="translate(979.000000, 294.000000)">
|
||||
<g id="lanes-view">
|
||||
|
||||
|
Before Width: | Height: | Size: 736 B After Width: | Height: | Size: 726 B |
@ -1,22 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
|
||||
<g id="03.Jump-to-first-annotation" transform="translate(-1109.000000, -181.000000)">
|
||||
<rect height="750" width="1440" x="0" y="0"></rect>
|
||||
<rect height="32" id="Rectangle" width="60" x="1087" y="173"></rect>
|
||||
<g fill="currentColor" fill-rule="nonzero" id="right_white"
|
||||
transform="translate(1109.000000, 181.000000)">
|
||||
<polygon id="Path"
|
||||
points="12 6.24 10.88 5.12 8 8 7.2 7.2 5.12 5.12 4 6.24 8 10.24"
|
||||
transform="translate(8.000000, 7.680000) scale(1, -1) translate(-8.000000, -7.680000) "></polygon>
|
||||
<polygon id="Path"
|
||||
points="12 10.4 10.88 9.28 8 12.16 7.2 11.36 5.12 9.28 4 10.4 8 14.4"
|
||||
transform="translate(8.000000, 11.840000) scale(1, -1) translate(-8.000000, -11.840000) "></polygon>
|
||||
<polygon id="Path"
|
||||
points="14.4 1.92 1.6 1.92 1.22124533e-14 1.92 1.22124533e-14 3.52 16 3.52 16 1.92"
|
||||
transform="translate(8.000000, 2.720000) scale(1, -1) translate(-8.000000, -2.720000) "></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,24 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
|
||||
<g id="03.Jump-to-first-annotation" transform="translate(-1109.000000, -726.000000)">
|
||||
<rect height="750" width="1440" x="0" y="0"></rect>
|
||||
<rect height="32" id="Rectangle" width="60" x="1087" y="718"></rect>
|
||||
<g fill="currentColor"
|
||||
fill-rule="nonzero"
|
||||
id="right_white"
|
||||
transform="translate(1117.000000, 734.000000) scale(1, -1) translate(-1117.000000, -734.000000) translate(1109.000000, 726.000000)">
|
||||
<polygon id="Path"
|
||||
points="12 6.24 10.88 5.12 8 8 7.2 7.2 5.12 5.12 4 6.24 8 10.24"
|
||||
transform="translate(8.000000, 7.680000) scale(1, -1) translate(-8.000000, -7.680000) "></polygon>
|
||||
<polygon id="Path"
|
||||
points="12 10.4 10.88 9.28 8 12.16 7.2 11.36 5.12 9.28 4 10.4 8 14.4"
|
||||
transform="translate(8.000000, 11.840000) scale(1, -1) translate(-8.000000, -11.840000) "></polygon>
|
||||
<polygon id="Path"
|
||||
points="14.4 1.92 1.6 1.92 1.22124533e-14 1.92 1.22124533e-14 3.52 16 3.52 16 1.92"
|
||||
transform="translate(8.000000, 2.720000) scale(1, -1) translate(-8.000000, -2.720000) "></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,24 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
|
||||
<g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -486.000000)">
|
||||
<rect height="750" width="1440" x="0" y="0"></rect>
|
||||
<rect height="544" id="Rectangle" width="282" x="1148" y="206"></rect>
|
||||
<g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
|
||||
<g id="Group" transform="translate(1212.000000, 476.000000)">
|
||||
<rect height="34" id="Rectangle" rx="17" width="151" x="0" y="0"></rect>
|
||||
<g fill="currentColor" fill-rule="nonzero" id="collapse"
|
||||
transform="translate(10.000000, 10.000000)">
|
||||
<g id="Group" transform="translate(1.400000, 3.360000)">
|
||||
<polygon id="Path"
|
||||
points="9.1 0.98 8.12 0 5.6 2.52 4.9 1.82 3.08 0 2.1 0.98 5.6 4.48"></polygon>
|
||||
<polygon id="Path"
|
||||
points="9.8 5.88 1.4 5.88 7.34412531e-15 5.88 7.34412531e-15 7.28 11.2 7.28 11.2 5.88"
|
||||
transform="translate(5.600000, 6.580000) scale(1, -1) translate(-5.600000, -6.580000) "></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,25 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
|
||||
<g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -444.000000)">
|
||||
<rect height="750" width="1440" x="0" y="0"></rect>
|
||||
<rect height="544" id="Rectangle" width="282" x="1148" y="206"></rect>
|
||||
<g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
|
||||
<g id="Group" transform="translate(1212.000000, 434.000000)">
|
||||
<rect height="34" id="Rectangle" rx="17" width="151" x="0" y="0"></rect>
|
||||
<g fill="currentColor" fill-rule="nonzero" id="collapse"
|
||||
transform="translate(10.000000, 10.000000)">
|
||||
<g id="Group" transform="translate(1.400000, 3.360000)">
|
||||
<polygon id="Path"
|
||||
points="9.1 3.78 8.12 2.8 5.6 5.32 4.9 4.62 3.08 2.8 2.1 3.78 5.6 7.28"
|
||||
transform="translate(5.600000, 5.040000) scale(1, -1) translate(-5.600000, -5.040000) "></polygon>
|
||||
<polygon id="Path"
|
||||
points="9.8 0 1.4 0 7.34412531e-15 0 7.34412531e-15 1.4 11.2 1.4 11.2 0"
|
||||
transform="translate(5.600000, 0.700000) scale(1, -1) translate(-5.600000, -0.700000) "></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@ -1,26 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
|
||||
<g fill="currentColor" id="Styleguide-Actions" transform="translate(-979.000000, -630.000000)">
|
||||
<g id="reference" transform="translate(969.000000, 620.000000)">
|
||||
<g id="status" transform="translate(10.000000, 10.000000)">
|
||||
<path
|
||||
d="M1.4,9.8 L1.4,12.6 L4.2,12.6 L4.2,14 L0,14 L0,9.8 L1.4,9.8 Z M14,9.8 L14,14 L9.8,14 L9.8,12.6 L12.6,12.6 L12.6,9.8 L14,9.8 Z M4.2,0 L4.2,1.4 L1.4,1.4 L1.4,4.2 L0,4.2 L0,0 L4.2,0 Z M14,0 L14,4.2 L12.6,4.2 L12.6,1.4 L9.8,1.4 L9.8,0 L14,0 Z"
|
||||
fill-rule="nonzero" id="OCR"></path>
|
||||
<path d="M4.2,0 L0,0 L0,4.2 L4.2,4.2 L4.2,0 Z M2.8,1.4 L2.8,2.8 L1.4,2.8 L1.4,1.4 L2.8,1.4 Z" fill-rule="nonzero"
|
||||
id="Path"></path>
|
||||
<path d="M4.2,9.8 L0,9.8 L0,14 L4.2,14 L4.2,9.8 Z M2.8,11.2 L2.8,12.6 L1.4,12.6 L1.4,11.2 L2.8,11.2 Z" fill-rule="nonzero"
|
||||
id="Path"></path>
|
||||
<path d="M14,0 L9.8,0 L9.8,4.2 L14,4.2 L14,0 Z M12.6,1.4 L12.6,2.8 L11.2,2.8 L11.2,1.4 L12.6,1.4 Z" fill-rule="nonzero"
|
||||
id="Path"></path>
|
||||
<path d="M14,9.8 L9.8,9.8 L9.8,14 L14,14 L14,9.8 Z M12.6,11.2 L12.6,12.6 L11.2,12.6 L11.2,11.2 L12.6,11.2 Z" fill-rule="nonzero"
|
||||
id="Path"></path>
|
||||
<rect height="1.4" id="Rectangle" width="5.6" x="4.2" y="1.4"></rect>
|
||||
<rect height="1.4" id="Rectangle" width="5.6" x="4.2" y="11.2"></rect>
|
||||
<rect height="5.6" id="Rectangle" width="1.4" x="11.2" y="4.2"></rect>
|
||||
<rect height="5.6" id="Rectangle" width="1.4" x="1.4" y="4.2"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="false_positive" stroke="none" stroke-width="1">
|
||||
<path
|
||||
d="M70.0540046,8 L70.0540046,13 L18.1476125,13 C13.6557132,13 9.16381388,16.5 8.16561403,21 L0.180015248,61 C-0.319084676,64 0.180015248,67 2.17641494,69.5 C4.17281464,71.5 7.16741418,73 10.1620137,73 L23.1386117,73 C18.6467124,78.5 18.1476125,86 22.1404119,91.5 C24.6359115,95.5 29.1278108,98 34.1188101,98 C38.1116095,98 42.1044088,96.5 44.5999085,93.5 L65.0630053,73 L70.0540046,73 L70.0540046,78 L100,78 L100,8 L70.0540046,8 Z M61.0702059,63 L37.6125095,86.5 C36.6143097,87.5 35.6161098,88 34.1188101,88 C32.6215103,88 31.1242105,87 30.1260107,86 C28.6287109,84 29.1278108,81 31.1242105,79 L47.0954081,63 L10.1620137,63 L18.1476125,23 L70.0540046,23 L70.0540046,63 L61.0702059,63 Z M90.0180015,68 L80.036003,68 L80.036003,18 L90.0180015,18 L90.0180015,68 Z"
|
||||
fill="currentColor" fill-rule="nonzero" id="Shape"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd" id="false_negative" stroke="none" stroke-width="1">
|
||||
<path
|
||||
d="M29.9459954,92 L29.9459954,87 L81.8523875,87 C86.3442868,87 90.8361861,83.5 91.834386,79 L99.8199848,39 C100.319085,36 99.8199848,33 97.8235851,30.5 C95.8271854,28.5 92.8325858,27 89.8379863,27 L76.8613883,27 C81.3532876,21.5 81.8523875,14 77.8595881,8.5 C75.3640885,4.5 70.8721892,2 65.8811899,2 C61.8883905,2 57.8955912,3.5 55.4000915,6.5 L34.9369947,27 L29.9459954,27 L29.9459954,22 L0,22 L0,92 L29.9459954,92 Z M38.9297941,37 L62.3874905,13.5 C63.3856903,12.5 64.3838902,12 65.8811899,12 C67.3784897,12 68.8757895,13 69.8739893,14 C71.3712891,16 70.8721892,19 68.8757895,21 L52.9045919,37 L89.8379863,37 L81.8523875,77 L29.9459954,77 L29.9459954,37 L38.9297941,37 Z M9.98199848,32 L19.963997,32 L19.963997,82 L9.98199848,82 L9.98199848,32 Z"
|
||||
fill="currentColor" fill-rule="nonzero" id="Shape"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,5 +0,0 @@
|
||||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 704 B |
@ -1,5 +0,0 @@
|
||||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 369 B |
@ -43,31 +43,14 @@ body {
|
||||
--iqser-pink-1: #f125de;
|
||||
--iqser-helpmode-primary: green;
|
||||
--iqser-font-size: 13px;
|
||||
--iqser-inputs-font-size: 13px;
|
||||
--iqser-button-radius: 17px;
|
||||
--iqser-button-font-size: 13px;
|
||||
--iqser-button-height: 34px;
|
||||
--iqser-app-name-font-size: 18px;
|
||||
--iqser-logo-size: 28px;
|
||||
--iqser-app-name-color: black;
|
||||
--iqser-top-bar-height: 61px;
|
||||
--iqser-menu-margin-top: 10px;
|
||||
--iqser-menu-border-radius: 8px;
|
||||
--iqser-menu-padding-top: 8px;
|
||||
--iqser-menu-padding-bottom: 24px;
|
||||
--iqser-menu-min-height: 24px;
|
||||
--iqser-menu-item-margin: 0 8px 2px 8px;
|
||||
--iqser-inputs-height: 36px;
|
||||
--iqser-textarea-padding-y: 7px;
|
||||
--iqser-font-family: Inter, sans-serif;
|
||||
--iqser-app-name-font-family: Inter, sans-serif;
|
||||
--iqser-circle-button-radius: 50%;
|
||||
--iqser-side-nav-item-radius: 20px;
|
||||
--iqser-dot-overlay-background: rgba(var(--iqser-primary-rgb), 0.1);
|
||||
--iqser-chevron-button-bg: transparent;
|
||||
--iqser-font-family: 'some placeholder value that should be overridden when configuring a theme';
|
||||
--iqser-app-name-font-family: 'some placeholder value that should be overridden when configuring a theme';
|
||||
}
|
||||
|
||||
$required-variables: 'iqser-primary';
|
||||
$required-variables: 'iqser-font-family' 'iqser-primary';
|
||||
|
||||
@mixin checkRequiredVariables($args, $theme) {
|
||||
@each $var in $required-variables {
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
@use 'common-mixins';
|
||||
|
||||
.mat-mdc-autocomplete-panel {
|
||||
.mat-autocomplete-panel {
|
||||
@include common-mixins.scroll-bar;
|
||||
background-color: var(--iqser-background);
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
.mat-mdc-option {
|
||||
.mat-option {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
@use 'common-mixins';
|
||||
|
||||
.top-bar {
|
||||
height: var(--iqser-top-bar-height);
|
||||
height: 61px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid var(--iqser-separator);
|
||||
box-sizing: border-box;
|
||||
@ -15,6 +14,24 @@
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@include common-mixins.clear-a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-family: var(--iqser-app-name-font-family);
|
||||
margin-left: 10px;
|
||||
height: 20px;
|
||||
font-size: var(--iqser-font-size);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
color: var(--iqser-text);
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -32,7 +49,6 @@
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-right: 8px;
|
||||
align-items: center;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 14px;
|
||||
@ -40,28 +56,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
@include common-mixins.clear-a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-family: var(--iqser-app-name-font-family);
|
||||
font-size: var(--iqser-app-name-font-size);
|
||||
color: var(--iqser-app-name-color);
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dev-mode {
|
||||
background-color: var(--iqser-primary);
|
||||
color: var(--iqser-white);
|
||||
font-size: 22px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
right: 0;
|
||||
height: var(--iqser-top-bar-height);
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
height: 61px;
|
||||
word-break: break-all;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -13,13 +13,13 @@
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
.dropdown-breadcrumb .mdc-button {
|
||||
.dropdown-breadcrumb {
|
||||
font-weight: 600;
|
||||
--mdc-text-button-label-text-color: var(--iqser-primary);
|
||||
}
|
||||
color: var(--iqser-primary);
|
||||
|
||||
.dropdown-breadcrumb[aria-expanded='true'] .mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--iqser-text);
|
||||
&[aria-expanded='true'] .mat-button-wrapper > span {
|
||||
color: var(--iqser-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,20 +1,108 @@
|
||||
@mixin iconSize14 {
|
||||
.mat-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
.mat-button,
|
||||
.mat-flat-button {
|
||||
border-radius: var(--iqser-button-radius) !important;
|
||||
font-size: var(--iqser-button-font-size) !important;
|
||||
height: var(--iqser-button-height);
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 34px;
|
||||
transition: opacity 0.2s;
|
||||
width: 100%;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin labelNoWrap {
|
||||
.mdc-button__label {
|
||||
white-space: nowrap;
|
||||
.mat-button,
|
||||
.mat-icon-button,
|
||||
.mat-flat-button {
|
||||
&.mat-button-disabled .mat-button-wrapper {
|
||||
color: var(--iqser-text);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ariaExpanded {
|
||||
.mat-flat-button.mat-primary,
|
||||
.mat-button.primary {
|
||||
padding: 0 14px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
|
||||
background-color: var(--iqser-primary);
|
||||
|
||||
&.mat-button-disabled {
|
||||
background-color: var(--iqser-primary);
|
||||
|
||||
.mat-button-wrapper {
|
||||
color: var(--iqser-white);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.mat-button-disabled):hover {
|
||||
background-color: var(--iqser-primary-2);
|
||||
}
|
||||
}
|
||||
|
||||
iqser-icon-button,
|
||||
iqser-chevron-button,
|
||||
.user-button,
|
||||
iqser-circle-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
font-weight: 400 !important;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&.overlay {
|
||||
background: rgba(var(--iqser-primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
&:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):hover {
|
||||
background-color: var(--iqser-btn-bg);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
font-weight: 500 !important;
|
||||
background-color: var(--iqser-primary);
|
||||
color: var(--iqser-white);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--iqser-primary-2);
|
||||
}
|
||||
}
|
||||
|
||||
&.dark-bg:hover {
|
||||
background-color: var(--iqser-btn-bg-hover);
|
||||
}
|
||||
|
||||
&.help:hover {
|
||||
background-color: var(--iqser-helpmode-primary);
|
||||
color: var(--iqser-grey-1);
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
iqser-chevron-button,
|
||||
iqser-circle-button,
|
||||
iqser-icon-button {
|
||||
&[aria-expanded='true'] {
|
||||
.mat-mdc-button-base {
|
||||
button {
|
||||
background: rgba(var(--iqser-primary-rgb), 0.1);
|
||||
|
||||
&.primary {
|
||||
@ -27,184 +115,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dotOverlay {
|
||||
position: relative;
|
||||
|
||||
.dot {
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: var(--iqser-dot-overlay-background);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonShape {
|
||||
.mat-mdc-button {
|
||||
--mdc-text-button-container-shape: var(--iqser-button-radius);
|
||||
|
||||
height: var(--iqser-button-height);
|
||||
|
||||
.mat-mdc-button-touch-target {
|
||||
height: var(--iqser-button-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iqser-icon-button {
|
||||
@include buttonShape;
|
||||
@include ariaExpanded;
|
||||
@include dotOverlay;
|
||||
@include labelNoWrap;
|
||||
|
||||
display: block;
|
||||
|
||||
.mdc-button.mat-mdc-button {
|
||||
@include iconSize14;
|
||||
|
||||
--mdc-text-button-label-text-color: var(--iqser-text);
|
||||
padding: 0 14px;
|
||||
width: 100%;
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
.mat-mdc-button-persistent-ripple::before {
|
||||
background-color: #000;
|
||||
opacity: 0.04;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
--mdc-text-button-disabled-label-text-color: rgba(var(--iqser-text-rgb), 0.3);
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&.has-icon {
|
||||
padding: 0 14px 0 10px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
--mdc-text-button-label-text-color: var(--iqser-white);
|
||||
--mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
background: var(--iqser-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: var(--iqser-btn-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fcebeb;
|
||||
font-weight: 600;
|
||||
color: var(--iqser-primary);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iqser-circle-button {
|
||||
@include ariaExpanded;
|
||||
@include dotOverlay;
|
||||
|
||||
display: block;
|
||||
|
||||
.mat-mdc-icon-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--iqser-circle-button-radius);
|
||||
|
||||
.mat-mdc-button-touch-target {
|
||||
width: var(--circle-button-size);
|
||||
height: var(--circle-button-size);
|
||||
}
|
||||
|
||||
.mat-mdc-button-persistent-ripple {
|
||||
border-radius: var(--iqser-circle-button-radius);
|
||||
}
|
||||
|
||||
&.mat-mdc-button-base {
|
||||
height: var(--circle-button-size);
|
||||
width: var(--circle-button-size);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: bottom;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
--mdc-icon-button-icon-color: var(--iqser-white);
|
||||
|
||||
&[disabled] {
|
||||
--mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
background: var(--iqser-primary);
|
||||
}
|
||||
|
||||
&.dark-bg {
|
||||
background: var(--iqser-btn-bg);
|
||||
}
|
||||
|
||||
&.warn:not([disabled]) {
|
||||
--mdc-icon-button-icon-color: var(--iqser-accent);
|
||||
background-color: var(--iqser-warn);
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
width: var(--circle-button-icon-size);
|
||||
height: var(--circle-button-icon-size);
|
||||
line-height: var(--circle-button-icon-size);
|
||||
margin: 0 !important;
|
||||
|
||||
svg {
|
||||
line-height: var(--circle-button-icon-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iqser-chevron-button {
|
||||
@include buttonShape;
|
||||
@include ariaExpanded;
|
||||
@include labelNoWrap;
|
||||
|
||||
display: block;
|
||||
|
||||
.mat-mdc-button {
|
||||
@include iconSize14;
|
||||
|
||||
background-color: var(--iqser-chevron-button-bg);
|
||||
|
||||
&:not([disabled]) {
|
||||
--mdc-text-button-label-text-color: var(--iqser-text);
|
||||
}
|
||||
}
|
||||
|
||||
@include dotOverlay;
|
||||
}
|
||||
|
||||
iqser-user-button {
|
||||
@include buttonShape;
|
||||
@include ariaExpanded;
|
||||
@include dotOverlay;
|
||||
|
||||
display: block;
|
||||
|
||||
.mdc-button.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--iqser-text);
|
||||
|
||||
@include iconSize14;
|
||||
padding: 0 10px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,76 +1,39 @@
|
||||
$checkbox-size: 16px;
|
||||
$ripple-size: 26px;
|
||||
|
||||
.mat-mdc-checkbox .mdc-checkbox {
|
||||
flex: 0 0 $checkbox-size;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
margin-top: 4px;
|
||||
.mat-checkbox .mat-checkbox-frame {
|
||||
border: 1px solid var(--iqser-grey-5);
|
||||
}
|
||||
|
||||
.mat-mdc-checkbox,
|
||||
.mdc-checkbox {
|
||||
--mdc-checkbox-state-layer-size: $checkbox-size;
|
||||
--mdc-checkbox-unselected-icon-color: var(--iqser-grey-5);
|
||||
--mdc-checkbox-unselected-hover-icon-color: var(--iqser-grey-5);
|
||||
--mdc-checkbox-unselected-pressed-icon-color: var(--iqser-grey-5);
|
||||
--mdc-checkbox-unselected-focus-icon-color: var(--iqser-grey-5);
|
||||
--mdc-checkbox-disabled-selected-icon-color: var(--iqser-primary);
|
||||
--mdc-checkbox-disabled-unselected-icon-color: var(--iqser-grey-5);
|
||||
--mdc-checkbox-selected-focus-icon-color: var(--iqser-primary);
|
||||
--mdc-checkbox-selected-hover-icon-color: var(--iqser-primary);
|
||||
--mdc-checkbox-selected-icon-color: var(--iqser-primary);
|
||||
--mdc-checkbox-selected-pressed-icon-color: var(--iqser-primary);
|
||||
--mdc-checkbox-selected-focus-state-layer-color: var(--iqser-primary);
|
||||
--mdc-checkbox-selected-hover-state-layer-color: var(--iqser-primary);
|
||||
--mdc-checkbox-selected-pressed-state-layer-color: var(--iqser-primary);
|
||||
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
|
||||
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
||||
margin-top: 1px;
|
||||
margin-left: 1px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.mdc-form-field {
|
||||
align-items: start;
|
||||
.mat-checkbox-layout {
|
||||
align-items: center !important;
|
||||
|
||||
& > label {
|
||||
padding-left: 8px;
|
||||
line-height: 24px;
|
||||
white-space: normal;
|
||||
.mat-checkbox-inner-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mat-checkbox-label {
|
||||
font-size: var(--iqser-font-size);
|
||||
color: var(--iqser-text);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-checkbox__ripple {
|
||||
--mdc-checkbox-unselected-focus-state-layer-color: var(--iqser-alt-background);
|
||||
|
||||
width: $ripple-size;
|
||||
height: $ripple-size;
|
||||
left: calc(($checkbox-size - $ripple-size) / 2);
|
||||
top: calc(($checkbox-size - $ripple-size) / 2);
|
||||
}
|
||||
|
||||
.mdc-checkbox__background {
|
||||
border-width: 1px;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-checkbox-touch-target {
|
||||
height: $ripple-size;
|
||||
width: $ripple-size;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-checkbox label {
|
||||
font-size: var(--iqser-font-size);
|
||||
color: var(--iqser-text);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.mat-checkbox.error .mat-checkbox-label {
|
||||
color: var(--iqser-primary);
|
||||
}
|
||||
|
||||
.mat-mdc-checkbox-disabled .mdc-checkbox {
|
||||
.mat-checkbox-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
@use 'common-mixins';
|
||||
|
||||
mat-chip-listbox {
|
||||
box-sizing: border-box;
|
||||
height: calc(var(--height) - 40px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@include common-mixins.scroll-bar();
|
||||
|
||||
.mat-mdc-chip-set {
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-standard-chip,
|
||||
.mat-mdc-standard-chip.mat-primary.mat-mdc-chip-selected {
|
||||
--mdc-chip-label-text-color: var(--iqser-text);
|
||||
}
|
||||
|
||||
.mdc-evolution-chip-set mat-chip-option.mat-mdc-standard-chip {
|
||||
background-color: var(--iqser-background);
|
||||
border-radius: 4px;
|
||||
margin: 0 0 2px 0;
|
||||
padding: 0 12px;
|
||||
transition: background-color 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
.selected-mark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--iqser-not-disabled-table-item);
|
||||
}
|
||||
|
||||
&.mat-mdc-chip-selected {
|
||||
background-color: var(--iqser-btn-bg);
|
||||
|
||||
.mdc-evolution-chip__text-label {
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.selected-mark {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-evolution-chip__action {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mdc-evolution-chip__text-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mdc-evolution-chip__graphic {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mat-mdc-chip-list--disabled {
|
||||
pointer-events: none;
|
||||
color: var(--iqser-grey-5);
|
||||
}
|
||||
|
||||
.mdc-evolution-chip-set__chips {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-chip-focus-overlay {
|
||||
display: none;
|
||||
}
|
||||
@ -18,18 +18,9 @@
|
||||
&.large {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
font-size: var(--iqser-font-size);
|
||||
}
|
||||
|
||||
&.extra-small {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
font-size: 10px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
&.gray-dark {
|
||||
background-color: var(--iqser-user-avatar-1);
|
||||
color: var(--iqser-text);
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
@use 'common-mixins';
|
||||
|
||||
.mat-mdc-dialog-container .mdc-dialog__surface {
|
||||
--mdc-dialog-container-color: var(--iqser-background);
|
||||
.mat-dialog-container {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
color: var(--iqser-text);
|
||||
background-color: var(--iqser-background);
|
||||
padding: 0 !important;
|
||||
border-radius: 8px !important;
|
||||
@include common-mixins.scroll-bar;
|
||||
@ -15,10 +14,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.use-backslash-n-as-line-break {
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: relative;
|
||||
min-height: 80px;
|
||||
@ -41,20 +36,6 @@
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 24px 32px 40px;
|
||||
|
||||
&.redaction {
|
||||
.selected-text {
|
||||
font-weight: bold;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.redaction,
|
||||
&.force-annotation {
|
||||
iqser-details-radio {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
@ -75,7 +56,3 @@
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.large-form-dialog .dialog > form {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
.iqser-upload-file {
|
||||
.upload-area,
|
||||
.file-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--iqser-alt-background);
|
||||
height: 68px;
|
||||
|
||||
&.drag-over {
|
||||
background-color: var(--iqser-file-drop-drag-over);
|
||||
}
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
gap: 16px;
|
||||
cursor: pointer;
|
||||
padding: 0 32px;
|
||||
|
||||
mat-icon,
|
||||
div {
|
||||
opacity: 0.5;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.file-area {
|
||||
gap: 10px;
|
||||
|
||||
mat-icon:first-child {
|
||||
opacity: 0.5;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
mat-icon:last-child {
|
||||
margin-left: auto;
|
||||
margin-right: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
p {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 490px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,11 +7,11 @@
|
||||
.full-page-section {
|
||||
opacity: 0.7;
|
||||
background: var(--iqser-background);
|
||||
z-index: 1001;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.full-page-content {
|
||||
z-index: 1002;
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
@ -9,9 +9,4 @@
|
||||
background: rgba(92, 229, 148, 0.5);
|
||||
box-shadow: 0 0 0 2px var(--iqser-helpmode-primary) inset;
|
||||
cursor: help;
|
||||
|
||||
&.documine-theme {
|
||||
background: rgba(253, 189, 0, 0.5);
|
||||
box-shadow: 0 0 0 2px var(--iqser-yellow-2) inset;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,9 @@
|
||||
@use 'common-mixins' as mixins;
|
||||
|
||||
form .iqser-input-group:not(first-of-type),
|
||||
iqser-dynamic-input:not(first-of-type) {
|
||||
form .iqser-input-group:not(first-of-type) {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
iqser-dynamic-input {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
min-height: var(--iqser-inputs-height);
|
||||
}
|
||||
|
||||
.iqser-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -59,6 +48,25 @@ iqser-dynamic-input {
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-form-field-wrapper,
|
||||
.mat-form-field-infix {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.mat-form-field-label {
|
||||
opacity: 0.7 !important;
|
||||
color: var(--iqser-text) !important;
|
||||
transform: translateY(-1.34em) !important;
|
||||
}
|
||||
|
||||
.mat-form-field-required-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -67,8 +75,8 @@ iqser-dynamic-input {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px);
|
||||
right: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px);
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.slider-row {
|
||||
@ -83,84 +91,27 @@ iqser-dynamic-input {
|
||||
color: var(--iqser-white);
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdc-text-field {
|
||||
background: var(--iqser-background);
|
||||
}
|
||||
|
||||
input:not([type='checkbox']),
|
||||
textarea {
|
||||
box-sizing: border-box;
|
||||
min-height: var(--iqser-inputs-height);
|
||||
line-height: 32px;
|
||||
padding-left: calc((var(--iqser-inputs-height) - 14px) / 2);
|
||||
padding-right: calc((var(--iqser-inputs-height) - 14px) / 2);
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdc-text-field--outlined {
|
||||
--mdc-outlined-text-field-focus-outline-width: 1px;
|
||||
--mdc-shape-small: 8px;
|
||||
--mdc-outlined-text-field-container-shape: 8px;
|
||||
border-bottom-left-radius: var(--mdc-shape-small);
|
||||
border-bottom-right-radius: var(--mdc-shape-small);
|
||||
}
|
||||
|
||||
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: var(--iqser-inputs-outline);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: var(--iqser-inputs-outline);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused {
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: var(--iqser-text);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: var(--iqser-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-text-field--focused .mdc-notched-outline__leading,
|
||||
.mdc-text-field--focused .mdc-notched-outline__notch,
|
||||
.mdc-text-field--focused .mdc-notched-outline__trailing {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
textarea,
|
||||
mat-select {
|
||||
box-sizing: border-box;
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
border: 1px solid var(--iqser-inputs-outline);
|
||||
font-family: var(--iqser-font-family);
|
||||
font-size: var(--iqser-inputs-font-size);
|
||||
font-size: var(--iqser-font-size);
|
||||
background-color: var(--iqser-background);
|
||||
color: var(--iqser-text);
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
margin-top: 3px;
|
||||
min-height: 36px;
|
||||
|
||||
&.with-icon {
|
||||
padding-right: 34px;
|
||||
}
|
||||
|
||||
&:focus:not(:disabled) {
|
||||
&:focus:not(:disabled):not(.mat-select-disabled) {
|
||||
border-color: var(--iqser-text);
|
||||
}
|
||||
|
||||
@ -176,17 +127,16 @@ iqser-dynamic-input {
|
||||
border-color: var(--iqser-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
textarea:disabled,
|
||||
.mdc-text-field--disabled {
|
||||
background-color: var(--iqser-alt-background);
|
||||
color: rgba(var(--iqser-text-rgb), 0.3);
|
||||
&:disabled,
|
||||
&.mat-select-disabled {
|
||||
background-color: var(--iqser-alt-background);
|
||||
color: rgba(var(--iqser-text-rgb), 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
line-height: calc(var(--iqser-inputs-font-size) * 1.4);
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.hex-color-input {
|
||||
@ -194,10 +144,30 @@ iqser-dynamic-input {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
mat-select,
|
||||
.mat-select.mat-select-disabled {
|
||||
.mat-select-trigger {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.mat-select-placeholder {
|
||||
color: rgba(var(--iqser-text-rgb), 0.4);
|
||||
}
|
||||
|
||||
.mat-select-value {
|
||||
vertical-align: middle;
|
||||
color: var(--iqser-text);
|
||||
}
|
||||
|
||||
.mat-select-arrow {
|
||||
color: rgba(var(--iqser-text-rgb), 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
padding-top: var(--iqser-textarea-padding-y);
|
||||
padding-bottom: var(--iqser-textarea-padding-y);
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
@include mixins.scroll-bar;
|
||||
|
||||
&.has-scrollbar {
|
||||
@ -206,12 +176,12 @@ iqser-dynamic-input {
|
||||
}
|
||||
}
|
||||
|
||||
> label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) {
|
||||
label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) {
|
||||
opacity: 0.7;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0;
|
||||
line-height: 14px;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 2px;
|
||||
color: var(--iqser-text);
|
||||
|
||||
&.mat-checkbox-layout {
|
||||
@ -222,7 +192,7 @@ iqser-dynamic-input {
|
||||
|
||||
&.required label:after {
|
||||
content: ' *';
|
||||
color: var(--iqser-red-1);
|
||||
color: var(--iqser-primary);
|
||||
}
|
||||
|
||||
&.datepicker-wrapper {
|
||||
@ -239,7 +209,7 @@ iqser-dynamic-input {
|
||||
.mat-datepicker-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
bottom: 1px;
|
||||
color: var(--iqser-accent);
|
||||
|
||||
&.mat-datepicker-toggle-active {
|
||||
@ -256,18 +226,6 @@ iqser-dynamic-input {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
button.cdk-focused,
|
||||
button:hover {
|
||||
span {
|
||||
&::before {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 10px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-icon-button svg {
|
||||
width: unset;
|
||||
height: unset;
|
||||
|
||||
@ -86,13 +86,17 @@ section.settings {
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
.page-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.right-container {
|
||||
transform: translateY(61px);
|
||||
height: calc(100% - 61px);
|
||||
.overlay-shadow {
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -102,7 +106,7 @@ section.settings {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--iqser-top-bar-height) - 50px);
|
||||
height: calc(100vh - 111px);
|
||||
transition: height ease-in-out 0.2s;
|
||||
}
|
||||
|
||||
@ -145,6 +149,7 @@ section.settings {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
// TODO: Shouldn't use `redaction-` here
|
||||
iqser-initials-avatar .username {
|
||||
display: none;
|
||||
}
|
||||
@ -156,15 +161,11 @@ section.settings {
|
||||
box-sizing: border-box;
|
||||
background: var(--iqser-background);
|
||||
overflow: hidden;
|
||||
&.with-transition {
|
||||
transition:
|
||||
width ease-in-out 0.2s,
|
||||
min-width ease-in-out 0.2s;
|
||||
}
|
||||
@include common-mixins.scroll-bar;
|
||||
transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
@include common-mixins.scroll-bar;
|
||||
}
|
||||
|
||||
.collapsed-wrapper {
|
||||
@ -213,11 +214,6 @@ section.settings {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
@extend .flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@ -256,14 +252,14 @@ section.settings {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.fit-content {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cdk-overlay-container {
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
@ -7,33 +7,22 @@
|
||||
0%,
|
||||
20% {
|
||||
color: rgba(var(--iqser-accent-rgb), 0);
|
||||
text-shadow:
|
||||
0.25em 0 0 rgba(var(--iqser-accent-rgb), 0),
|
||||
0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
|
||||
text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
|
||||
}
|
||||
40% {
|
||||
color: var(--iqser-accent);
|
||||
text-shadow:
|
||||
0.25em 0 0 rgba(var(--iqser-accent-rgb), 0),
|
||||
0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
|
||||
color: #283241;
|
||||
text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
|
||||
}
|
||||
60% {
|
||||
text-shadow:
|
||||
0.25em 0 0 var(--iqser-accent),
|
||||
0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
|
||||
text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
|
||||
}
|
||||
80%,
|
||||
100% {
|
||||
text-shadow:
|
||||
0.25em 0 0 var(--iqser-accent),
|
||||
0.5em 0 0 var(--iqser-accent);
|
||||
text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 #283241;
|
||||
}
|
||||
}
|
||||
|
||||
.spinning-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation-name: spin;
|
||||
animation-duration: 5000ms;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
@use 'common-mixins';
|
||||
|
||||
.mat-mdc-menu-panel {
|
||||
border-radius: var(--iqser-menu-border-radius) !important;
|
||||
.mat-menu-panel {
|
||||
border-radius: 8px !important;
|
||||
max-width: none !important;
|
||||
min-width: 180px !important;
|
||||
margin-top: var(--iqser-menu-margin-top);
|
||||
min-height: unset !important;
|
||||
margin-top: 10px;
|
||||
background-color: var(--iqser-popup-background);
|
||||
@include common-mixins.scroll-bar;
|
||||
@include common-mixins.drop-shadow;
|
||||
|
||||
.mat-mdc-menu-content:not(:empty) {
|
||||
padding-top: var(--iqser-menu-padding-top);
|
||||
padding-bottom: var(--iqser-menu-padding-bottom);
|
||||
.mat-menu-content:not(:empty) {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
&.padding-bottom-0 .mat-mdc-menu-content:not(:empty) {
|
||||
&.padding-bottom-0 .mat-menu-content:not(:empty) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.padding-bottom-8 .mat-mdc-menu-content:not(:empty) {
|
||||
&.padding-bottom-8 .mat-menu-content:not(:empty) {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.mat-mdc-menu-item {
|
||||
.mat-menu-item {
|
||||
font-size: var(--iqser-font-size);
|
||||
color: var(--iqser-text);
|
||||
padding: 0 26px 0 8px !important;
|
||||
margin: var(--iqser-menu-item-margin);
|
||||
padding: 0 26px 0 8px;
|
||||
margin: 0 8px 2px 8px;
|
||||
border-radius: 4px;
|
||||
width: -webkit-fill-available;
|
||||
|
||||
@ -35,7 +35,6 @@
|
||||
|
||||
mat-icon {
|
||||
color: var(--iqser-text);
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
@ -58,7 +57,7 @@
|
||||
}
|
||||
|
||||
&.padding-left {
|
||||
padding-left: 56px !important;
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@ -77,17 +76,13 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
> span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
font-weight: 600;
|
||||
padding-right: 8px;
|
||||
justify-content: space-between;
|
||||
|
||||
.checkmark {
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
.mat-mdc-progress-bar {
|
||||
--mdc-linear-progress-track-height: 6px;
|
||||
--mdc-linear-progress-active-indicator-color: var(--iqser-white);
|
||||
|
||||
.mat-progress-bar {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
|
||||
.mdc-linear-progress__buffer-bar {
|
||||
.mat-progress-bar-buffer {
|
||||
background-color: var(--iqser-grey-5);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
--mdc-linear-progress-active-indicator-color: var(--iqser-primary);
|
||||
&.white {
|
||||
.mat-progress-bar-fill::after {
|
||||
background-color: var(--iqser-white);
|
||||
}
|
||||
}
|
||||
|
||||
&.green {
|
||||
--mdc-linear-progress-active-indicator-color: var(--iqser-green-2);
|
||||
.mat-progress-bar-fill::after {
|
||||
background-color: var(--iqser-green-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.mat-mdc-progress-spinner {
|
||||
--mdc-circular-progress-active-indicator-color: var(--iqser-primary);
|
||||
}
|
||||
8
src/assets/styles/common-radio.scss
Normal file
8
src/assets/styles/common-radio.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.mat-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mat-radio-button:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@ -1,59 +1,42 @@
|
||||
@use 'common-mixins';
|
||||
|
||||
.mat-mdc-select {
|
||||
padding: 0 calc(var(--iqser-inputs-height) - 25px);
|
||||
box-sizing: border-box;
|
||||
--mat-select-trigger-text-line-height: var(--iqser-inputs-height);
|
||||
--mat-select-trigger-text-size: var(--iqser-inputs-font-size);
|
||||
}
|
||||
|
||||
.mat-mdc-select-panel {
|
||||
.mat-select-panel {
|
||||
padding: 7px 0 !important;
|
||||
min-width: fit-content;
|
||||
background-color: var(--iqser-background);
|
||||
@include common-mixins.scroll-bar;
|
||||
@include common-mixins.drop-shadow;
|
||||
--mat-option-selected-state-label-text-color: var(--iqser-primary);
|
||||
}
|
||||
|
||||
.mat-mdc-select-arrow-wrapper {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mat-option {
|
||||
margin: 1px 8px;
|
||||
border-radius: 4px;
|
||||
color: var(--iqser-text);
|
||||
|
||||
.mat-mdc-option {
|
||||
margin: 1px 8px;
|
||||
border-radius: 4px;
|
||||
color: var(--iqser-text);
|
||||
&:hover:not(.mat-option-disabled),
|
||||
&:focus:not(.mat-option-disabled) {
|
||||
background-color: var(--iqser-btn-bg);
|
||||
}
|
||||
|
||||
&:hover:not(.mdc-list-item--disabled, .mdc-list-item--selected),
|
||||
&:focus:not(.mdc-list-item--disabled, .mdc-list-item--selected) {
|
||||
background-color: var(--iqser-btn-bg);
|
||||
}
|
||||
&.mat-selected:not(.mat-option-multiple) {
|
||||
background-color: rgba(var(--iqser-primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
&.mdc-list-item--selected {
|
||||
background-color: rgba(var(--iqser-primary-rgb), 0.2) !important;
|
||||
color: var(--iqser-primary);
|
||||
}
|
||||
|
||||
&.mdc-list-item--disabled {
|
||||
color: rgba(var(--iqser-text-rgb), 0.7);
|
||||
}
|
||||
|
||||
> span {
|
||||
width: 100%;
|
||||
&.mat-option-disabled {
|
||||
color: rgba(var(--iqser-text-rgb), 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-select-value {
|
||||
color: var(--iqser-text);
|
||||
.mat-form-field.no-label .mat-form-field-infix {
|
||||
padding: 0 !important;
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
.mat-form-field-disabled {
|
||||
.mat-mdc-select-value {
|
||||
color: var(--iqser-grey-3);
|
||||
mat-select {
|
||||
.mat-select-value,
|
||||
.mat-select-arrow {
|
||||
color: var(--iqser-text);
|
||||
}
|
||||
|
||||
.mat-select-arrow {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-option:not(.mat-mdc-option-multiple) .mat-mdc-option-pseudo-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ iqser-side-nav {
|
||||
|
||||
.item {
|
||||
margin-bottom: 4px;
|
||||
border-radius: var(--iqser-side-nav-item-radius);
|
||||
border-radius: 20px;
|
||||
padding: 9px 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
@ -1,26 +1,48 @@
|
||||
.mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive {
|
||||
--mdc-slider-inactive-track-color: var(--iqser-toggle-bg);
|
||||
opacity: 1;
|
||||
}
|
||||
.mat-slider-horizontal {
|
||||
width: 140px;
|
||||
height: 32px !important;
|
||||
|
||||
.mat-mdc-slider.mdc-slider {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
.mat-slider-wrapper {
|
||||
left: 0 !important;
|
||||
top: 16px !important;
|
||||
}
|
||||
|
||||
--mdc-slider-handle-width: 16px;
|
||||
--mdc-slider-handle-height: 16px;
|
||||
--mdc-slider-handle-elevation: none;
|
||||
--mdc-slider-disabled-handle-color: var(--iqser-primary);
|
||||
--mdc-slider-disabled-active-track-color: var(--iqser-grey-5);
|
||||
--mdc-slider-disabled-inactive-track-color: var(--iqser-grey-7);
|
||||
--mdc-slider-label-container-color: var(--iqser-accent);
|
||||
--mat-mdc-slider-value-indicator-opacity: 1;
|
||||
.mat-slider-track-wrapper,
|
||||
.mat-slider-track-fill {
|
||||
height: 6px !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&.mdc-slider--disabled {
|
||||
opacity: 1;
|
||||
// For disabled state
|
||||
.mat-slider-track-fill {
|
||||
background-color: var(--iqser-primary);
|
||||
}
|
||||
|
||||
.mat-slider-track-background {
|
||||
height: 4px !important;
|
||||
margin-top: 1px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--iqser-toggle-bg) !important;
|
||||
}
|
||||
|
||||
.mat-slider-focus-ring {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-slider__value-indicator-text {
|
||||
white-space: nowrap;
|
||||
.mat-slider-thumb {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
border-width: 0 !important;
|
||||
background-color: var(--iqser-primary) !important;
|
||||
}
|
||||
|
||||
.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb {
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
|
||||
.mat-slider-horizontal.mat-slider-disabled {
|
||||
.mat-slider-thumb {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@use 'ngx-toastr/toastr';
|
||||
|
||||
@use 'common-utilities';
|
||||
@use 'common-inputs';
|
||||
@use 'common-buttons';
|
||||
@ -14,14 +12,12 @@
|
||||
@use 'common-breadcrumbs';
|
||||
@use 'common-autocomplete';
|
||||
@use 'common-checkbox';
|
||||
@use 'common-chips';
|
||||
@use 'common-controls';
|
||||
@use 'common-help-mode';
|
||||
@use 'common-list';
|
||||
@use 'common-loading';
|
||||
@use 'common-media-queries';
|
||||
@use 'common-progress-bar';
|
||||
@use 'common-progress-spinner';
|
||||
@use 'common-select';
|
||||
@use 'common-slider';
|
||||
@use 'common-tabs';
|
||||
@ -30,7 +26,7 @@
|
||||
@use 'common-toggle-button';
|
||||
@use 'common-tooltips';
|
||||
@use 'common-file-drop';
|
||||
@use 'common-file-upload';
|
||||
@use 'common-side-nav';
|
||||
@use 'common-radio';
|
||||
@use 'common-color-picker';
|
||||
@use 'common-skeleton';
|
||||
|
||||
@ -8,7 +8,10 @@
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-item {
|
||||
@ -20,7 +23,6 @@
|
||||
border-bottom: 1px solid var(--iqser-separator);
|
||||
box-sizing: border-box;
|
||||
padding: 0 24px;
|
||||
gap: 10px;
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
@ -32,10 +34,17 @@
|
||||
padding: 0 24px 0 10px;
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
@use 'common-mixins' as mixins;
|
||||
|
||||
* {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
opacity: 0.7;
|
||||
}
|
||||
@ -78,12 +73,6 @@ pre {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.heading-md {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
@ -108,10 +97,7 @@ pre {
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
font-weight: initial;
|
||||
|
||||
&:not(.full-opacity) {
|
||||
@extend .text-muted;
|
||||
}
|
||||
@extend .text-muted;
|
||||
}
|
||||
|
||||
.link-action {
|
||||
@ -149,10 +135,6 @@ pre {
|
||||
@include mixins.line-clamp(4);
|
||||
}
|
||||
|
||||
.clamp-5 {
|
||||
@include mixins.line-clamp(5);
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -84,11 +84,11 @@ $toast-width: 400px;
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background-color: #5ce594;
|
||||
background-color: var(--iqser-green-2);
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: #dd4d50;
|
||||
background-color: var(--iqser-red-1);
|
||||
color: var(--iqser-white);
|
||||
}
|
||||
|
||||
|
||||
@ -1,59 +1,41 @@
|
||||
.mat-mdc-slide-toggle {
|
||||
.mdc-switch {
|
||||
--mdc-switch-handle-elevation: none;
|
||||
--mdc-switch-handle-elevation-shadow: none;
|
||||
|
||||
--mdc-switch-selected-track-color: var(--iqser-primary);
|
||||
--mdc-switch-selected-hover-track-color: var(--iqser-primary);
|
||||
--mdc-switch-selected-pressed-track-color: var(--iqser-primary);
|
||||
--mdc-switch-selected-focus-track-color: var(--iqser-primary);
|
||||
--mdc-switch-disabled-selected-track-color: var(--iqser-primary);
|
||||
|
||||
--mdc-switch-unselected-track-color: var(--iqser-toggle-bg);
|
||||
--mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg);
|
||||
--mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg);
|
||||
--mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg);
|
||||
--mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg);
|
||||
|
||||
--mdc-switch-selected-handle-color: var(--iqser-background);
|
||||
--mdc-switch-selected-pressed-handle-color: var(--iqser-background);
|
||||
--mdc-switch-selected-hover-handle-color: var(--iqser-background);
|
||||
--mdc-switch-selected-focus-handle-color: var(--iqser-background);
|
||||
--mdc-switch-disabled-selected-handle-color: var(--iqser-background);
|
||||
|
||||
--mdc-switch-unselected-handle-color: var(--iqser-alt-background);
|
||||
--mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background);
|
||||
--mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background);
|
||||
--mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background);
|
||||
--mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background);
|
||||
|
||||
--mdc-switch-disabled-track-opacity: 0.38;
|
||||
|
||||
--mdc-switch-track-width: 30px;
|
||||
--mdc-switch-track-height: 16px;
|
||||
--mdc-switch-track-shape: 8px;
|
||||
--mat-switch-with-icon-handle-size: 12px;
|
||||
--mdc-switch-handle-shape: 6px;
|
||||
|
||||
--mat-switch-unselected-with-icon-handle-horizontal-margin: 0 2px;
|
||||
--mat-switch-unselected-pressed-handle-horizontal-margin: 0 2px;
|
||||
|
||||
--mat-switch-selected-with-icon-handle-horizontal-margin: 0 6px;
|
||||
--mat-switch-selected-pressed-handle-horizontal-margin: 0 6px;
|
||||
--mat-switch-selected-handle-horizontal-margin: 0 6px;
|
||||
|
||||
--mat-switch-unselected-handle-size: 12px;
|
||||
--mat-switch-selected-handle-size: 12px;
|
||||
--mat-switch-pressed-handle-size: 12px;
|
||||
.mat-slide-toggle {
|
||||
.mat-slide-toggle-bar {
|
||||
height: 16px !important;
|
||||
width: 30px !important;
|
||||
border-radius: 16px !important;
|
||||
background-color: var(--iqser-toggle-bg);
|
||||
}
|
||||
|
||||
.mdc-form-field > label {
|
||||
margin-left: 8px;
|
||||
padding-left: 0;
|
||||
.mat-slide-toggle-thumb-container {
|
||||
top: 2px !important;
|
||||
left: 2px !important;
|
||||
height: 12px !important;
|
||||
width: 12px !important;
|
||||
}
|
||||
|
||||
.mdc-switch__icons,
|
||||
.mdc-switch__ripple {
|
||||
.mat-slide-toggle-thumb {
|
||||
height: 12px !important;
|
||||
width: 12px !important;
|
||||
box-shadow: none;
|
||||
background-color: var(--iqser-alt-background);
|
||||
}
|
||||
|
||||
.mat-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mat-primary.mat-checked {
|
||||
.mat-slide-toggle-bar {
|
||||
background-color: var(--iqser-primary);
|
||||
border: 1px solid var(--iqser-background);
|
||||
}
|
||||
|
||||
.mat-slide-toggle-thumb {
|
||||
background-color: var(--iqser-background);
|
||||
}
|
||||
|
||||
.mat-slide-toggle-thumb-container {
|
||||
transform: translate3d(14px, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,29 @@
|
||||
.mdc-tooltip {
|
||||
.mdc-tooltip__surface {
|
||||
--mdc-plain-tooltip-supporting-text-tracking: 0;
|
||||
.mat-tooltip {
|
||||
background-color: var(--iqser-accent);
|
||||
border-radius: 3px !important;
|
||||
padding: 10px;
|
||||
margin: 12px !important;
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
color: var(--iqser-white) !important;
|
||||
position: relative;
|
||||
overflow: visible !important;
|
||||
text-align: center;
|
||||
|
||||
background-color: var(--iqser-accent);
|
||||
border-radius: 3px !important;
|
||||
padding: 10px;
|
||||
margin: 12px !important;
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
color: var(--iqser-white) !important;
|
||||
position: relative;
|
||||
overflow: visible !important;
|
||||
text-align: center !important;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
&.small .mdc-tooltip__surface {
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
&.multiline .mdc-tooltip__surface {
|
||||
&.multiline {
|
||||
white-space: pre-line;
|
||||
text-align: left !important;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.break-all .mdc-tooltip__surface {
|
||||
&.break-all {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&.warn .mdc-tooltip__surface {
|
||||
&.small {
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
&.warn {
|
||||
background-color: var(--iqser-yellow-2);
|
||||
color: var(--iqser-accent) !important;
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@use 'sass:string';
|
||||
@use 'sass:list';
|
||||
/* Margins, paddings */
|
||||
|
||||
$start: 0;
|
||||
@ -9,19 +7,19 @@ $values: '';
|
||||
$sides: (top, bottom, left, right);
|
||||
|
||||
@for $i from $start + 1 through $end {
|
||||
$values: list.append($values, $i, comma);
|
||||
$values: list.set-nth($values, 1, $start);
|
||||
$values: append($values, $i, comma);
|
||||
$values: set-nth($values, 1, $start);
|
||||
}
|
||||
|
||||
// TODO: Check if !important can be avoided
|
||||
|
||||
@each $space in $values {
|
||||
@each $side in $sides {
|
||||
.m#{string.slice($side, 0, 1)}-#{$space} {
|
||||
.m#{str-slice($side, 0, 1)}-#{$space} {
|
||||
margin-#{$side}: #{$space}px !important;
|
||||
}
|
||||
|
||||
.p#{string.slice($side, 0, 1)}-#{$space} {
|
||||
.p#{str-slice($side, 0, 1)}-#{$space} {
|
||||
padding-#{$side}: #{$space}px !important;
|
||||
}
|
||||
}
|
||||
|
||||
13
src/index.ts
13
src/index.ts
@ -1,15 +1,24 @@
|
||||
export * from './lib/common-ui.module';
|
||||
export * from './lib/buttons';
|
||||
export * from './lib/dialog';
|
||||
export * from './lib/form';
|
||||
export * from './lib/listing';
|
||||
export * from './lib/filtering';
|
||||
export * from './lib/help-mode';
|
||||
export * from './lib/icons';
|
||||
export * from './lib/inputs';
|
||||
export * from './lib/utils';
|
||||
export * from './lib/sorting';
|
||||
export * from './lib/services';
|
||||
export * from './lib/shared';
|
||||
export * from './lib/loading';
|
||||
export * from './lib/error';
|
||||
export * from './lib/search';
|
||||
export * from './lib/upload-file';
|
||||
export * from './lib/empty-states';
|
||||
export * from './lib/scrollbar';
|
||||
export * from './lib/caching';
|
||||
export * from './lib/users';
|
||||
export * from './lib/translations';
|
||||
export * from './lib/pipes';
|
||||
export * from './lib/standalone';
|
||||
export * from './lib/permissions';
|
||||
export * from './lib/directives';
|
||||
|
||||
19
src/lib/buttons/buttons.module.ts
Normal file
19
src/lib/buttons/buttons.module.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
|
||||
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { ChevronButtonComponent } from './chevron-button/chevron-button.component';
|
||||
import { CircleButtonComponent } from './circle-button/circle-button.component';
|
||||
import { IconButtonComponent } from './icon-button/icon-button.component';
|
||||
import { IqserIconsModule } from '../icons';
|
||||
|
||||
const matModules = [MatButtonModule, MatTooltipModule];
|
||||
const components = [ChevronButtonComponent, CircleButtonComponent, IconButtonComponent];
|
||||
|
||||
@NgModule({
|
||||
declarations: [...components],
|
||||
imports: [CommonModule, IqserIconsModule, TranslateModule, ...matModules],
|
||||
exports: [...components],
|
||||
})
|
||||
export class IqserButtonsModule {}
|
||||
@ -1,8 +1,6 @@
|
||||
<button [class.overlay]="showDot()" [class.primary]="primary()" [disabled]="disabled()" [id]="buttonId()" mat-button>
|
||||
<span>{{ label() }}</span>
|
||||
<mat-icon class="chevron-icon" iconPositionEnd svgIcon="iqser:arrow-down"></mat-icon>
|
||||
<button [class.overlay]="showDot" [class.primary]="primary" [disabled]="disabled" mat-button>
|
||||
<span>{{ label }}</span>
|
||||
<mat-icon class="chevron-icon" svgIcon="iqser:arrow-down"></mat-icon>
|
||||
</button>
|
||||
|
||||
@if (showDot()) {
|
||||
<div class="dot"></div>
|
||||
}
|
||||
<div *ngIf="showDot" class="dot"></div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
button {
|
||||
--mat-text-button-with-icon-horizontal-padding: 10px 0 14px;
|
||||
padding: 0 10px 0 14px;
|
||||
|
||||
mat-icon {
|
||||
width: 14px;
|
||||
|
||||
@ -1,19 +1,14 @@
|
||||
import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { randomString } from '../../utils';
|
||||
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'iqser-chevron-button',
|
||||
selector: 'iqser-chevron-button [label]',
|
||||
templateUrl: './chevron-button.component.html',
|
||||
styleUrls: ['./chevron-button.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [MatIconModule, MatButtonModule],
|
||||
})
|
||||
export class ChevronButtonComponent {
|
||||
readonly label = input.required<string>();
|
||||
readonly showDot = input(false, { transform: booleanAttribute });
|
||||
readonly primary = input(false, { transform: booleanAttribute });
|
||||
readonly disabled = input(false, { transform: booleanAttribute });
|
||||
readonly buttonId = input(`${randomString()}-chevron-button`);
|
||||
@Input() label!: string;
|
||||
@Input() showDot = false;
|
||||
@Input() primary = false;
|
||||
@Input() disabled = false;
|
||||
}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
export * from './chevron-button.component';
|
||||
@ -1,25 +1,18 @@
|
||||
<div [matTooltipClass]="tooltipClass()" [matTooltipPosition]="tooltipPosition()" [matTooltip]="tooltip()">
|
||||
<div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip">
|
||||
<button
|
||||
(click)="performAction($event)"
|
||||
[class.dark-bg]="type() === _circleButtonTypes.dark"
|
||||
[class.grey-selected]="greySelected()"
|
||||
[class.overlay]="showDot()"
|
||||
[class.primary]="type() === _circleButtonTypes.primary"
|
||||
[class.warn]="type() === _circleButtonTypes.warn"
|
||||
[disabled]="disabled()"
|
||||
[id]="buttonId()"
|
||||
[iqserStopPropagation]="action.observed && !_hasRouterLink"
|
||||
[type]="isSubmit() ? 'submit' : 'button'"
|
||||
[class.dark-bg]="type === circleButtonTypes.dark"
|
||||
[class.overlay]="showDot"
|
||||
[class.primary]="type === circleButtonTypes.primary"
|
||||
[class.warn]="type === circleButtonTypes.warn"
|
||||
[class.help]="type === circleButtonTypes.help"
|
||||
[class.grey-selected]="greySelected"
|
||||
[disabled]="disabled"
|
||||
[type]="isSubmit ? 'submit' : 'button'"
|
||||
[id]="id ? id : buttonId"
|
||||
mat-icon-button
|
||||
>
|
||||
<mat-icon [svgIcon]="icon()"></mat-icon>
|
||||
<mat-icon [svgIcon]="icon"></mat-icon>
|
||||
</button>
|
||||
|
||||
@if (showDot()) {
|
||||
<div class="dot"></div>
|
||||
}
|
||||
|
||||
@if (dropdownButton()) {
|
||||
<div [class.disabled]="disabled()" class="arrow-down"></div>
|
||||
}
|
||||
<div *ngIf="showDot" class="dot"></div>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,47 @@
|
||||
:host > div {
|
||||
width: var(--circle-button-size);
|
||||
height: var(--circle-button-size);
|
||||
:host {
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
align-items: center;
|
||||
|
||||
.arrow-down {
|
||||
border: 5px solid transparent;
|
||||
border-top-color: black;
|
||||
position: fixed;
|
||||
margin-left: 12px;
|
||||
margin-top: -8px;
|
||||
button {
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
line-height: var(--size);
|
||||
|
||||
&.disabled {
|
||||
border-top-color: var(--iqser-grey-3);
|
||||
mat-icon {
|
||||
width: var(--iconSize);
|
||||
height: var(--iconSize);
|
||||
line-height: var(--iconSize);
|
||||
margin: 0;
|
||||
|
||||
svg {
|
||||
line-height: var(--iconSize);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-button-disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
&:not(.primary):not(.warn):not(.dark-bg):hover {
|
||||
background-color: var(--iqser-btn-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&.primary.mat-button-disabled {
|
||||
color: #ffffff80;
|
||||
}
|
||||
|
||||
&.warn:not([disabled]) {
|
||||
background-color: var(--iqser-warn);
|
||||
color: var(--iqser-accent);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--iqser-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.primary mat-icon {
|
||||
color: var(--iqser-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,62 +1,53 @@
|
||||
import {
|
||||
booleanAttribute,
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
effect,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
inject,
|
||||
input,
|
||||
numberAttribute,
|
||||
Output,
|
||||
viewChild,
|
||||
} from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { StopPropagationDirective } from '../../directives';
|
||||
import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
|
||||
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { MatLegacyTooltip as MatTooltip } from '@angular/material/legacy-tooltip';
|
||||
import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
|
||||
import { IqserTooltipPosition, IqserTooltipPositions } from '../../utils';
|
||||
|
||||
@Component({
|
||||
selector: 'iqser-circle-button',
|
||||
selector: 'iqser-circle-button [icon]',
|
||||
templateUrl: './circle-button.component.html',
|
||||
styleUrls: ['./circle-button.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [MatTooltipModule, MatIconModule, MatButtonModule, StopPropagationDirective],
|
||||
})
|
||||
export class CircleButtonComponent {
|
||||
readonly #elementRef = inject(ElementRef<HTMLElement>);
|
||||
protected readonly _matTooltip = viewChild.required(MatTooltip);
|
||||
protected readonly _circleButtonTypes = CircleButtonTypes;
|
||||
protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
|
||||
readonly buttonId = input(`${randomString()}-circle-button`);
|
||||
readonly icon = input.required<string>();
|
||||
readonly tooltip = input('');
|
||||
readonly tooltipClass = input('');
|
||||
readonly showDot = input(false, { transform: booleanAttribute });
|
||||
readonly tooltipPosition = input<IqserTooltipPosition>(IqserTooltipPositions.above);
|
||||
readonly disabled = input(false, { transform: booleanAttribute });
|
||||
readonly type = input<CircleButtonType>(CircleButtonTypes.default);
|
||||
readonly greySelected = input(false, { transform: booleanAttribute });
|
||||
readonly removeTooltip = input(false, { transform: booleanAttribute });
|
||||
readonly isSubmit = input(false, { transform: booleanAttribute });
|
||||
readonly dropdownButton = input(false, { transform: booleanAttribute });
|
||||
readonly size = input(34, { transform: numberAttribute });
|
||||
readonly iconSize = input(14, { transform: numberAttribute });
|
||||
export class CircleButtonComponent implements OnInit {
|
||||
readonly circleButtonTypes = CircleButtonTypes;
|
||||
|
||||
@Input() id!: string;
|
||||
@Input() icon!: string;
|
||||
@Input() tooltip?: string;
|
||||
@Input() tooltipClass?: string;
|
||||
@Input() showDot = false;
|
||||
@Input() tooltipPosition: IqserTooltipPosition = IqserTooltipPositions.above;
|
||||
@Input() disabled = false;
|
||||
@Input() type: CircleButtonType = CircleButtonTypes.default;
|
||||
@Input() greySelected = false;
|
||||
@Input() helpModeButton = false;
|
||||
@Input() removeTooltip = false;
|
||||
@Input() isSubmit = false;
|
||||
@Input() size = 34;
|
||||
@Input() iconSize = 14;
|
||||
@Output() readonly action = new EventEmitter<MouseEvent>();
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size()}px`);
|
||||
this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize()}px`);
|
||||
});
|
||||
@ViewChild(MatTooltip) private readonly _matTooltip!: MatTooltip;
|
||||
|
||||
constructor(private readonly _elementRef: ElementRef) {}
|
||||
|
||||
get buttonId(): string {
|
||||
return `${Math.random().toString(36).substring(2, 9)}-button`;
|
||||
}
|
||||
|
||||
performAction($event: MouseEvent) {
|
||||
if (this.removeTooltip()) {
|
||||
this._matTooltip().hide();
|
||||
ngOnInit(): void {
|
||||
(this._elementRef.nativeElement as HTMLElement).style.setProperty('--size', `${this.size}px`);
|
||||
(this._elementRef.nativeElement as HTMLElement).style.setProperty('--iconSize', `${this.iconSize}px`);
|
||||
}
|
||||
|
||||
performAction($event: MouseEvent): void {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.removeTooltip) {
|
||||
this._matTooltip.hide();
|
||||
// Timeout to allow tooltip to disappear first,
|
||||
// useful when removing an item from the list without a confirmation dialog
|
||||
setTimeout(() => this.action.emit($event));
|
||||
|
||||
@ -1,19 +1,12 @@
|
||||
<button
|
||||
(click)="!disabled() && emitAction($event)"
|
||||
[disabled]="disabled()"
|
||||
[id]="buttonId()"
|
||||
[iqserStopPropagation]="action.observed && !_hasRouterLink"
|
||||
[ngClass]="_classes()"
|
||||
[type]="submit() ? 'submit' : 'button'"
|
||||
(click)="!disabled && action.emit($event)"
|
||||
[disabled]="disabled"
|
||||
[id]="id ? id : buttonId"
|
||||
[ngClass]="classes"
|
||||
[type]="submit ? 'submit' : 'button'"
|
||||
mat-button
|
||||
>
|
||||
@if (icon(); as icon) {
|
||||
<mat-icon [svgIcon]="icon"></mat-icon>
|
||||
}
|
||||
|
||||
<span>{{ label() }}</span>
|
||||
<mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
|
||||
<span>{{ label }}</span>
|
||||
</button>
|
||||
|
||||
@if (showDot()) {
|
||||
<div class="dot"></div>
|
||||
}
|
||||
<div *ngIf="showDot" class="dot"></div>
|
||||
|
||||
20
src/lib/buttons/icon-button/icon-button.component.scss
Normal file
20
src/lib/buttons/icon-button/icon-button.component.scss
Normal file
@ -0,0 +1,20 @@
|
||||
button {
|
||||
padding: 0 14px;
|
||||
width: 100%;
|
||||
|
||||
&.has-icon {
|
||||
padding: 0 14px 0 10px;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: var(--iqser-btn-bg);
|
||||
|
||||
&:not(.mat-button-disabled):hover {
|
||||
background-color: var(--iqser-btn-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
@ -1,42 +1,34 @@
|
||||
import { NgClass } from '@angular/common';
|
||||
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { StopPropagationDirective } from '../../directives';
|
||||
import { randomString } from '../../utils';
|
||||
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
|
||||
|
||||
@Component({
|
||||
selector: 'iqser-icon-button',
|
||||
selector: 'iqser-icon-button [label]',
|
||||
templateUrl: './icon-button.component.html',
|
||||
styleUrls: ['./icon-button.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [NgClass, MatButtonModule, MatIconModule, StopPropagationDirective],
|
||||
})
|
||||
export class IconButtonComponent {
|
||||
protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
|
||||
readonly label = input.required<string>();
|
||||
readonly buttonId = input(`${randomString()}-icon-button`);
|
||||
readonly icon = input<string>();
|
||||
readonly showDot = input(false, { transform: booleanAttribute });
|
||||
readonly active = input(false, { transform: booleanAttribute });
|
||||
readonly disabled = input(false, { transform: booleanAttribute });
|
||||
readonly submit = input(false, { transform: booleanAttribute });
|
||||
readonly type = input<IconButtonType>(IconButtonTypes.default);
|
||||
protected readonly _classes = computed(() => {
|
||||
return {
|
||||
overlay: this.showDot(),
|
||||
[this.type()]: true,
|
||||
'has-icon': !!this.icon(),
|
||||
active: this.active(),
|
||||
};
|
||||
});
|
||||
readonly iconButtonTypes = IconButtonTypes;
|
||||
readonly buttonId: string;
|
||||
|
||||
@Input() label!: string;
|
||||
@Input() id?: string;
|
||||
@Input() icon?: string;
|
||||
@Input() showDot = false;
|
||||
@Input() disabled = false;
|
||||
@Input() submit = false;
|
||||
@Input() type: IconButtonType = IconButtonTypes.default;
|
||||
@Output() readonly action = new EventEmitter<MouseEvent>();
|
||||
|
||||
emitAction($event: MouseEvent) {
|
||||
const activeElement = document.activeElement as HTMLElement;
|
||||
if (activeElement.tagName?.toLowerCase() === 'button') {
|
||||
this.action.emit($event);
|
||||
}
|
||||
constructor() {
|
||||
this.buttonId = `${Math.random().toString(36).substring(2, 9)}-button`;
|
||||
}
|
||||
|
||||
get classes(): Record<string, boolean> {
|
||||
return {
|
||||
overlay: this.showDot,
|
||||
[this.type]: true,
|
||||
'has-icon': !!this.icon,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
export * from './buttons.module';
|
||||
|
||||
export * from './types/icon-button.type';
|
||||
export * from './types/circle-button.type';
|
||||
|
||||
export * from './icon-button/icon-button.component';
|
||||
export * from './circle-button/circle-button.component';
|
||||
export * from './chevron-button/chevron-button.component';
|
||||
|
||||
@ -3,6 +3,7 @@ export const CircleButtonTypes = {
|
||||
primary: 'primary',
|
||||
warn: 'warn',
|
||||
dark: 'dark',
|
||||
help: 'help',
|
||||
} as const;
|
||||
|
||||
export type CircleButtonType = keyof typeof CircleButtonTypes;
|
||||
|
||||
@ -2,6 +2,7 @@ export const IconButtonTypes = {
|
||||
default: 'default',
|
||||
dark: 'dark',
|
||||
primary: 'primary',
|
||||
help: 'help',
|
||||
} as const;
|
||||
|
||||
export type IconButtonType = keyof typeof IconButtonTypes;
|
||||
|
||||
@ -12,11 +12,7 @@ export class CacheApiService {
|
||||
}
|
||||
|
||||
get cachesAvailable(): boolean {
|
||||
try {
|
||||
return !!caches;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return !!window.caches;
|
||||
}
|
||||
|
||||
cacheRequest(request: HttpRequest<any>, httpResponse: HttpResponse<any>) {
|
||||
@ -24,10 +20,6 @@ export class CacheApiService {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.cachesAvailable) {
|
||||
return;
|
||||
}
|
||||
|
||||
const url = this._buildUrl(request);
|
||||
for (const dynCache of this._dynamicCaches) {
|
||||
for (const cacheUrl of dynCache.urls) {
|
||||
@ -43,10 +35,6 @@ export class CacheApiService {
|
||||
|
||||
async wipeCaches(logoutDependant = false) {
|
||||
// console.log('[CACHE-API] delete app level cache ');
|
||||
if (!this.cachesAvailable) {
|
||||
return;
|
||||
}
|
||||
|
||||
await caches.delete(APP_LEVEL_CACHE);
|
||||
|
||||
for (const cache of this._dynamicCaches) {
|
||||
@ -246,10 +234,6 @@ export class CacheApiService {
|
||||
|
||||
private async _handleCacheExpiration(dynCache: DynamicCache, now: number) {
|
||||
// console.log('[CACHE-API] checking cache expiration');
|
||||
if (!this.cachesAvailable) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cache = await caches.open(dynCache.name);
|
||||
let keys = await cache.keys();
|
||||
// removed expired;
|
||||
|
||||
@ -6,21 +6,20 @@ export const APP_LEVEL_CACHE = 'app-level-cache';
|
||||
export const DYNAMIC_CACHES = new InjectionToken<DynamicCaches>('dynamic-caches');
|
||||
|
||||
export async function wipeAllCaches() {
|
||||
const keys = (await caches?.keys()) ?? [];
|
||||
console.log('get caches keys');
|
||||
const keys = await caches.keys();
|
||||
for (const cache of keys) {
|
||||
await wipeCache(cache);
|
||||
}
|
||||
}
|
||||
|
||||
export function wipeCache(cacheName: string) {
|
||||
return caches?.delete(cacheName);
|
||||
console.log('delete cache: ', cacheName);
|
||||
return caches.delete(cacheName);
|
||||
}
|
||||
|
||||
export async function wipeCacheEntry(cacheName: string, entry: string) {
|
||||
if (!caches) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('open cache: ', cacheName);
|
||||
const cache = await caches.open(cacheName);
|
||||
return cache.delete(entry, { ignoreSearch: false });
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { List } from '../utils/types/iqser-types';
|
||||
import { List } from '../utils';
|
||||
|
||||
export interface DynamicCache {
|
||||
readonly urls: List;
|
||||
|
||||
@ -1,61 +1,72 @@
|
||||
import { inject, ModuleWithProviders, NgModule, Optional, Provider, SkipSelf } from '@angular/core';
|
||||
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils';
|
||||
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
|
||||
import { SortByPipe } from './sorting';
|
||||
import { CommonUiOptions, IqserAppConfig, ModuleWithOptions } from './utils';
|
||||
import { HiddenActionComponent, ToastComponent } from './shared';
|
||||
import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
|
||||
import { IqserListingModule } from './listing';
|
||||
import { IqserFiltersModule } from './filtering';
|
||||
import { IqserInputsModule } from './inputs';
|
||||
import { IqserIconsModule } from './icons';
|
||||
import { IqserButtonsModule } from './buttons';
|
||||
import { IqserScrollbarModule } from './scrollbar';
|
||||
import { IqserEmptyStatesModule } from './empty-states';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
|
||||
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
|
||||
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
|
||||
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
|
||||
import { ConfirmationDialogComponent } from './dialog';
|
||||
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
|
||||
import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
|
||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { CircleButtonComponent, IconButtonComponent } from './buttons';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { ICONS } from './utils/constants';
|
||||
import { StopPropagationDirective } from './directives';
|
||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
|
||||
import { IqserSkeletonModule } from './skeleton/skeleton.module';
|
||||
|
||||
const matModules = [MatIconModule, MatButtonModule, MatDialogModule, MatCheckboxModule, MatTooltipModule, MatProgressBarModule];
|
||||
const components = [ConnectionStatusComponent, FullPageErrorComponent];
|
||||
const matModules = [
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatButtonModule,
|
||||
MatDialogModule,
|
||||
MatCheckboxModule,
|
||||
MatTooltipModule,
|
||||
MatProgressBarModule,
|
||||
];
|
||||
const modules = [
|
||||
IqserIconsModule,
|
||||
IqserButtonsModule,
|
||||
IqserListingModule,
|
||||
IqserFiltersModule,
|
||||
IqserInputsModule,
|
||||
IqserScrollbarModule,
|
||||
IqserEmptyStatesModule,
|
||||
IqserSkeletonModule,
|
||||
HttpClientModule,
|
||||
];
|
||||
const components = [ConnectionStatusComponent, FullPageErrorComponent, HiddenActionComponent, ConfirmationDialogComponent, ToastComponent];
|
||||
|
||||
const pipes = [SortByPipe];
|
||||
|
||||
@NgModule({
|
||||
declarations: [...components],
|
||||
imports: [
|
||||
CommonModule,
|
||||
...matModules,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
TranslateModule,
|
||||
IconButtonComponent,
|
||||
CircleButtonComponent,
|
||||
StopPropagationDirective,
|
||||
],
|
||||
exports: [...components],
|
||||
declarations: [...components, ...pipes],
|
||||
imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, TranslateModule],
|
||||
exports: [...components, ...pipes, ...modules],
|
||||
providers: [
|
||||
{
|
||||
provide: HTTP_INTERCEPTORS,
|
||||
multi: true,
|
||||
useClass: ApiPathInterceptor,
|
||||
},
|
||||
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
|
||||
],
|
||||
})
|
||||
export class CommonUiModule {
|
||||
export class CommonUiModule extends ModuleWithOptions {
|
||||
constructor(@Optional() @SkipSelf() parentModule?: CommonUiModule) {
|
||||
super();
|
||||
if (parentModule) {
|
||||
throw new Error('CommonUiModule is already loaded. Import it in the AppModule only!');
|
||||
}
|
||||
|
||||
const iconRegistry = inject(MatIconRegistry);
|
||||
const sanitizer = inject(DomSanitizer);
|
||||
|
||||
ICONS.forEach(icon => {
|
||||
const url = sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`);
|
||||
iconRegistry.addSvgIconInNamespace('iqser', icon, url);
|
||||
});
|
||||
}
|
||||
|
||||
static forRoot<
|
||||
@ -63,7 +74,7 @@ export class CommonUiModule {
|
||||
Config extends IqserConfigService<AppConfig>,
|
||||
AppConfig extends IqserAppConfig = IqserAppConfig,
|
||||
>(options: CommonUiOptions<UserPreference, Config, AppConfig>): ModuleWithProviders<CommonUiModule> {
|
||||
const userPreferenceService = ModuleOptions.getService(
|
||||
const userPreferenceService = this._getService(
|
||||
IqserUserPreferenceService,
|
||||
DefaultUserPreferenceService,
|
||||
options.existingUserPreferenceService,
|
||||
@ -73,11 +84,11 @@ export class CommonUiModule {
|
||||
|
||||
return {
|
||||
ngModule: CommonUiModule,
|
||||
providers: [userPreferenceService, ...configServiceProviders],
|
||||
providers: [userPreferenceService, configServiceProviders],
|
||||
};
|
||||
}
|
||||
|
||||
private static _getConfigServiceProviders(configServiceFactory: () => unknown, configService?: unknown): Provider[] {
|
||||
private static _getConfigServiceProviders(configServiceFactory: () => unknown, configService?: unknown) {
|
||||
if (configService) {
|
||||
return [
|
||||
{
|
||||
|
||||
@ -1,42 +1,36 @@
|
||||
import { AfterViewInit, Directive, HostListener, inject, OnDestroy, signal } from '@angular/core';
|
||||
import { Directive, HostListener, inject, OnDestroy } from '@angular/core';
|
||||
import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
|
||||
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
|
||||
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import { debounceTime, firstValueFrom, fromEvent, merge, of, Subscription } from 'rxjs';
|
||||
import { tap } from 'rxjs/operators';
|
||||
import { IconButtonTypes } from '../buttons/types/icon-button.type';
|
||||
import { LoadingService } from '../loading/loading.service';
|
||||
import { Toaster } from '../services/toaster.service';
|
||||
import { hasFormChanged } from '../utils/functions';
|
||||
import { IqserEventTarget } from '../utils/types/events.type';
|
||||
import { hasFormChanged, IqserEventTarget } from '../utils';
|
||||
import { ConfirmOptions } from '.';
|
||||
import { ConfirmationDialogService } from './confirmation-dialog.service';
|
||||
import { ConfirmOptions } from './confirmation-dialog/confirmation-dialog.component';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
import { LoadingService } from '../loading';
|
||||
import { Toaster } from '../services';
|
||||
import { IconButtonTypes } from '../buttons';
|
||||
|
||||
const DIALOG_CONTAINER = 'mat-dialog-container';
|
||||
const TEXT_INPUT = 'text';
|
||||
const TARGET_NODE = 'mat-dialog-container';
|
||||
|
||||
export interface SaveOptions {
|
||||
closeAfterSave?: boolean;
|
||||
nextAction?: boolean;
|
||||
addMembers?: boolean;
|
||||
}
|
||||
|
||||
@Directive()
|
||||
export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {
|
||||
readonly #confirmationDialogService = inject(ConfirmationDialogService);
|
||||
readonly #dialog = inject(MatDialog);
|
||||
protected readonly _hasErrors = signal(true);
|
||||
protected readonly _formBuilder = inject(UntypedFormBuilder);
|
||||
protected readonly _loadingService = inject(LoadingService);
|
||||
protected readonly _toaster = inject(Toaster);
|
||||
protected readonly _subscriptions = new Subscription();
|
||||
export abstract class BaseDialogComponent implements OnDestroy {
|
||||
readonly iconButtonTypes = IconButtonTypes;
|
||||
form?: UntypedFormGroup;
|
||||
initialFormValue!: Record<string, string>;
|
||||
protected readonly _formBuilder = inject(UntypedFormBuilder);
|
||||
protected readonly _loadingService = inject(LoadingService);
|
||||
protected readonly _toaster = inject(Toaster);
|
||||
readonly #confirmationDialogService = inject(ConfirmationDialogService);
|
||||
readonly #dialog = inject(MatDialog);
|
||||
#backdropClickSubscription = this._dialogRef.backdropClick().subscribe(() => {
|
||||
this.close();
|
||||
});
|
||||
|
||||
protected constructor(
|
||||
protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>,
|
||||
private readonly _isInEditMode = false,
|
||||
) {}
|
||||
protected constructor(protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>, private readonly _isInEditMode?: boolean) {}
|
||||
|
||||
get valid(): boolean {
|
||||
return !this.form || this.form.valid;
|
||||
@ -47,59 +41,36 @@ export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {
|
||||
}
|
||||
|
||||
get disabled(): boolean {
|
||||
return !this.valid || !this.changed || this._hasErrors();
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this._subscriptions.add(this._dialogRef.backdropClick().subscribe(() => this.close()));
|
||||
const valueChanges = this.form?.valueChanges ?? of(null);
|
||||
const events = [fromEvent(window, 'keyup'), fromEvent(window, 'input'), valueChanges];
|
||||
this._hasErrors.set(!!document.getElementsByClassName('ng-invalid')[0]);
|
||||
const events$ = merge(...events).pipe(
|
||||
debounceTime(10),
|
||||
tap(() => {
|
||||
this._hasErrors.set(!!document.getElementsByClassName('ng-invalid')[0]);
|
||||
}),
|
||||
);
|
||||
this._subscriptions.add(events$.subscribe());
|
||||
return !this.valid || !this.changed;
|
||||
}
|
||||
|
||||
abstract save(options?: SaveOptions): void;
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._subscriptions.unsubscribe();
|
||||
this.#backdropClickSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
close() {
|
||||
if (!this._isInEditMode || !this.changed) {
|
||||
return this._dialogRef.close();
|
||||
}
|
||||
|
||||
this._openConfirmDialog().then(result => {
|
||||
if (result) {
|
||||
if (result === ConfirmOptions.CONFIRM) {
|
||||
this.save({ closeAfterSave: true });
|
||||
} else {
|
||||
this._dialogRef.close();
|
||||
close(): void {
|
||||
if (this._isInEditMode && this.changed) {
|
||||
this._openConfirmDialog().then(result => {
|
||||
if (result in ConfirmOptions) {
|
||||
if (result === ConfirmOptions.CONFIRM) {
|
||||
this.save({ closeAfterSave: true });
|
||||
} else {
|
||||
this._dialogRef.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this._dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:keydown.Enter', ['$event'])
|
||||
onEnter(event: KeyboardEvent): void {
|
||||
const target = event.target as IqserEventTarget;
|
||||
const isDialogSelected = target.localName?.trim()?.toLowerCase() === DIALOG_CONTAINER;
|
||||
const isTextInputSelected = target.type?.trim()?.toLowerCase() === TEXT_INPUT;
|
||||
|
||||
if (
|
||||
this.valid &&
|
||||
!this.disabled &&
|
||||
(this.changed || !this._isInEditMode) &&
|
||||
this.#dialog.openDialogs.length === 1 &&
|
||||
(isDialogSelected || isTextInputSelected)
|
||||
) {
|
||||
event?.stopImmediatePropagation();
|
||||
event?.stopImmediatePropagation();
|
||||
const node = (event.target as IqserEventTarget).localName?.trim()?.toLowerCase();
|
||||
if (this.valid && !this.disabled && this.changed && node === TARGET_NODE) {
|
||||
this.save();
|
||||
}
|
||||
}
|
||||
@ -112,7 +83,7 @@ export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {
|
||||
}
|
||||
|
||||
protected _openConfirmDialog() {
|
||||
const dialogRef = this.#confirmationDialogService.open({ disableConfirm: !this.valid });
|
||||
const dialogRef = this.#confirmationDialogService.openDialog({ disableConfirm: !this.valid });
|
||||
return firstValueFrom(dialogRef.afterClosed());
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,35 +1,41 @@
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
|
||||
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
||||
import {
|
||||
ConfirmationDialogComponent,
|
||||
ConfirmOption,
|
||||
IConfirmationDialogData,
|
||||
TitleColors,
|
||||
} from './confirmation-dialog/confirmation-dialog.component';
|
||||
import { defaultDialogConfig } from './dialog.service';
|
||||
import { DialogConfig, DialogService } from '../services';
|
||||
import { ConfirmationDialogComponent, ConfirmationDialogInput, TitleColors } from '.';
|
||||
|
||||
type DialogType = 'confirm';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class ConfirmationDialogService {
|
||||
readonly #dialog = inject(MatDialog);
|
||||
export class ConfirmationDialogService extends DialogService<DialogType> {
|
||||
protected readonly _config: DialogConfig<DialogType> = {
|
||||
confirm: {
|
||||
component: ConfirmationDialogComponent,
|
||||
dialogConfig: { disableClose: false },
|
||||
},
|
||||
};
|
||||
|
||||
open(data?: { disableConfirm: boolean }) {
|
||||
const dialogData: IConfirmationDialogData = {
|
||||
title: _('confirmation-dialog.unsaved-changes.title'),
|
||||
question: _('confirmation-dialog.unsaved-changes.question'),
|
||||
details: _('confirmation-dialog.unsaved-changes.details'),
|
||||
confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'),
|
||||
discardChangesText: _('confirmation-dialog.unsaved-changes.discard-changes-text'),
|
||||
disableConfirm: data?.disableConfirm,
|
||||
titleColor: TitleColors.WARN,
|
||||
};
|
||||
constructor(protected readonly _dialog: MatDialog) {
|
||||
super(_dialog);
|
||||
}
|
||||
|
||||
return this.#dialog.open<ConfirmationDialogComponent, IConfirmationDialogData, ConfirmOption>(ConfirmationDialogComponent, {
|
||||
...defaultDialogConfig,
|
||||
disableClose: false,
|
||||
data: dialogData,
|
||||
});
|
||||
// @ts-ignore
|
||||
openDialog(data?: { disableConfirm: boolean; [key: string]: unknown }): MatDialogRef<unknown> {
|
||||
return super.openDialog(
|
||||
'confirm',
|
||||
// @ts-ignore
|
||||
undefined,
|
||||
new ConfirmationDialogInput({
|
||||
title: _('confirmation-dialog.unsaved-changes.title'),
|
||||
question: _('confirmation-dialog.unsaved-changes.question'),
|
||||
details: _('confirmation-dialog.unsaved-changes.details'),
|
||||
confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'),
|
||||
discardChangesText: _('confirmation-dialog.unsaved-changes.discard-changes-text'),
|
||||
disableConfirm: data?.disableConfirm,
|
||||
titleColor: TitleColors.WARN,
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,83 +1,60 @@
|
||||
<section class="dialog">
|
||||
<div [class.warn]="isDeleteAction" [innerHTML]="config.title" class="dialog-header heading-l"></div>
|
||||
|
||||
@if (showToast && config.toastMessage) {
|
||||
<div class="inline-dialog-toast toast-error">
|
||||
<div [translate]="config.toastMessage"></div>
|
||||
<a (click)="showToast = false" class="toast-close-button">
|
||||
<mat-icon svgIcon="iqser:close"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="dialog-content">
|
||||
@if (config.component) {
|
||||
<ng-container #detailsComponent></ng-container>
|
||||
}
|
||||
|
||||
<p [class.heading]="isDeleteAction" [innerHTML]="config.question" class="mt-0 mb-8"></p>
|
||||
@if (config.details) {
|
||||
<p [innerHTML]="config.details" class="mt-0"></p>
|
||||
}
|
||||
|
||||
@if (config.requireInput) {
|
||||
<div class="iqser-input-group required w-300 mt-24">
|
||||
<label>{{ inputLabel }}</label>
|
||||
<input [(ngModel)]="inputValue" id="confirmation-input" />
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (config.checkboxes.length > 0) {
|
||||
<div class="mt-24 checkboxes-wrapper">
|
||||
@for (checkbox of config.checkboxes; track checkbox) {
|
||||
<mat-checkbox [(ngModel)]="checkbox.value" [class.error]="!checkbox.value && showToast" color="primary">
|
||||
{{ checkbox.label | translate: config.translateParams }}
|
||||
</mat-checkbox>
|
||||
<ng-container *ngTemplateOutlet="checkbox.extraContent; context: { data: checkbox.extraContentData }"></ng-container>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div [class.warn]="isDeleteAction" class="dialog-header heading-l">
|
||||
{{ config.title }}
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions" [class.reverse]="config.cancelButtonPrimary">
|
||||
@if (!config.cancelButtonPrimary) {
|
||||
<iqser-icon-button
|
||||
(action)="confirm(confirmOption)"
|
||||
[disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
|
||||
[label]="config.confirmationText"
|
||||
[type]="iconButtonTypes.primary"
|
||||
buttonId="confirm"
|
||||
></iqser-icon-button>
|
||||
} @else {
|
||||
<div (click)="confirm(confirmOption)" class="all-caps-label cancel no-uppercase" id="confirm">
|
||||
{{ config.confirmationText }}
|
||||
</div>
|
||||
}
|
||||
<div *ngIf="showToast && config.toastMessage" class="inline-dialog-toast toast-error">
|
||||
<div [translate]="config.toastMessage"></div>
|
||||
<a (click)="showToast = false" class="toast-close-button">
|
||||
<mat-icon svgIcon="iqser:close"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if (config.alternativeConfirmationText) {
|
||||
<iqser-icon-button
|
||||
(action)="confirm(confirmOptions.CONFIRM_WITH_ACTION)"
|
||||
[disabled]="config.requireInput && confirmationDoesNotMatch()"
|
||||
[label]="config.alternativeConfirmationText"
|
||||
[type]="iconButtonTypes.primary"
|
||||
></iqser-icon-button>
|
||||
}
|
||||
<div class="dialog-content">
|
||||
<p [class.heading]="isDeleteAction" [innerHTML]="config.question" class="mt-0 mb-8"></p>
|
||||
<p *ngIf="config.details" [innerHTML]="config.details" class="mt-0"></p>
|
||||
|
||||
@if (config.discardChangesText) {
|
||||
<div (click)="confirm(confirmOptions.DISCARD_CHANGES)" class="all-caps-label cancel">
|
||||
{{ config.discardChangesText }}
|
||||
</div>
|
||||
}
|
||||
<div *ngIf="config.requireInput" class="iqser-input-group required w-300 mt-24">
|
||||
<label>{{ inputLabel }}</label>
|
||||
<input [(ngModel)]="inputValue" id="confirmation-input" />
|
||||
</div>
|
||||
|
||||
@if (!config.discardChangesText) {
|
||||
@if (config.cancelButtonPrimary) {
|
||||
<iqser-icon-button (click)="deny()" [label]="config.denyText" [type]="iconButtonTypes.primary"></iqser-icon-button>
|
||||
} @else {
|
||||
<div (click)="deny()" class="all-caps-label cancel">
|
||||
{{ config.denyText }}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
<div *ngIf="config.checkboxes.length > 0" class="mt-24 checkboxes-wrapper">
|
||||
<ng-container *ngFor="let checkbox of config.checkboxes">
|
||||
<mat-checkbox [(ngModel)]="checkbox.value" [class.error]="!checkbox.value && showToast" color="primary">
|
||||
{{ checkbox.label | translate : config.translateParams }}
|
||||
</mat-checkbox>
|
||||
<ng-container *ngTemplateOutlet="checkbox.extraContent; context: { data: checkbox.extraContentData }"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<iqser-icon-button
|
||||
(action)="confirm(confirmOption)"
|
||||
[disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
|
||||
[label]="config.confirmationText"
|
||||
[type]="iconButtonTypes.primary"
|
||||
id="confirm"
|
||||
>
|
||||
</iqser-icon-button>
|
||||
|
||||
<iqser-icon-button
|
||||
(click)="confirm(ConfirmOptions.SECOND_CONFIRM)"
|
||||
*ngIf="config.alternativeConfirmationText"
|
||||
[disabled]="config.requireInput && confirmationDoesNotMatch()"
|
||||
[label]="config.alternativeConfirmationText"
|
||||
[type]="iconButtonTypes.primary"
|
||||
>
|
||||
</iqser-icon-button>
|
||||
|
||||
<div (click)="confirm(ConfirmOptions.DISCARD_CHANGES)" *ngIf="config.discardChangesText" class="all-caps-label cancel">
|
||||
{{ config.discardChangesText }}
|
||||
</div>
|
||||
|
||||
<div (click)="deny()" *ngIf="!config.discardChangesText" class="all-caps-label cancel">
|
||||
{{ config.denyText }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
|
||||
|
||||
@ -6,12 +6,3 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.reverse {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.no-uppercase {
|
||||
text-transform: unset;
|
||||
}
|
||||
|
||||
@ -1,39 +1,21 @@
|
||||
import { NgTemplateOutlet } from '@angular/common';
|
||||
import {
|
||||
AfterViewInit,
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
HostListener,
|
||||
inject,
|
||||
TemplateRef,
|
||||
Type,
|
||||
viewChild,
|
||||
ViewContainerRef,
|
||||
} from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { ChangeDetectionStrategy, Component, HostListener, Inject, TemplateRef } from '@angular/core';
|
||||
import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
||||
import { TranslateModule, TranslateService } from '@ngx-translate/core';
|
||||
import { CircleButtonComponent, IconButtonTypes } from '../../buttons';
|
||||
import { IconButtonComponent } from '../../buttons';
|
||||
import { ValuesOf } from '../../utils';
|
||||
import { IconButtonTypes } from '../../buttons';
|
||||
|
||||
export const TitleColors = {
|
||||
DEFAULT: 'default',
|
||||
WARN: 'warn',
|
||||
} as const;
|
||||
export type TitleColor = 'default' | 'warn';
|
||||
|
||||
export type TitleColor = ValuesOf<typeof TitleColors>;
|
||||
export enum TitleColors {
|
||||
DEFAULT = 'default',
|
||||
WARN = 'warn',
|
||||
}
|
||||
|
||||
export const ConfirmOptions = {
|
||||
CONFIRM: 1,
|
||||
CONFIRM_WITH_ACTION: 2,
|
||||
DISCARD_CHANGES: 3,
|
||||
} as const;
|
||||
|
||||
export type ConfirmOption = ValuesOf<typeof ConfirmOptions>;
|
||||
export enum ConfirmOptions {
|
||||
CONFIRM = 1,
|
||||
SECOND_CONFIRM = 2,
|
||||
DISCARD_CHANGES = 3,
|
||||
}
|
||||
|
||||
interface CheckBox {
|
||||
value: boolean;
|
||||
@ -42,75 +24,76 @@ interface CheckBox {
|
||||
extraContentData?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface InternalConfirmationDialogData {
|
||||
readonly title: string;
|
||||
readonly titleColor: TitleColor;
|
||||
readonly question: string;
|
||||
readonly details: string;
|
||||
readonly confirmationText: string;
|
||||
readonly alternativeConfirmationText?: string;
|
||||
readonly discardChangesText?: string;
|
||||
readonly requireInput: boolean;
|
||||
readonly disableConfirm: boolean;
|
||||
readonly denyText: string;
|
||||
readonly translateParams?: Record<string, unknown>;
|
||||
readonly checkboxes: CheckBox[];
|
||||
readonly checkboxesValidation: boolean;
|
||||
readonly toastMessage?: string;
|
||||
readonly component?: Type<unknown>;
|
||||
readonly componentInputs?: { [key: string]: unknown };
|
||||
readonly cancelButtonPrimary?: boolean;
|
||||
interface IConfirmationDialogInput {
|
||||
title?: string;
|
||||
titleColor?: TitleColor;
|
||||
question?: string;
|
||||
details?: string;
|
||||
confirmationText?: string;
|
||||
alternativeConfirmationText?: string;
|
||||
discardChangesText?: string;
|
||||
requireInput?: boolean;
|
||||
disableConfirm?: boolean;
|
||||
denyText?: string;
|
||||
translateParams?: Record<string, unknown>;
|
||||
checkboxes?: CheckBox[];
|
||||
checkboxesValidation?: boolean;
|
||||
toastMessage?: string;
|
||||
}
|
||||
|
||||
export type IConfirmationDialogData = Partial<InternalConfirmationDialogData>;
|
||||
export class ConfirmationDialogInput implements IConfirmationDialogInput {
|
||||
title: string;
|
||||
titleColor: TitleColor;
|
||||
question: string;
|
||||
details: string;
|
||||
confirmationText: string;
|
||||
alternativeConfirmationText?: string;
|
||||
discardChangesText?: string;
|
||||
requireInput: boolean;
|
||||
disableConfirm: boolean;
|
||||
denyText: string;
|
||||
translateParams: Record<string, unknown>;
|
||||
checkboxes: CheckBox[];
|
||||
checkboxesValidation: boolean;
|
||||
toastMessage?: string;
|
||||
|
||||
function getConfig(options?: IConfirmationDialogData): InternalConfirmationDialogData {
|
||||
return {
|
||||
...options,
|
||||
title: options?.title ?? _('common.confirmation-dialog.title'),
|
||||
titleColor: options?.titleColor ?? TitleColors.DEFAULT,
|
||||
question: options?.question ?? _('common.confirmation-dialog.description'),
|
||||
details: options?.details ?? '',
|
||||
confirmationText: options?.confirmationText ?? _('common.confirmation-dialog.confirm'),
|
||||
requireInput: options?.requireInput ?? false,
|
||||
disableConfirm: options?.disableConfirm ?? false,
|
||||
denyText: options?.denyText ?? _('common.confirmation-dialog.deny'),
|
||||
checkboxes: options?.checkboxes ?? [],
|
||||
checkboxesValidation: typeof options?.checkboxesValidation === 'boolean' ? options.checkboxesValidation : true,
|
||||
component: options?.component,
|
||||
componentInputs: options?.componentInputs,
|
||||
cancelButtonPrimary: options?.cancelButtonPrimary ?? false,
|
||||
};
|
||||
constructor(options?: IConfirmationDialogInput) {
|
||||
this.title = options?.title || _('common.confirmation-dialog.title');
|
||||
this.titleColor = options?.titleColor || TitleColors.DEFAULT;
|
||||
this.question = options?.question || _('common.confirmation-dialog.description');
|
||||
this.details = options?.details || '';
|
||||
this.confirmationText = options?.confirmationText || _('common.confirmation-dialog.confirm');
|
||||
this.alternativeConfirmationText = options?.alternativeConfirmationText;
|
||||
this.discardChangesText = options?.discardChangesText;
|
||||
this.requireInput = options?.requireInput || false;
|
||||
this.disableConfirm = options?.disableConfirm || false;
|
||||
this.denyText = options?.denyText || _('common.confirmation-dialog.deny');
|
||||
this.translateParams = options?.translateParams || {};
|
||||
this.checkboxes = options?.checkboxes || [];
|
||||
this.checkboxesValidation = typeof options?.checkboxesValidation === 'boolean' ? options.checkboxesValidation : true;
|
||||
this.toastMessage = options?.toastMessage;
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
templateUrl: './confirmation-dialog.component.html',
|
||||
styleUrls: ['./confirmation-dialog.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
MatIconModule,
|
||||
FormsModule,
|
||||
MatCheckboxModule,
|
||||
TranslateModule,
|
||||
NgTemplateOutlet,
|
||||
IconButtonComponent,
|
||||
CircleButtonComponent,
|
||||
MatDialogModule,
|
||||
],
|
||||
})
|
||||
export class ConfirmationDialogComponent implements AfterViewInit {
|
||||
readonly config = getConfig(inject(MAT_DIALOG_DATA));
|
||||
export class ConfirmationDialogComponent {
|
||||
config: ConfirmationDialogInput;
|
||||
inputValue = '';
|
||||
showToast = false;
|
||||
readonly inputLabel: string;
|
||||
readonly confirmOptions = ConfirmOptions;
|
||||
readonly ConfirmOptions = ConfirmOptions;
|
||||
readonly iconButtonTypes = IconButtonTypes;
|
||||
readonly detailsComponentRef = viewChild.required('detailsComponent', { read: ViewContainerRef });
|
||||
|
||||
constructor(
|
||||
private readonly _dialogRef: MatDialogRef<ConfirmationDialogComponent, ConfirmOption>,
|
||||
private readonly _dialogRef: MatDialogRef<ConfirmationDialogComponent>,
|
||||
private readonly _translateService: TranslateService,
|
||||
@Inject(MAT_DIALOG_DATA) private readonly _confirmationDialogInput: ConfirmationDialogInput,
|
||||
) {
|
||||
this.config = _confirmationDialogInput ?? new ConfirmationDialogInput();
|
||||
this.translate(this.config);
|
||||
this.inputLabel = `${this._translateService.instant('confirmation-dialog.input-label')} '${this.config.confirmationText || ''}'`;
|
||||
}
|
||||
@ -120,38 +103,32 @@ export class ConfirmationDialogComponent implements AfterViewInit {
|
||||
}
|
||||
|
||||
get isDeleteAction(): boolean {
|
||||
return this.config.titleColor === TitleColors.WARN;
|
||||
return this.config?.titleColor === TitleColors.WARN;
|
||||
}
|
||||
|
||||
get confirmOption(): ConfirmOption {
|
||||
get confirmOption(): ConfirmOptions {
|
||||
if (!this.config.checkboxesValidation && this.config.checkboxes[0]?.value) {
|
||||
return ConfirmOptions.CONFIRM_WITH_ACTION;
|
||||
return ConfirmOptions.SECOND_CONFIRM;
|
||||
}
|
||||
return ConfirmOptions.CONFIRM;
|
||||
}
|
||||
|
||||
@HostListener('window:keyup.enter', ['$event'])
|
||||
onKeyupEnter(event: KeyboardEvent): void {
|
||||
event?.stopImmediatePropagation();
|
||||
if (!this.config.requireInput || !this.confirmationDoesNotMatch()) {
|
||||
if (!this.config.cancelButtonPrimary) this.confirm(ConfirmOptions.CONFIRM);
|
||||
else this.deny();
|
||||
@HostListener('window:keyup.enter')
|
||||
onKeyupEnter(): void {
|
||||
if (this.config.requireInput && !this.confirmationDoesNotMatch()) {
|
||||
this.confirm(1);
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.#initializeDetailsComponent();
|
||||
}
|
||||
|
||||
confirmationDoesNotMatch(): boolean {
|
||||
return this.inputValue.toLowerCase() !== this.config.confirmationText.toLowerCase();
|
||||
return this.inputValue.toLowerCase() !== this.config.confirmationText?.toLowerCase();
|
||||
}
|
||||
|
||||
deny() {
|
||||
deny(): void {
|
||||
this._dialogRef.close();
|
||||
}
|
||||
|
||||
confirm(option: ConfirmOption) {
|
||||
confirm(option: ConfirmOptions): void {
|
||||
if (this.uncheckedBoxes) {
|
||||
this.showToast = true;
|
||||
} else {
|
||||
@ -159,8 +136,8 @@ export class ConfirmationDialogComponent implements AfterViewInit {
|
||||
}
|
||||
}
|
||||
|
||||
translate(obj: InternalConfirmationDialogData) {
|
||||
const translateKeys: (keyof InternalConfirmationDialogData)[] = [
|
||||
translate(obj: ConfirmationDialogInput): void {
|
||||
const translateKeys: (keyof typeof obj)[] = [
|
||||
'title',
|
||||
'question',
|
||||
'details',
|
||||
@ -170,20 +147,12 @@ export class ConfirmationDialogComponent implements AfterViewInit {
|
||||
'denyText',
|
||||
];
|
||||
|
||||
const filtered = translateKeys.filter(key => !!obj[key]);
|
||||
filtered.forEach(key => {
|
||||
const value = this._translateService.instant(obj[key] as string, this.config.translateParams);
|
||||
Object.assign(obj, { [key]: value });
|
||||
});
|
||||
}
|
||||
|
||||
#initializeDetailsComponent() {
|
||||
if (!this.config.component) return;
|
||||
const component = this.detailsComponentRef().createComponent(this.config.component);
|
||||
if (this.config.componentInputs) {
|
||||
for (const [key, value] of Object.entries(this.config.componentInputs)) {
|
||||
(component.instance as any)[key] = value;
|
||||
}
|
||||
}
|
||||
translateKeys
|
||||
.filter(key => !!obj[key])
|
||||
.forEach(key => {
|
||||
Object.assign(obj, {
|
||||
[key]: this._translateService.instant(obj[key] as string, this.config.translateParams) as string,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
export * from './base-dialog.component';
|
||||
export * from './confirmation-dialog.service';
|
||||
export * from './confirmation-dialog/confirmation-dialog.component';
|
||||
export * from './dialog.service';
|
||||
export * from './iqser-dialog-component.directive';
|
||||
export * from './iqser-dialog.service';
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
import { Directive, HostListener, inject } from '@angular/core';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import { IconButtonTypes } from '../buttons';
|
||||
import { hasFormChanged, IqserEventTarget } from '../utils';
|
||||
|
||||
const DIALOG_CONTAINER = 'mat-dialog-container';
|
||||
const DATA_TYPE_SYMBOL = Symbol.for('DATA_TYPE');
|
||||
const RETURN_TYPE_SYMBOL = Symbol.for('RETURN_TYPE');
|
||||
|
||||
export type DATA_TYPE = typeof DATA_TYPE_SYMBOL;
|
||||
export type RETURN_TYPE = typeof RETURN_TYPE_SYMBOL;
|
||||
|
||||
@Directive()
|
||||
export abstract class IqserDialogComponent<ComponentType, DataType = null, ReturnType = void> {
|
||||
readonly [DATA_TYPE_SYMBOL]!: DataType;
|
||||
readonly [RETURN_TYPE_SYMBOL]!: ReturnType;
|
||||
|
||||
readonly iconButtonTypes = IconButtonTypes;
|
||||
readonly dialogRef = inject(MatDialogRef<ComponentType, ReturnType>);
|
||||
readonly data = inject<DataType>(MAT_DIALOG_DATA);
|
||||
readonly dialog = inject(MatDialog);
|
||||
readonly form?: FormGroup;
|
||||
readonly ignoredKeys: string[] = [];
|
||||
|
||||
initialFormValue: Record<string, unknown> = {};
|
||||
|
||||
constructor(private readonly _editMode = false) {
|
||||
this.dialogRef
|
||||
.backdropClick()
|
||||
.pipe(takeUntilDestroyed())
|
||||
// eslint-disable-next-line rxjs/no-ignored-subscription
|
||||
.subscribe(() => this.dialogRef.close());
|
||||
}
|
||||
|
||||
get valid(): boolean {
|
||||
return !this.form || this.form.valid;
|
||||
}
|
||||
|
||||
get changed(): boolean {
|
||||
return !this.form || hasFormChanged(this.form, this.initialFormValue, this.ignoredKeys);
|
||||
}
|
||||
|
||||
get disabled(): boolean {
|
||||
return !this.valid || !this.changed;
|
||||
}
|
||||
|
||||
@HostListener('window:keydown.Escape', ['$event'])
|
||||
onEscape(): void {
|
||||
if (this.dialog.openDialogs.length === 1) {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:keydown.Enter', ['$event'])
|
||||
onEnter(event: KeyboardEvent): void {
|
||||
event?.stopImmediatePropagation();
|
||||
if (this.onEnterValidator(event)) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
onEnterValidator(event: KeyboardEvent) {
|
||||
const targetElement = (event.target as IqserEventTarget).localName?.trim()?.toLowerCase();
|
||||
const canClose = targetElement === DIALOG_CONTAINER && this.valid;
|
||||
if (this._editMode) {
|
||||
return canClose && this.changed;
|
||||
}
|
||||
return canClose;
|
||||
}
|
||||
|
||||
close(dialogResult?: ReturnType) {
|
||||
this.dialogRef.close(dialogResult);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This is for testing only
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
class DialogComponentImpl extends IqserDialogComponent<DialogComponentImpl, unknown, unknown> {}
|
||||
@ -1,44 +0,0 @@
|
||||
import { ComponentType } from '@angular/cdk/portal';
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
import { defaultDialogConfig, largeDialogConfig } from './dialog.service';
|
||||
import { DATA_TYPE, IqserDialogComponent, RETURN_TYPE } from './iqser-dialog-component.directive';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class IqserDialog {
|
||||
protected readonly _dialog = inject(MatDialog);
|
||||
|
||||
open<
|
||||
Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
|
||||
Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
|
||||
>(dialog: ComponentType<Component>, config?: MatDialogConfig<Component[DATA_TYPE]>) {
|
||||
const ref = this._dialog.open<Component, Component[DATA_TYPE], Return>(dialog, config);
|
||||
return {
|
||||
...ref,
|
||||
result() {
|
||||
return firstValueFrom(ref.afterClosed());
|
||||
},
|
||||
} as MatDialogRef<Component, Return> & { result(): Promise<Return> };
|
||||
}
|
||||
|
||||
openLarge<
|
||||
Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
|
||||
Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
|
||||
Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
|
||||
>(dialog: ComponentType<Component>, config?: MatDialogConfig<Component[DATA_TYPE]>) {
|
||||
return this.open<Component, Data, Return>(dialog, { ...largeDialogConfig, ...config });
|
||||
}
|
||||
|
||||
openDefault<
|
||||
Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
|
||||
Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
|
||||
Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
|
||||
>(dialog: ComponentType<Component>, config?: MatDialogConfig<Component[DATA_TYPE]>) {
|
||||
return this.open<Component, Data, Return>(dialog, { ...defaultDialogConfig, ...config });
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import { booleanAttribute, Directive, input } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[iqserDisableStopPropagation]',
|
||||
})
|
||||
export class DisableStopPropagationDirective {
|
||||
readonly iqserDisableStopPropagation = input(true, { transform: booleanAttribute });
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
import { Directive, ElementRef, OnDestroy, OnInit, signal } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[iqserHasScrollbar]',
|
||||
host: {
|
||||
'[class]': '_class()',
|
||||
},
|
||||
})
|
||||
export class HasScrollbarDirective implements OnInit, OnDestroy {
|
||||
private readonly _resizeObserver: ResizeObserver;
|
||||
protected readonly _class = signal('');
|
||||
|
||||
constructor(protected readonly _elementRef: ElementRef) {
|
||||
this._resizeObserver = new ResizeObserver(() => {
|
||||
this.process();
|
||||
});
|
||||
|
||||
this._resizeObserver.observe(this._elementRef.nativeElement);
|
||||
}
|
||||
|
||||
private get _hasScrollbar() {
|
||||
const element = this._elementRef?.nativeElement as HTMLElement;
|
||||
return element.clientHeight < element.scrollHeight;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
setTimeout(() => this.process(), 0);
|
||||
}
|
||||
|
||||
process() {
|
||||
const newClass = this._hasScrollbar ? 'has-scrollbar' : '';
|
||||
this._class.set(newClass);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this._resizeObserver.unobserve(this._elementRef.nativeElement);
|
||||
}
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[iqserHiddenAction]',
|
||||
})
|
||||
export class HiddenActionDirective {
|
||||
@Input() requiredClicks = 4;
|
||||
@Output() readonly iqserHiddenAction = new EventEmitter();
|
||||
|
||||
#dPressed = false;
|
||||
#clickCount = 0;
|
||||
#clickCountTimeout?: ReturnType<typeof setTimeout>;
|
||||
|
||||
@HostListener('window:keydown.D')
|
||||
onKeydownD() {
|
||||
this.#dPressed = true;
|
||||
}
|
||||
|
||||
@HostListener('window:keyup.D')
|
||||
onKeyupD() {
|
||||
this.#dPressed = false;
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
countActions($event: MouseEvent): void {
|
||||
if (!this.#dPressed) {
|
||||
this.#clickCount = 0;
|
||||
clearTimeout(this.#clickCountTimeout);
|
||||
return;
|
||||
}
|
||||
|
||||
$event.stopPropagation();
|
||||
$event.preventDefault();
|
||||
|
||||
this.#clickCount += 1;
|
||||
|
||||
if (this.#clickCount === this.requiredClicks) {
|
||||
this.#clickCount = 0;
|
||||
this.iqserHiddenAction.emit();
|
||||
}
|
||||
|
||||
clearTimeout(this.#clickCountTimeout);
|
||||
this.#clickCountTimeout = setTimeout(() => (this.#clickCount = 0), 1000);
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
export * from './hidden-action.directive';
|
||||
export * from './stop-propagation.directive';
|
||||
export * from './disable-stop-propagation.directive';
|
||||
export * from './prevent-default.directive';
|
||||
export * from './has-scrollbar.directive';
|
||||
export * from './sync-width.directive';
|
||||
@ -1,18 +0,0 @@
|
||||
import { booleanAttribute, Directive, HostListener, inject, Input } from '@angular/core';
|
||||
import { NGXLogger } from 'ngx-logger';
|
||||
|
||||
@Directive({
|
||||
selector: '[iqserPreventDefault]',
|
||||
})
|
||||
export class PreventDefaultDirective {
|
||||
readonly #logger = inject(NGXLogger);
|
||||
@Input({ transform: booleanAttribute }) iqserPreventDefault = true;
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
onClick($event: Event) {
|
||||
if (this.iqserPreventDefault) {
|
||||
this.#logger.info('[CLICK] iqserPreventDefault');
|
||||
$event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { booleanAttribute, Directive, HostListener, inject, Input } from '@angular/core';
|
||||
import { NGXLogger } from 'ngx-logger';
|
||||
import { DisableStopPropagationDirective } from './disable-stop-propagation.directive';
|
||||
|
||||
@Directive({
|
||||
selector: '[iqserStopPropagation]',
|
||||
})
|
||||
export class StopPropagationDirective {
|
||||
readonly #disableStopPropagation = inject(DisableStopPropagationDirective, { optional: true });
|
||||
readonly #logger = inject(NGXLogger);
|
||||
@Input({ transform: booleanAttribute }) iqserStopPropagation = true;
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
onClick($event: Event) {
|
||||
if (this.#disableStopPropagation?.iqserDisableStopPropagation()) {
|
||||
this.#logger.info('[CLICK] iqserStopPropagation is disabled by iqserDisableStopPropagation');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.iqserStopPropagation) {
|
||||
this.#logger.info('[CLICK] iqserStopPropagation');
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<div [ngStyle]="styles()" class="empty-state">
|
||||
@if (icon(); as icon) {
|
||||
<mat-icon [svgIcon]="icon"></mat-icon>
|
||||
}
|
||||
|
||||
<div class="ng-content-wrapper heading-l">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
<div [innerHTML]="text()" class="heading-l"></div>
|
||||
|
||||
@if (showButton() && this.action.observed) {
|
||||
<iqser-icon-button
|
||||
(action)="action.emit()"
|
||||
[buttonId]="buttonId()"
|
||||
[icon]="buttonIcon()"
|
||||
[attr.help-mode-key]="helpModeKey()"
|
||||
[label]="buttonLabel()"
|
||||
[type]="iconButtonTypes.primary"
|
||||
></iqser-icon-button>
|
||||
}
|
||||
</div>
|
||||
@ -1,42 +0,0 @@
|
||||
import { NgStyle } from '@angular/common';
|
||||
import {
|
||||
booleanAttribute,
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
computed,
|
||||
EventEmitter,
|
||||
input,
|
||||
numberAttribute,
|
||||
Output,
|
||||
} from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { IconButtonComponent } from '../buttons/icon-button/icon-button.component';
|
||||
import { IconButtonTypes } from '../buttons/types/icon-button.type';
|
||||
import { randomString } from '../utils/functions';
|
||||
|
||||
@Component({
|
||||
selector: 'iqser-empty-state',
|
||||
templateUrl: './empty-state.component.html',
|
||||
styleUrls: ['./empty-state.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [NgStyle, MatIconModule, IconButtonComponent],
|
||||
})
|
||||
export class EmptyStateComponent {
|
||||
protected readonly iconButtonTypes = IconButtonTypes;
|
||||
|
||||
readonly text = input.required<string>();
|
||||
readonly icon = input<string>();
|
||||
readonly showButton = input(true, { transform: booleanAttribute });
|
||||
readonly buttonIcon = input('iqser:plus');
|
||||
readonly buttonLabel = input<string>();
|
||||
readonly buttonId = input(`${randomString()}-icon-button`);
|
||||
readonly horizontalPadding = input(100, { transform: numberAttribute });
|
||||
readonly verticalPadding = input(120, { transform: numberAttribute });
|
||||
protected readonly styles = computed(() => ({
|
||||
'padding-top': this.verticalPadding() + 'px',
|
||||
'padding-left': this.horizontalPadding() + 'px',
|
||||
'padding-right': this.horizontalPadding() + 'px',
|
||||
}));
|
||||
readonly helpModeKey = input<string>();
|
||||
@Output() readonly action = new EventEmitter();
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './empty-state.component';
|
||||
16
src/lib/empty-states/empty-state.module.ts
Normal file
16
src/lib/empty-states/empty-state.module.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { IqserIconsModule } from '../icons';
|
||||
import { EmptyStateComponent } from './empty-state/empty-state.component';
|
||||
import { IqserButtonsModule } from '../buttons';
|
||||
import { IqserHelpModeModule } from '../help-mode';
|
||||
|
||||
const modules = [IqserIconsModule, IqserButtonsModule, IqserHelpModeModule];
|
||||
const components = [EmptyStateComponent];
|
||||
|
||||
@NgModule({
|
||||
declarations: [...components],
|
||||
imports: [CommonModule, ...modules],
|
||||
exports: [...components],
|
||||
})
|
||||
export class IqserEmptyStatesModule {}
|
||||
22
src/lib/empty-states/empty-state/empty-state.component.html
Normal file
22
src/lib/empty-states/empty-state/empty-state.component.html
Normal file
@ -0,0 +1,22 @@
|
||||
<div
|
||||
[ngStyle]="{
|
||||
'padding-top': verticalPadding + 'px',
|
||||
'padding-left': horizontalPadding + 'px',
|
||||
'padding-right': horizontalPadding + 'px'
|
||||
}"
|
||||
class="empty-state"
|
||||
>
|
||||
<mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
|
||||
<div class="ng-content-wrapper heading-l">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
<div class="heading-l" [innerHTML]="text"></div>
|
||||
<iqser-icon-button
|
||||
(action)="action.emit()"
|
||||
*ngIf="showButton"
|
||||
[icon]="buttonIcon"
|
||||
[label]="buttonLabel"
|
||||
[type]="iconButtonTypes.primary"
|
||||
[iqserHelpMode]="helpModeKey"
|
||||
></iqser-icon-button>
|
||||
</div>
|
||||
26
src/lib/empty-states/empty-state/empty-state.component.ts
Normal file
26
src/lib/empty-states/empty-state/empty-state.component.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { IconButtonTypes } from '../../buttons';
|
||||
|
||||
@Component({
|
||||
selector: 'iqser-empty-state [text]',
|
||||
templateUrl: './empty-state.component.html',
|
||||
styleUrls: ['./empty-state.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class EmptyStateComponent implements OnInit {
|
||||
readonly iconButtonTypes = IconButtonTypes;
|
||||
|
||||
@Input() text!: string;
|
||||
@Input() icon?: string;
|
||||
@Input() showButton = true;
|
||||
@Input() buttonIcon = 'iqser:plus';
|
||||
@Input() buttonLabel?: string;
|
||||
@Input() horizontalPadding = 100;
|
||||
@Input() verticalPadding = 120;
|
||||
@Input() helpModeKey?: string;
|
||||
@Output() readonly action = new EventEmitter();
|
||||
|
||||
ngOnInit(): void {
|
||||
this.showButton = this.showButton && this.action.observers.length > 0;
|
||||
}
|
||||
}
|
||||
2
src/lib/empty-states/index.ts
Normal file
2
src/lib/empty-states/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './empty-state.module';
|
||||
export * from './empty-state/empty-state.component';
|
||||
@ -1,5 +1,8 @@
|
||||
@if (connectionStatus(); as status) {
|
||||
<div [@animateOpenClose]="status" [ngClass]="status" class="indicator flex-align-items-center">
|
||||
<span [translate]="connectionStatusTranslations[status]"></span>
|
||||
</div>
|
||||
}
|
||||
<div
|
||||
*ngIf="errorService.connectionStatus$ | async as status"
|
||||
[@animateOpenClose]="status"
|
||||
[ngClass]="status"
|
||||
class="indicator flex-align-items-center"
|
||||
>
|
||||
<span [translate]="connectionStatusTranslations[status]"></span>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { connectionStatusTranslations } from '../../translations/connection-status-translations';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
||||
import { toSignal } from '@angular/core/rxjs-interop';
|
||||
import { connectionStatusTranslations } from '../../translations';
|
||||
import { ErrorService } from '../error.service';
|
||||
|
||||
@Component({
|
||||
@ -17,9 +16,9 @@ import { ErrorService } from '../error.service';
|
||||
]),
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: false,
|
||||
})
|
||||
export class ConnectionStatusComponent {
|
||||
protected readonly connectionStatusTranslations = connectionStatusTranslations;
|
||||
protected readonly connectionStatus = toSignal(inject(ErrorService).connectionStatus$);
|
||||
connectionStatusTranslations = connectionStatusTranslations;
|
||||
|
||||
constructor(readonly errorService: ErrorService) {}
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
|
||||
import { LoadingService } from '../loading';
|
||||
import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
|
||||
import { delay, filter, map } from 'rxjs/operators';
|
||||
import { NavigationStart, Router } from '@angular/router';
|
||||
import { shareLast } from '../utils';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
|
||||
export class CustomError {
|
||||
readonly label: string;
|
||||
@ -34,83 +33,47 @@ const OFFLINE_STATUSES = [
|
||||
] as const;
|
||||
|
||||
const isOffline = (error?: ErrorType) => error instanceof HttpErrorResponse && OFFLINE_STATUSES.includes(error.status);
|
||||
const isSameEventType = (previous: Event | string | undefined, current: Event | string | undefined) =>
|
||||
previous instanceof Event && current instanceof Event ? previous.type === current.type : false;
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ErrorService {
|
||||
readonly offline$: Observable<Event>;
|
||||
readonly online$: Observable<Event>;
|
||||
readonly connectionStatus$: Observable<string | undefined>;
|
||||
readonly #error$ = new Subject<ErrorType>();
|
||||
readonly error$ = this.#error$.pipe(filter(error => !error || !isOffline(error)));
|
||||
readonly #online$ = new Subject();
|
||||
readonly #loadingService = inject(LoadingService);
|
||||
readonly #router = inject(Router);
|
||||
readonly #displayNotification$ = new Subject<string | undefined>();
|
||||
#notificationTimeout: Record<string, NodeJS.Timeout | undefined> = {};
|
||||
#displayedNotificationType: string | undefined;
|
||||
private readonly _error$ = new Subject<ErrorType>();
|
||||
readonly error$ = this._error$.pipe(filter(error => !error || !isOffline(error)));
|
||||
private readonly _online$ = new Subject();
|
||||
|
||||
constructor() {
|
||||
this.#router.events
|
||||
.pipe(
|
||||
filter(event => event instanceof NavigationStart),
|
||||
tap(() => this.clear()),
|
||||
takeUntilDestroyed(),
|
||||
)
|
||||
// eslint-disable-next-line rxjs/no-ignored-subscription
|
||||
.subscribe();
|
||||
|
||||
this.offline$ = this.#offline();
|
||||
this.online$ = this.#online();
|
||||
|
||||
this.connectionStatus$ = merge(this.online$, this.offline$, this.#displayNotification$).pipe(
|
||||
distinctUntilChanged(isSameEventType),
|
||||
filter(value => {
|
||||
if (!(value instanceof Event)) return true;
|
||||
this.#clearNotificationTimeouts();
|
||||
this.#setNotificationTimeout(value.type);
|
||||
return false;
|
||||
}),
|
||||
map(value => value as string | undefined),
|
||||
tap(value => (this.#displayedNotificationType = value)),
|
||||
constructor(private readonly _loadingService: LoadingService, private readonly _router: Router) {
|
||||
_router.events.pipe(filter(event => event instanceof NavigationStart)).subscribe(() => {
|
||||
this.clear();
|
||||
});
|
||||
this.offline$ = this._offline();
|
||||
this.online$ = this._online();
|
||||
const removeIndicator$ = this.online$.pipe(
|
||||
delay(3000),
|
||||
map(() => undefined),
|
||||
);
|
||||
|
||||
this.connectionStatus$ = merge(this.online$, this.offline$, removeIndicator$).pipe(map(event => event?.type));
|
||||
}
|
||||
|
||||
set(error: ErrorType): void {
|
||||
this.#loadingService.stop();
|
||||
this.#error$.next(error);
|
||||
this._loadingService.stop();
|
||||
this._error$.next(error);
|
||||
}
|
||||
|
||||
setOnline(): void {
|
||||
this.#online$.next(true);
|
||||
this._online$.next(true);
|
||||
}
|
||||
|
||||
clear(): void {
|
||||
this.#error$.next(undefined);
|
||||
this._error$.next(undefined);
|
||||
}
|
||||
|
||||
#clearNotificationTimeouts() {
|
||||
Object.keys(this.#notificationTimeout).forEach(key => {
|
||||
clearTimeout(this.#notificationTimeout[key]);
|
||||
this.#notificationTimeout[key] = undefined;
|
||||
});
|
||||
}
|
||||
|
||||
#setNotificationTimeout(status: string) {
|
||||
if (status === 'online' && this.#displayedNotificationType !== 'offline') return;
|
||||
this.#notificationTimeout[status] ??= setTimeout(() => {
|
||||
this.#displayNotification$.next(status);
|
||||
if (status === 'online') {
|
||||
setTimeout(() => this.#displayNotification$.next(undefined), 3000);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
#offline() {
|
||||
private _offline() {
|
||||
return merge(
|
||||
fromEvent(window, 'offline'),
|
||||
this.#error$.pipe(
|
||||
this._error$.pipe(
|
||||
filter(isOffline),
|
||||
map(() => new Event('offline')),
|
||||
shareLast(),
|
||||
@ -118,9 +81,7 @@ export class ErrorService {
|
||||
);
|
||||
}
|
||||
|
||||
#online() {
|
||||
return merge(fromEvent(window, 'online'), this.#online$.pipe(map(v => (v instanceof Event ? v : new Event('online'))))).pipe(
|
||||
shareLast(),
|
||||
);
|
||||
private _online() {
|
||||
return merge(fromEvent(window, 'online'), this._online$.pipe(map(() => new Event('online')))).pipe(shareLast());
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user