@norwegian/core-components 5.10.3 → 5.10.4

package/bundles/norwegian-core-components.umd.js

@@ -4996,14 +4996,21 @@
             configurable: true
         });
         DatepickerComboComponent.prototype.ngOnInit = function () {
+            var _this = this;
             if (this.nasFormGroup) {
                 if (this.nasFormControlNameOutbound) {
-                    var outbound = this.nasFormGroup.get(this.nasFormControlNameOutbound).value;
-                    this.outboundSelectedDate = outbound.date;
+                    this.outboundValueChangesSubscription = this.nasFormGroup.get(this.nasFormControlNameOutbound)
+                        .valueChanges
+                        .subscribe(function (outbound) {
+                        _this.outboundSelectedDate = outbound === null || outbound === void 0 ? void 0 : outbound.date;
+                    });
                 }
                 if (this.nasFormControlNameInbound) {
-                    var inbound = this.nasFormGroup.get(this.nasFormControlNameInbound).value;
-                    this.inboundSelectedDate = inbound.date;
+                    this.inboundValueChangesSubscription = this.nasFormGroup.get(this.nasFormControlNameInbound)
+                        .valueChanges
+                        .subscribe(function (inbound) {
+                        _this.inboundSelectedDate = inbound === null || inbound === void 0 ? void 0 : inbound.date;
+                    });
                 }
             }
         };
@@ -5052,6 +5059,10 @@
             return (!this.deviceHelper.isMobileWidth() && this.exists(this.outboundOnly))
                 || this.exists(this.inboundDisabled);
         };
+        DatepickerComboComponent.prototype.ngOnDestroy = function () {
+            this.inboundValueChangesSubscription.unsubscribe();
+            this.outboundValueChangesSubscription.unsubscribe();
+        };
         DatepickerComboComponent.prototype.updateContainerWidth = function () {
             var containerOffsetWidth = this.container.nativeElement.offsetWidth;
             if (containerOffsetWidth > 0) {
@@ -6233,6 +6244,10 @@
         });
         Object.defineProperty(DatepickerComponent.prototype, "activeDate", {
             get: function () {
+                if (this.selectedDate && this.activeDateValue &&
+                    this.dateService.isLessThan(this.activeDateValue, this.selectedDate, false, true, true)) {
+                    return this.activeDateValue;
+                }
                 if (this.activeDateValue) {
                     return this.activeDateValue;
                 }
@@ -6253,7 +6268,7 @@
                 this.activeDateValue = date;
                 clearTimeout(this.activeDateTimeout);
                 this.activeDateTimeout = setTimeout(function () {
-                    _this.model = _this.datePipe.transform(_this.dateService.date(_this.activeDate), _this.dateDisplayFormat, 'UTC', _this.locale);
+                    _this.model = _this.datePipe.transform(_this.dateService.date(_this.selectedDate), _this.dateDisplayFormat, 'UTC', _this.locale);
                 });
             },
             enumerable: false,
@@ -6473,7 +6488,7 @@
     DatepickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'nas-datepicker',
-                    template: "<label [nasClass]=\"getMainClass()\">\n  <div [nasClass]=\"getClass('date-picker-content')\">\n    <div [nasClass]=\"getClass('date-picker-wrapper')\">\n      <div [nasClass]=\"getClass('controls', show && 'active')\"\n        (mousedown)=\"onMouseDownDatepicker()\">\n        <div #datePickerContent\n          [nasClass]=\"getLabelClass()\">\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n        <input #input\n          [nasClass]=\"getClass('date-picker')\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.aria-label]=\"ariaLabel\"\n          [attr.aria-describedby]=\"ariaDescribedby\"\n          [attr.aria-required]=\"required\"\n          [attr.aria-haspopup]=\"true\"\n          (keydown.tab)=\"selectDate($event)\"\n          (keydown.shift.tab)=\"onInputKeydownShiftTab($event)\"\n          (keydown.enter)=\"selectDate($event)\"\n          (keydown.arrowdown)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowleft)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowright)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowup)=\"onCalendarKeyDown($event)\"\n          (focus)=\"openCalendar()\"\n          [(ngModel)]=\"model\" />\n      </div>\n      <div [nasClass]=\"getClass('calendar-icon')\">\n        <nas-icon *ngIf=\"exists(disabled); else regularIcon\"\n          [icon]=\"'calendar--disabled'\"\n          [ngStyle]=\"{'pointer-events': 'none'}\">\n        </nas-icon>\n        <ng-template #regularIcon>\n          <nas-icon icon=\"calendar\"\n            (click)=\"openCalendar()\">\n          </nas-icon>\n        </ng-template>\n      </div>\n      <nas-calendar #calendar *ngIf=\"show\"\n        [nasFormGroup]=\"nasFormGroup\"\n        [nasFormControlName]=\"nasFormControlName\"\n        [dateDisplayFormat]=\"dateDisplayFormat\"\n        [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n        [availableFlightsLabel]=\"availableFlightsLabel\"\n        [availability]=\"exists(availability)\"\n        [availableDates]=\"availableDates\"\n        [lowerLimitDate]=\"lowerLimitDate\"\n        [disablePastSelection]=\"exists(disablePastSelection)\"\n        [locale]=\"locale\"\n        [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n        [ariaLabelNextMonth]=\"ariaLabelNextMonth\"\n        [(activeDate)]=\"activeDate\"\n        [(selectedDate)]=\"selectedDate\"\n        (focusOnNextChange)=\"setFocusOnTimeSelectorOrNext($event)\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n        (monthChange)=\"onMonthChange($event)\">\n      </nas-calendar>\n    </div>\n    <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n      [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>\n  </div>\n</label>\n<div *ngIf=\"timeOptions\"\n  [nasClass]=\"getClass('time-selector-wrapper')\">\n  <nas-select #timeSelector\n    [selected]=\"selectedTimeOption\"\n    (selectedChange)=\"onTimeSelected($event)\"\n    (keydown)=\"onTimeSelectorKeydown($event)\">\n    <nas-option *ngFor=\"let time of timeOptions\"\n      [option]=\"time\"></nas-option>\n  </nas-select>\n</div>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>",
+                    template: "<label [nasClass]=\"getMainClass()\">\n  <div [nasClass]=\"getClass('date-picker-content')\">\n    <div [nasClass]=\"getClass('date-picker-wrapper')\">\n      <div [nasClass]=\"getClass('controls', show && 'active')\"\n        (mousedown)=\"onMouseDownDatepicker()\">\n        <div #datePickerContent\n          [nasClass]=\"getLabelClass()\">\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n        <input #input\n          [nasClass]=\"getClass('date-picker')\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.aria-label]=\"ariaLabel\"\n          [attr.aria-describedby]=\"ariaDescribedby\"\n          [attr.aria-required]=\"required\"\n          [attr.aria-haspopup]=\"true\"\n          (keydown.tab)=\"selectDate($event)\"\n          (keydown.shift.tab)=\"onInputKeydownShiftTab($event)\"\n          (keydown.enter)=\"selectDate($event)\"\n          (keydown.arrowdown)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowleft)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowright)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowup)=\"onCalendarKeyDown($event)\"\n          (focus)=\"openCalendar()\"\n          (focusout)=\"closeCalendar()\"\n          [(ngModel)]=\"model\" />\n      </div>\n      <div [nasClass]=\"getClass('calendar-icon')\">\n        <nas-icon *ngIf=\"exists(disabled); else regularIcon\"\n          [icon]=\"'calendar--disabled'\"\n          [ngStyle]=\"{'pointer-events': 'none'}\">\n        </nas-icon>\n        <ng-template #regularIcon>\n          <nas-icon icon=\"calendar\"\n            (click)=\"openCalendar()\">\n          </nas-icon>\n        </ng-template>\n      </div>\n      <nas-calendar #calendar *ngIf=\"show\"\n        [nasFormGroup]=\"nasFormGroup\"\n        [nasFormControlName]=\"nasFormControlName\"\n        [dateDisplayFormat]=\"dateDisplayFormat\"\n        [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n        [availableFlightsLabel]=\"availableFlightsLabel\"\n        [availability]=\"exists(availability)\"\n        [availableDates]=\"availableDates\"\n        [lowerLimitDate]=\"lowerLimitDate\"\n        [disablePastSelection]=\"exists(disablePastSelection)\"\n        [locale]=\"locale\"\n        [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n        [ariaLabelNextMonth]=\"ariaLabelNextMonth\"\n        [(activeDate)]=\"activeDate\"\n        [(selectedDate)]=\"selectedDate\"\n        (focusOnNextChange)=\"setFocusOnTimeSelectorOrNext($event)\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n        (monthChange)=\"onMonthChange($event)\">\n      </nas-calendar>\n    </div>\n    <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n      [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>\n  </div>\n</label>\n<div *ngIf=\"timeOptions\"\n  [nasClass]=\"getClass('time-selector-wrapper')\">\n  <nas-select #timeSelector\n    [selected]=\"selectedTimeOption\"\n    (selectedChange)=\"onTimeSelected($event)\"\n    (keydown)=\"onTimeSelectorKeydown($event)\">\n    <nas-option *ngFor=\"let time of timeOptions\"\n      [option]=\"time\"></nas-option>\n  </nas-select>\n</div>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: ["@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@-webkit-keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@-webkit-keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}@-webkit-keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@-webkit-keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@-webkit-keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}:host{display:flex}.nas-datepicker{position:relative;top:0;left:0;width:100%;height:100%;overflow-x:visible;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;max-height:98vh;overflow-y:visible}.nas-datepicker__date-picker-wrapper{position:relative;padding-bottom:3px;border-bottom:3px solid #c3c3c3}.nas-datepicker__date-picker-wrapper .nas-datepicker__date-picker{display:block;width:100%;height:35px;padding:0 16px 9px;border:0;border-radius:0;transition:all .2s cubic-bezier(0,0,.1,1);font-family:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;color:#003251;font-family:\"Apercu\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:normal;font-size:16px;line-height:26px;position:relative;z-index:3;background-color:inherit}.nas-datepicker__date-picker-wrapper .nas-datepicker__date-picker[disabled]{color:#909090;background-color:#fff}.nas-datepicker__date-picker-wrapper .nas-datepicker__date-picker:-moz-placeholder{line-height:normal}.nas-datepicker__date-picker-wrapper .nas-datepicker__date-picker::-moz-placeholder{line-height:normal}.nas-datepicker__date-picker-wrapper .nas-datepicker__date-picker:-ms-input-placeholder{line-height:normal}.nas-datepicker__date-picker-wrapper .nas-datepicker__date-picker::-webkit-input-placeholder{line-height:normal}.nas-datepicker__date-picker-wrapper .nas-datepicker__date-picker:focus~.nas-datepicker__input-line{border-color:#003251}.nas-datepicker__date-picker-wrapper .nas-datepicker__calendar-icon{position:absolute;right:15px;top:50%;margin-top:-12px;vertical-align:middle;cursor:pointer;z-index:3}.nas-datepicker__date-picker-wrapper .nas-datepicker__date-picker-label{padding:9px 16px 0;position:relative;z-index:3;color:#003251;font-family:\"Apercu\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:bold;font-size:14px;line-height:20px;background-color:inherit;display:flex}.nas-datepicker__date-picker-wrapper .nas-datepicker__date-picker-label--disabled{color:#909090}.nas-datepicker__date-picker-wrapper nas-calendar{position:absolute;top:75px;vertical-align:middle;right:0px;z-index:4}@media (min-width: 640px){.nas-datepicker__date-picker-wrapper nas-calendar{right:-15px}}.nas-datepicker__date-picker-wrapper .nas-datepicker__controls{background-color:#fff}.nas-datepicker__time-selector-wrapper{border-bottom:3px solid #c3c3c3}.nas-datepicker__time-selector-wrapper nas-select{display:flex}.nas-datepicker__time-selector-wrapper nas-select ::ng-deep .nas-select{margin-bottom:0;margin-left:3px}.nas-datepicker__time-selector-wrapper nas-select ::ng-deep .nas-select:after{bottom:26px}.nas-datepicker__time-selector-wrapper nas-select ::ng-deep .nas-select select{border:3px solid #fff;background-color:#fff;height:64px}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.nas-datepicker__time-selector-wrapper nas-select ::ng-deep .nas-select select{height:60px}}.nas-datepicker__time-selector-wrapper nas-select ::ng-deep .nas-select select:focus{border-color:#003251}.nas-datepicker--has-time{padding-right:3px}.nas-datepicker nas-spinner{position:absolute;top:300px;left:45%;right:45%}.nas-datepicker__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0019292b;-webkit-animation:datepicker-backdrop .7s ease-out both;animation:datepicker-backdrop .7s ease-out both}.nas-datepicker--compact{padding:0;margin-bottom:0}@-webkit-keyframes datepicker-backdrop{0%{opacity:0}}@keyframes datepicker-backdrop{0%{opacity:0}}\n"]
                 },] }