@kms-ngx-ui/presentational 14.1.3 → 14.2.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 (13) hide show
  1. package/esm2020/lib/services/viewport.service.mjs +44 -11
  2. package/esm2020/lib/ui/dropdown-from-data/dropdown-from-data.component.mjs +6 -4
  3. package/esm2020/lib/ui/image-slider/image-slider.component.mjs +3 -3
  4. package/esm2020/lib/ui/kms-accordion-item/kms-accordion-item.component.mjs +8 -8
  5. package/fesm2015/kms-ngx-ui-presentational.mjs +58 -23
  6. package/fesm2015/kms-ngx-ui-presentational.mjs.map +1 -1
  7. package/fesm2020/kms-ngx-ui-presentational.mjs +58 -23
  8. package/fesm2020/kms-ngx-ui-presentational.mjs.map +1 -1
  9. package/lib/services/viewport.service.d.ts +31 -5
  10. package/lib/ui/dropdown-from-data/dropdown-from-data.component.d.ts +3 -2
  11. package/lib/ui/kms-accordion-item/kms-accordion-item.component.d.ts +2 -2
  12. package/package.json +1 -1
  13. package/src/lib/ui/image-slider/image-slider.component.scss +209 -202
package/lib/services/viewport.service.d.ts CHANGED
@@ -1,6 +1,12 @@
1
1
  import { OnDestroy } from '@angular/core';
2
2
  import { Observable } from 'rxjs';
3
3
  import * as i0 from "@angular/core";
4
+ export declare class WindowDimensions {
5
+ constructor(data?: Partial<WindowDimensions>);
6
+ Height: number;
7
+ Width: number;
8
+ Orientation: "landscape" | "portrait";
9
+ }
4
10
  export declare class SimpleBreakpoint {
5
11
  constructor(data?: Partial<SimpleBreakpoint>);
6
12
  Number: number;
@@ -8,7 +14,7 @@ export declare class SimpleBreakpoint {
8
14
  MaximumPixels: number;
9
15
  }
10
16
  export declare class Breakpoint {
11
- constructor(data?: Partial<SimpleBreakpoint>);
17
+ constructor(data?: Partial<Breakpoint>);
12
18
  Number: number;
13
19
  Name: string;
14
20
  Low: number;
@@ -29,11 +35,11 @@ export declare class ViewportService implements OnDestroy {
29
35
  private isBrowser;
30
36
  constructor(platformId: Object, document: Document);
31
37
  /**
32
- * Get window height
38
+ * Get document height
33
39
  */
34
40
  getDocumentHeight(): number;
35
41
  /**
36
- * Get window width
42
+ * Get document width
37
43
  */
38
44
  getDocumentWidth(): number;
39
45
  /**
@@ -56,9 +62,25 @@ export declare class ViewportService implements OnDestroy {
56
62
  getCurrentViewPortObject(): Breakpoint;
57
63
  /**
58
64
  * Returns the current viewport as number
65
+ * @deprecated use getCurrentViewPortDimensions instead
59
66
  * @returns string
60
67
  */
61
68
  getCurrentViewPortNumber(): number;
69
+ /**
70
+ * Returns the current viewport width as number
71
+ * @returns string
72
+ */
73
+ getCurrentViewPortWidth(): number;
74
+ /**
75
+ * Returns the current viewport as number
76
+ * @returns string
77
+ */
78
+ getCurrentViewPortHeight(): number;
79
+ /**
80
+ * Returns the current viewport dimensions
81
+ * @returns string
82
+ */
83
+ getCurrentViewPortDimensions(): WindowDimensions;
62
84
  /**
63
85
  * Provides mq´s as string
64
86
  */
@@ -85,11 +107,15 @@ export declare class ViewportService implements OnDestroy {
85
107
  /**
86
108
  * If orientation is portrait
87
109
  */
88
- isPortrait(): boolean;
110
+ isPortrait(): boolean | undefined;
89
111
  /**
90
112
  * If orientation is landscape
91
113
  */
92
- isLandscape(): boolean;
114
+ isLandscape(): boolean | undefined;
115
+ /**
116
+ * Get screen orientation (portrait/landscape)
117
+ */
118
+ getOrientationAsString(): "portrait" | "landscape";
93
119
  /**
94
120
  * If mobile breakpoint (below tablet)
95
121
  */
package/lib/ui/dropdown-from-data/dropdown-from-data.component.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { OnInit, OnChanges, SimpleChanges, Renderer2 } from '@angular/core';
2
- import { ControlValueAccessor, UntypedFormBuilder } from '@angular/forms';
2
+ import { ControlValueAccessor, UntypedFormBuilder, AbstractControl } from '@angular/forms';
3
3
  import { FormControlParentComponent } from '../../parent-components/form-control.component';
4
4
  import * as i0 from "@angular/core";
5
5
  /**
@@ -20,6 +20,7 @@ export declare class DropdownFromDataComponent extends FormControlParentComponen
20
20
  required: boolean;
21
21
  useEnumIndexAsValue: boolean;
22
22
  multiple: boolean;
23
+ control?: AbstractControl;
23
24
  keys: any[];
24
25
  values: any[];
25
26
  Object: ObjectConstructor;
@@ -42,7 +43,7 @@ export declare class DropdownFromDataComponent extends FormControlParentComponen
42
43
  setDisplayKey(key: any): any;
43
44
  valueChanged(value: any): void;
44
45
  static ɵfac: i0.ɵɵFactoryDeclaration<DropdownFromDataComponent, never>;
45
- static ɵcmp: i0.ɵɵComponentDeclaration<DropdownFromDataComponent, "kms-dropdown-from-data", never, { "optionsEnum": "optionsEnum"; "optionsPlainArray": "optionsPlainArray"; "optionsObjArray": "optionsObjArray"; "mapKey": "mapKey"; "mapValue": "mapValue"; "hasNullOption": "hasNullOption"; "translation": "translation"; "placeholder": "placeholder"; "label": "label"; "required": "required"; "useEnumIndexAsValue": "useEnumIndexAsValue"; "multiple": "multiple"; }, {}, never, never, false>;
46
+ static ɵcmp: i0.ɵɵComponentDeclaration<DropdownFromDataComponent, "kms-dropdown-from-data", never, { "optionsEnum": "optionsEnum"; "optionsPlainArray": "optionsPlainArray"; "optionsObjArray": "optionsObjArray"; "mapKey": "mapKey"; "mapValue": "mapValue"; "hasNullOption": "hasNullOption"; "translation": "translation"; "placeholder": "placeholder"; "label": "label"; "required": "required"; "useEnumIndexAsValue": "useEnumIndexAsValue"; "multiple": "multiple"; "control": "control"; }, {}, never, never, false>;
46
47
  }
47
48
  /**
48
49
  * Interface that defines the translation object in template
package/lib/ui/kms-accordion-item/kms-accordion-item.component.d.ts CHANGED
@@ -9,14 +9,14 @@ import * as i0 from "@angular/core";
9
9
  */
10
10
  export declare class KMSAccordionItemComponent implements OnInit {
11
11
  sanitizer: DomSanitizer;
12
- itemTitle: string;
13
12
  itemTitleTrustHtml: SafeHtml | undefined;
14
13
  showAsCard: boolean;
15
14
  isSmall: boolean;
16
15
  expanded: boolean;
16
+ set itemTitle(val: string);
17
17
  panelOpenState: boolean;
18
18
  constructor(sanitizer: DomSanitizer);
19
19
  ngOnInit(): void;
20
20
  static ɵfac: i0.ɵɵFactoryDeclaration<KMSAccordionItemComponent, never>;
21
- static ɵcmp: i0.ɵɵComponentDeclaration<KMSAccordionItemComponent, "kms-accordion-item", never, { "itemTitle": "itemTitle"; "showAsCard": "showAsCard"; "isSmall": "isSmall"; "expanded": "expanded"; }, {}, never, ["[itemTitleElement]", "*"], false>;
21
+ static ɵcmp: i0.ɵɵComponentDeclaration<KMSAccordionItemComponent, "kms-accordion-item", never, { "showAsCard": "showAsCard"; "isSmall": "isSmall"; "expanded": "expanded"; "itemTitle": "itemTitle"; }, {}, never, ["[itemTitleElement]", "*"], false>;
22
22
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kms-ngx-ui/presentational",
3
- "version": "14.1.3",
3
+ "version": "14.2.0",
4
4
  "peerDependencies": {
5
5
  "@angular/cdk": "14.2.7",
6
6
  "@angular/common": "14.3.0",
package/src/lib/ui/image-slider/image-slider.component.scss CHANGED
@@ -1,220 +1,227 @@
1
1
  @mixin image-slider-theme() {
2
- // TODO
3
- $responsive-breakpoint1: 996px;
4
- $responsive-breakpoint-1024: 1024px;
5
- $responsive-breakpoint2: 1200px;
6
- $responsive-breakpoint3: 1400px;
7
- $color-secondary: var(--primaryColor);
8
- $color-disabled: var(--gray04);
9
- $color-image-background: white;
10
- $img-size: 796px;
11
-
12
- .all-wrapper{
13
- position: relative;
2
+ // TODO
3
+ $responsive-breakpoint1: 996px;
4
+ $responsive-breakpoint-1024: 1024px;
5
+ $responsive-breakpoint2: 1200px;
6
+ $responsive-breakpoint3: 1400px;
7
+ $color-secondary: var(--primaryColor);
8
+ $color-disabled: var(--gray04);
9
+ $color-image-background: white;
10
+ $img-size: 796px;
11
+
12
+ .all-wrapper {
13
+ position: relative;
14
+
15
+ .default-image {
16
+ visibility: hidden;
17
+ }
18
+ }
14
19
 
15
- .default-image {
20
+ .swiper-bigImage {
21
+ @include backgroundContains();
22
+ background-color: $color-image-background;
16
23
 
17
- visibility: hidden;
18
- }
19
- }
24
+ width: $img-size;
25
+ height: auto;
26
+ padding-top: 75%; /* 4:3 Aspect Ratio */
27
+ position: relative;
20
28
 
21
- .swiper-bigImage{
22
- @include backgroundContains();
23
- background-color: $color-image-background;
29
+ @media (max-width: $responsive-breakpoint3) {
30
+ width: 100%;
31
+ }
32
+ }
24
33
 
25
- width: $img-size;
26
- height: auto;
27
- padding-top: 75%; /* 4:3 Aspect Ratio */
28
- position: relative;
29
-
30
- @media (max-width: $responsive-breakpoint3) {
31
- width: 100%;
32
- }
34
+ .swiper-holder {
35
+ margin: 18px 0;
36
+ width: 796px;
37
+ @media (max-width: $responsive-breakpoint3) {
38
+ width: 100%;
33
39
  }
34
40
 
35
- .swiper-holder{
36
- margin: 18px 0;
37
- width: 796px;
38
- @media (max-width: $responsive-breakpoint3) {
39
- width: 100%;
41
+ .swiper-button {
42
+ &-next,
43
+ &-prev,
44
+ &-next2,
45
+ &-prev2 {
46
+ position: absolute;
47
+ width: 10px;
48
+ height: 20px;
49
+ top: calc((100% - 140px) / 2);
50
+ transform: translate(0, 50%);
51
+ color: $color-secondary;
52
+ &.swiper-button-disabled {
53
+ display: none;
40
54
  }
41
-
42
- .swiper-button{
43
- &-next, &-prev,
44
- &-next2, &-prev2{
45
- position: absolute;
46
- width: 10px;
47
- height: 20px;
48
- top: calc((100% - 140px) / 2);
49
- transform: translate(0, 50%);
50
- color: $color-secondary;
51
- &.swiper-button-disabled{
52
- display: none;
53
- }
54
- &:after{
55
- font-size: 20px;
56
- }
57
- }
58
-
59
- &-next,
60
- &-next2{
61
- right: 20px;
62
- }
63
- &-prev,
64
- &-prev2{
65
- left: 20px;
66
- }
67
-
68
- &-next, &-prev{
69
- top: auto;
70
- bottom: calc((140px)/ 2);
71
- }
72
-
73
- @media (max-width: $responsive-breakpoint2) {
74
- &-next{
75
- right: 20px;
76
- }
77
- &-prev{
78
- left: 20px;
79
- }
80
- }
81
- @media (max-width: $responsive-breakpoint-1024) {
82
-
83
- &-next{
84
- right: 0;
85
- }
86
- &-prev{
87
- left: 0;
88
- }
89
- }
90
- @media (max-width: $responsive-breakpoint1) {
91
- &-next{
92
- right: 10vw;
93
- }
94
- &-prev{
95
- left: 10vw;
96
- }
97
- }
55
+ &:after {
56
+ font-size: 20px;
57
+ }
58
+ }
59
+
60
+ &-next,
61
+ &-prev {
62
+ color: $color-secondary !important;
63
+ background: transparent;
64
+ border: none;
65
+ }
66
+
67
+ &-next,
68
+ &-next2 {
69
+ right: 20px;
70
+ }
71
+ &-prev,
72
+ &-prev2 {
73
+ left: 20px;
74
+ }
75
+
76
+ &-next,
77
+ &-prev {
78
+ top: auto;
79
+ bottom: calc((140px) / 2);
80
+ }
81
+
82
+ @media (max-width: $responsive-breakpoint2) {
83
+ &-next {
84
+ right: 20px;
85
+ }
86
+ &-prev {
87
+ left: 20px;
98
88
  }
89
+ }
90
+ @media (max-width: $responsive-breakpoint-1024) {
91
+ &-next {
92
+ right: 0;
93
+ }
94
+ &-prev {
95
+ left: 0;
96
+ }
97
+ }
98
+ @media (max-width: $responsive-breakpoint1) {
99
+ &-next {
100
+ right: 10vw;
101
+ }
102
+ &-prev {
103
+ left: 10vw;
104
+ }
105
+ }
106
+ }
107
+ }
108
+
109
+ swiper {
110
+ width: 560px;
111
+ margin: 0 auto;
112
+ position: relative;
113
+ @media (max-width: $responsive-breakpoint-1024) {
114
+ width: 400px;
115
+ }
116
+ @media (max-width: $responsive-breakpoint1) {
117
+ width: 60vw;
99
118
  }
100
119
 
101
- swiper{
102
- width: 560px;
103
- margin: 0 auto;
104
- position: relative;
105
- @media (max-width: $responsive-breakpoint-1024) {
106
- width: 400px;
107
- }
108
- @media (max-width: $responsive-breakpoint1) {
109
- width: 60vw;
110
- }
120
+ .swiper-wrapper {
121
+ display: flex;
111
122
 
112
- .swiper-wrapper {
113
- display: flex;
114
-
115
- .swiper-slide {
116
- flex-basis: 0;
117
- position: relative;
118
-
119
- .img {
120
- background-repeat: no-repeat;
121
- background-size: contain;
122
- background-position: center center;
123
-
124
- width: 158px;
125
- height: auto;
126
- padding-top: 75%; /* 4:3 Aspect Ratio */
127
-
128
- cursor: pointer;
129
- border: 1px solid #dbdbda;
130
- border-radius: var(--defaultBorderRadius);
131
- @media (max-width: $responsive-breakpoint-1024) {
132
- width: 100px;
133
- }
134
- @media (max-width: $responsive-breakpoint1) {
135
- width: 20vw;
136
- }
137
- &.active{
138
- border: 1px solid var(--grey08);
139
- background-color: var(--gray06);
140
- }
141
- }
142
-
143
- button {
144
- position: absolute;
145
- width: 15px;
146
- height: 15px;
147
- right: 5px;
148
- top: 5px;
149
- background: none;
150
-
151
- .icon{
152
- width: 15px !important;
153
- height: 15px !important;
154
-
155
- svg {
156
- width: 15px !important;
157
- height: 15px !important;
158
- }
159
- }
160
- }
161
- }
162
- .cdk-drag-preview {
163
- box-sizing: border-box;
164
- border-radius: var(--defaultBorderRadius);
165
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
166
- 0 8px 10px 1px rgba(0, 0, 0, 0.14),
167
- 0 3px 14px 2px rgba(0, 0, 0, 0.12);
168
- }
169
-
170
- .cdk-drag-placeholder {
171
- opacity: 0.3;
172
- border: 1px solid var(--grey07);
173
- background-color: var(--gray05);
174
- }
175
-
176
- .cdk-drag-animating {
177
- transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
178
- }
179
-
180
- .swiper-slide:first-child:not(.cdk-drag-disabled)
181
- {
182
- .img {
183
- border: solid var(--primaryColor);
184
- border-radius: 8px;
185
- }
186
-
187
- .default-image {
188
- visibility: visible !important;
189
- text-align: center;
190
- font: normal normal normal 14px/25px var(--fontName-text03);
191
- letter-spacing: 0.22px;
192
- color: var(--gray04);;
193
- opacity: 1;
194
- }
195
- }
196
-
197
- .swiper-wrapper.cdk-drop-list-dragging .swiper-slide:not(.cdk-drag-placeholder) {
198
- transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
199
- }
200
- }
123
+ .swiper-slide {
124
+ flex-basis: 0;
125
+ position: relative;
201
126
 
202
- .swiper-container {
203
- width: 100%;
204
- overflow-y: hidden;
205
- overflow-x: hidden;
206
- }
127
+ .img {
128
+ background-repeat: no-repeat;
129
+ background-size: contain;
130
+ background-position: center center;
131
+
132
+ width: 158px;
133
+ height: auto;
134
+ padding-top: 75%; /* 4:3 Aspect Ratio */
135
+
136
+ cursor: pointer;
137
+ border: 1px solid #dbdbda;
138
+ border-radius: var(--defaultBorderRadius);
139
+ @media (max-width: $responsive-breakpoint-1024) {
140
+ width: 100px;
141
+ }
142
+ @media (max-width: $responsive-breakpoint1) {
143
+ width: 20vw;
144
+ }
145
+ &.active {
146
+ border: 1px solid var(--grey08);
147
+ background-color: var(--gray06);
148
+ }
207
149
  }
208
150
 
209
- .cdk-drag-preview,
210
- .cdk-drag-dragging {
211
- &.swiper-slide {
212
- .default-image{
213
- visibility: hidden;
214
- }
215
- button {
216
- visibility: hidden;
151
+ button {
152
+ position: absolute;
153
+ width: 15px;
154
+ height: 15px;
155
+ right: 5px;
156
+ top: 5px;
157
+ background: none;
158
+
159
+ .icon {
160
+ width: 15px !important;
161
+ height: 15px !important;
162
+
163
+ svg {
164
+ width: 15px !important;
165
+ height: 15px !important;
217
166
  }
167
+ }
168
+ }
169
+ }
170
+ .cdk-drag-preview {
171
+ box-sizing: border-box;
172
+ border-radius: var(--defaultBorderRadius);
173
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
174
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
175
+ }
176
+
177
+ .cdk-drag-placeholder {
178
+ opacity: 0.3;
179
+ border: 1px solid var(--grey07);
180
+ background-color: var(--gray05);
181
+ }
182
+
183
+ .cdk-drag-animating {
184
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
185
+ }
186
+
187
+ .swiper-slide:first-child:not(.cdk-drag-disabled) {
188
+ .img {
189
+ border: solid var(--primaryColor);
190
+ border-radius: 8px;
191
+ }
192
+
193
+ .default-image {
194
+ visibility: visible !important;
195
+ text-align: center;
196
+ font: normal normal normal 14px/25px var(--fontName-text03);
197
+ letter-spacing: 0.22px;
198
+ color: var(--gray04);
199
+ opacity: 1;
218
200
  }
201
+ }
202
+
203
+ .swiper-wrapper.cdk-drop-list-dragging
204
+ .swiper-slide:not(.cdk-drag-placeholder) {
205
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
206
+ }
207
+ }
208
+
209
+ .swiper-container {
210
+ width: 100%;
211
+ overflow-y: hidden;
212
+ overflow-x: hidden;
213
+ }
214
+ }
215
+
216
+ .cdk-drag-preview,
217
+ .cdk-drag-dragging {
218
+ &.swiper-slide {
219
+ .default-image {
220
+ visibility: hidden;
221
+ }
222
+ button {
223
+ visibility: hidden;
224
+ }
219
225
  }
220
- }
226
+ }
227
+ }