@colijnit/corecomponents_v12 12.0.70 → 12.0.71

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.
@@ -3,14 +3,18 @@ import { SafeHtml } from "@angular/platform-browser";
3
3
  export declare class CollapsibleComponent implements OnDestroy {
4
4
  private _elementRef;
5
5
  headerTitle: string;
6
+ buttonText: string;
6
7
  iconData: SafeHtml | undefined;
7
8
  expandButtonLast: boolean;
9
+ showButton: boolean;
8
10
  expanded: boolean;
9
11
  expandedChange: EventEmitter<boolean>;
12
+ buttonClicked: EventEmitter<void>;
10
13
  showClass(): boolean;
11
14
  onHostClick(event: MouseEvent): void;
12
15
  constructor(_elementRef: ElementRef);
13
16
  ngOnDestroy(): void;
14
17
  focus(): void;
15
18
  changeExpanded(): void;
19
+ onButtonClick(): void;
16
20
  }
@@ -13,6 +13,7 @@
13
13
  .collapsible-header {
14
14
  display: flex;
15
15
  flex-direction: row;
16
+ justify-content: space-between;
16
17
  column-gap: 5px;
17
18
  height: $cc-collapsible-height;
18
19
  align-items: center;
@@ -25,6 +26,11 @@
25
26
  font-weight: $cc-collapsible-title-font-weight;
26
27
  }
27
28
 
29
+ .collapsible-header-start, .collapsible-header-end {
30
+ display: flex;
31
+ flex-direction: row;
32
+ }
33
+
28
34
  .expand-icon-wrapper {
29
35
  display: flex;
30
36
  transition: .3s ease-in-out;
@@ -38,8 +44,20 @@
38
44
  }
39
45
  }
40
46
 
41
- .end {
42
- justify-content: space-between;
47
+ .collapsible-button-wrapper {
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: flex-end;
51
+ padding-left: $cc-collapsible-button-wrapper-padding-left;
52
+ min-width: $cc-collapsible-button-wrapper-min-width;
53
+ cursor: default;
54
+ }
55
+
56
+ .collapsible-button {
57
+ border: $cc-collapsible-button-border;
58
+ border-radius: $cc-collapsible-button-border-radius;
59
+ padding: $cc-collapsible-button-padding;
60
+ cursor: pointer;
43
61
  }
44
62
 
45
63
  .collapsible-content {
@@ -5,6 +5,12 @@ $cc-collapsible-text-color: #000000 !default;
5
5
  $cc-collapsible-height: 40px !default;
6
6
  $cc-collapsible-icon-size: 20px !default;
7
7
  $cc-collapsible-border-bottom: 1px solid gray !default;
8
+ $cc-collapsible-button-background-color: white !default;
9
+ $cc-collapsible-button-padding: 5px 12px !default;
10
+ $cc-collapsible-button-border: 1px solid gray !default;
11
+ $cc-collapsible-button-border-radius: 10px !default;
12
+ $cc-collapsible-button-wrapper-padding-left: 10px !default;
13
+ $cc-collapsible-button-wrapper-min-width: 50px !default;
8
14
  $cc-collapsible-icon-margin-right: 15px !default;
9
15
  $cc-collapsible-title-font-weight: bold !default;
10
16
  $cc-collapsible-content-padding: 10px 0px 0px 10px !default;
@@ -2,4 +2,8 @@
2
2
  .co-collapsible {
3
3
  color: $cc-collapsible-text-color;
4
4
  }
5
+
6
+ .collapsible-button {
7
+ background-color: $cc-collapsible-button-background-color;
8
+ }
5
9
  }
@@ -15,15 +15,18 @@ export declare class FilterItemComponent implements OnInit {
15
15
  customContent: boolean;
16
16
  showAllResults: boolean;
17
17
  singleSelect: boolean;
18
+ filterButtonLabel: string;
18
19
  searchPlaceholder: string;
19
20
  showMoreLabel: string;
20
21
  showLessLabel: string;
21
22
  noResultsLabel: string;
22
23
  collectionChange: EventEmitter<any>;
24
+ filterButtonClicked: EventEmitter<void>;
23
25
  showClass(): boolean;
24
26
  filteredCollection: FilterItemViewmodel[];
25
27
  limitTo: number;
26
28
  filterText: string;
29
+ showButton: boolean;
27
30
  private _collection;
28
31
  constructor(iconService: IconCacheService);
29
32
  ngOnInit(): void;
@@ -32,5 +35,7 @@ export declare class FilterItemComponent implements OnInit {
32
35
  moreToShow(): boolean;
33
36
  lessToShow(): boolean;
34
37
  handleModelChange(model: FilterItemViewmodel): void;
38
+ valueSelected(): boolean;
35
39
  applyFilter(text: string): Promise<[]>;
40
+ onButtonClicked(): void;
36
41
  }
@@ -5,14 +5,14 @@ $cc-co-filter-item-border-radius: 0 !default;
5
5
  $cc-co-filter-item-header-font-family: $cc-font-family !default;
6
6
  $cc-co-filter-item-header-font-size: $cc-font-size-default !default;
7
7
  $cc-co-filter-item-header-font-weight: bold !default;
8
- $cc-co-filter-item-header-text-color: $cc-color-dark !default;
8
+ $cc-co-filter-item-header-text-color: #172121 !default;
9
9
  $cc-co-filter-item-header-background-color: $cc-color-light !default;
10
- $cc-co-filter-item-header-padding: 10px !default;
10
+ $cc-co-filter-item-header-padding: 2px !default;
11
11
  $cc-co-filter-item-header-border-radius: 20px 20px 0 0 !default;
12
12
  $cc-co-filter-item-header-border-color: #DCE4EA !default;
13
13
  $cc-co-filter-item-header-icon-size: 30px !default;
14
14
 
15
- $cc-co-filter-item-collapsible-content-padding: 10px !default;
15
+ $cc-co-filter-item-collapsible-content-padding: 0 10px !default;
16
16
  $cc-co-filter-item-collapsible-width: 95% !default;
17
17
 
18
18
  $cc-co-filter-item-collection-results-container-padding: 10px !default;
@@ -27,3 +27,6 @@ $cc-co-filter-item-clickable-color: $cc-color-action !default;
27
27
 
28
28
  $cc-co-filter-item-amount-height: 100% !default;
29
29
  $cc-co-filter-item-amount-margin: 0 0 0 5px !default;
30
+
31
+ $cc-checkbox-border-radius: 0px !default;
32
+ $cc-collapsible-content-padding: 0;
@@ -1,6 +1,6 @@
1
1
  $cc-co-pagination-font-family: $cc-font-family !default;
2
2
  $cc-co-pagination-font-size: $cc-font-size-default !default;
3
- $cc-co-pagination-font-size-small: $cc-font-size-small !default;
3
+ $cc-co-pagination-font-size-medium: $cc-font-size-medium !default;
4
4
  $cc-co-pagination-height: 60px !default;
5
5
  $cc-co-pagination-active-color: $cc-color-action;
6
6
  $cc-co-pagination-border-color: $cc-color-border;
@@ -32,7 +32,7 @@
32
32
  }
33
33
 
34
34
  li.pagination-next, li.pagination-previous {
35
- font-size: $cc-co-pagination-bar-font-size-small;
35
+ font-size: $cc-co-pagination-bar-font-size-medium;
36
36
  cursor: pointer;
37
37
  flex-grow: 0;
38
38
  width: auto;
@@ -1,4 +1,4 @@
1
1
  $cc-co-pagination-bar-background-color: white !default;
2
2
  $cc-co-pagination-bar-border-color: $cc-color-border !default;
3
3
  $cc-co-pagination-bar-font-size: $cc-font-size-default !default;
4
- $cc-co-pagination-bar-font-size-small: $cc-font-size-small !default;
4
+ $cc-co-pagination-bar-font-size-medium: $cc-font-size-medium !default;
@@ -43,7 +43,7 @@
43
43
  }
44
44
 
45
45
  li.pagination-next, li.pagination-previous {
46
- font-size: $cc-font-size-small;
46
+ font-size: $cc-font-size-medium;
47
47
  cursor: pointer;
48
48
  flex-grow: 0;
49
49
  width: auto;
@@ -79,9 +79,10 @@ $cc-action-size-small: 30px !default;
79
79
  $cc-item-size-very-small: 20px !default;
80
80
 
81
81
  $cc-font-size-input-label: 12px !default;
82
- $cc-font-size-small: 13px !default;
82
+ $cc-font-size-small: 10px !default;
83
83
  $cc-font-size-default: 12px !default;
84
- $cc-font-size-medium: 10px !default;
84
+ $cc-font-size-medium: 13px !default;
85
+ $cc-font-size-large: 14px !default;
85
86
 
86
87
  $cc-input-margin-top: 16px !default;
87
88
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colijnit/corecomponents_v12",
3
- "version": "12.0.70",
3
+ "version": "12.0.71",
4
4
  "description": "Colijn IT core components for Angular 12",
5
5
  "private": false,
6
6
  "peerDependencies": {