@colijnit/homedecorator 262.1.6 → 300.1.0

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 (17) hide show
  1. package/app/core/components/dialog/co-hd-dialog.component.scss +1 -1
  2. package/app/plugins/render/render-controls/input-slider/input-slider.component.scss +4 -4
  3. package/app/plugins/render/render-progress/render-progress.component.scss +2 -2
  4. package/app/shared/upload-model-dialog/components/model-previewer/model-preview.component.scss +159 -256
  5. package/app/shared/upload-model-dialog/upload-model-dialog.component.scss +30 -15
  6. package/assets/icons/arrow_up.svg +1 -0
  7. package/assets/icons/crosshair_regular_full.svg +1 -0
  8. package/assets/icons/cube_regular.svg +1 -0
  9. package/assets/icons/sliders_solid_full.svg +1 -0
  10. package/fesm2022/colijnit-homedecorator.mjs +1404 -1231
  11. package/fesm2022/colijnit-homedecorator.mjs.map +1 -1
  12. package/index.d.ts +116 -46
  13. package/package.json +12 -11
  14. package/style/_variables.scss +11 -6
  15. package/style/homedecorator-globals.scss +5 -5
  16. package/style/material.scss +0 -3
  17. package/style/styles.scss +19 -9
package/app/core/components/dialog/co-hd-dialog.component.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @import '../../../../style/variables';
2
2
  :host {
3
- color: $hd-color-primary;
3
+ color: $hd-color-font;
4
4
  .dialog-overlay {
5
5
  display: flex;
6
6
  position: fixed;
package/app/plugins/render/render-controls/input-slider/input-slider.component.scss CHANGED
@@ -13,13 +13,13 @@ $co-homedecorator-input-slider-background: rgba(218, 152, 3, 0.3);
13
13
  display: flex;
14
14
  flex-direction: column;
15
15
 
16
- &-label {
16
+ .form-field-label {
17
17
  font-size: 10px;
18
- color: $hd-color-primary;
18
+ color: $hd-color-font;
19
19
  margin-bottom: 5px;
20
20
  }
21
21
 
22
- &-input {
22
+ .form-field-input {
23
23
  border: none;
24
24
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
25
25
  background: transparent;
@@ -69,7 +69,7 @@ $co-homedecorator-input-slider-background: rgba(218, 152, 3, 0.3);
69
69
  height: 25px;
70
70
 
71
71
  svg {
72
- fill: $hd-color-primary;
72
+ fill: $hd-color-font;
73
73
  }
74
74
  }
75
75
  }
package/app/plugins/render/render-progress/render-progress.component.scss CHANGED
@@ -63,7 +63,7 @@
63
63
  .progress-bar-text {
64
64
  position: absolute;
65
65
  inset: 0;
66
- color: $hd-color-primary;
66
+ color: $hd-color-font;
67
67
  display: flex;
68
68
  align-items: center;
69
69
  justify-content: center;
@@ -84,7 +84,7 @@
84
84
  width: 4px;
85
85
  height: 4px;
86
86
  border-radius: 50%;
87
- background-color: $hd-color-primary;
87
+ background-color: $hd-color-font;
88
88
  opacity: 0.25;
89
89
  animation: loading-dot 1.2s infinite ease-in-out;
90
90
  }
package/app/shared/upload-model-dialog/components/model-previewer/model-preview.component.scss CHANGED
@@ -1,289 +1,192 @@
1
- .model-preview {
2
- display: flex;
3
- flex-direction: row;
4
- font-size: 14px;
5
- position: relative;
1
+ @import "../../../../../style/variables";
6
2
 
7
- .model-preview-window {
8
- .model-preview-window-bottom {
9
- display: flex;
10
- flex-direction: row;
11
- justify-content: space-between;
12
- align-items: center;
13
-
14
- .disclaimer-text-container {
15
- padding-right: 20px;
16
- text-align: right;
17
- font-style: italic;
18
- font-size: 12px;
19
- }
20
- }
21
- }
22
-
23
- .model-preview-actions {
24
- min-width: 350px;
25
- box-sizing: border-box;
26
- padding: 10px 20px;
27
- border-left: 1px solid #5b6875;
28
-
29
- #heightArticle {
30
- max-width: 160px;
31
- }
32
-
33
- .units-select-form {
34
- width: 80px;
35
- margin: 0 5px;
36
- }
37
-
38
- .model-preview-info-container {
39
- margin-bottom: 10px;
40
-
41
- .model-preview-info-left {
42
- font-weight: bolder;
43
- }
44
-
45
- .model-preview-info-right {
3
+ :host {
4
+ ::ng-deep .form-input, ::ng-deep .co-input-text:not(.no-style):not(.read-only):not(.no-hover-line) {
5
+ .co-button {
6
+ background-color: transparent;
7
+ &:hover {
8
+ background-color: $hd-color-main;
46
9
  }
47
10
  }
48
-
49
- .model-preview-info {
50
- margin-top: 80px;
11
+ &:hover:before {
12
+ box-shadow: inset 0 0 0 2px $hd-color-main;
51
13
  }
52
14
  }
53
-
54
- .exportButton {
55
- cursor: pointer;
56
- color: #fff;
57
- background: #da9803;
58
- border: 1px solid #da9803;
59
- border-radius: 3px;
60
- box-sizing: border-box;
61
- padding: 5px;
15
+ .model-preview-header {
62
16
  display: flex;
17
+ justify-content: space-between;
63
18
  align-items: center;
64
-
65
- &:hover {
66
- background: #da9803;
67
- color: #fff;
68
- }
69
- }
70
-
71
- input {
72
- border: 1px solid #5b6875;
73
- box-sizing: border-box;
74
- padding: 3px 10px;
75
- border-radius: 3px;
76
- line-height: 30px;
77
- width: 100%;
19
+ margin-bottom: 15px;
78
20
  }
79
-
80
- }
81
-
82
- /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
83
- .mat-radio-wrapper {
84
- margin: 10px 0;
85
- }
86
-
87
- /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
88
- mat-radio-group {
89
- /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
90
- mat-radio-button {
91
- display: block;
21
+ .header-wrapper {
22
+ display: flex;
23
+ align-items: center;
24
+ gap: 20px;
25
+ .header-title-icon-wrapper {
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ background-color: $hd-color-main-light;
30
+ width: 50px;
31
+ height: 50px;
32
+ border-radius: 50%;
33
+ ::ng-deep .co-icon {
34
+ svg { // for fontawesome icons
35
+ fill: $hd-color-main;
36
+ }
37
+ & [fill] { // for own icons
38
+ fill: $hd-color-main;
39
+ }
40
+ }
41
+ }
42
+ .header-title-wrapper {
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: 15px;
46
+ }
47
+ .header-title {
48
+ font-size: 16px;
49
+ font-weight: bold;
50
+ }
51
+ .header-sub-title {
52
+ font-size: 12px;
53
+ }
92
54
  }
93
- }
94
-
95
- .base-button {
96
- cursor: pointer;
97
- color: #fff;
98
- background: #da9803;
99
- border: 1px solid #da9803;
100
- border-radius: 3px;
101
- box-sizing: border-box;
102
- padding: 4px 10px;
103
- line-height: 30px;
104
-
105
- &:hover {
106
- background: #da9803;
107
- color: #fff;
55
+ .model-preview {
56
+ display: grid;
57
+ grid-template-columns: 60% 1fr;
58
+ grid-gap: 20px;
59
+ font-size: 14px;
60
+ position: relative;
108
61
  }
109
- }
110
-
111
- .model-placement-container {
112
- div {
62
+ .preview-section {
113
63
  display: flex;
114
- justify-content: space-between;
115
- margin: 5px 0;
116
- align-items: center;
64
+ flex-direction: column;
65
+ gap: 10px;
66
+ background: #FAF8F7;
67
+ border-radius: 10px;
68
+ border: 1px solid $hd-color-border;
69
+ padding: 20px;
117
70
  }
118
- }
119
71
 
120
-
121
- .rotation-button-container {
122
- div {
72
+ .canvas-settings {
123
73
  display: flex;
124
- justify-content: space-between;
125
- margin-bottom: 5px;
74
+ gap: 20px;
75
+ }
126
76
 
127
- p {
128
- margin: 0;
129
- padding: 0;
77
+ .settings-wrapper {
78
+ display: grid;
79
+ //grid-template-rows: 50% 1fr;
80
+ gap: 20px;
81
+ .settings-header-wrapper {
82
+ display: flex;
83
+ justify-content: space-between;
84
+ align-items: center;
85
+ flex-wrap: wrap;
130
86
  }
131
-
132
- button {
87
+ .settings-header-title {
133
88
  display: flex;
134
- justify-content: center;
135
89
  align-items: center;
136
- margin: 0 0 0 10px;
90
+ gap: 10px;
91
+ font-weight: bold;
92
+ font-size: 16px;
93
+ }
94
+ .settings-section {
95
+ display: flex;
96
+ gap: 20px;
97
+ }
98
+ .properties-wrapper {
99
+ display: flex;
100
+ gap: 20px;
101
+ .property-wrapper {
102
+ flex-basis: 100%;
103
+ }
104
+ }
105
+ .properties-options-wrapper {
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: space-between;
109
+ }
110
+ ::ng-deep .info-icon {
111
+ width: 15px;
112
+ height: 15px;
137
113
  cursor: pointer;
138
- color: #5b6875;
139
- background: #fff;
140
- border: 2px solid #5b6875;
114
+ border: 3px solid $hd-color-border-dark;
141
115
  border-radius: 50%;
142
- box-sizing: border-box;
143
- padding: 0;
144
- height: 22px;
145
- width: 22px;
146
- font-size: 18px;
147
-
148
- svg [fill] {
149
- fill: #5b6875;
150
- }
151
-
152
- &:hover {
153
- background: #da9803;
154
- color: #fff;
116
+ svg { // for fontawesome icons
117
+ fill: $hd-color-border-dark;
155
118
  }
156
- }
157
-
158
- .button-as-link {
159
- color: #da9803;
160
- border: none;
161
- width: 100%;
162
- height: 100%;
163
- font-size: 14px;
164
- position: relative;
165
- top: -15px;
166
-
167
- ::ng-deep mat-icon {
168
- width: 25px;
169
- height: 25px;
170
- position: relative;
171
- top: 8px;
172
-
173
- svg {
174
- path {
175
- fill: #da9803;
176
- }
177
- }
119
+ & [fill] { // for own icons
120
+ fill: $hd-color-border-dark;
178
121
  }
179
-
180
122
  &:hover {
181
- background: none;
182
- color: #da9803;
123
+ border: 3px solid $hd-color-main;
124
+ svg { // for fontawesome icons
125
+ fill: $hd-color-main;
126
+ }
127
+ & [fill] { // for own icons
128
+ fill: $hd-color-main;
129
+ }
183
130
  }
184
131
  }
185
132
  }
186
- }
187
-
188
- .error-container {
189
- position: relative;
190
- padding: .75rem 1.25rem;
191
- margin-bottom: 1rem;
192
- border: 1px solid #f5c6cb;
193
- border-radius: .25rem;
194
- color: #721c24;
195
- background-color: #f8d7da;
196
- max-width: 190px;
197
- }
198
-
199
- .exportButton, .exportButtonDark {
200
- display: inline-block !important;
201
- margin-right: 10px;
202
- }
203
-
204
- .exportButtonDark {
205
- background: #5b6875;
206
- border-color: #5b6875;
207
-
208
- &:hover {
209
- background: #5b6875;
210
- color: #fff;
211
- }
212
- }
213
-
214
- .model-close-preview {
215
- text-align: right;
216
- cursor: pointer;
217
- }
218
-
219
- .model-error-background {
220
- position: absolute;
221
- // make sure it fits the mat-dialog
222
- top: -52px;
223
- right: -24px;
224
- bottom: -24px;
225
- left: -24px;
226
- z-index: 99;
227
- background: rgba(0, 0, 0, 0.6);
228
- }
229
-
230
- .model-error-container {
231
- position: relative;
232
- background: #fff;
233
- box-sizing: border-box;
234
- padding: 10px 25px;
235
- border: 1px solid #5b6875;
236
- top: 30%;
237
- left: 50%;
238
- width: 400px;
239
- margin-left: -200px;
240
-
241
- .model-error-header {
242
- display: flex;
243
- justify-content: space-between;
244
- }
245
- }
246
-
247
- :host {
248
- ::ng-deep .mat-mdc-form-field-wrapper {
249
- padding-bottom: 0;
250
- border: 1px solid #5b6875;
251
- border-radius: 4px;
252
- }
253
-
254
- ::ng-deep .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-infix {
255
- padding: 0;
256
- border: none;
257
- }
258
- /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
259
- ::ng-deep .mat-select-value {
260
- padding-left: 5px;
133
+ ::ng-deep .co-input-checkbox {
134
+ .checkbox {
135
+ border-radius: 5px;
136
+ }
137
+ .label {
138
+ user-select: none;
139
+ }
140
+ .checkbox.checked {
141
+ border-color: $hd-color-main;
142
+ background-color: $hd-color-main;
143
+ }
261
144
  }
262
-
263
- ::ng-deep .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-underline {
264
- height: 0;
145
+ .reset-button {
146
+ font-size: 16px;
147
+ background: white;
148
+ border: 1px solid $hd-color-border;
149
+ color: $hd-color-font;
150
+ ::ng-deep .co-icon {
151
+ height: 50%;
152
+ }
265
153
  }
266
- /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
267
- ::ng-deep .mat-select-trigger {
268
- line-height: 36px;
154
+ .canvas-container {
155
+ width: 100%;
156
+ height: 100%;
157
+ border-radius: 10px;
158
+ overflow: hidden;
159
+ max-height: 500px;
160
+ > * {
161
+ width: 100%;
162
+ height: 100%;
163
+ }
269
164
  }
270
-
271
- ::ng-deep mat-icon {
272
- width: 18px;
273
- height: 18px;
274
-
275
- svg {
276
- path {
277
- fill: #5b6875;
165
+ .model-preview-button-wrapper {
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 20px;
169
+ justify-content: center;
170
+ border-color: $hd-color-border;
171
+ border-width: 1px 0 0 0;
172
+ border-style: solid;
173
+ margin-top: 20px;
174
+ padding: 20px;
175
+ .preview-cancel-button {
176
+ color: $hd-color-font;
177
+ background: white;
178
+ border: 1px solid $hd-color-border;
179
+ }
180
+ .preview-save-button {
181
+ background: $hd-color-main;
182
+ ::ng-deep .co-icon {
183
+ svg { // for fontawesome icons
184
+ fill: white;
185
+ }
186
+ & [fill] { // for own icons
187
+ fill: white;
188
+ }
278
189
  }
279
190
  }
280
191
  }
281
- /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version.*/
282
- ::ng-deep .mat-slide-toggle-content {
283
- width: calc(100% - 36px);
284
- min-width: 300px;
285
- }
286
192
  }
287
-
288
-
289
-
package/app/shared/upload-model-dialog/upload-model-dialog.component.scss CHANGED
@@ -1,11 +1,12 @@
1
1
  @import "../../../style/variables";
2
2
  :host {
3
+ color: $hd-color-font;
3
4
  .dialog-wrapper {
4
5
  display: flex;
5
6
  flex-direction: column;
6
7
  width: 100%;
7
- height: 90vh;
8
- max-height: 90vh;
8
+ height: 100%;
9
+ //max-height: 90vh;
9
10
  overflow: hidden;
10
11
  }
11
12
  .header {
@@ -14,14 +15,27 @@
14
15
  column-gap: 10px;
15
16
  align-items: center;
16
17
  height: 70px;
18
+ border-bottom: 1px solid $hd-color-border;
19
+ margin-bottom: 20px;
20
+ }
21
+ .tab-wrapper {
22
+ display: flex;
23
+ align-self: flex-end;
24
+ padding: 0 20px;
17
25
  }
18
26
  .tab {
19
- border-radius: 10px;
27
+ display: flex;
28
+ align-items: center;
20
29
  padding: 10px 15px;
21
30
  cursor: pointer;
31
+ gap: $hd-gap-default;
32
+ opacity: 0.5;
33
+ text-transform: uppercase;
22
34
  &.active {
23
- color: white;
24
- background: $hd-color-active-dark;
35
+ opacity: 1;
36
+ border-bottom: 2px solid $hd-color-main;
37
+ //color: white;
38
+ //background: $hd-color-active-dark;
25
39
  }
26
40
  }
27
41
  .content {
@@ -35,23 +49,24 @@
35
49
  }
36
50
  .tab-content {
37
51
  width: 50%;
38
- height: 100%;
52
+ //height: 100%;
39
53
  min-height: 0;
40
54
  overflow: auto;
41
55
  flex: 0 0 50%;
42
56
  box-sizing: border-box;
57
+ padding: 20px;
43
58
  }
44
59
  .content-wrapper {
45
60
  min-height: 0;
46
61
  box-sizing: border-box;
47
62
  }
48
-
49
- .rp-model-preview {
50
- position: fixed;
51
- background: white;
52
- top: 50%;
53
- left: 50%;
54
- transform: translate(-50%, -50%);
55
- z-index: 10001;
56
- }
63
+ }
64
+ #rp_model_preview {
65
+ position: fixed;
66
+ background: white;
67
+ top: 50%;
68
+ left: 50%;
69
+ transform: translate(-50%, -50%);
70
+ z-index: 10001;
71
+ padding: 20px;
57
72
  }
package/assets/icons/arrow_up.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d=""/><path d="M337 71L320 54L303 71L167 207L150 224L183.9 257.9L200.9 240.9L295.9 145.9L295.9 416L343.9 416L343.9 145.9L438.9 240.9L455.9 257.9L489.8 224L472.8 207L336.8 71zM144 408L144 384L96 384L96 576L544 576L544 384L496 384L496 528L144 528L144 408z"/></svg>
package/assets/icons/crosshair_regular_full.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M320 48C333.3 48 344 58.7 344 72L344 97.3C448.5 108.4 531.6 191.5 542.7 296L568 296C581.3 296 592 306.7 592 320C592 333.3 581.3 344 568 344L542.7 344C531.6 448.5 448.5 531.6 344 542.7L344 568C344 581.3 333.3 592 320 592C306.7 592 296 581.3 296 568L296 542.7C191.5 531.6 108.4 448.5 97.3 344L72 344C58.7 344 48 333.3 48 320C48 306.7 58.7 296 72 296L97.3 296C108.4 191.5 191.5 108.4 296 97.3L296 72C296 58.7 306.7 48 320 48zM145.6 344C156.3 422 218 483.7 296 494.4L296 472C296 458.7 306.7 448 320 448C333.3 448 344 458.7 344 472L344 494.4C422 483.7 483.7 422 494.4 344L472 344C458.7 344 448 333.3 448 320C448 306.7 458.7 296 472 296L494.4 296C483.7 218 422 156.3 344 145.6L344 168C344 181.3 333.3 192 320 192C306.7 192 296 181.3 296 168L296 145.6C218 156.3 156.3 218 145.6 296L168 296C181.3 296 192 306.7 192 320C192 333.3 181.3 344 168 344L145.6 344zM320 288C337.7 288 352 302.3 352 320C352 337.7 337.7 352 320 352C302.3 352 288 337.7 288 320C288 302.3 302.3 288 320 288z"/></svg>
package/assets/icons/cube_regular.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M312.3 103.1C317.3 100.2 323.3 100.2 328.3 103.1L488.1 195.4L320.3 292.3L152.5 195.4L312.3 103.1zM128.5 237L296.3 333.9L296.3 527.7L136.5 435.4C131.5 432.5 128.5 427.3 128.5 421.5L128.5 236.9zM344.3 527.7L344.3 333.9L512.1 237L512.1 421.6C512.1 427.3 509.1 432.6 504.1 435.5L344.3 527.7zM352.3 61.6C332.5 50.2 308.1 50.2 288.3 61.6L112.5 163C92.7 174.4 80.5 195.6 80.5 218.4L80.5 421.4C80.5 444.3 92.7 465.4 112.5 476.8L288.3 578.5C308.1 589.9 332.5 589.9 352.3 578.5L528.2 477C548 465.6 560.2 444.4 560.2 421.6L560.2 218.6C560.2 195.7 548 174.6 528.2 163.2L352.3 61.5z"/></svg>
package/assets/icons/sliders_solid_full.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M96 128C78.3 128 64 142.3 64 160C64 177.7 78.3 192 96 192L182.7 192C195 220.3 223.2 240 256 240C288.8 240 317 220.3 329.3 192L544 192C561.7 192 576 177.7 576 160C576 142.3 561.7 128 544 128L329.3 128C317 99.7 288.8 80 256 80C223.2 80 195 99.7 182.7 128L96 128zM96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L342.7 352C355 380.3 383.2 400 416 400C448.8 400 477 380.3 489.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L489.3 288C477 259.7 448.8 240 416 240C383.2 240 355 259.7 342.7 288L96 288zM96 448C78.3 448 64 462.3 64 480C64 497.7 78.3 512 96 512L150.7 512C163 540.3 191.2 560 224 560C256.8 560 285 540.3 297.3 512L544 512C561.7 512 576 497.7 576 480C576 462.3 561.7 448 544 448L297.3 448C285 419.7 256.8 400 224 400C191.2 400 163 419.7 150.7 448L96 448z"/></svg>