@indigina/ui-kit 1.1.59 → 1.1.61
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/lib/components/kit-datepicker/kit-datepicker.component.mjs +2 -2
- package/esm2022/lib/components/kit-datetimepicker/kit-datetimepicker.component.mjs +2 -2
- package/esm2022/lib/components/kit-timepicker/kit-timepicker.component.mjs +62 -9
- package/esm2022/lib/components/kit-timepicker/kit-timepicker.module.mjs +15 -4
- package/fesm2022/indigina-ui-kit.mjs +74 -13
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-timepicker/kit-timepicker.component.d.ts +55 -3
- package/lib/components/kit-timepicker/kit-timepicker.module.d.ts +3 -1
- package/package.json +1 -1
|
@@ -18,7 +18,7 @@ import { map } from 'rxjs/operators';
|
|
|
18
18
|
import * as i1$3 from '@progress/kendo-angular-dropdowns';
|
|
19
19
|
import { DropDownListModule, DropDownsModule, MultiSelectModule } from '@progress/kendo-angular-dropdowns';
|
|
20
20
|
import * as i2$1 from '@progress/kendo-angular-dateinputs';
|
|
21
|
-
import { DateInputsModule, DateRangePopupComponent, DateRangeService, TimePickerModule } from '@progress/kendo-angular-dateinputs';
|
|
21
|
+
import { DateInputsModule, DateRangePopupComponent, DateRangeService, TimePickerModule, DateTimePickerModule } from '@progress/kendo-angular-dateinputs';
|
|
22
22
|
import * as i1$5 from 'ngx-toastr';
|
|
23
23
|
import { ToastrModule, TOAST_CONFIG, DefaultGlobalConfig } from 'ngx-toastr';
|
|
24
24
|
import * as i1$6 from '@angular/router';
|
|
@@ -1850,7 +1850,7 @@ class KitDatetimepickerComponent {
|
|
|
1850
1850
|
provide: NG_VALUE_ACCESSOR,
|
|
1851
1851
|
useExisting: forwardRef(() => KitDatetimepickerComponent),
|
|
1852
1852
|
multi: true,
|
|
1853
|
-
}], viewQueries: [{ propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datetimepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datetimepicker)\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <kendo-datetimepicker #datetimepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\"\n [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\">\n <kendo-datetimepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n [now]=\"nowButtonText\"\n ></kendo-datetimepicker-messages>\n </kendo-datetimepicker>\n <button class=\"toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker:hover .k-datetimepicker{border-color:var(--ui-kit-color-hover)}.kit-datetimepicker .k-datetimepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white)}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datetimepicker .k-datetimepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datetimepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datetimepicker.disabled .k-datetimepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datetimepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datetimepicker.disabled .toggle-btn{cursor:default}.kit-datetimepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker.invalid .k-datetimepicker{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .toggle-btn{cursor:default}.kit-datetimepicker.invalid .toggle-btn .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup{margin-bottom:10px;padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button-group{gap:10px;width:auto}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{padding:0 11px;height:46px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;border-bottom:2px solid transparent;border-radius:0;background:var(--ui-kit-color-white);transition:none}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button:hover{color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:280px}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:280px}.kit-datetimepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datetimepicker-popup.k-popup .k-calendar-title{padding:6px 8px;font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-view{margin:0;padding:10px 0;gap:32px;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-tr{display:flex;gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}.kit-datetimepicker-popup.k-popup .k-timeselector{height:100%}.kit-datetimepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-time-header .k-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-time-list-container{padding:10px 0}.kit-datetimepicker-popup.k-popup .k-time-container{display:flex;justify-content:flex-end}.kit-datetimepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;margin:auto 15px auto 0;width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{padding:0;height:208px}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:flex-end;margin-left:auto;margin-right:20px;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400}.kit-datetimepicker-popup.k-popup .k-time-list .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-datetimepicker-popup.k-popup .k-time-separator+.k-time-list-wrapper .k-title{margin-left:14px;margin-right:auto}.kit-datetimepicker-popup.k-popup .k-time-separator+.k-time-list-wrapper .k-time-container{justify-content:flex-start}.kit-datetimepicker-popup.k-popup .k-time-separator+.k-time-list-wrapper .k-reset{margin:auto 0 auto 15px}.kit-datetimepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-actions .k-button{flex:none;padding:0 19px;height:32px;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "component", type: i2$1.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { kind: "component", type: i2$1.DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1853
|
+
}], viewQueries: [{ propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datetimepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datetimepicker)\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <kendo-datetimepicker #datetimepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\"\n [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\">\n <kendo-datetimepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n [now]=\"nowButtonText\"\n ></kendo-datetimepicker-messages>\n </kendo-datetimepicker>\n <button class=\"toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker:hover .k-datetimepicker{border-color:var(--ui-kit-color-hover)}.kit-datetimepicker .k-datetimepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white)}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datetimepicker .k-datetimepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datetimepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datetimepicker.disabled .k-datetimepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datetimepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datetimepicker.disabled .toggle-btn{cursor:default}.kit-datetimepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker.invalid .k-datetimepicker{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .toggle-btn{cursor:default}.kit-datetimepicker.invalid .toggle-btn .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup{margin-bottom:10px;padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button-group{gap:10px;width:auto}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{padding:0 11px;height:46px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;border-bottom:2px solid transparent;border-radius:0;background:var(--ui-kit-color-white);transition:none}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button:hover{color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:280px}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:280px}.kit-datetimepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datetimepicker-popup.k-popup .k-calendar-title{padding:6px 8px;font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-view{margin:0;padding:10px 0;gap:32px;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-tr{display:flex;gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:24px;height:24px;border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}.kit-datetimepicker-popup.k-popup .k-timeselector{height:100%}.kit-datetimepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-time-header .k-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-time-list-container{justify-content:center;padding:10px 0;gap:20px}.kit-datetimepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;align-items:center;width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{flex-grow:0;padding:0;height:208px;min-width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:flex-end;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400}.kit-datetimepicker-popup.k-popup .k-time-list .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-datetimepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-actions .k-button{flex:none;padding:0 19px;height:32px;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "component", type: i2$1.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { kind: "component", type: i2$1.DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1854
1854
|
}
|
|
1855
1855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitDatetimepickerComponent, decorators: [{
|
|
1856
1856
|
type: Component,
|
|
@@ -1858,7 +1858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
1858
1858
|
provide: NG_VALUE_ACCESSOR,
|
|
1859
1859
|
useExisting: forwardRef(() => KitDatetimepickerComponent),
|
|
1860
1860
|
multi: true,
|
|
1861
|
-
}], template: "<div class=\"kit-datetimepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datetimepicker)\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <kendo-datetimepicker #datetimepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\"\n [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\">\n <kendo-datetimepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n [now]=\"nowButtonText\"\n ></kendo-datetimepicker-messages>\n </kendo-datetimepicker>\n <button class=\"toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker:hover .k-datetimepicker{border-color:var(--ui-kit-color-hover)}.kit-datetimepicker .k-datetimepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white)}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datetimepicker .k-datetimepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datetimepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datetimepicker.disabled .k-datetimepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datetimepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datetimepicker.disabled .toggle-btn{cursor:default}.kit-datetimepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker.invalid .k-datetimepicker{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .toggle-btn{cursor:default}.kit-datetimepicker.invalid .toggle-btn .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup{margin-bottom:10px;padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button-group{gap:10px;width:auto}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{padding:0 11px;height:46px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;border-bottom:2px solid transparent;border-radius:0;background:var(--ui-kit-color-white);transition:none}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button:hover{color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:280px}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:280px}.kit-datetimepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datetimepicker-popup.k-popup .k-calendar-title{padding:6px 8px;font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-view{margin:0;padding:10px 0;gap:32px;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-tr{display:flex;gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}.kit-datetimepicker-popup.k-popup .k-timeselector{height:100%}.kit-datetimepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-time-header .k-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-time-list-container{padding:10px 0}.kit-datetimepicker-popup.k-popup .k-time-container{display:flex;justify-content:flex-end}.kit-datetimepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;margin:auto 15px auto 0;width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{padding:0;height:208px}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:flex-end;margin-left:auto;margin-right:20px;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400}.kit-datetimepicker-popup.k-popup .k-time-list .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-datetimepicker-popup.k-popup .k-time-separator+.k-time-list-wrapper .k-title{margin-left:14px;margin-right:auto}.kit-datetimepicker-popup.k-popup .k-time-separator+.k-time-list-wrapper .k-time-container{justify-content:flex-start}.kit-datetimepicker-popup.k-popup .k-time-separator+.k-time-list-wrapper .k-reset{margin:auto 0 auto 15px}.kit-datetimepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-actions .k-button{flex:none;padding:0 19px;height:32px;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}\n"] }]
|
|
1861
|
+
}], template: "<div class=\"kit-datetimepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datetimepicker)\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <kendo-datetimepicker #datetimepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\"\n [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\">\n <kendo-datetimepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n [now]=\"nowButtonText\"\n ></kendo-datetimepicker-messages>\n </kendo-datetimepicker>\n <button class=\"toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker:hover .k-datetimepicker{border-color:var(--ui-kit-color-hover)}.kit-datetimepicker .k-datetimepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white)}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datetimepicker .k-datetimepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datetimepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datetimepicker.disabled .k-datetimepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datetimepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datetimepicker.disabled .toggle-btn{cursor:default}.kit-datetimepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker.invalid .k-datetimepicker{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .toggle-btn{cursor:default}.kit-datetimepicker.invalid .toggle-btn .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup{margin-bottom:10px;padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button-group{gap:10px;width:auto}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{padding:0 11px;height:46px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;border-bottom:2px solid transparent;border-radius:0;background:var(--ui-kit-color-white);transition:none}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button:hover{color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:280px}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:280px}.kit-datetimepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datetimepicker-popup.k-popup .k-calendar-title{padding:6px 8px;font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-view{margin:0;padding:10px 0;gap:32px;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-tr{display:flex;gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:24px;height:24px;border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}.kit-datetimepicker-popup.k-popup .k-timeselector{height:100%}.kit-datetimepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-time-header .k-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-time-list-container{justify-content:center;padding:10px 0;gap:20px}.kit-datetimepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;align-items:center;width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{flex-grow:0;padding:0;height:208px;min-width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:flex-end;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400}.kit-datetimepicker-popup.k-popup .k-time-list .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-datetimepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-actions .k-button{flex:none;padding:0 19px;height:32px;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}\n"] }]
|
|
1862
1862
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
1863
1863
|
type: Input
|
|
1864
1864
|
}], placeholder: [{
|
|
@@ -3342,22 +3342,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3342
3342
|
|
|
3343
3343
|
class KitTimepickerComponent {
|
|
3344
3344
|
constructor() {
|
|
3345
|
+
/**
|
|
3346
|
+
* Defines a value that is going to be applied as a timepicker label
|
|
3347
|
+
*/
|
|
3345
3348
|
this.label = null;
|
|
3349
|
+
/**
|
|
3350
|
+
* Defines a value that is going to be applied as a timepicker placeholder
|
|
3351
|
+
*/
|
|
3346
3352
|
this.placeholder = null;
|
|
3353
|
+
/**
|
|
3354
|
+
* Defines a value that is going to be applied as a default timepicker value
|
|
3355
|
+
*/
|
|
3347
3356
|
this.defaultValue = null;
|
|
3357
|
+
/**
|
|
3358
|
+
* Defines whether 24-hour time format will be applied to timepicker component
|
|
3359
|
+
*/
|
|
3348
3360
|
this.longFormatEnabled = true;
|
|
3361
|
+
/**
|
|
3362
|
+
* Defines whether the component will be in disabled state
|
|
3363
|
+
*/
|
|
3349
3364
|
this.disabled = false;
|
|
3350
|
-
|
|
3365
|
+
/**
|
|
3366
|
+
* Defines a state whether the component will be invalid
|
|
3367
|
+
*/
|
|
3368
|
+
this.invalid = false;
|
|
3369
|
+
/**
|
|
3370
|
+
* Specifies the smallest valid time value
|
|
3371
|
+
*/
|
|
3351
3372
|
this.min = null;
|
|
3373
|
+
/**
|
|
3374
|
+
* Specifies the biggest valid time value
|
|
3375
|
+
*/
|
|
3352
3376
|
this.max = null;
|
|
3377
|
+
/**
|
|
3378
|
+
* Defines the text of the Apply button in the popup footer of the component, "Apply" by default
|
|
3379
|
+
*/
|
|
3380
|
+
this.applyButtonText = 'Apply';
|
|
3381
|
+
/**
|
|
3382
|
+
* Defines the text of the Cancel button in the popup footer of the component, "Cancel" by default
|
|
3383
|
+
*/
|
|
3384
|
+
this.cancelButtonText = 'Cancel';
|
|
3385
|
+
/**
|
|
3386
|
+
* An action which is emitted when timepicker popup opened
|
|
3387
|
+
*/
|
|
3353
3388
|
this.popupOpened = new EventEmitter();
|
|
3389
|
+
/**
|
|
3390
|
+
* An action which is emitted when timepicker popup closed
|
|
3391
|
+
*/
|
|
3354
3392
|
this.popupClosed = new EventEmitter();
|
|
3393
|
+
/**
|
|
3394
|
+
* An action which is emitted when timepicker value changed
|
|
3395
|
+
*/
|
|
3355
3396
|
this.changed = new EventEmitter();
|
|
3397
|
+
/**
|
|
3398
|
+
* An action which is emitted when timepicker input field lost focus
|
|
3399
|
+
*/
|
|
3356
3400
|
this.blured = new EventEmitter();
|
|
3357
3401
|
this.KitSvgIcon = KitSvgIcon;
|
|
3358
3402
|
this.longTimeFormat = 'HH:mm';
|
|
3359
3403
|
this.shortTimeFormat = 'hh:mm a';
|
|
3360
|
-
this.
|
|
3404
|
+
this.timepickerPopupSettings = {
|
|
3361
3405
|
popupClass: 'kit-timepicker-popup',
|
|
3362
3406
|
};
|
|
3363
3407
|
}
|
|
@@ -3386,11 +3430,11 @@ class KitTimepickerComponent {
|
|
|
3386
3430
|
this.disabled = disabled;
|
|
3387
3431
|
}
|
|
3388
3432
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3433
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitTimepickerComponent, selector: "kit-timepicker", inputs: { label: "label", placeholder: "placeholder", defaultValue: "defaultValue", longFormatEnabled: "longFormatEnabled", disabled: "disabled", invalid: "invalid", min: "min", max: "max", applyButtonText: "applyButtonText", cancelButtonText: "cancelButtonText", messageIcon: "messageIcon", messageText: "messageText" }, outputs: { popupOpened: "popupOpened", popupClosed: "popupClosed", changed: "changed", blured: "blured" }, providers: [{
|
|
3390
3434
|
provide: NG_VALUE_ACCESSOR,
|
|
3391
3435
|
useExisting: forwardRef(() => KitTimepickerComponent),
|
|
3392
3436
|
multi: true,
|
|
3393
|
-
}], ngImport: i0, template: "<div class=\"kit-timepicker\"
|
|
3437
|
+
}], ngImport: i0, template: "<div class=\"kit-timepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(timepicker)\"\n ></kit-input-label>\n }\n\n <kendo-timepicker #timepicker\n [title]=\"label\"\n [placeholder]=\"placeholder\"\n [min]=\"min\"\n [max]=\"max\"\n [format]=\"longFormatEnabled && longTimeFormat || shortTimeFormat\"\n [disabled]=\"disabled\"\n [value]=\"defaultValue\"\n [popupSettings]=\"timepickerPopupSettings\"\n (open)=\"popupOpened.emit()\"\n (close)=\"popupClosed.emit()\"\n (valueChange)=\"onInputChange($event)\"\n (blur)=\"onInputBlur()\">\n <kendo-timepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n ></kendo-timepicker-messages>\n </kendo-timepicker>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-timepicker .label{display:block;margin-bottom:4px}.kit-timepicker:hover .k-timepicker{border-color:var(--ui-kit-color-hover)}.kit-timepicker .k-timepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white)}.kit-timepicker .k-timepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-timepicker .k-timepicker.k-focus .k-input-inner{box-shadow:none}.kit-timepicker .k-timepicker.k-focus .k-input-button{color:var(--ui-kit-color-main)}.kit-timepicker .k-dateinput{box-shadow:none}.kit-timepicker .k-input-inner{padding:0 0 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-timepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-timepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-timepicker .k-input-button{padding:0 8px;width:auto;color:var(--ui-kit-color-grey-12);border:none;background:none;transition:none}.kit-timepicker .k-input-button .k-button-icon{width:20px;height:20px}.kit-timepicker .k-input-button:hover{color:var(--ui-kit-color-hover)}.kit-timepicker.disabled .k-timepicker{border-color:var(--ui-kit-color-grey-12)}.kit-timepicker.disabled .k-input-inner,.kit-timepicker.disabled .k-input-button{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-timepicker.invalid .k-timepicker{border-color:var(--ui-kit-color-red-1)}.kit-timepicker.invalid .k-input-button{color:var(--ui-kit-color-red-1)}.kit-timepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-timepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-timepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-timepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-timepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-timepicker-popup.k-popup .k-time-header .k-title,.kit-timepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-timepicker-popup.k-popup .k-time-list-container{justify-content:center;padding:10px 0;gap:20px}.kit-timepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;align-items:center;width:auto}.kit-timepicker-popup.k-popup .k-time-list-wrapper{flex-grow:0;padding:0;height:208px;min-width:auto}.kit-timepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:center;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-timepicker-popup.k-popup .k-time-list-wrapper:before,.kit-timepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-timepicker-popup.k-popup .k-time-list:before,.kit-timepicker-popup.k-popup .k-time-list:after{display:none}.kit-timepicker-popup.k-popup .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400;line-height:22px}.kit-timepicker-popup.k-popup .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-timepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-timepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-timepicker-popup.k-popup .k-time-footer{margin-top:0;padding:12px;justify-content:center;border-top:1px solid #006890}.kit-timepicker-popup.k-popup .k-time-footer .k-button{margin:0 5px;width:110px;height:30px;flex:0 0 auto;font-size:14px;font-weight:400;border-radius:4px;border:none;color:#27282a;background:#dadde3}.kit-timepicker-popup.k-popup .k-time-footer .k-time-accept{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-timepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;justify-content:flex-start;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timepicker-popup.k-popup .k-actions .k-button{padding:0 19px;height:32px;width:auto;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}\n"], dependencies: [{ kind: "component", type: i2$1.TimePickerCustomMessagesComponent, selector: "kendo-timepicker-messages" }, { kind: "component", type: i2$1.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "subtitle", "rangeValidation", "adaptiveMode", "value", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3394
3438
|
}
|
|
3395
3439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTimepickerComponent, decorators: [{
|
|
3396
3440
|
type: Component,
|
|
@@ -3398,7 +3442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3398
3442
|
provide: NG_VALUE_ACCESSOR,
|
|
3399
3443
|
useExisting: forwardRef(() => KitTimepickerComponent),
|
|
3400
3444
|
multi: true,
|
|
3401
|
-
}], template: "<div class=\"kit-timepicker\"
|
|
3445
|
+
}], encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-timepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(timepicker)\"\n ></kit-input-label>\n }\n\n <kendo-timepicker #timepicker\n [title]=\"label\"\n [placeholder]=\"placeholder\"\n [min]=\"min\"\n [max]=\"max\"\n [format]=\"longFormatEnabled && longTimeFormat || shortTimeFormat\"\n [disabled]=\"disabled\"\n [value]=\"defaultValue\"\n [popupSettings]=\"timepickerPopupSettings\"\n (open)=\"popupOpened.emit()\"\n (close)=\"popupClosed.emit()\"\n (valueChange)=\"onInputChange($event)\"\n (blur)=\"onInputBlur()\">\n <kendo-timepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n ></kendo-timepicker-messages>\n </kendo-timepicker>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-timepicker .label{display:block;margin-bottom:4px}.kit-timepicker:hover .k-timepicker{border-color:var(--ui-kit-color-hover)}.kit-timepicker .k-timepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white)}.kit-timepicker .k-timepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-timepicker .k-timepicker.k-focus .k-input-inner{box-shadow:none}.kit-timepicker .k-timepicker.k-focus .k-input-button{color:var(--ui-kit-color-main)}.kit-timepicker .k-dateinput{box-shadow:none}.kit-timepicker .k-input-inner{padding:0 0 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-timepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-timepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-timepicker .k-input-button{padding:0 8px;width:auto;color:var(--ui-kit-color-grey-12);border:none;background:none;transition:none}.kit-timepicker .k-input-button .k-button-icon{width:20px;height:20px}.kit-timepicker .k-input-button:hover{color:var(--ui-kit-color-hover)}.kit-timepicker.disabled .k-timepicker{border-color:var(--ui-kit-color-grey-12)}.kit-timepicker.disabled .k-input-inner,.kit-timepicker.disabled .k-input-button{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-timepicker.invalid .k-timepicker{border-color:var(--ui-kit-color-red-1)}.kit-timepicker.invalid .k-input-button{color:var(--ui-kit-color-red-1)}.kit-timepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-timepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-timepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-timepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-timepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-timepicker-popup.k-popup .k-time-header .k-title,.kit-timepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-timepicker-popup.k-popup .k-time-list-container{justify-content:center;padding:10px 0;gap:20px}.kit-timepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;align-items:center;width:auto}.kit-timepicker-popup.k-popup .k-time-list-wrapper{flex-grow:0;padding:0;height:208px;min-width:auto}.kit-timepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:center;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-timepicker-popup.k-popup .k-time-list-wrapper:before,.kit-timepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-timepicker-popup.k-popup .k-time-list:before,.kit-timepicker-popup.k-popup .k-time-list:after{display:none}.kit-timepicker-popup.k-popup .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400;line-height:22px}.kit-timepicker-popup.k-popup .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-timepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-timepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-timepicker-popup.k-popup .k-time-footer{margin-top:0;padding:12px;justify-content:center;border-top:1px solid #006890}.kit-timepicker-popup.k-popup .k-time-footer .k-button{margin:0 5px;width:110px;height:30px;flex:0 0 auto;font-size:14px;font-weight:400;border-radius:4px;border:none;color:#27282a;background:#dadde3}.kit-timepicker-popup.k-popup .k-time-footer .k-time-accept{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-timepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;justify-content:flex-start;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timepicker-popup.k-popup .k-actions .k-button{padding:0 19px;height:32px;width:auto;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-timepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}\n"] }]
|
|
3402
3446
|
}], propDecorators: { label: [{
|
|
3403
3447
|
type: Input
|
|
3404
3448
|
}], placeholder: [{
|
|
@@ -3409,12 +3453,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3409
3453
|
type: Input
|
|
3410
3454
|
}], disabled: [{
|
|
3411
3455
|
type: Input
|
|
3412
|
-
}],
|
|
3456
|
+
}], invalid: [{
|
|
3413
3457
|
type: Input
|
|
3414
3458
|
}], min: [{
|
|
3415
3459
|
type: Input
|
|
3416
3460
|
}], max: [{
|
|
3417
3461
|
type: Input
|
|
3462
|
+
}], applyButtonText: [{
|
|
3463
|
+
type: Input
|
|
3464
|
+
}], cancelButtonText: [{
|
|
3465
|
+
type: Input
|
|
3466
|
+
}], messageIcon: [{
|
|
3467
|
+
type: Input
|
|
3468
|
+
}], messageText: [{
|
|
3469
|
+
type: Input
|
|
3418
3470
|
}], popupOpened: [{
|
|
3419
3471
|
type: Output
|
|
3420
3472
|
}], popupClosed: [{
|
|
@@ -3429,10 +3481,16 @@ class KitTimepickerModule {
|
|
|
3429
3481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3430
3482
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: KitTimepickerModule, declarations: [KitTimepickerComponent], imports: [TimePickerModule,
|
|
3431
3483
|
CommonModule,
|
|
3432
|
-
KitSvgIconModule
|
|
3484
|
+
KitSvgIconModule,
|
|
3485
|
+
KitInputLabelModule,
|
|
3486
|
+
DateTimePickerModule,
|
|
3487
|
+
KitInputMessageModule], exports: [KitTimepickerComponent] }); }
|
|
3433
3488
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTimepickerModule, imports: [TimePickerModule,
|
|
3434
3489
|
CommonModule,
|
|
3435
|
-
KitSvgIconModule
|
|
3490
|
+
KitSvgIconModule,
|
|
3491
|
+
KitInputLabelModule,
|
|
3492
|
+
DateTimePickerModule,
|
|
3493
|
+
KitInputMessageModule] }); }
|
|
3436
3494
|
}
|
|
3437
3495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTimepickerModule, decorators: [{
|
|
3438
3496
|
type: NgModule,
|
|
@@ -3447,6 +3505,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3447
3505
|
TimePickerModule,
|
|
3448
3506
|
CommonModule,
|
|
3449
3507
|
KitSvgIconModule,
|
|
3508
|
+
KitInputLabelModule,
|
|
3509
|
+
DateTimePickerModule,
|
|
3510
|
+
KitInputMessageModule,
|
|
3450
3511
|
],
|
|
3451
3512
|
}]
|
|
3452
3513
|
}] });
|
|
@@ -4382,7 +4443,7 @@ class KitDatepickerComponent {
|
|
|
4382
4443
|
provide: NG_VALUE_ACCESSOR,
|
|
4383
4444
|
useExisting: forwardRef(() => KitDatepickerComponent),
|
|
4384
4445
|
multi: true,
|
|
4385
|
-
}], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:
|
|
4446
|
+
}], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:24px;height:24px;border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tr{display:flex;gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize;line-height:20px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"], dependencies: [{ kind: "component", type: i2$1.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4386
4447
|
}
|
|
4387
4448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitDatepickerComponent, decorators: [{
|
|
4388
4449
|
type: Component,
|
|
@@ -4390,7 +4451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
4390
4451
|
provide: NG_VALUE_ACCESSOR,
|
|
4391
4452
|
useExisting: forwardRef(() => KitDatepickerComponent),
|
|
4392
4453
|
multi: true,
|
|
4393
|
-
}], template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:
|
|
4454
|
+
}], template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:24px;height:24px;border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tr{display:flex;gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize;line-height:20px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"] }]
|
|
4394
4455
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
|
|
4395
4456
|
type: Inject,
|
|
4396
4457
|
args: [DOCUMENT]
|