@asd20/ui 3.2.362 → 3.2.363

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.
@@ -0,0 +1,733 @@
1
+ <template>
2
+ <div class="asd20-salary-calculator-template">
3
+ <!-- Skip Nav -->
4
+ <asd20-skip-to />
5
+
6
+ <!-- Banner Notifications -->
7
+ <client-only>
8
+ <asd20-notification-group
9
+ :notifications="activeNotificationsByType.banner"
10
+ group-type="banner"
11
+ @dismiss="$emit('dismiss-notification', $event)"
12
+ @toggle-all="$emit('toggle-all')"
13
+ />
14
+ </client-only>
15
+
16
+ <!-- Page Header -->
17
+ <asd20-page-header
18
+ id="page-header"
19
+ v-if="pageHeaderContent"
20
+ v-bind="pageHeaderContent"
21
+ :organization="organization"
22
+ :organization-options="organizationOptions"
23
+ :languageCode="languageCode"
24
+ :breadcrumb-links="breadcrumbLinks"
25
+ :publishDateTime="parentPage ? '' : publishDateTime"
26
+ :categories="parentPage ? [] : messageCategories"
27
+ v-on="$listeners"
28
+ >
29
+ <!-- Floating Notifications -->
30
+ <template slot="top">
31
+ <client-only>
32
+ <asd20-notification-group
33
+ class="asd20-notification-group--floating"
34
+ :notifications="activeNotificationsByType.floating"
35
+ :total-dismissed-notifications="totalDismissedNotifications"
36
+ group-type="floating"
37
+ @dismiss="$emit('dismiss-notification', $event)"
38
+ @toggle-all="$emit('toggle-all')"
39
+ ></asd20-notification-group>
40
+ </client-only>
41
+ </template>
42
+ </asd20-page-header>
43
+
44
+ <!-- Site Navigation -->
45
+ <asd20-site-navigation
46
+ :navigation="navigation"
47
+ :action-items="actionItems"
48
+ @update:menuOpen="$emit('update:menuOpen', $event)"
49
+ :menu-open="menuOpen"
50
+ @update:searchOpen="$emit('update:searchOpen', $event)"
51
+ :search-open="searchOpen"
52
+ :organization="organization"
53
+ :organization-options="organizationOptions"
54
+ >
55
+ </asd20-site-navigation>
56
+
57
+ <!-- Inline-Notifications -->
58
+ <client-only>
59
+ <asd20-notification-group
60
+ :notifications="activeNotificationsByType.inline"
61
+ group-type="inline"
62
+ @dismiss="$emit('dismiss-notification', $event)"
63
+ @toggle-all="$emit('toggle-all')"
64
+ ></asd20-notification-group>
65
+ </client-only>
66
+
67
+ <!-- Page Content -->
68
+ <asd20-page-content
69
+ :primary-messages="primaryMessages"
70
+ :secondary-messages="secondaryMessages"
71
+ omit-detail-links
72
+ omit-calls-to-action
73
+ >
74
+ <!-- Sidebar Widgets -->
75
+ <asd20-widgets-section
76
+ v-if="widgetsSectionProps.sidebar"
77
+ v-bind="widgetsSectionProps.sidebar"
78
+ @events-in-view="$emit('events-in-view')"
79
+ @files-in-view="$emit('files-in-view')"
80
+ @people-in-view="$emit('people-in-view')"
81
+ ></asd20-widgets-section>
82
+ </asd20-page-content>
83
+
84
+ <!-- Salary Calculator -->
85
+ <div class="salary-calculator">
86
+ <h2>Licensed Teacher Starting Salary Calculator</h2>
87
+ <p>(Includes Special Services Providers)</p>
88
+ <asd20-select-input
89
+ class="years-selector"
90
+ v-model="years"
91
+ label="Years of Experience"
92
+ icon="calendar"
93
+ :value="years"
94
+ :items="yearsOfExperience"
95
+ />
96
+ <asd20-select-input
97
+ class="education-selector"
98
+ v-model="educationLevel"
99
+ label="Education Level"
100
+ icon="school"
101
+ :value="educationLevel"
102
+ :items="educationLevelOptions"
103
+ />
104
+ <asd20-button
105
+ @click.native="computedSalaryRange()"
106
+ class="calculate"
107
+ icon="chevron"
108
+ label="Calculate"
109
+ :iconAngle="90"
110
+ size="md"
111
+ horizontal
112
+ centered
113
+ reversed
114
+ opposite
115
+ />
116
+ <hr />
117
+
118
+ <h2>Estimated Starting Salary</h2>
119
+ <p v-if="minSalary === 0">
120
+ Select your Years of Experience and Education Level and click Calculate
121
+ to see your estimate.
122
+ </p>
123
+ <p v-if="minSalary !== 0">
124
+ Based on your answers, your starting salary would be:
125
+ </p>
126
+ <h3 v-if="minSalary !== 0 && minSalary !== maxSalary">
127
+ ${{ String(minSalary).replace(/(.)(?=(\d{3})+$)/g, '$1,') }} – ${{
128
+ String(maxSalary).replace(/(.)(?=(\d{3})+$)/g, '$1,')
129
+ }}
130
+ </h3>
131
+ <h3 v-if="minSalary !== 0 && minSalary === maxSalary">
132
+ ${{ String(minSalary).replace(/(.)(?=(\d{3})+$)/g, '$1,') }}
133
+ </h3>
134
+ </div>
135
+
136
+ <!-- Feeds -->
137
+ <!-- <asd20-feeds-section
138
+ :announcements="announcements"
139
+ :announcements-feed-props="announcementsFeedProps"
140
+ @announcements-in-view="$emit('announcements-in-view')"
141
+ :stories="stories"
142
+ :stories-feed-props="storiesFeedProps"
143
+ @stories-in-view="$emit('stories-in-view')"
144
+ :events="events"
145
+ :events-feed-props="eventsFeedProps"
146
+ @events-in-view="$emit('events-in-view')"
147
+ ></asd20-feeds-section> -->
148
+
149
+ <!-- <asd20-media-section
150
+ v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
151
+ :images="this.combinedMessageImages || []"
152
+ :videos="this.combinedMessageVideos || []"
153
+ >
154
+ </asd20-media-section> -->
155
+
156
+ <!-- Bottom Widgets -->
157
+ <asd20-widgets-section
158
+ v-if="widgetsSectionProps.footer || $slots.widgets"
159
+ v-bind="widgetsSectionProps.footer"
160
+ @events-in-view="$emit('events-in-view')"
161
+ @files-in-view="$emit('files-in-view')"
162
+ full
163
+ ><slot name="widgets"
164
+ /></asd20-widgets-section>
165
+
166
+ <!-- Quick Links -->
167
+ <asd20-quicklinks-menu slot="before-footer" :quick-links="quickLinks">
168
+ <slot name="quicklinks-menu" />
169
+ </asd20-quicklinks-menu>
170
+
171
+ <!-- Footer -->
172
+ <asd20-page-footer
173
+ :organization="organization"
174
+ :socialLinks="socialLinks"
175
+ :disclosureLinks="disclosureLinks"
176
+ :websiteLogoProps="websiteLogoProps"
177
+ >
178
+ <slot name="page-footer" />
179
+ </asd20-page-footer>
180
+ </div>
181
+ </template>
182
+
183
+ <script>
184
+ // Components
185
+ import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
186
+ import Asd20SelectInput from '../../../components/atoms/Asd20SelectInput'
187
+ import Asd20Button from '../../../components/atoms/Asd20Button'
188
+ import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
189
+
190
+ import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
191
+ import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
192
+
193
+ import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
194
+ import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
195
+ import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
196
+
197
+ import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
198
+ import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
199
+ import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
200
+
201
+ // Mixins
202
+ import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
203
+
204
+ export default {
205
+ name: 'Asd20SalaryCalculatorTemplate',
206
+ mixins: [pageTemplateMixin],
207
+ components: {
208
+ Asd20PageContent,
209
+ Asd20SkipTo,
210
+ Asd20SelectInput,
211
+ Asd20Button,
212
+ Asd20PageHeader,
213
+ Asd20PageFooter,
214
+ Asd20SiteNavigation,
215
+ Asd20WidgetsSection,
216
+ Asd20FeedsSection,
217
+ Asd20NotificationGroup,
218
+ Asd20QuicklinksMenu,
219
+ Asd20MediaSection,
220
+ },
221
+ props: {
222
+ // years: { type: Number, default: 0 },
223
+ // educationLevel: { type: String, default: "Bachelor's Degree" },
224
+ },
225
+ data: function() {
226
+ return {
227
+ years: '0',
228
+ yearsOfExperience: [
229
+ '0',
230
+ '1',
231
+ '2',
232
+ '3',
233
+ '4',
234
+ '5',
235
+ '6',
236
+ '7',
237
+ '8',
238
+ '9',
239
+ '10',
240
+ '11',
241
+ '12',
242
+ '13',
243
+ '14',
244
+ '15',
245
+ '16',
246
+ '17+',
247
+ ],
248
+ educationLevel: "Bachelor's Degree",
249
+ educationLevelOptions: [
250
+ "Bachelor's Degree",
251
+ "Bachelor's Degree + 16 Credits",
252
+ "Bachelor's Degree + 32 Credits",
253
+ "Bachelor's Degree + 48 Credits",
254
+ "Master's Degree",
255
+ "Master's Degree + 16 Credits",
256
+ "Master's Degree + 32 Credits",
257
+ "Master's Degree + 48 Credits",
258
+ "Master's Degree + 64 Credits",
259
+ 'Ph.D./Ed.D. or higher',
260
+ ],
261
+ salaryRanges: [
262
+ {
263
+ id: '0',
264
+ scheduleTitle: 'Licensed Teacher',
265
+ requiredEducationLevel: "Bachelor's Degree",
266
+ minYearsOfExperience: 0,
267
+ maxYearsOfExperience: 2,
268
+ minSalary: 42025,
269
+ maxSalary: 42025,
270
+ },
271
+ {
272
+ id: '1',
273
+ scheduleTitle: 'Licensed Teacher',
274
+ requiredEducationLevel: "Bachelor's Degree",
275
+ minYearsOfExperience: 3,
276
+ maxYearsOfExperience: 5,
277
+ minSalary: 42100,
278
+ maxSalary: 42500,
279
+ },
280
+ {
281
+ id: '2',
282
+ scheduleTitle: 'Licensed Teacher',
283
+ requiredEducationLevel: "Bachelor's Degree",
284
+ minYearsOfExperience: 6,
285
+ maxYearsOfExperience: 10,
286
+ minSalary: 42600,
287
+ maxSalary: 43800,
288
+ },
289
+ {
290
+ id: '3',
291
+ scheduleTitle: 'Licensed Teacher',
292
+ requiredEducationLevel: "Bachelor's Degree",
293
+ minYearsOfExperience: 11,
294
+ maxYearsOfExperience: 17,
295
+ minSalary: 44500,
296
+ maxSalary: 48900,
297
+ },
298
+ {
299
+ id: '4',
300
+ scheduleTitle: 'Licensed Teacher',
301
+ requiredEducationLevel: "Bachelor's Degree + 16 Credits",
302
+ minYearsOfExperience: 0,
303
+ maxYearsOfExperience: 2,
304
+ minSalary: 43485,
305
+ maxSalary: 43485,
306
+ },
307
+ {
308
+ id: '5',
309
+ scheduleTitle: 'Licensed Teacher',
310
+ requiredEducationLevel: "Bachelor's Degree + 16 Credits",
311
+ minYearsOfExperience: 3,
312
+ maxYearsOfExperience: 5,
313
+ minSalary: 43600,
314
+ maxSalary: 43900,
315
+ },
316
+ {
317
+ id: '6',
318
+ scheduleTitle: 'Licensed Teacher',
319
+ requiredEducationLevel: "Bachelor's Degree + 16 Credits",
320
+ minYearsOfExperience: 6,
321
+ maxYearsOfExperience: 10,
322
+ minSalary: 44000,
323
+ maxSalary: 45300,
324
+ },
325
+ {
326
+ id: '7',
327
+ scheduleTitle: 'Licensed Teacher',
328
+ requiredEducationLevel: "Bachelor's Degree + 16 Credits",
329
+ minYearsOfExperience: 11,
330
+ maxYearsOfExperience: 17,
331
+ minSalary: 46000,
332
+ maxSalary: 50600,
333
+ },
334
+ {
335
+ id: '8',
336
+ scheduleTitle: 'Licensed Teacher',
337
+ requiredEducationLevel: "Bachelor's Degree + 32 Credits",
338
+ minYearsOfExperience: 0,
339
+ maxYearsOfExperience: 2,
340
+ minSalary: 44944,
341
+ maxSalary: 44944,
342
+ },
343
+ {
344
+ id: '9',
345
+ scheduleTitle: 'Licensed Teacher',
346
+ requiredEducationLevel: "Bachelor's Degree + 32 Credits",
347
+ minYearsOfExperience: 3,
348
+ maxYearsOfExperience: 5,
349
+ minSalary: 45100,
350
+ maxSalary: 45400,
351
+ },
352
+ {
353
+ id: '10',
354
+ scheduleTitle: 'Licensed Teacher',
355
+ requiredEducationLevel: "Bachelor's Degree + 32 Credits",
356
+ minYearsOfExperience: 6,
357
+ maxYearsOfExperience: 10,
358
+ minSalary: 45500,
359
+ maxSalary: 46800,
360
+ },
361
+ {
362
+ id: '11',
363
+ scheduleTitle: 'Licensed Teacher',
364
+ requiredEducationLevel: "Bachelor's Degree + 32 Credits",
365
+ minYearsOfExperience: 11,
366
+ maxYearsOfExperience: 17,
367
+ minSalary: 47500,
368
+ maxSalary: 52300,
369
+ },
370
+ {
371
+ id: '12',
372
+ scheduleTitle: 'Licensed Teacher',
373
+ requiredEducationLevel: "Bachelor's Degree + 48 Credits",
374
+ minYearsOfExperience: 0,
375
+ maxYearsOfExperience: 2,
376
+ minSalary: 46404,
377
+ maxSalary: 46404,
378
+ },
379
+ {
380
+ id: '13',
381
+ scheduleTitle: 'Licensed Teacher',
382
+ requiredEducationLevel: "Bachelor's Degree + 48 Credits",
383
+ minYearsOfExperience: 3,
384
+ maxYearsOfExperience: 5,
385
+ minSalary: 46500,
386
+ maxSalary: 46800,
387
+ },
388
+ {
389
+ id: '14',
390
+ scheduleTitle: 'Licensed Teacher',
391
+ requiredEducationLevel: "Bachelor's Degree + 48 Credits",
392
+ minYearsOfExperience: 6,
393
+ maxYearsOfExperience: 10,
394
+ minSalary: 47000,
395
+ maxSalary: 48300,
396
+ },
397
+ {
398
+ id: '15',
399
+ scheduleTitle: 'Licensed Teacher',
400
+ requiredEducationLevel: "Bachelor's Degree + 48 Credits",
401
+ minYearsOfExperience: 11,
402
+ maxYearsOfExperience: 17,
403
+ minSalary: 49100,
404
+ maxSalary: 54000,
405
+ },
406
+ {
407
+ id: '16',
408
+ scheduleTitle: 'Licensed Teacher',
409
+ requiredEducationLevel: "Master's Degree",
410
+ minYearsOfExperience: 0,
411
+ maxYearsOfExperience: 2,
412
+ minSalary: 47863,
413
+ maxSalary: 47863,
414
+ },
415
+ {
416
+ id: '17',
417
+ scheduleTitle: 'Licensed Teacher',
418
+ requiredEducationLevel: "Master's Degree",
419
+ minYearsOfExperience: 3,
420
+ maxYearsOfExperience: 5,
421
+ minSalary: 48000,
422
+ maxSalary: 48300,
423
+ },
424
+ {
425
+ id: '18',
426
+ scheduleTitle: 'Licensed Teacher',
427
+ requiredEducationLevel: "Master's Degree",
428
+ minYearsOfExperience: 6,
429
+ maxYearsOfExperience: 10,
430
+ minSalary: 48500,
431
+ maxSalary: 49800,
432
+ },
433
+ {
434
+ id: '19',
435
+ scheduleTitle: 'Licensed Teacher',
436
+ requiredEducationLevel: "Master's Degree",
437
+ minYearsOfExperience: 11,
438
+ maxYearsOfExperience: 17,
439
+ minSalary: 50600,
440
+ maxSalary: 55700,
441
+ },
442
+ {
443
+ id: '20',
444
+ scheduleTitle: 'Licensed Teacher',
445
+ requiredEducationLevel: "Master's Degree + 16 Credits",
446
+ minYearsOfExperience: 0,
447
+ maxYearsOfExperience: 2,
448
+ minSalary: 49321,
449
+ maxSalary: 49321,
450
+ },
451
+ {
452
+ id: '21',
453
+ scheduleTitle: 'Licensed Teacher',
454
+ requiredEducationLevel: "Master's Degree + 16 Credits",
455
+ minYearsOfExperience: 3,
456
+ maxYearsOfExperience: 5,
457
+ minSalary: 49400,
458
+ maxSalary: 49800,
459
+ },
460
+ {
461
+ id: '22',
462
+ scheduleTitle: 'Licensed Teacher',
463
+ requiredEducationLevel: "Master's Degree + 16 Credits",
464
+ minYearsOfExperience: 6,
465
+ maxYearsOfExperience: 10,
466
+ minSalary: 50000,
467
+ maxSalary: 51400,
468
+ },
469
+ {
470
+ id: '23',
471
+ scheduleTitle: 'Licensed Teacher',
472
+ requiredEducationLevel: "Master's Degree + 16 Credits",
473
+ minYearsOfExperience: 11,
474
+ maxYearsOfExperience: 17,
475
+ minSalary: 52200,
476
+ maxSalary: 57400,
477
+ },
478
+ {
479
+ id: '24',
480
+ scheduleTitle: 'Licensed Teacher',
481
+ requiredEducationLevel: "Master's Degree + 32 Credits",
482
+ minYearsOfExperience: 0,
483
+ maxYearsOfExperience: 2,
484
+ minSalary: 50781,
485
+ maxSalary: 50781,
486
+ },
487
+ {
488
+ id: '25',
489
+ scheduleTitle: 'Licensed Teacher',
490
+ requiredEducationLevel: "Master's Degree + 32 Credits",
491
+ minYearsOfExperience: 3,
492
+ maxYearsOfExperience: 5,
493
+ minSalary: 50900,
494
+ maxSalary: 51300,
495
+ },
496
+ {
497
+ id: '26',
498
+ scheduleTitle: 'Licensed Teacher',
499
+ requiredEducationLevel: "Master's Degree + 32 Credits",
500
+ minYearsOfExperience: 6,
501
+ maxYearsOfExperience: 10,
502
+ minSalary: 51400,
503
+ maxSalary: 52900,
504
+ },
505
+ {
506
+ id: '27',
507
+ scheduleTitle: 'Licensed Teacher',
508
+ requiredEducationLevel: "Master's Degree + 32 Credits",
509
+ minYearsOfExperience: 11,
510
+ maxYearsOfExperience: 17,
511
+ minSalary: 53700,
512
+ maxSalary: 59100,
513
+ },
514
+ {
515
+ id: '28',
516
+ scheduleTitle: 'Licensed Teacher',
517
+ requiredEducationLevel: "Master's Degree + 48 Credits",
518
+ minYearsOfExperience: 0,
519
+ maxYearsOfExperience: 2,
520
+ minSalary: 52241,
521
+ maxSalary: 52241,
522
+ },
523
+ {
524
+ id: '29',
525
+ scheduleTitle: 'Licensed Teacher',
526
+ requiredEducationLevel: "Master's Degree + 48 Credits",
527
+ minYearsOfExperience: 3,
528
+ maxYearsOfExperience: 5,
529
+ minSalary: 52400,
530
+ maxSalary: 52700,
531
+ },
532
+ {
533
+ id: '30',
534
+ scheduleTitle: 'Licensed Teacher',
535
+ requiredEducationLevel: "Master's Degree + 48 Credits",
536
+ minYearsOfExperience: 6,
537
+ maxYearsOfExperience: 10,
538
+ minSalary: 52900,
539
+ maxSalary: 54400,
540
+ },
541
+ {
542
+ id: '31',
543
+ scheduleTitle: 'Licensed Teacher',
544
+ requiredEducationLevel: "Master's Degree + 48 Credits",
545
+ minYearsOfExperience: 11,
546
+ maxYearsOfExperience: 17,
547
+ minSalary: 55300,
548
+ maxSalary: 60800,
549
+ },
550
+ {
551
+ id: '32',
552
+ scheduleTitle: 'Licensed Teacher',
553
+ requiredEducationLevel: "Master's Degree + 64 Credits",
554
+ minYearsOfExperience: 0,
555
+ maxYearsOfExperience: 2,
556
+ minSalary: 53700,
557
+ maxSalary: 53700,
558
+ },
559
+ {
560
+ id: '33',
561
+ scheduleTitle: 'Licensed Teacher',
562
+ requiredEducationLevel: "Master's Degree + 64 Credits",
563
+ minYearsOfExperience: 3,
564
+ maxYearsOfExperience: 5,
565
+ minSalary: 53800,
566
+ maxSalary: 54200,
567
+ },
568
+ {
569
+ id: '34',
570
+ scheduleTitle: 'Licensed Teacher',
571
+ requiredEducationLevel: "Master's Degree + 64 Credits",
572
+ minYearsOfExperience: 6,
573
+ maxYearsOfExperience: 10,
574
+ minSalary: 54400,
575
+ maxSalary: 55900,
576
+ },
577
+ {
578
+ id: '35',
579
+ scheduleTitle: 'Licensed Teacher',
580
+ requiredEducationLevel: "Master's Degree + 64 Credits",
581
+ minYearsOfExperience: 11,
582
+ maxYearsOfExperience: 17,
583
+ minSalary: 56800,
584
+ maxSalary: 62500,
585
+ },
586
+ {
587
+ id: '36',
588
+ scheduleTitle: 'Licensed Teacher',
589
+ requiredEducationLevel: 'Ph.D./Ed.D. or higher',
590
+ minYearsOfExperience: 0,
591
+ maxYearsOfExperience: 2,
592
+ minSalary: 55160,
593
+ maxSalary: 55160,
594
+ },
595
+ {
596
+ id: '37',
597
+ scheduleTitle: 'Licensed Teacher',
598
+ requiredEducationLevel: 'Ph.D./Ed.D. or higher',
599
+ minYearsOfExperience: 3,
600
+ maxYearsOfExperience: 5,
601
+ minSalary: 55300,
602
+ maxSalary: 55700,
603
+ },
604
+ {
605
+ id: '38',
606
+ scheduleTitle: 'Licensed Teacher',
607
+ requiredEducationLevel: 'Ph.D./Ed.D. or higher',
608
+ minYearsOfExperience: 6,
609
+ maxYearsOfExperience: 10,
610
+ minSalary: 55900,
611
+ maxSalary: 57400,
612
+ },
613
+ {
614
+ id: '39',
615
+ scheduleTitle: 'Licensed Teacher',
616
+ requiredEducationLevel: 'Ph.D./Ed.D. or higher',
617
+ minYearsOfExperience: 11,
618
+ maxYearsOfExperience: 17,
619
+ minSalary: 58400,
620
+ maxSalary: 64200,
621
+ },
622
+ ],
623
+ minSalary: 0,
624
+ maxSalary: 0,
625
+ }
626
+ },
627
+ methods: {
628
+ computedSalaryRange() {
629
+ const numberOfYears = parseInt(this.years, 10)
630
+ const salaryRangesByEducationLevel = this.salaryRanges.filter(
631
+ s => s.requiredEducationLevel === this.educationLevel
632
+ )
633
+ console.log(this.educationLevel)
634
+ console.log(salaryRangesByEducationLevel)
635
+
636
+ const salaryRangesByExperience = salaryRangesByEducationLevel
637
+ .filter(smin => smin.minYearsOfExperience <= numberOfYears)
638
+ .filter(smax => smax.maxYearsOfExperience >= numberOfYears)
639
+ console.log(this.years, numberOfYears)
640
+ console.log(salaryRangesByExperience)
641
+
642
+ this.minSalary = salaryRangesByExperience[0].minSalary
643
+ this.maxSalary = salaryRangesByExperience[0].maxSalary
644
+
645
+ console.log(salaryRangesByExperience[0].minSalary)
646
+ console.log(this.minSalary)
647
+ },
648
+ },
649
+ }
650
+ </script>
651
+
652
+ <style lang="scss">
653
+ @import '../../../design/_variables.scss';
654
+ @import '../../../design/_mixins.scss';
655
+ @import '../../../design/_typography.scss';
656
+ @import '../../../design/_template.scss';
657
+ @import '../../../design/_print.scss';
658
+ @import '../../../design/tokens.css';
659
+
660
+ .asd20-salary-calculator-template {
661
+ @include typography;
662
+ @include template;
663
+ // h2 {
664
+ // @include asd20-font(
665
+ // 1.15,
666
+ // var(--website-typography__font-family-headlines),
667
+ // 1.2,
668
+ // 700
669
+ // );
670
+ // }
671
+ display: flex;
672
+ flex-direction: column;
673
+ flex-grow: 1;
674
+ flex-shrink: 0;
675
+ overflow: hidden;
676
+ margin-top: space(2.25);
677
+ .salary-calculator {
678
+ margin: space(2);
679
+ .asd20-button {
680
+ height: space(2);
681
+ margin: space(1) 0;
682
+ }
683
+ .years-selector,
684
+ .education-selector {
685
+ max-width: space(15);
686
+ margin: space(1) 0;
687
+ }
688
+ }
689
+ }
690
+
691
+ @media (min-width: 1024px) {
692
+ .asd20-salary-calculator-template {
693
+ @include template-desktop;
694
+ margin-left: space(3);
695
+ margin-top: 0;
696
+ .notification-group--inline {
697
+ margin: space(2) space(3) space(1) space(3);
698
+ }
699
+
700
+ .asd20-page-content {
701
+ // margin-top: space(1);
702
+ display: flex;
703
+ justify-content: space-between;
704
+ align-items: stretch;
705
+ flex-wrap: wrap;
706
+ .asd20-widgets-section {
707
+ flex-basis: 25%;
708
+ padding: space(2) space(3) 0 0;
709
+ background: none;
710
+ }
711
+ }
712
+ .salary-calculator {
713
+ margin: space(3);
714
+ .asd20-button {
715
+ height: space(2);
716
+ margin: space(1) 0;
717
+ }
718
+ .years-selector,
719
+ .education-selector {
720
+ max-width: space(15);
721
+ margin: space(1) 0;
722
+ }
723
+ }
724
+ .notification-group--inline {
725
+ flex-basis: 100%;
726
+ margin-bottom: 0 !important;
727
+ }
728
+ .primary-messaging-section {
729
+ max-width: 50vw;
730
+ }
731
+ }
732
+ }
733
+ </style>