@apipass/frontend-utils 1.0.168 → 1.0.170
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -33
- package/assets/css/base.scss +109 -109
- package/assets/css/colors.scss +47 -47
- package/assets/css/fonts.scss +56 -56
- package/assets/css/pt_sans.scss +143 -143
- package/esm2022/beautify.utils.mjs +1 -1
- package/esm2022/color-utils.mjs +1 -1
- package/esm2022/event.emitter.service.mjs +1 -1
- package/esm2022/event.mjs +1 -1
- package/esm2022/file.utils.mjs +1 -1
- package/esm2022/form.utils.mjs +1 -1
- package/esm2022/iframe.message.mjs +1 -1
- package/esm2022/language.util.mjs +1 -1
- package/esm2022/mfe/configure-remote-routes.mjs +1 -1
- package/esm2022/mfe/load-remote-module.directive.mjs +4 -4
- package/esm2022/mfe/remote-module.mjs +1 -1
- package/esm2022/public-api.mjs +1 -1
- package/esm2022/remove-empty-attributes.mjs +1 -1
- package/esm2022/sass-utils.mjs +1 -1
- package/esm2022/sort-utils.mjs +1 -1
- package/esm2022/sort.mjs +1 -1
- package/esm2022/step.utils.mjs +1 -1
- package/esm2022/string-utils.mjs +1 -1
- package/esm2022/time-utils.mjs +1 -1
- package/fesm2022/apipass-frontend-utils.mjs +3 -3
- package/fesm2022/apipass-frontend-utils.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
# @apipass/inputs
|
|
2
|
-
|
|
3
|
-
This package is a angular component for buttons
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
```bash
|
|
9
|
-
npm install @apipass/inputs
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
## Usage
|
|
13
|
-
|
|
14
|
-
```typescript
|
|
15
|
-
[...]
|
|
16
|
-
import {InputsModule} from "@apipass/inputs";
|
|
17
|
-
|
|
18
|
-
@NgModule({
|
|
19
|
-
imports: [
|
|
20
|
-
[...]
|
|
21
|
-
InputsModule
|
|
22
|
-
],
|
|
23
|
-
[...]
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
...
|
|
28
|
-
```html
|
|
29
|
-
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## License
|
|
33
|
-
[MIT](https://choosealicense.com/licenses/mit/)
|
|
1
|
+
# @apipass/inputs
|
|
2
|
+
|
|
3
|
+
This package is a angular component for buttons
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @apipass/inputs
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Usage
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
[...]
|
|
16
|
+
import {InputsModule} from "@apipass/inputs";
|
|
17
|
+
|
|
18
|
+
@NgModule({
|
|
19
|
+
imports: [
|
|
20
|
+
[...]
|
|
21
|
+
InputsModule
|
|
22
|
+
],
|
|
23
|
+
[...]
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
...
|
|
28
|
+
```html
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## License
|
|
33
|
+
[MIT](https://choosealicense.com/licenses/mit/)
|
package/assets/css/base.scss
CHANGED
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
@use '@angular/material' as mat;
|
|
2
|
-
|
|
3
|
-
@include mat.core();
|
|
4
|
-
|
|
5
|
-
// Define custom theme colors
|
|
6
|
-
$my-palette-primary: mat.define-palette(mat.$indigo-palette);
|
|
7
|
-
$my-palette-accent: mat.define-palette(mat.$green-palette);
|
|
8
|
-
$my-palette-warn: mat.define-palette(mat.$red-palette);
|
|
9
|
-
|
|
10
|
-
// Override default typography
|
|
11
|
-
$my-typography: mat.define-typography-config(
|
|
12
|
-
$font-family: 'Noto Sans, sans-serif',
|
|
13
|
-
);
|
|
14
|
-
|
|
15
|
-
// Create custom theme using the defined colors
|
|
16
|
-
$my-theme: mat.define-light-theme((
|
|
17
|
-
color: (
|
|
18
|
-
primary: $my-palette-primary,
|
|
19
|
-
accent: $my-palette-accent,
|
|
20
|
-
warn: $my-palette-warn,
|
|
21
|
-
),
|
|
22
|
-
typography: $my-typography,
|
|
23
|
-
density: -3
|
|
24
|
-
));
|
|
25
|
-
|
|
26
|
-
// Include custom theme in app
|
|
27
|
-
@include mat.all-component-themes($my-theme);
|
|
28
|
-
|
|
29
|
-
body,
|
|
30
|
-
html,
|
|
31
|
-
span,
|
|
32
|
-
div,
|
|
33
|
-
p,
|
|
34
|
-
input,
|
|
35
|
-
button,
|
|
36
|
-
h1,
|
|
37
|
-
h2,
|
|
38
|
-
h3,
|
|
39
|
-
h4,
|
|
40
|
-
h5,
|
|
41
|
-
h6,
|
|
42
|
-
select {
|
|
43
|
-
font-family: PT Sans, sans-serif;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
a {
|
|
47
|
-
text-decoration: none;
|
|
48
|
-
color: var(--color-primary);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.info-label {
|
|
52
|
-
color: var(--color-fonts-tertiary);
|
|
53
|
-
font-size: 14px;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.label {
|
|
57
|
-
color: var(--color-fonts-tertiary);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.w-full {
|
|
61
|
-
width: 100%;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.d-flex, .display-flex {
|
|
65
|
-
display: flex;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.d-flex-center {
|
|
69
|
-
display: flex;
|
|
70
|
-
justify-content: center;
|
|
71
|
-
align-items: center;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.hide {
|
|
75
|
-
display: none !important;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.show {
|
|
79
|
-
display: block;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.fade.in {
|
|
83
|
-
opacity: 1 !important;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.no-click {
|
|
87
|
-
pointer-events: none;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.w-250 {
|
|
91
|
-
width: 250px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.margin-top-20 {
|
|
95
|
-
margin-top: 20px;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.margin-top-40 {
|
|
99
|
-
margin-top: 40px !important;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.shady {
|
|
103
|
-
opacity: 0.4;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.clickable {
|
|
107
|
-
cursor: pointer !important;
|
|
108
|
-
}
|
|
109
|
-
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
|
|
3
|
+
@include mat.core();
|
|
4
|
+
|
|
5
|
+
// Define custom theme colors
|
|
6
|
+
$my-palette-primary: mat.define-palette(mat.$indigo-palette);
|
|
7
|
+
$my-palette-accent: mat.define-palette(mat.$green-palette);
|
|
8
|
+
$my-palette-warn: mat.define-palette(mat.$red-palette);
|
|
9
|
+
|
|
10
|
+
// Override default typography
|
|
11
|
+
$my-typography: mat.define-typography-config(
|
|
12
|
+
$font-family: 'Noto Sans, sans-serif',
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
// Create custom theme using the defined colors
|
|
16
|
+
$my-theme: mat.define-light-theme((
|
|
17
|
+
color: (
|
|
18
|
+
primary: $my-palette-primary,
|
|
19
|
+
accent: $my-palette-accent,
|
|
20
|
+
warn: $my-palette-warn,
|
|
21
|
+
),
|
|
22
|
+
typography: $my-typography,
|
|
23
|
+
density: -3
|
|
24
|
+
));
|
|
25
|
+
|
|
26
|
+
// Include custom theme in app
|
|
27
|
+
@include mat.all-component-themes($my-theme);
|
|
28
|
+
|
|
29
|
+
body,
|
|
30
|
+
html,
|
|
31
|
+
span,
|
|
32
|
+
div,
|
|
33
|
+
p,
|
|
34
|
+
input,
|
|
35
|
+
button,
|
|
36
|
+
h1,
|
|
37
|
+
h2,
|
|
38
|
+
h3,
|
|
39
|
+
h4,
|
|
40
|
+
h5,
|
|
41
|
+
h6,
|
|
42
|
+
select {
|
|
43
|
+
font-family: PT Sans, sans-serif;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
a {
|
|
47
|
+
text-decoration: none;
|
|
48
|
+
color: var(--color-primary);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.info-label {
|
|
52
|
+
color: var(--color-fonts-tertiary);
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.label {
|
|
57
|
+
color: var(--color-fonts-tertiary);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.w-full {
|
|
61
|
+
width: 100%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.d-flex, .display-flex {
|
|
65
|
+
display: flex;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.d-flex-center {
|
|
69
|
+
display: flex;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
align-items: center;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.hide {
|
|
75
|
+
display: none !important;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.show {
|
|
79
|
+
display: block;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.fade.in {
|
|
83
|
+
opacity: 1 !important;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.no-click {
|
|
87
|
+
pointer-events: none;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.w-250 {
|
|
91
|
+
width: 250px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.margin-top-20 {
|
|
95
|
+
margin-top: 20px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.margin-top-40 {
|
|
99
|
+
margin-top: 40px !important;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.shady {
|
|
103
|
+
opacity: 0.4;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.clickable {
|
|
107
|
+
cursor: pointer !important;
|
|
108
|
+
}
|
|
109
|
+
|
package/assets/css/colors.scss
CHANGED
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--color-primary: #222D57;
|
|
3
|
-
--color-primary-hover: #18203D;
|
|
4
|
-
--color-primary-active: #29376A;
|
|
5
|
-
|
|
6
|
-
--color-secondary: #D3D921;
|
|
7
|
-
--color-secondary-hover: #B3B81C;
|
|
8
|
-
--color-secondary-active: #DCE13F;
|
|
9
|
-
|
|
10
|
-
--color-tertiary: #EFEFEF;
|
|
11
|
-
--color-tertiary-hover: #CBCBCB;
|
|
12
|
-
--color-tertiary-active: #F1F1F1;
|
|
13
|
-
|
|
14
|
-
--color-fonts-tertiary: #777777;
|
|
15
|
-
|
|
16
|
-
// Material Theme
|
|
17
|
-
--mdc-theme-primary: var(--color-primary);
|
|
18
|
-
--mdc-theme-secondary: var(--color-secondary);
|
|
19
|
-
|
|
20
|
-
.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
|
|
21
|
-
--mdc-tab-indicator-active-indicator-color: var(--color-primary);
|
|
22
|
-
--mat-tab-header-active-label-text-color: var(--color-primary);
|
|
23
|
-
--mat-tab-header-active-ripple-color: var(--color-primary);
|
|
24
|
-
--mat-tab-header-inactive-ripple-color: var(--color-primary);
|
|
25
|
-
--mat-tab-header-active-focus-label-text-color: var(--color-primary);
|
|
26
|
-
--mat-tab-header-active-hover-label-text-color: var(--color-primary);
|
|
27
|
-
--mat-tab-header-active-focus-indicator-color: var(--color-primary);
|
|
28
|
-
--mat-tab-header-active-hover-indicator-color: var(--color-primary);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
// Defaults
|
|
33
|
-
--color-body-light: #FFF;
|
|
34
|
-
--color-red: rgb(255, 0, 0);
|
|
35
|
-
--limit-plan-color: #ff6c00;
|
|
36
|
-
--color_disabled: #E0E0E0;
|
|
37
|
-
--color_components_light: #FFF;
|
|
38
|
-
--color-inputs-border: #DDD;
|
|
39
|
-
--color-inputs-background: #FFF;
|
|
40
|
-
--color_icon_remove: var(--color-red);
|
|
41
|
-
--color_icon_success: #070;
|
|
42
|
-
--color_graph_primary: #1643EF;
|
|
43
|
-
--color_graph_primary_hover: #0A2692;
|
|
44
|
-
--color_graph_error: #EB5757;
|
|
45
|
-
--color_graph_error_hover: #C91717;
|
|
46
|
-
|
|
47
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--color-primary: #222D57;
|
|
3
|
+
--color-primary-hover: #18203D;
|
|
4
|
+
--color-primary-active: #29376A;
|
|
5
|
+
|
|
6
|
+
--color-secondary: #D3D921;
|
|
7
|
+
--color-secondary-hover: #B3B81C;
|
|
8
|
+
--color-secondary-active: #DCE13F;
|
|
9
|
+
|
|
10
|
+
--color-tertiary: #EFEFEF;
|
|
11
|
+
--color-tertiary-hover: #CBCBCB;
|
|
12
|
+
--color-tertiary-active: #F1F1F1;
|
|
13
|
+
|
|
14
|
+
--color-fonts-tertiary: #777777;
|
|
15
|
+
|
|
16
|
+
// Material Theme
|
|
17
|
+
--mdc-theme-primary: var(--color-primary);
|
|
18
|
+
--mdc-theme-secondary: var(--color-secondary);
|
|
19
|
+
|
|
20
|
+
.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
|
|
21
|
+
--mdc-tab-indicator-active-indicator-color: var(--color-primary);
|
|
22
|
+
--mat-tab-header-active-label-text-color: var(--color-primary);
|
|
23
|
+
--mat-tab-header-active-ripple-color: var(--color-primary);
|
|
24
|
+
--mat-tab-header-inactive-ripple-color: var(--color-primary);
|
|
25
|
+
--mat-tab-header-active-focus-label-text-color: var(--color-primary);
|
|
26
|
+
--mat-tab-header-active-hover-label-text-color: var(--color-primary);
|
|
27
|
+
--mat-tab-header-active-focus-indicator-color: var(--color-primary);
|
|
28
|
+
--mat-tab-header-active-hover-indicator-color: var(--color-primary);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
// Defaults
|
|
33
|
+
--color-body-light: #FFF;
|
|
34
|
+
--color-red: rgb(255, 0, 0);
|
|
35
|
+
--limit-plan-color: #ff6c00;
|
|
36
|
+
--color_disabled: #E0E0E0;
|
|
37
|
+
--color_components_light: #FFF;
|
|
38
|
+
--color-inputs-border: #DDD;
|
|
39
|
+
--color-inputs-background: #FFF;
|
|
40
|
+
--color_icon_remove: var(--color-red);
|
|
41
|
+
--color_icon_success: #070;
|
|
42
|
+
--color_graph_primary: #1643EF;
|
|
43
|
+
--color_graph_primary_hover: #0A2692;
|
|
44
|
+
--color_graph_error: #EB5757;
|
|
45
|
+
--color_graph_error_hover: #C91717;
|
|
46
|
+
|
|
47
|
+
}
|
package/assets/css/fonts.scss
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
@import "pt_sans";
|
|
2
|
-
|
|
3
|
-
$base-font-size: 14px;
|
|
4
|
-
$base-input-font-size: $base-font-size;
|
|
5
|
-
|
|
6
|
-
.text-primary, .text-color-primary {
|
|
7
|
-
color: var(--color-primary) !important;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.text-secondary, .text-color-secondary {
|
|
11
|
-
color: var(--color-secondary) !important;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.text-tertiary, .text-color-tertiary {
|
|
15
|
-
color: var(--color-fonts-tertiary) !important;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.text-align-center, align-center {
|
|
19
|
-
text-align: center;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.bold, .text-weight-bold {
|
|
23
|
-
font-weight: bold !important;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.text-weight-normal {
|
|
27
|
-
font-weight: normal !important;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.font-black {
|
|
31
|
-
color: #000 !important;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.font-size-13, .font-size13px {
|
|
35
|
-
font-size: 13px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.font-size-12 {
|
|
39
|
-
font-size: 12px;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
td.mat-cell {
|
|
43
|
-
font-weight: normal !important;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.ff-pt-sans {
|
|
47
|
-
font-family: PT Sans, sans-serif !important;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.undraggable {
|
|
51
|
-
user-select: none;
|
|
52
|
-
-moz-user-select: none;
|
|
53
|
-
-webkit-user-drag: none;
|
|
54
|
-
-webkit-user-select: none;
|
|
55
|
-
-ms-user-select: none;
|
|
56
|
-
}
|
|
1
|
+
@import "pt_sans";
|
|
2
|
+
|
|
3
|
+
$base-font-size: 14px;
|
|
4
|
+
$base-input-font-size: $base-font-size;
|
|
5
|
+
|
|
6
|
+
.text-primary, .text-color-primary {
|
|
7
|
+
color: var(--color-primary) !important;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.text-secondary, .text-color-secondary {
|
|
11
|
+
color: var(--color-secondary) !important;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.text-tertiary, .text-color-tertiary {
|
|
15
|
+
color: var(--color-fonts-tertiary) !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.text-align-center, align-center {
|
|
19
|
+
text-align: center;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.bold, .text-weight-bold {
|
|
23
|
+
font-weight: bold !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.text-weight-normal {
|
|
27
|
+
font-weight: normal !important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.font-black {
|
|
31
|
+
color: #000 !important;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.font-size-13, .font-size13px {
|
|
35
|
+
font-size: 13px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.font-size-12 {
|
|
39
|
+
font-size: 12px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
td.mat-cell {
|
|
43
|
+
font-weight: normal !important;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.ff-pt-sans {
|
|
47
|
+
font-family: PT Sans, sans-serif !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.undraggable {
|
|
51
|
+
user-select: none;
|
|
52
|
+
-moz-user-select: none;
|
|
53
|
+
-webkit-user-drag: none;
|
|
54
|
+
-webkit-user-select: none;
|
|
55
|
+
-ms-user-select: none;
|
|
56
|
+
}
|