@colijnit/corecomponents_v12 12.0.82 → 12.0.84

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.
Files changed (19) hide show
  1. package/bundles/colijnit-corecomponents_v12.umd.js +6 -4
  2. package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
  3. package/colijnit-corecomponents_v12.metadata.json +1 -1
  4. package/esm2015/lib/components/input-search/input-search.component.js +3 -3
  5. package/esm2015/lib/components/input-text/input-text.component.js +3 -1
  6. package/esm2015/lib/components/pagination-bar/pagination-bar.component.js +8 -6
  7. package/fesm2015/colijnit-corecomponents_v12.js +11 -7
  8. package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
  9. package/lib/components/input-search/input-search.component.d.ts +1 -1
  10. package/lib/components/input-search/style/_layout.scss +14 -10
  11. package/lib/components/input-search/style/_material-definition.scss +2 -2
  12. package/lib/components/input-text/input-text.component.d.ts +1 -0
  13. package/lib/components/input-text/style/_layout.scss +10 -5
  14. package/lib/components/pagination-bar/style/_layout.scss +35 -29
  15. package/lib/components/pagination-bar/style/_material-definition.scss +13 -1
  16. package/lib/components/pagination-bar/style/_theme.scss +7 -7
  17. package/lib/style/_input.mixins.scss +1 -0
  18. package/lib/style/_variables.scss +1 -0
  19. package/package.json +1 -1
package/lib/components/input-search/input-search.component.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare class InputSearchComponent extends BaseInputComponent<string> imp
7
7
  search: EventEmitter<string>;
8
8
  useLeftIcon: boolean;
9
9
  useRightIcon: boolean;
10
- noIcon: boolean;
10
+ centerLabel: boolean;
11
11
  isSmall: boolean;
12
12
  showClass(): boolean;
13
13
  handleKeyDown(event: KeyboardEvent): void;
package/lib/components/input-search/style/_layout.scss CHANGED
@@ -8,12 +8,6 @@
8
8
  left: 0.5rem;
9
9
  top: 16px
10
10
  }
11
- input {
12
- height: 1rem;
13
- margin-left: 0.5rem;
14
- margin-top: 0.5rem;
15
- }
16
-
17
11
  .co-icon {
18
12
  height: 30px;
19
13
  width: 30px;
@@ -35,14 +29,24 @@
35
29
  position: absolute;
36
30
  top: 50%;
37
31
  transform: translateY(-50%);
38
- margin: 0;
32
+ margin-top: 0;
33
+ margin-bottom: 0;
34
+ margin-right: 0;
35
+ }
36
+ &:not(.has-left-icon) {
37
+ input {
38
+ margin-left: $cc-co-input-search-input-margin-left;
39
+ }
40
+ label {
41
+ margin-left: $cc-co-input-search-input-margin-left;
42
+ }
39
43
  }
40
44
  }
41
- &.no-icon {
45
+ &.center-label {
42
46
  .co-input-text {
43
47
  label {
44
- margin: $cc-co-input-search-label-margin;
45
- text-align: $cc-co-input-search-label-align;
48
+ margin-left: 0;
49
+ text-align: center;
46
50
  }
47
51
  }
48
52
  }
package/lib/components/input-search/style/_material-definition.scss CHANGED
@@ -2,6 +2,6 @@ $cc-co-input-search-background-color: #F5F5FA !default;
2
2
  $cc-co-input-search-border-radius: 10px !default;
3
3
  $cc-co-input-search-label-color: #8083A3 !default;
4
4
  $cc-co-input-search-label-font-style: italic !default;
5
- $cc-co-input-search-label-margin: 0 !default;
6
- $cc-co-input-search-label-align: center !default;
5
+ $cc-co-input-search-input-margin-left: $cc-input-margin-left !default;
6
+ $cc-co-input-search-label-margin-left: $cc-co-input-search-input-margin-left !default;
7
7
  $cc-co-input-search-custom-height: 35px !default;
package/lib/components/input-text/input-text.component.d.ts CHANGED
@@ -23,6 +23,7 @@ export declare class InputTextComponent extends BaseInputComponent<any> implemen
23
23
  showPlaceholderOnFocus: boolean;
24
24
  leftIcon: CoreComponentsIcon;
25
25
  rightIcon: CoreComponentsIcon;
26
+ noStyle: boolean;
26
27
  set model(value: any);
27
28
  get model(): any;
28
29
  showClass(): boolean;
package/lib/components/input-text/style/_layout.scss CHANGED
@@ -1,18 +1,23 @@
1
1
  @include export-module('cc-input-text-layout') {
2
2
  .co-input-text {
3
- &.is-small {
4
- height: $cc-co-input-text-small-height;
5
- }
6
- @include input;
7
3
  font-family: $cc-co-input-text-font-family;
8
4
  font-size: $cc-co-input-text-font-size;
9
5
  input {
10
6
  font-family: $cc-co-input-text-font-family;
11
7
  font-size: $cc-co-input-text-font-size;
8
+ }
9
+ }
10
+ .co-input-text:not(.no-style) {
11
+ &.is-small {
12
+ height: $cc-co-input-text-small-height;
13
+ }
14
+ @include input;
15
+ input {
16
+ margin-left: $cc-input-margin-left;
12
17
  border: none;
13
18
  width: 100%;
14
19
  padding: 0;
15
- margin: calc((#{$cc-item-size} / 100) * 60) 0 0;
20
+ margin-top: calc((#{$cc-item-size} / 100) * 60);
16
21
  outline: none;
17
22
  }
18
23
  &.has-left-icon {
package/lib/components/pagination-bar/style/_layout.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  @include export-module('cc-pagination-bar-layout') {
2
2
  .co-pagination-bar {
3
+ font-family: $cc-co-pagination-bar-font-family;
4
+ font-size: $cc-co-pagination-bar-font-size;
3
5
  width: 100%;
4
-
5
6
  ul.pagination {
6
7
  display: flex;
7
8
  justify-content: flex-end;
@@ -9,62 +10,67 @@
9
10
  width: 100%;
10
11
  list-style-type: none;
11
12
  }
12
-
13
13
  li {
14
14
  display: flex;
15
15
  align-items: center;
16
16
  justify-content: center;
17
17
  flex-grow: 0;
18
18
  flex-shrink: 0;
19
- width: 40px;
20
- height: 40px;
19
+ width: $cc-co-pagination-bar-button-size;
20
+ height: $cc-co-pagination-bar-button-size;
21
21
  cursor: pointer;
22
- border-radius: 5px;
22
+ border-radius: $cc-co-pagination-bar-button-border-radius;
23
23
  font-size: $cc-co-pagination-bar-font-size;
24
24
  -webkit-user-select: none;
25
25
  -moz-user-select: none;
26
26
  -ms-user-select: none;
27
27
  user-select: none;
28
-
29
28
  &:not(:last-child) {
30
- margin-right: 4px;
29
+ margin-right: $cc-co-pagination-bar-button-margin;
31
30
  }
32
31
  }
33
-
34
32
  li.pagination-next, li.pagination-previous {
35
- font-size: $cc-co-pagination-bar-font-size-medium;
33
+ //font-size: $cc-co-pagination-bar-font-size-medium;
36
34
  cursor: pointer;
37
35
  flex-grow: 0;
36
+ min-width: $cc-co-pagination-bar-button-size;
38
37
  width: auto;
39
38
  text-align: center;
40
- padding: 0 15px;
39
+ padding: $cc-co-pagination-bar-button-previous-next-text-padding;
41
40
  }
42
41
 
43
- li.pagination-next a:after {
44
- content: '';
45
- display: inline-block;
46
- padding: 3px;
47
- transform: rotate(-45deg);
48
- -webkit-transform: rotate(-45deg);
49
- margin-left: 5px;
42
+ .pagination-next {
43
+ .pagination-next-arrow {
44
+ content: '';
45
+ display: inline-block;
46
+ padding: 3px;
47
+ transform: rotate(-45deg);
48
+ }
49
+ a {
50
+ margin-right: $cc-co-pagination-bar-button-previous-next-text-margin;
51
+ }
50
52
  }
51
-
52
- li.pagination-previous a:before {
53
- content: '';
54
- display: inline-block;
55
- padding: 3px;
56
- transform: rotate(135deg);
57
- -webkit-transform: rotate(135deg);
58
- margin-right: 5px;
53
+ .pagination-previous {
54
+ .pagination-previous-arrow {
55
+ content: '';
56
+ display: inline-block;
57
+ padding: 3px;
58
+ transform: rotate(135deg);
59
+ }
60
+ a {
61
+ margin-left: $cc-co-pagination-bar-button-previous-next-text-margin;
62
+ }
59
63
  }
60
-
61
64
  li.current {
62
- font-weight: bold;
65
+ font-size: $cc-co-pagination-bar-button-current-font-size;
66
+ font-weight: $cc-co-pagination-bar-button-current-font-weight;
63
67
  opacity: 1;
64
68
  cursor: default;
65
69
  }
66
-
67
- li.disabled, a.disabled {
70
+ li.disabled {
71
+ div, a {
72
+ opacity: 0.2;
73
+ }
68
74
  cursor: default;
69
75
  }
70
76
  }
package/lib/components/pagination-bar/style/_material-definition.scss CHANGED
@@ -1,4 +1,16 @@
1
+ $cc-co-pagination-bar-font-family: $cc-font-family !default;
2
+ $cc-co-pagination-bar-font-size: $cc-font-size-default !default;
3
+ $cc-co-pagination-bar-font-color: $cc-color-font !default;
4
+ $cc-co-pagination-bar-arrow-color: $cc-color-action !default;
5
+ $cc-co-pagination-bar-button-size: 40px !default;
6
+ $cc-co-pagination-bar-button-border-radius: 5px !default;
7
+ $cc-co-pagination-bar-button-margin: 4px !default;
1
8
  $cc-co-pagination-bar-background-color: white !default;
2
9
  $cc-co-pagination-bar-border-color: $cc-color-border !default;
3
- $cc-co-pagination-bar-font-size: $cc-font-size-default !default;
4
10
  $cc-co-pagination-bar-font-size-medium: $cc-font-size-medium !default;
11
+ $cc-co-pagination-bar-button-previous-next-text-padding: 0 15px !default;
12
+ $cc-co-pagination-bar-button-previous-next-text-margin: 5px !default;
13
+ $cc-co-pagination-bar-button-current-font-size: $cc-font-size-default !default;
14
+ $cc-co-pagination-bar-button-current-font-color: $cc-color-font !default;
15
+ $cc-co-pagination-bar-button-current-font-weight: bold !default;
16
+ $cc-co-pagination-bar-button-current-border-color: $cc-color-action !default;
package/lib/components/pagination-bar/style/_theme.scss CHANGED
@@ -1,24 +1,24 @@
1
1
  @include export-module('cc-pagination-bar-theme') {
2
2
  .co-pagination-bar {
3
-
3
+ color: $cc-co-pagination-bar-font-color;
4
4
  li {
5
- color: #2b60a7;
6
5
  border: 1px solid $cc-co-pagination-bar-border-color;
7
6
  background-color: $cc-co-pagination-bar-background-color;
8
7
  }
9
8
 
10
- li.pagination-next a:after {
11
- border: solid #2b60a7;
9
+ .pagination-next-arrow {
10
+ border: solid $cc-co-pagination-bar-arrow-color;
12
11
  border-width: 0 3px 3px 0;
13
12
  }
14
13
 
15
- li.pagination-previous a:before {
16
- border: solid #2b60a7;
14
+ .pagination-previous-arrow {
15
+ border: solid $cc-co-pagination-bar-arrow-color;
17
16
  border-width: 0 3px 3px 0;
18
17
  }
19
18
 
20
19
  li.current {
21
- border: 1px solid $cc-co-pagination-active-color;
20
+ color: $cc-co-pagination-bar-button-current-font-color;
21
+ border: 1px solid $cc-co-pagination-bar-button-current-border-color;
22
22
  }
23
23
  }
24
24
  }
package/lib/style/_input.mixins.scss CHANGED
@@ -43,6 +43,7 @@
43
43
  label {
44
44
  width: 100%;
45
45
  color: $cc-color-label;
46
+ margin-left: $cc-input-margin-left;
46
47
  font-size: $cc-font-size-input-label;
47
48
  position: absolute;
48
49
  top: 50%;
package/lib/style/_variables.scss CHANGED
@@ -100,6 +100,7 @@ $cc-input-required-mark-width-height: 7px;
100
100
  $cc-input-font-size: 12px !default;
101
101
  $cc-input-placeholder-font-style: normal !default;
102
102
  $cc-input-width: 300px !default;
103
+ $cc-input-margin-left: 8px !default;
103
104
  $cc-input-margin-top: 16px !default;
104
105
  $cc-input-show-focus-line: false !default;
105
106
  $cc-input-focus-line-color: $cc-color-action !default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colijnit/corecomponents_v12",
3
- "version": "12.0.82",
3
+ "version": "12.0.84",
4
4
  "description": "Colijn IT core components for Angular 12",
5
5
  "private": false,
6
6
  "peerDependencies": {