@startinblox/components-ds4go 3.1.2 → 3.1.4

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 (20) hide show
  1. package/dist/{custom-getter-ZPFnoSjt-BCNOlbJZ-CC58FWc-.js → custom-getter-ZPFnoSjt-BCNOlbJZ-CHZXhUca.js} +1 -1
  2. package/dist/{index-juyC2UdH.js → index-DQ-N8-vz.js} +30339 -29576
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/component.d.ts +71 -22
  6. package/src/components/catalog/ds4go-customer-holder.ts +1 -1
  7. package/src/components/modal/customer-modal/ds4go-contract-modal-part.ts +240 -0
  8. package/src/components/modal/ds4go-customer-modal.ts +272 -26
  9. package/src/components/modal/ds4go-fact-bundle-modal.ts +200 -61
  10. package/src/components/modal/fact-bundle-modal/ds4go-contract-modal-part.ts +145 -0
  11. package/src/components/modal/fact-bundle-modal/ds4go-negotiations-modal-part.ts +132 -0
  12. package/src/components/modal/fact-bundle-modal/ds4go-odrl-policy-modal-part.ts +233 -0
  13. package/src/components/solid-customer-list.ts +9 -1
  14. package/src/components/solid-dsp-connector.ts +70 -16
  15. package/src/styles/modal/customer-modal/ds4go-contract-modal-part.scss +105 -0
  16. package/src/styles/modal/ds4go-customer-modal.scss +3 -1
  17. package/src/styles/modal/ds4go-fact-bundle-modal.scss +3 -1
  18. package/src/styles/modal/fact-bundle-modal/ds4go-contract-modal-part.scss +84 -0
  19. package/src/styles/modal/fact-bundle-modal/ds4go-negotiations-modal-part.scss +15 -0
  20. package/src/styles/modal/fact-bundle-modal/ds4go-odrl-policy-modal-part.scss +58 -0
package/src/styles/modal/customer-modal/ds4go-contract-modal-part.scss ADDED
@@ -0,0 +1,105 @@
1
+ .contract-section {
2
+ background-color: var(--color-surface-secondary);
3
+ border: var(--border-width-sm) solid var(--color-border-secondary);
4
+ border-radius: var(--border-radius-md);
5
+ padding: var(--scale-500);
6
+ margin-bottom: var(--scale-400);
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: var(--scale-400);
10
+
11
+ .contract-header {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: var(--scale-200);
15
+ padding-bottom: var(--scale-300);
16
+ }
17
+
18
+ .contract-subsection {
19
+ display: flex;
20
+ flex-direction: column;
21
+ gap: var(--scale-300);
22
+
23
+ .collapsible-header {
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: space-between;
27
+ cursor: pointer;
28
+ user-select: none;
29
+ padding: var(--scale-300) var(--scale-400);
30
+ border-radius: var(--border-radius-sm);
31
+ background-color: var(--color-surface-primary);
32
+ border: var(--border-width-sm) solid var(--color-border-secondary);
33
+ transition: all 0.2s ease;
34
+
35
+ &:hover {
36
+ background-color: var(--color-surface-tertiary);
37
+ border-color: var(--color-border-primary);
38
+ }
39
+
40
+ .chevron {
41
+ transition: transform 0.3s ease;
42
+ font-size: 1.5rem;
43
+ color: var(--color-text-secondary);
44
+
45
+ &.expanded {
46
+ transform: rotate(180deg);
47
+ }
48
+ }
49
+ }
50
+
51
+ .collapsible-content {
52
+ max-height: 0;
53
+ overflow: hidden;
54
+ transition: max-height 0.3s ease, opacity 0.3s ease;
55
+ opacity: 0;
56
+ padding: 0 var(--scale-400);
57
+
58
+ &.expanded {
59
+ max-height: 2000px;
60
+ opacity: 1;
61
+ padding-top: var(--scale-300);
62
+ padding-bottom: var(--scale-300);
63
+ }
64
+
65
+ .assets-list {
66
+ display: flex;
67
+ flex-direction: column;
68
+ gap: var(--scale-200);
69
+
70
+ .asset-item {
71
+ background-color: var(--color-surface-primary);
72
+ border: var(--border-width-sm) solid var(--color-border-primary);
73
+ border-radius: var(--border-radius-sm);
74
+ padding: var(--scale-300);
75
+ display: flex;
76
+ flex-direction: column;
77
+ gap: var(--scale-100);
78
+ }
79
+ }
80
+
81
+ .bundle-info {
82
+ background-color: var(--color-surface-primary);
83
+ border: var(--border-width-sm) solid var(--color-border-primary);
84
+ border-radius: var(--border-radius-sm);
85
+ padding: var(--scale-300);
86
+ margin-bottom: var(--scale-300);
87
+ display: flex;
88
+ flex-direction: column;
89
+ gap: var(--scale-200);
90
+ }
91
+
92
+ .facts-list {
93
+ display: flex;
94
+ flex-direction: row;
95
+ flex-wrap: wrap;
96
+ gap: 20px;
97
+ }
98
+
99
+ .facts-list ds4go-card-catalog {
100
+ width: 354px;
101
+ height: auto;
102
+ }
103
+ }
104
+ }
105
+ }
package/src/styles/modal/ds4go-customer-modal.scss CHANGED
@@ -86,6 +86,8 @@
86
86
  width: fit-content;
87
87
  max-width: 80vw;
88
88
  height: fit-content;
89
- max-height: 80vw;
89
+ max-height: 80vh;
90
+ min-width: 50vw;
91
+ min-height: 50vh;
90
92
  }
91
93
  }
package/src/styles/modal/ds4go-fact-bundle-modal.scss CHANGED
@@ -86,6 +86,8 @@
86
86
  width: fit-content;
87
87
  max-width: 80vw;
88
88
  height: fit-content;
89
- max-height: 80vw;
89
+ max-height: 80vh;
90
+ min-width: 50vw;
91
+ min-height: 50vh;
90
92
  }
91
93
  }
package/src/styles/modal/fact-bundle-modal/ds4go-contract-modal-part.scss ADDED
@@ -0,0 +1,84 @@
1
+ .contract-section {
2
+ background-color: var(--color-surface-secondary);
3
+ border: var(--border-width-sm) solid var(--color-border-secondary);
4
+ border-radius: var(--border-radius-md);
5
+ padding: var(--scale-500);
6
+ margin-bottom: var(--scale-400);
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: var(--scale-400);
10
+
11
+ .contract-header {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: var(--scale-200);
15
+ padding-bottom: var(--scale-300);
16
+ border-bottom: var(--border-width-sm) solid
17
+ var(--color-border-secondary);
18
+ }
19
+
20
+ .contract-subsection {
21
+ display: flex;
22
+ flex-direction: column;
23
+ gap: var(--scale-300);
24
+
25
+ .collapsible-header {
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: space-between;
29
+ cursor: pointer;
30
+ user-select: none;
31
+ padding: var(--scale-300) var(--scale-400);
32
+ border-radius: var(--border-radius-sm);
33
+ background-color: var(--color-surface-primary);
34
+ border: var(--border-width-sm) solid var(--color-border-secondary);
35
+ transition: all 0.2s ease;
36
+
37
+ &:hover {
38
+ background-color: var(--color-surface-tertiary);
39
+ border-color: var(--color-border-primary);
40
+ }
41
+
42
+ .chevron {
43
+ transition: transform 0.3s ease;
44
+ font-size: 1.5rem;
45
+ color: var(--color-text-secondary);
46
+
47
+ &.expanded {
48
+ transform: rotate(180deg);
49
+ }
50
+ }
51
+ }
52
+
53
+ .collapsible-content {
54
+ max-height: 0;
55
+ overflow: hidden;
56
+ transition: max-height 0.3s ease, opacity 0.3s ease;
57
+ opacity: 0;
58
+ padding: 0 var(--scale-400);
59
+
60
+ &.expanded {
61
+ max-height: 2000px;
62
+ opacity: 1;
63
+ padding-top: var(--scale-300);
64
+ padding-bottom: var(--scale-300);
65
+ }
66
+ }
67
+
68
+ .assets-list {
69
+ display: flex;
70
+ flex-direction: column;
71
+ gap: var(--scale-200);
72
+
73
+ .asset-item {
74
+ background-color: var(--color-surface-primary);
75
+ border: var(--border-width-sm) solid var(--color-border-primary);
76
+ border-radius: var(--border-radius-sm);
77
+ padding: var(--scale-300);
78
+ display: flex;
79
+ flex-direction: column;
80
+ gap: var(--scale-100);
81
+ }
82
+ }
83
+ }
84
+ }
package/src/styles/modal/fact-bundle-modal/ds4go-negotiations-modal-part.scss ADDED
@@ -0,0 +1,15 @@
1
+ .card-grid {
2
+ display: flex;
3
+ flex-direction: row;
4
+ flex-wrap: wrap;
5
+ gap: 20px;
6
+ }
7
+
8
+ .card-grid-vertical {
9
+ justify-content: stretch;
10
+ }
11
+
12
+ .card-grid-vertical ds4go-card-catalog {
13
+ width: 354px;
14
+ height: auto;
15
+ }
package/src/styles/modal/fact-bundle-modal/ds4go-odrl-policy-modal-part.scss ADDED
@@ -0,0 +1,58 @@
1
+ .policy-card {
2
+ background-color: var(--color-surface-secondary);
3
+ border: var(--border-width-sm) solid var(--color-border-secondary);
4
+ border-radius: var(--border-radius-md);
5
+ padding: var(--scale-500);
6
+ margin-bottom: var(--scale-400);
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: var(--scale-400);
10
+
11
+ .policy-header {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: var(--scale-200);
15
+ padding-bottom: var(--scale-300);
16
+ border-bottom: var(--border-width-sm) solid var(--color-border-secondary);
17
+ }
18
+
19
+ .policy-section {
20
+ display: flex;
21
+ flex-direction: column;
22
+ gap: var(--scale-300);
23
+
24
+ .policy-section-title {
25
+ font-weight: var(--font-weight-semibold);
26
+ color: var(--color-text-heading);
27
+ }
28
+
29
+ .policy-item {
30
+ background-color: var(--color-surface-primary);
31
+ border: var(--border-width-sm) solid var(--color-border-primary);
32
+ border-radius: var(--border-radius-sm);
33
+ padding: var(--scale-300);
34
+ display: flex;
35
+ flex-direction: column;
36
+ gap: var(--scale-200);
37
+
38
+ .constraints-list {
39
+ margin-top: var(--scale-200);
40
+ display: flex;
41
+ flex-direction: column;
42
+ gap: var(--scale-100);
43
+ padding-left: var(--scale-400);
44
+ border-left: var(--border-width-sm) solid var(--color-border-secondary);
45
+
46
+ .constraint-item {
47
+ background-color: var(--color-surface-secondary);
48
+ border: var(--border-width-sm) solid var(--color-border-secondary);
49
+ border-radius: var(--border-radius-xs);
50
+ padding: var(--scale-200);
51
+ display: flex;
52
+ flex-direction: column;
53
+ gap: var(--scale-100);
54
+ }
55
+ }
56
+ }
57
+ }
58
+ }