@progress/kendo-angular-dateinputs 21.1.1-develop.2 → 21.2.0-develop.2
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.
- package/esm2022/calendar/calendar.component.mjs +222 -221
- package/esm2022/calendar/footer.component.mjs +31 -29
- package/esm2022/calendar/header.component.mjs +157 -145
- package/esm2022/calendar/horizontal-view-list.component.mjs +139 -123
- package/esm2022/calendar/multiview-calendar.component.mjs +110 -107
- package/esm2022/calendar/navigation.component.mjs +55 -49
- package/esm2022/calendar/view-list.component.mjs +148 -135
- package/esm2022/calendar/view.component.mjs +107 -89
- package/esm2022/dateinput/dateinput.component.mjs +142 -137
- package/esm2022/datepicker/datepicker.component.mjs +315 -303
- package/esm2022/daterange/date-range-popup.component.mjs +264 -253
- package/esm2022/daterange/date-range.component.mjs +10 -7
- package/esm2022/datetimepicker/datetimepicker.component.mjs +677 -657
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/timepicker/timelist.component.mjs +55 -51
- package/esm2022/timepicker/timepicker.component.mjs +379 -367
- package/esm2022/timepicker/timeselector.component.mjs +138 -123
- package/fesm2022/progress-kendo-angular-dateinputs.mjs +2943 -2783
- package/package.json +11 -11
|
@@ -19,7 +19,6 @@ import { checkIcon } from '@progress/kendo-svg-icons';
|
|
|
19
19
|
import { DateRangeSelectionDirective } from './date-range-selection.directive';
|
|
20
20
|
import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
|
|
21
21
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
22
|
-
import { NgIf } from '@angular/common';
|
|
23
22
|
import { DateRangePopupLocalizedMessagesDirective } from './localization/daterange-popup-localized-messages.directive';
|
|
24
23
|
import { CalendarViewEnum } from '../calendar/models/view.enum';
|
|
25
24
|
import * as i0 from "@angular/core";
|
|
@@ -639,7 +638,7 @@ export class DateRangePopupComponent {
|
|
|
639
638
|
}));
|
|
640
639
|
};
|
|
641
640
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }, { token: i4.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
642
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
641
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { showCalendarHeader: "showCalendarHeader", focusedDate: "focusedDate", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", min: "min", max: "max", allowReverse: "allowReverse", animateNavigation: "animateNavigation", disabled: "disabled", views: "views", weekNumber: "weekNumber", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", showViewHeader: "showViewHeader", showOtherMonthDays: "showOtherMonthDays", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
|
|
643
642
|
LocalizationService,
|
|
644
643
|
{
|
|
645
644
|
provide: L10N_PREFIX,
|
|
@@ -647,55 +646,55 @@ export class DateRangePopupComponent {
|
|
|
647
646
|
}
|
|
648
647
|
], queries: [{ propertyName: "contentTemplate", first: true, predicate: DateRangePopupTemplateDirective, descendants: true }, { propertyName: "contentCalendar", predicate: MultiViewCalendarComponent }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "dateRangeSelectionDirective", first: true, predicate: DateRangeSelectionDirective, descendants: true }, { propertyName: "viewCalendar", predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-daterange-popup"], ngImport: i0, template: `
|
|
649
648
|
<ng-container kendoDateRangePopupLocalizedMessages
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
649
|
+
i18n-accept="kendo.daterangepopup.accept|The Accept button text in the timepicker component"
|
|
650
|
+
accept="Set"
|
|
651
|
+
|
|
652
|
+
i18n-acceptLabel="kendo.daterangepopup.acceptLabel|The label for the Accept button in the timepicker component"
|
|
653
|
+
acceptLabel="Set time"
|
|
654
|
+
|
|
655
|
+
i18n-cancel="kendo.daterangepopup.cancel|The Cancel button text in the timepicker component"
|
|
656
|
+
cancel="Cancel"
|
|
657
|
+
|
|
658
|
+
i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
|
|
659
|
+
cancelLabel="Cancel changes"
|
|
660
|
+
|
|
661
|
+
i18n-adaptiveCloseButtonTitle="kendo.daterangepopup.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
662
|
+
adaptiveCloseButtonTitle="Close"
|
|
663
|
+
>
|
|
665
664
|
</ng-container>
|
|
666
665
|
<ng-container #container></ng-container>
|
|
667
666
|
<ng-template #defaultTemplate>
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
667
|
+
<kendo-multiviewcalendar
|
|
668
|
+
[activeView]="activeView"
|
|
669
|
+
[bottomView]="bottomView"
|
|
670
|
+
[animateNavigation]="animateNavigation"
|
|
671
|
+
[disabled]="disabled"
|
|
672
|
+
orientation="horizontal"
|
|
673
|
+
[views]="views"
|
|
674
|
+
[weekNumber]="weekNumber"
|
|
675
|
+
[topView]="topView"
|
|
676
|
+
[disabledDates]="disabledDates"
|
|
677
|
+
[min]="min"
|
|
678
|
+
[max]="max"
|
|
679
|
+
[showCalendarHeader]="showCalendarHeader"
|
|
680
|
+
[focusedDate]="focusedDate"
|
|
681
|
+
[allowReverse]="allowReverse"
|
|
682
|
+
[showViewHeader]="showViewHeader"
|
|
683
|
+
[showOtherMonthDays]="showOtherMonthDays"
|
|
684
|
+
selection="range"
|
|
685
|
+
[size]="size"
|
|
686
|
+
[value]="dateRangeService.selectionRange"
|
|
687
|
+
(onClosePopup)="closePopup($event)"
|
|
688
|
+
(onTabPress)="handleTab($event)"
|
|
689
|
+
(onShiftTabPress)="handleShiftTab($event)"
|
|
690
|
+
(rangeSelectionChange)="onRangeSelectionChange($event)"
|
|
691
|
+
></kendo-multiviewcalendar>
|
|
693
692
|
</ng-template>
|
|
694
|
-
|
|
693
|
+
|
|
695
694
|
<kendo-actionsheet
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
695
|
+
#actionSheet
|
|
696
|
+
(overlayClick)="show=false"
|
|
697
|
+
(collapse)="onBlur.emit()"
|
|
699
698
|
[cssClass]="{
|
|
700
699
|
'k-adaptive-actionsheet': true,
|
|
701
700
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -704,90 +703,96 @@ export class DateRangePopupComponent {
|
|
|
704
703
|
[cssStyle]="{
|
|
705
704
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
706
705
|
}"
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
725
|
-
[svgIcon]="checkIcon"
|
|
726
|
-
fillMode="flat"
|
|
727
|
-
themeColor="primary"
|
|
728
|
-
[tabIndex]="-1"
|
|
729
|
-
size="large"
|
|
730
|
-
innerCssClass="k-button-icon"
|
|
731
|
-
(click)="handleAccept()">
|
|
732
|
-
</button>
|
|
733
|
-
</div>
|
|
734
|
-
</div>
|
|
735
|
-
</div>
|
|
736
|
-
<div class="k-actionsheet-content">
|
|
737
|
-
<div class="k-scrollable-wrap">
|
|
738
|
-
<kendo-multiviewcalendar
|
|
739
|
-
size="large"
|
|
740
|
-
[animateNavigation]="animateNavigation"
|
|
741
|
-
[disabled]="disabled"
|
|
742
|
-
orientation="vertical"
|
|
743
|
-
[views]="views"
|
|
744
|
-
[weekNumber]="weekNumber"
|
|
745
|
-
[disabledDates]="disabledDates"
|
|
746
|
-
[activeView]="activeView"
|
|
747
|
-
[bottomView]="bottomView"
|
|
748
|
-
[topView]="topView"
|
|
749
|
-
[min]="min"
|
|
750
|
-
[max]="max"
|
|
751
|
-
[showCalendarHeader]="showCalendarHeader"
|
|
752
|
-
[focusedDate]="focusedDate"
|
|
753
|
-
[allowReverse]="allowReverse"
|
|
754
|
-
[showViewHeader]="showViewHeader"
|
|
755
|
-
[showOtherMonthDays]="showOtherMonthDays"
|
|
756
|
-
[focusedDate]="dateRangeService.focusedDate"
|
|
757
|
-
[value]="dateRangeService.selectionRange"
|
|
758
|
-
selection="range"
|
|
759
|
-
(rangeSelectionChange)="onRangeSelectionChange($event)"
|
|
760
|
-
>
|
|
761
|
-
</kendo-multiviewcalendar>
|
|
762
|
-
</div>
|
|
706
|
+
>
|
|
707
|
+
<ng-template kendoActionSheetTemplate>
|
|
708
|
+
<!-- Resize sensor needs to be inside the template because the date-range-popup
|
|
709
|
+
element itself always has 0x0 size and does not trigger the sensor.
|
|
710
|
+
Note: The popup in non-adaptive mode closes on window blur -->
|
|
711
|
+
@if (isAdaptiveModeEnabled) {
|
|
712
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
713
|
+
}
|
|
714
|
+
<div class="k-actionsheet-titlebar">
|
|
715
|
+
<div class="k-actionsheet-titlebar-group">
|
|
716
|
+
<div class="k-actionsheet-title">
|
|
717
|
+
@if (adaptiveTitle) {
|
|
718
|
+
<div class="k-text-center">{{ adaptiveTitle }}</div>
|
|
719
|
+
}
|
|
720
|
+
@if (adaptiveSubtitle) {
|
|
721
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
|
|
722
|
+
}
|
|
763
723
|
</div>
|
|
764
|
-
<div class="k-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
type="button"
|
|
779
|
-
size="large"
|
|
780
|
-
themeColor="primary"
|
|
781
|
-
[attr.title]="localization.get('acceptLabel')"
|
|
782
|
-
[attr.aria-label]="localization.get('acceptLabel')"
|
|
783
|
-
(click)="handleAccept()"
|
|
784
|
-
>
|
|
785
|
-
{{localization.get('accept')}}
|
|
786
|
-
</button>
|
|
724
|
+
<div class="k-actionsheet-actions">
|
|
725
|
+
<button
|
|
726
|
+
kendoButton
|
|
727
|
+
type="button"
|
|
728
|
+
icon="check"
|
|
729
|
+
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
730
|
+
[svgIcon]="checkIcon"
|
|
731
|
+
fillMode="flat"
|
|
732
|
+
themeColor="primary"
|
|
733
|
+
[tabIndex]="-1"
|
|
734
|
+
size="large"
|
|
735
|
+
innerCssClass="k-button-icon"
|
|
736
|
+
(click)="handleAccept()">
|
|
737
|
+
</button>
|
|
787
738
|
</div>
|
|
788
|
-
|
|
739
|
+
</div>
|
|
740
|
+
</div>
|
|
741
|
+
<div class="k-actionsheet-content">
|
|
742
|
+
<div class="k-scrollable-wrap">
|
|
743
|
+
<kendo-multiviewcalendar
|
|
744
|
+
size="large"
|
|
745
|
+
[animateNavigation]="animateNavigation"
|
|
746
|
+
[disabled]="disabled"
|
|
747
|
+
orientation="vertical"
|
|
748
|
+
[views]="views"
|
|
749
|
+
[weekNumber]="weekNumber"
|
|
750
|
+
[disabledDates]="disabledDates"
|
|
751
|
+
[activeView]="activeView"
|
|
752
|
+
[bottomView]="bottomView"
|
|
753
|
+
[topView]="topView"
|
|
754
|
+
[min]="min"
|
|
755
|
+
[max]="max"
|
|
756
|
+
[showCalendarHeader]="showCalendarHeader"
|
|
757
|
+
[focusedDate]="focusedDate"
|
|
758
|
+
[allowReverse]="allowReverse"
|
|
759
|
+
[showViewHeader]="showViewHeader"
|
|
760
|
+
[showOtherMonthDays]="showOtherMonthDays"
|
|
761
|
+
[focusedDate]="dateRangeService.focusedDate"
|
|
762
|
+
[value]="dateRangeService.selectionRange"
|
|
763
|
+
selection="range"
|
|
764
|
+
(rangeSelectionChange)="onRangeSelectionChange($event)"
|
|
765
|
+
>
|
|
766
|
+
</kendo-multiviewcalendar>
|
|
767
|
+
</div>
|
|
768
|
+
</div>
|
|
769
|
+
<div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
|
|
770
|
+
<button kendoButton
|
|
771
|
+
class="k-time-cancel"
|
|
772
|
+
type="button"
|
|
773
|
+
size="large"
|
|
774
|
+
[attr.title]="localization.get('cancelLabel')"
|
|
775
|
+
[attr.aria-label]="localization.get('cancelLabel')"
|
|
776
|
+
(click)="show=false"
|
|
777
|
+
>
|
|
778
|
+
{{localization.get('cancel')}}
|
|
779
|
+
</button>
|
|
780
|
+
|
|
781
|
+
<button kendoButton
|
|
782
|
+
class="k-time-accept"
|
|
783
|
+
type="button"
|
|
784
|
+
size="large"
|
|
785
|
+
themeColor="primary"
|
|
786
|
+
[attr.title]="localization.get('acceptLabel')"
|
|
787
|
+
[attr.aria-label]="localization.get('acceptLabel')"
|
|
788
|
+
(click)="handleAccept()"
|
|
789
|
+
>
|
|
790
|
+
{{localization.get('accept')}}
|
|
791
|
+
</button>
|
|
792
|
+
</div>
|
|
793
|
+
</ng-template>
|
|
789
794
|
</kendo-actionsheet>
|
|
790
|
-
|
|
795
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
791
796
|
}
|
|
792
797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangePopupComponent, decorators: [{
|
|
793
798
|
type: Component,
|
|
@@ -803,55 +808,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
803
808
|
selector: 'kendo-daterange-popup',
|
|
804
809
|
template: `
|
|
805
810
|
<ng-container kendoDateRangePopupLocalizedMessages
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
811
|
+
i18n-accept="kendo.daterangepopup.accept|The Accept button text in the timepicker component"
|
|
812
|
+
accept="Set"
|
|
813
|
+
|
|
814
|
+
i18n-acceptLabel="kendo.daterangepopup.acceptLabel|The label for the Accept button in the timepicker component"
|
|
815
|
+
acceptLabel="Set time"
|
|
816
|
+
|
|
817
|
+
i18n-cancel="kendo.daterangepopup.cancel|The Cancel button text in the timepicker component"
|
|
818
|
+
cancel="Cancel"
|
|
819
|
+
|
|
820
|
+
i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
|
|
821
|
+
cancelLabel="Cancel changes"
|
|
822
|
+
|
|
823
|
+
i18n-adaptiveCloseButtonTitle="kendo.daterangepopup.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
824
|
+
adaptiveCloseButtonTitle="Close"
|
|
825
|
+
>
|
|
821
826
|
</ng-container>
|
|
822
827
|
<ng-container #container></ng-container>
|
|
823
828
|
<ng-template #defaultTemplate>
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
829
|
+
<kendo-multiviewcalendar
|
|
830
|
+
[activeView]="activeView"
|
|
831
|
+
[bottomView]="bottomView"
|
|
832
|
+
[animateNavigation]="animateNavigation"
|
|
833
|
+
[disabled]="disabled"
|
|
834
|
+
orientation="horizontal"
|
|
835
|
+
[views]="views"
|
|
836
|
+
[weekNumber]="weekNumber"
|
|
837
|
+
[topView]="topView"
|
|
838
|
+
[disabledDates]="disabledDates"
|
|
839
|
+
[min]="min"
|
|
840
|
+
[max]="max"
|
|
841
|
+
[showCalendarHeader]="showCalendarHeader"
|
|
842
|
+
[focusedDate]="focusedDate"
|
|
843
|
+
[allowReverse]="allowReverse"
|
|
844
|
+
[showViewHeader]="showViewHeader"
|
|
845
|
+
[showOtherMonthDays]="showOtherMonthDays"
|
|
846
|
+
selection="range"
|
|
847
|
+
[size]="size"
|
|
848
|
+
[value]="dateRangeService.selectionRange"
|
|
849
|
+
(onClosePopup)="closePopup($event)"
|
|
850
|
+
(onTabPress)="handleTab($event)"
|
|
851
|
+
(onShiftTabPress)="handleShiftTab($event)"
|
|
852
|
+
(rangeSelectionChange)="onRangeSelectionChange($event)"
|
|
853
|
+
></kendo-multiviewcalendar>
|
|
849
854
|
</ng-template>
|
|
850
|
-
|
|
855
|
+
|
|
851
856
|
<kendo-actionsheet
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
857
|
+
#actionSheet
|
|
858
|
+
(overlayClick)="show=false"
|
|
859
|
+
(collapse)="onBlur.emit()"
|
|
855
860
|
[cssClass]="{
|
|
856
861
|
'k-adaptive-actionsheet': true,
|
|
857
862
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -860,92 +865,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
860
865
|
[cssStyle]="{
|
|
861
866
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
862
867
|
}"
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
881
|
-
[svgIcon]="checkIcon"
|
|
882
|
-
fillMode="flat"
|
|
883
|
-
themeColor="primary"
|
|
884
|
-
[tabIndex]="-1"
|
|
885
|
-
size="large"
|
|
886
|
-
innerCssClass="k-button-icon"
|
|
887
|
-
(click)="handleAccept()">
|
|
888
|
-
</button>
|
|
889
|
-
</div>
|
|
890
|
-
</div>
|
|
891
|
-
</div>
|
|
892
|
-
<div class="k-actionsheet-content">
|
|
893
|
-
<div class="k-scrollable-wrap">
|
|
894
|
-
<kendo-multiviewcalendar
|
|
895
|
-
size="large"
|
|
896
|
-
[animateNavigation]="animateNavigation"
|
|
897
|
-
[disabled]="disabled"
|
|
898
|
-
orientation="vertical"
|
|
899
|
-
[views]="views"
|
|
900
|
-
[weekNumber]="weekNumber"
|
|
901
|
-
[disabledDates]="disabledDates"
|
|
902
|
-
[activeView]="activeView"
|
|
903
|
-
[bottomView]="bottomView"
|
|
904
|
-
[topView]="topView"
|
|
905
|
-
[min]="min"
|
|
906
|
-
[max]="max"
|
|
907
|
-
[showCalendarHeader]="showCalendarHeader"
|
|
908
|
-
[focusedDate]="focusedDate"
|
|
909
|
-
[allowReverse]="allowReverse"
|
|
910
|
-
[showViewHeader]="showViewHeader"
|
|
911
|
-
[showOtherMonthDays]="showOtherMonthDays"
|
|
912
|
-
[focusedDate]="dateRangeService.focusedDate"
|
|
913
|
-
[value]="dateRangeService.selectionRange"
|
|
914
|
-
selection="range"
|
|
915
|
-
(rangeSelectionChange)="onRangeSelectionChange($event)"
|
|
916
|
-
>
|
|
917
|
-
</kendo-multiviewcalendar>
|
|
918
|
-
</div>
|
|
868
|
+
>
|
|
869
|
+
<ng-template kendoActionSheetTemplate>
|
|
870
|
+
<!-- Resize sensor needs to be inside the template because the date-range-popup
|
|
871
|
+
element itself always has 0x0 size and does not trigger the sensor.
|
|
872
|
+
Note: The popup in non-adaptive mode closes on window blur -->
|
|
873
|
+
@if (isAdaptiveModeEnabled) {
|
|
874
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
875
|
+
}
|
|
876
|
+
<div class="k-actionsheet-titlebar">
|
|
877
|
+
<div class="k-actionsheet-titlebar-group">
|
|
878
|
+
<div class="k-actionsheet-title">
|
|
879
|
+
@if (adaptiveTitle) {
|
|
880
|
+
<div class="k-text-center">{{ adaptiveTitle }}</div>
|
|
881
|
+
}
|
|
882
|
+
@if (adaptiveSubtitle) {
|
|
883
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
|
|
884
|
+
}
|
|
919
885
|
</div>
|
|
920
|
-
<div class="k-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
type="button"
|
|
935
|
-
size="large"
|
|
936
|
-
themeColor="primary"
|
|
937
|
-
[attr.title]="localization.get('acceptLabel')"
|
|
938
|
-
[attr.aria-label]="localization.get('acceptLabel')"
|
|
939
|
-
(click)="handleAccept()"
|
|
940
|
-
>
|
|
941
|
-
{{localization.get('accept')}}
|
|
942
|
-
</button>
|
|
886
|
+
<div class="k-actionsheet-actions">
|
|
887
|
+
<button
|
|
888
|
+
kendoButton
|
|
889
|
+
type="button"
|
|
890
|
+
icon="check"
|
|
891
|
+
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
892
|
+
[svgIcon]="checkIcon"
|
|
893
|
+
fillMode="flat"
|
|
894
|
+
themeColor="primary"
|
|
895
|
+
[tabIndex]="-1"
|
|
896
|
+
size="large"
|
|
897
|
+
innerCssClass="k-button-icon"
|
|
898
|
+
(click)="handleAccept()">
|
|
899
|
+
</button>
|
|
943
900
|
</div>
|
|
944
|
-
|
|
901
|
+
</div>
|
|
902
|
+
</div>
|
|
903
|
+
<div class="k-actionsheet-content">
|
|
904
|
+
<div class="k-scrollable-wrap">
|
|
905
|
+
<kendo-multiviewcalendar
|
|
906
|
+
size="large"
|
|
907
|
+
[animateNavigation]="animateNavigation"
|
|
908
|
+
[disabled]="disabled"
|
|
909
|
+
orientation="vertical"
|
|
910
|
+
[views]="views"
|
|
911
|
+
[weekNumber]="weekNumber"
|
|
912
|
+
[disabledDates]="disabledDates"
|
|
913
|
+
[activeView]="activeView"
|
|
914
|
+
[bottomView]="bottomView"
|
|
915
|
+
[topView]="topView"
|
|
916
|
+
[min]="min"
|
|
917
|
+
[max]="max"
|
|
918
|
+
[showCalendarHeader]="showCalendarHeader"
|
|
919
|
+
[focusedDate]="focusedDate"
|
|
920
|
+
[allowReverse]="allowReverse"
|
|
921
|
+
[showViewHeader]="showViewHeader"
|
|
922
|
+
[showOtherMonthDays]="showOtherMonthDays"
|
|
923
|
+
[focusedDate]="dateRangeService.focusedDate"
|
|
924
|
+
[value]="dateRangeService.selectionRange"
|
|
925
|
+
selection="range"
|
|
926
|
+
(rangeSelectionChange)="onRangeSelectionChange($event)"
|
|
927
|
+
>
|
|
928
|
+
</kendo-multiviewcalendar>
|
|
929
|
+
</div>
|
|
930
|
+
</div>
|
|
931
|
+
<div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
|
|
932
|
+
<button kendoButton
|
|
933
|
+
class="k-time-cancel"
|
|
934
|
+
type="button"
|
|
935
|
+
size="large"
|
|
936
|
+
[attr.title]="localization.get('cancelLabel')"
|
|
937
|
+
[attr.aria-label]="localization.get('cancelLabel')"
|
|
938
|
+
(click)="show=false"
|
|
939
|
+
>
|
|
940
|
+
{{localization.get('cancel')}}
|
|
941
|
+
</button>
|
|
942
|
+
|
|
943
|
+
<button kendoButton
|
|
944
|
+
class="k-time-accept"
|
|
945
|
+
type="button"
|
|
946
|
+
size="large"
|
|
947
|
+
themeColor="primary"
|
|
948
|
+
[attr.title]="localization.get('acceptLabel')"
|
|
949
|
+
[attr.aria-label]="localization.get('acceptLabel')"
|
|
950
|
+
(click)="handleAccept()"
|
|
951
|
+
>
|
|
952
|
+
{{localization.get('accept')}}
|
|
953
|
+
</button>
|
|
954
|
+
</div>
|
|
955
|
+
</ng-template>
|
|
945
956
|
</kendo-actionsheet>
|
|
946
|
-
|
|
957
|
+
`,
|
|
947
958
|
standalone: true,
|
|
948
|
-
imports: [DateRangePopupLocalizedMessagesDirective, MultiViewCalendarComponent, ActionSheetComponent, ActionSheetTemplateDirective,
|
|
959
|
+
imports: [DateRangePopupLocalizedMessagesDirective, MultiViewCalendarComponent, ActionSheetComponent, ActionSheetTemplateDirective, ResizeSensorComponent, ButtonComponent]
|
|
949
960
|
}]
|
|
950
961
|
}], ctorParameters: () => [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
951
962
|
type: Optional
|