Skip to content

Commit 57a075d

Browse files
efuxkyubisation
efux
authored and
kyubisation
committed
feat(business/datepicker): expose datepicker component for business (#47)
1 parent b7ec7c0 commit 57a075d

File tree

8 files changed

+188
-100
lines changed

8 files changed

+188
-100
lines changed

‎projects/sbb-esta/angular-business/src/lib/datepicker/datepicker.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from '../../../../angular-public/src/lib/datepicker/datepicker';

‎projects/sbb-esta/angular-business/src/public-api.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
*/
44
export * from './lib/autocomplete/autocomplete';
55
export * from './lib/button/button';
6+
export * from './lib/datepicker/datepicker';
67
export * from './lib/field/field';
78
export * from './lib/radio-button/radio-button';
89
export * from './lib/select/select';

‎projects/sbb-esta/angular-public/src/lib/datepicker/datepicker-content/datepicker-content.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
.sbb-datepicker-content {
88
position: relative;
99
width: 100%;
10-
top: pxToEm(17);
10+
top: pxToEm($datePickerContentTop);
1111

1212
.sbb-calendar {
1313
@include datePickerCalendar();

‎projects/sbb-esta/angular-public/src/lib/datepicker/styles/_datepicker-calendar.scss

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
@import 'common';
22

33
@mixin datePickerPopup() {
4-
@include mq($from: desktop4k) {
5-
font-size: pxToRem(23);
6-
}
4+
@include publicOnly() {
5+
@include mq($from: desktop4k) {
6+
font-size: pxToRem(23);
7+
}
78

8-
@include mq($from: desktop5k) {
9-
font-size: pxToRem(30);
9+
@include mq($from: desktop5k) {
10+
font-size: pxToRem(30);
11+
}
1012
}
1113

1214
&-arrow {
@@ -42,12 +44,14 @@
4244
&-header {
4345
border-bottom: 1px solid $sbbColorPlatinum;
4446

45-
@include mq($from: desktop4k) {
46-
border-bottom-width: toPx(1 * $scalingFactor4k);
47-
}
47+
@include publicOnly() {
48+
@include mq($from: desktop4k) {
49+
border-bottom-width: toPx(1 * $scalingFactor4k);
50+
}
4851

49-
@include mq($from: desktop5k) {
50-
border-bottom-width: toPx(1 * $scalingFactor5k);
52+
@include mq($from: desktop5k) {
53+
border-bottom-width: toPx(1 * $scalingFactor5k);
54+
}
5155
}
5256
}
5357
}
@@ -60,6 +64,7 @@
6064

6165
&-months,
6266
&-years {
67+
height: $datePickerCalendarHeaderHeight;
6368
flex: 1 0 50%;
6469
text-align: center;
6570
position: relative;
@@ -71,17 +76,19 @@
7176
display: block;
7277
position: absolute;
7378
width: 0;
74-
height: calc(100% - #{pxToEm(2)});
75-
top: pxToEm(2);
79+
height: calc(100% - #{pxToEm($datePickerCalendarBorderWidth)});
80+
top: pxToEm($datePickerCalendarBorderWidth);
7681
right: 0;
7782
border-right: 1px solid $sbbColorPlatinum;
7883

79-
@include mq($from: desktop4k) {
80-
border-right-width: toPx(1 * $scalingFactor4k);
81-
}
84+
@include publicOnly() {
85+
@include mq($from: desktop4k) {
86+
border-right-width: toPx(1 * $scalingFactor4k);
87+
}
8288

83-
@include mq($from: desktop5k) {
84-
border-right-width: toPx(1 * $scalingFactor5k);
89+
@include mq($from: desktop5k) {
90+
border-right-width: toPx(1 * $scalingFactor5k);
91+
}
8592
}
8693
}
8794
}
@@ -90,11 +97,13 @@
9097
&-right-arrow {
9198
width: pxToEm($defaultPickerIconSize);
9299
height: $datePickerCalendarHeaderHeight;
93-
margin-top: pxToEm(2);
100+
margin-top: pxToEm($datePickerCalendarBorderWidth);
94101
vertical-align: middle;
95102

96-
@include mq($from: tabletPortrait) {
97-
width: pxToEm($defaultPickerIconSize) + pxToEm(16);
103+
@include publicOnly() {
104+
@include mq($from: tabletPortrait) {
105+
width: pxToEm($defaultPickerIconSize) + pxToEm(16);
106+
}
98107
}
99108

100109
&[disabled] {
@@ -117,10 +126,10 @@
117126
}
118127

119128
&-label {
120-
font-size: pxToEm(21);
129+
font-size: $datePickerCalendarHeaderLabelFontSize;
121130
color: $datePickerCalendarHeaderColor;
122131
font-family: $fontSbbLight;
123-
line-height: 3.4;
132+
line-height: $datePickerCalendarHeaderLabelLineHeight;
124133
}
125134

126135
&-right-arrow {
@@ -138,7 +147,7 @@
138147

139148
td,
140149
th {
141-
color: $sbbColorGrey;
150+
color: $datePickerCalendarTableColor;
142151
}
143152

144153
&-header {
@@ -151,12 +160,14 @@
151160

152161
border-bottom: 1px solid $sbbColorPlatinum;
153162

154-
@include mq($from: desktop4k) {
155-
border-bottom-width: toPx(1 * $scalingFactor4k);
156-
}
163+
@include publicOnly() {
164+
@include mq($from: desktop4k) {
165+
border-bottom-width: toPx(1 * $scalingFactor4k);
166+
}
157167

158-
@include mq($from: desktop5k) {
159-
border-bottom-width: toPx(1 * $scalingFactor5k);
168+
@include mq($from: desktop5k) {
169+
border-bottom-width: toPx(1 * $scalingFactor5k);
170+
}
160171
}
161172
}
162173

@@ -266,13 +277,13 @@
266277

267278
&.sbb-datepicker-with-arrows {
268279
.sbb-datepicker-popup-arrow {
269-
left: pxToEm($withArrowsToggleLeftOffset);
280+
left: pxToEm($datePickerToggleWithArrowsWrapperArrowLeftOffset);
270281
}
271282
}
272283

273284
.sbb-datepicker-content {
274285
top: auto;
275-
bottom: pxToEm(17);
286+
bottom: pxToEm($datePickerContentTop);
276287

277288
.sbb-calendar {
278289
box-shadow: $datePickerRevertCalendarBoxShadow;

‎projects/sbb-esta/angular-public/src/lib/datepicker/styles/_datepicker-controls.scss

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,28 @@
1717
@include absoluteCenterY();
1818
@extend %pickerIconsSize;
1919

20-
@include mq($from: desktop4k) {
21-
left: toPx($defaultToggleLeftOffset * $scalingFactor4k);
22-
}
20+
@include publicOnly() {
21+
@include mq($from: desktop4k) {
22+
left: toPx($defaultToggleLeftOffset * $scalingFactor4k);
23+
}
2324

24-
@include mq($from: desktop5k) {
25-
left: toPx($defaultToggleLeftOffset * $scalingFactor5k);
25+
@include mq($from: desktop5k) {
26+
left: toPx($defaultToggleLeftOffset * $scalingFactor5k);
27+
}
2628
}
2729
}
2830

2931
&.sbb-datepicker-arrows-enabled > .sbb-datepicker-toggle {
3032
left: toPx($withArrowsToggleLeftOffset);
3133

32-
@include mq($from: desktop4k) {
33-
left: toPx($withArrowsToggleLeftOffset * $scalingFactor4k);
34-
}
34+
@include publicOnly() {
35+
@include mq($from: desktop4k) {
36+
left: toPx($withArrowsToggleLeftOffset * $scalingFactor4k);
37+
}
3538

36-
@include mq($from: desktop5k) {
37-
left: toPx($withArrowsToggleLeftOffset * $scalingFactor5k);
39+
@include mq($from: desktop5k) {
40+
left: toPx($withArrowsToggleLeftOffset * $scalingFactor5k);
41+
}
3842
}
3943
}
4044

@@ -45,24 +49,28 @@
4549
&-left {
4650
left: toPx($withArrowsLeftArrowOffset);
4751

48-
@include mq($from: desktop4k) {
49-
left: toPx($withArrowsLeftArrowOffset * $scalingFactor4k);
50-
}
52+
@include publicOnly() {
53+
@include mq($from: desktop4k) {
54+
left: toPx($withArrowsLeftArrowOffset * $scalingFactor4k);
55+
}
5156

52-
@include mq($from: desktop5k) {
53-
left: toPx($withArrowsLeftArrowOffset * $scalingFactor5k);
57+
@include mq($from: desktop5k) {
58+
left: toPx($withArrowsLeftArrowOffset * $scalingFactor5k);
59+
}
5460
}
5561
}
5662

5763
&-right {
5864
right: toPx($withArrowsRightArrowOffset);
5965

60-
@include mq($from: desktop4k) {
61-
right: toPx($withArrowsRightArrowOffset * $scalingFactor4k);
62-
}
66+
@include publicOnly() {
67+
@include mq($from: desktop4k) {
68+
right: toPx($withArrowsRightArrowOffset * $scalingFactor4k);
69+
}
6370

64-
@include mq($from: desktop5k) {
65-
right: toPx($withArrowsRightArrowOffset * $scalingFactor5k);
71+
@include mq($from: desktop5k) {
72+
right: toPx($withArrowsRightArrowOffset * $scalingFactor5k);
73+
}
6674
}
6775
}
6876
}

‎projects/sbb-esta/angular-public/src/lib/datepicker/styles/_datepicker-input.scss

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,48 +11,54 @@
1111
&.sbb-datepicker-arrows-enabled > .sbb-date-input {
1212
padding-left: pxToEm($dateInputOneIconPadding - $dateInputBorderWidth);
1313

14-
@include mq($from: desktop4k) {
15-
padding-left: pxToEm(
16-
$dateInputOneIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
17-
);
18-
}
14+
@include publicOnly() {
15+
@include mq($from: desktop4k) {
16+
padding-left: pxToEm(
17+
$dateInputOneIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
18+
);
19+
}
1920

20-
@include mq($from: desktop5k) {
21-
padding-left: pxToEm(
22-
$dateInputOneIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
23-
);
21+
@include mq($from: desktop5k) {
22+
padding-left: pxToEm(
23+
$dateInputOneIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
24+
);
25+
}
2426
}
2527
}
2628

2729
&.sbb-datepicker-arrows-enabled > .sbb-date-input {
2830
padding-right: pxToEm($dateInputOneIconPadding - $dateInputBorderWidth);
2931

30-
@include mq($from: desktop4k) {
31-
padding-right: pxToEm(
32-
$dateInputOneIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
33-
);
34-
}
32+
@include publicOnly() {
33+
@include mq($from: desktop4k) {
34+
padding-right: pxToEm(
35+
$dateInputOneIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
36+
);
37+
}
3538

36-
@include mq($from: desktop5k) {
37-
padding-right: pxToEm(
38-
$dateInputOneIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
39-
);
39+
@include mq($from: desktop5k) {
40+
padding-right: pxToEm(
41+
$dateInputOneIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
42+
);
43+
}
4044
}
4145
}
4246

4347
&.sbb-datepicker-arrows-enabled.sbb-datepicker-toggle-enabled > .sbb-date-input {
4448
padding-left: pxToEm($dateInputTwoIconPadding - $dateInputBorderWidth);
4549

46-
@include mq($from: desktop4k) {
47-
padding-left: pxToEm(
48-
$dateInputTwoIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
49-
);
50-
}
50+
@include publicOnly() {
51+
@include mq($from: desktop4k) {
52+
padding-left: pxToEm(
53+
$dateInputTwoIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
54+
);
55+
}
5156

52-
@include mq($from: desktop5k) {
53-
padding-left: pxToEm(
54-
$dateInputTwoIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
55-
);
57+
@include mq($from: desktop5k) {
58+
padding-left: pxToEm(
59+
$dateInputTwoIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
60+
);
61+
}
5662
}
5763
}
5864
}

0 commit comments

Comments
 (0)