@indigina/ui-kit 1.1.277 → 1.1.279

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.
Files changed (4) hide show
  1. package/fesm2022/indigina-ui-kit.mjs +59 -17
  2. package/fesm2022/indigina-ui-kit.mjs.map +1 -1
  3. package/index.d.ts +15 -5
  4. package/package.json +1 -1
package/fesm2022/indigina-ui-kit.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i1$5 from '@angular/common';
2
2
  import { NgClass, NgTemplateOutlet, CommonModule, AsyncPipe, DatePipe, TitleCasePipe, DecimalPipe } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, effect, inject, ElementRef, NgZone, Renderer2, Directive, viewChild, forwardRef, HostListener, ChangeDetectorRef, signal, TemplateRef, ViewChild, ContentChild, Injectable, output, computed, NgModule, RendererFactory2, DOCUMENT, ViewContainerRef, DestroyRef, model, contentChildren, ContentChildren, viewChildren, Pipe, InjectionToken, contentChild } from '@angular/core';
4
+ import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, effect, inject, ElementRef, NgZone, Renderer2, Directive, ChangeDetectorRef, viewChild, forwardRef, ViewChild, HostListener, signal, TemplateRef, ContentChild, Injectable, output, computed, NgModule, RendererFactory2, DOCUMENT, ViewContainerRef, DestroyRef, model, contentChildren, ContentChildren, viewChildren, Pipe, InjectionToken, contentChild } from '@angular/core';
5
5
  import * as i1 from '@progress/kendo-angular-buttons';
6
6
  import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
7
7
  import * as i1$1 from '@progress/kendo-angular-label';
@@ -577,6 +577,7 @@ var KitTextboxSize;
577
577
 
578
578
  class KitTextboxComponent {
579
579
  constructor() {
580
+ this.cdr = inject(ChangeDetectorRef);
580
581
  /**
581
582
  * Defines a value that is going to be applied as a default input value
582
583
  */
@@ -623,8 +624,12 @@ class KitTextboxComponent {
623
624
  };
624
625
  }
625
626
  writeValue(value) {
627
+ if (this.textbox) {
628
+ this.textbox.value = value;
629
+ }
626
630
  this.onChange(value);
627
631
  this.defaultValue = value;
632
+ this.cdr.markForCheck();
628
633
  }
629
634
  registerOnChange(fn) {
630
635
  this.onChange = fn;
@@ -634,6 +639,7 @@ class KitTextboxComponent {
634
639
  }
635
640
  setDisabledState(disabled) {
636
641
  this.disabled = disabled;
642
+ this.cdr.markForCheck();
637
643
  }
638
644
  /**
639
645
  * Function that is called when input field lost focus
@@ -658,7 +664,7 @@ class KitTextboxComponent {
658
664
  provide: NG_VALUE_ACCESSOR,
659
665
  useExisting: forwardRef(() => KitTextboxComponent),
660
666
  multi: true,
661
- }], viewQueries: [{ propertyName: "textboxComponent", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-textbox\"\n [ngClass]=\"[state, size]\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [for]=\"$any(textbox)\"\n [text]=\"label\"\n [tooltip]=\"labelTooltip\"\n ></kit-input-label>\n }\n <div class=\"kit-textbox-input\">\n @if (icon) {\n <kit-svg-icon class=\"kit-textbox-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n }\n <kendo-textbox #textbox\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"defaultValue\"\n [maxlength]=\"maxlength\"\n [clearButton]=\"clearButton\"\n (blur)=\"onInputBlur()\"\n (focus)=\"focused.emit()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n @if (showStateIcon) {\n <kit-svg-icon class=\"kit-textbox-state-icon\"\n [icon]=\"textboxStateIcon[state]\"\n ></kit-svg-icon>\n }\n </div>\n\n <ng-container *ngTemplateOutlet=\"messageTemplate\" />\n\n @if (messageText && !messageTemplate) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div> \n", styles: [".kit-textbox.large .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.large .k-input{height:44px}.kit-textbox.regular .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.regular .k-input{height:38px}.kit-textbox.small .kit-textbox-input{padding:0 8px;border-radius:4px}.kit-textbox.small .k-input{height:30px}.kit-textbox .label{display:block;margin-bottom:4px}.kit-textbox-input{display:flex;align-items:center;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-textbox .k-input{padding:0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-textbox .k-input-inner{padding:0;width:100%;line-height:1}.kit-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox .k-input-prefix,.kit-textbox .k-input-suffix{height:0}.kit-textbox.default .kit-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.default:hover .kit-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-textbox.default:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-textbox.warning .kit-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-textbox.warning .kit-textbox-state-icon,.kit-textbox.warning .kit-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-textbox.warning:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-textbox.error .kit-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-textbox.error .kit-textbox-state-icon,.kit-textbox.error .kit-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-textbox.error:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-textbox.success .kit-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-textbox.success:hover .kit-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-textbox.success:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-green-1);box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-textbox.disabled .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .kit-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox.disabled .kit-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.disabled:hover .kit-textbox-input{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "ngmodule", type: TextBoxModule }, { kind: "component", type: i1$2.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
667
+ }], viewQueries: [{ propertyName: "textboxComponent", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], ngImport: i0, template: "<div class=\"kit-textbox\"\n [ngClass]=\"[state, size]\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [for]=\"$any(textbox)\"\n [text]=\"label\"\n [tooltip]=\"labelTooltip\"\n ></kit-input-label>\n }\n <div class=\"kit-textbox-input\">\n @if (icon) {\n <kit-svg-icon class=\"kit-textbox-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n }\n <kendo-textbox #textbox\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"defaultValue\"\n [maxlength]=\"maxlength\"\n [clearButton]=\"clearButton\"\n (blur)=\"onInputBlur()\"\n (focus)=\"focused.emit()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n @if (showStateIcon) {\n <kit-svg-icon class=\"kit-textbox-state-icon\"\n [icon]=\"textboxStateIcon[state]\"\n ></kit-svg-icon>\n }\n </div>\n\n <ng-container *ngTemplateOutlet=\"messageTemplate\" />\n\n @if (messageText && !messageTemplate) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div> \n", styles: [".kit-textbox.large .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.large .k-input{height:44px}.kit-textbox.regular .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.regular .k-input{height:38px}.kit-textbox.small .kit-textbox-input{padding:0 8px;border-radius:4px}.kit-textbox.small .k-input{height:30px}.kit-textbox .label{display:block;margin-bottom:4px}.kit-textbox-input{display:flex;align-items:center;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-textbox .k-input{padding:0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-textbox .k-input-inner{padding:0;width:100%;line-height:1}.kit-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox .k-input-prefix,.kit-textbox .k-input-suffix{height:0}.kit-textbox.default .kit-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.default:hover .kit-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-textbox.default:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-textbox.warning .kit-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-textbox.warning .kit-textbox-state-icon,.kit-textbox.warning .kit-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-textbox.warning:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-textbox.error .kit-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-textbox.error .kit-textbox-state-icon,.kit-textbox.error .kit-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-textbox.error:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-textbox.success .kit-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-textbox.success:hover .kit-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-textbox.success:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-green-1);box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-textbox.disabled .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .kit-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox.disabled .kit-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.disabled:hover .kit-textbox-input{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "ngmodule", type: TextBoxModule }, { kind: "component", type: i1$2.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
662
668
  }
663
669
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitTextboxComponent, decorators: [{
664
670
  type: Component,
@@ -674,7 +680,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
674
680
  NgClass,
675
681
  NgTemplateOutlet,
676
682
  ], template: "<div class=\"kit-textbox\"\n [ngClass]=\"[state, size]\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [for]=\"$any(textbox)\"\n [text]=\"label\"\n [tooltip]=\"labelTooltip\"\n ></kit-input-label>\n }\n <div class=\"kit-textbox-input\">\n @if (icon) {\n <kit-svg-icon class=\"kit-textbox-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n }\n <kendo-textbox #textbox\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"defaultValue\"\n [maxlength]=\"maxlength\"\n [clearButton]=\"clearButton\"\n (blur)=\"onInputBlur()\"\n (focus)=\"focused.emit()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n @if (showStateIcon) {\n <kit-svg-icon class=\"kit-textbox-state-icon\"\n [icon]=\"textboxStateIcon[state]\"\n ></kit-svg-icon>\n }\n </div>\n\n <ng-container *ngTemplateOutlet=\"messageTemplate\" />\n\n @if (messageText && !messageTemplate) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div> \n", styles: [".kit-textbox.large .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.large .k-input{height:44px}.kit-textbox.regular .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.regular .k-input{height:38px}.kit-textbox.small .kit-textbox-input{padding:0 8px;border-radius:4px}.kit-textbox.small .k-input{height:30px}.kit-textbox .label{display:block;margin-bottom:4px}.kit-textbox-input{display:flex;align-items:center;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-textbox .k-input{padding:0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-textbox .k-input-inner{padding:0;width:100%;line-height:1}.kit-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox .k-input-prefix,.kit-textbox .k-input-suffix{height:0}.kit-textbox.default .kit-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.default:hover .kit-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-textbox.default:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-textbox.warning .kit-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-textbox.warning .kit-textbox-state-icon,.kit-textbox.warning .kit-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-textbox.warning:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-textbox.error .kit-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-textbox.error .kit-textbox-state-icon,.kit-textbox.error .kit-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-textbox.error:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-textbox.success .kit-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-textbox.success:hover .kit-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-textbox.success:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-green-1);box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-textbox.disabled .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .kit-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox.disabled .kit-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.disabled:hover .kit-textbox-input{border-color:var(--ui-kit-color-grey-11)}\n"] }]
677
- }], propDecorators: { placeholder: [{
683
+ }], propDecorators: { textbox: [{
684
+ type: ViewChild,
685
+ args: ['textbox']
686
+ }], placeholder: [{
678
687
  type: Input
679
688
  }], label: [{
680
689
  type: Input
@@ -1101,6 +1110,7 @@ var KitTextareaState;
1101
1110
 
1102
1111
  class KitTextareaComponent {
1103
1112
  constructor() {
1113
+ this.cdr = inject(ChangeDetectorRef);
1104
1114
  /**
1105
1115
  * Defines a value that is going to be applied as a default textarea value
1106
1116
  */
@@ -1159,8 +1169,8 @@ class KitTextareaComponent {
1159
1169
  this.maxHeight = this.maxLines && this.maxLines * fontSize * lineHeight + padding;
1160
1170
  }
1161
1171
  writeValue(value) {
1162
- this.onChange(value);
1163
1172
  this.defaultValue = value;
1173
+ this.cdr.markForCheck();
1164
1174
  }
1165
1175
  registerOnChange(fn) {
1166
1176
  this.onChange = fn;
@@ -1170,6 +1180,7 @@ class KitTextareaComponent {
1170
1180
  }
1171
1181
  setDisabledState(disabled) {
1172
1182
  this.disabled = disabled;
1183
+ this.cdr.markForCheck();
1173
1184
  }
1174
1185
  /**
1175
1186
  * Function that is called when textarea field received focus
@@ -1189,6 +1200,7 @@ class KitTextareaComponent {
1189
1200
  */
1190
1201
  onTextareaChange(event) {
1191
1202
  const target = event.target;
1203
+ this.defaultValue = target.value;
1192
1204
  this.onChange(target.value);
1193
1205
  this.changed.emit(target.value);
1194
1206
  }
@@ -1525,11 +1537,9 @@ class KitDatetimepickerComponent {
1525
1537
  this.onChange(value);
1526
1538
  }
1527
1539
  writeValue(value) {
1528
- if (!value) {
1529
- return;
1530
- }
1531
- this.onChange(new Date(value));
1532
- this.defaultDate = new Date(value);
1540
+ const date = value ? new Date(value) : null;
1541
+ this.onChange(date);
1542
+ this.defaultDate = date;
1533
1543
  this.cdr.markForCheck();
1534
1544
  }
1535
1545
  registerOnChange(fn) {
@@ -1542,11 +1552,11 @@ class KitDatetimepickerComponent {
1542
1552
  this.disabled = disabled;
1543
1553
  }
1544
1554
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1545
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitDatetimepickerComponent, isStandalone: true, selector: "kit-datetimepicker", inputs: { label: "label", placeholder: "placeholder", disabled: "disabled", messageIcon: "messageIcon", messageText: "messageText", invalid: "invalid", format: "format", defaultDate: "defaultDate", min: "min", max: "max", applyButtonText: "applyButtonText", cancelButtonText: "cancelButtonText" }, outputs: { changed: "changed" }, providers: [{
1555
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitDatetimepickerComponent, isStandalone: true, selector: "kit-datetimepicker", inputs: { label: "label", labelTooltip: "labelTooltip", placeholder: "placeholder", disabled: "disabled", messageIcon: "messageIcon", messageText: "messageText", invalid: "invalid", format: "format", defaultDate: "defaultDate", min: "min", max: "max", applyButtonText: "applyButtonText", cancelButtonText: "cancelButtonText" }, outputs: { changed: "changed" }, providers: [{
1546
1556
  provide: NG_VALUE_ACCESSOR,
1547
1557
  useExisting: forwardRef(() => KitDatetimepickerComponent),
1548
1558
  multi: true,
1549
- }], 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-11);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{fill: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;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{fill: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{fill: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{fill: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-selected{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;color:var(--ui-kit-color-grey-10);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;width:auto;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-calendar-monthview .k-calendar-td.k-empty{width:24px;height:24px}.kit-datetimepicker-popup.k-popup .k-calendar-yearview .k-calendar-td.k-empty,.kit-datetimepicker-popup.k-popup .k-calendar-decadeview .k-calendar-td.k-empty,.kit-datetimepicker-popup.k-popup .k-calendar-centuryview .k-calendar-td.k-empty{width:54px;height:24px}.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: "ngmodule", type: DateInputsModule }, { kind: "component", type: i1$4.DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages" }, { kind: "component", type: i1$4.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "adaptiveTitle", "adaptiveSubtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { 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 }); }
1559
+ }], 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 [tooltip]=\"labelTooltip\"\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-11);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{fill: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;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{fill: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{fill: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{fill: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-selected{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;color:var(--ui-kit-color-grey-10);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;width:auto;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-calendar-monthview .k-calendar-td.k-empty{width:24px;height:24px}.kit-datetimepicker-popup.k-popup .k-calendar-yearview .k-calendar-td.k-empty,.kit-datetimepicker-popup.k-popup .k-calendar-decadeview .k-calendar-td.k-empty,.kit-datetimepicker-popup.k-popup .k-calendar-centuryview .k-calendar-td.k-empty{width:54px;height:24px}.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: "ngmodule", type: DateInputsModule }, { kind: "component", type: i1$4.DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages" }, { kind: "component", type: i1$4.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "adaptiveTitle", "adaptiveSubtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { 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 }); }
1550
1560
  }
1551
1561
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitDatetimepickerComponent, decorators: [{
1552
1562
  type: Component,
@@ -1559,9 +1569,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1559
1569
  KitSvgIconComponent,
1560
1570
  KitInputMessageComponent,
1561
1571
  KitInputLabelComponent,
1562
- ], 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-11);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{fill: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;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{fill: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{fill: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{fill: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-selected{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;color:var(--ui-kit-color-grey-10);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;width:auto;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-calendar-monthview .k-calendar-td.k-empty{width:24px;height:24px}.kit-datetimepicker-popup.k-popup .k-calendar-yearview .k-calendar-td.k-empty,.kit-datetimepicker-popup.k-popup .k-calendar-decadeview .k-calendar-td.k-empty,.kit-datetimepicker-popup.k-popup .k-calendar-centuryview .k-calendar-td.k-empty{width:54px;height:24px}.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"] }]
1572
+ ], 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 [tooltip]=\"labelTooltip\"\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-11);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{fill: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;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{fill: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{fill: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{fill: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-selected{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;color:var(--ui-kit-color-grey-10);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;width:auto;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-calendar-monthview .k-calendar-td.k-empty{width:24px;height:24px}.kit-datetimepicker-popup.k-popup .k-calendar-yearview .k-calendar-td.k-empty,.kit-datetimepicker-popup.k-popup .k-calendar-decadeview .k-calendar-td.k-empty,.kit-datetimepicker-popup.k-popup .k-calendar-centuryview .k-calendar-td.k-empty{width:54px;height:24px}.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"] }]
1563
1573
  }], propDecorators: { label: [{
1564
1574
  type: Input
1575
+ }], labelTooltip: [{
1576
+ type: Input
1565
1577
  }], placeholder: [{
1566
1578
  type: Input
1567
1579
  }], disabled: [{
@@ -9309,6 +9321,7 @@ class KitCardDetailsComponent {
9309
9321
  skip: 0,
9310
9322
  take: 0,
9311
9323
  }, ...(ngDevMode ? [{ debugName: "dataState" }] : []));
9324
+ this.newCreatedCards = signal([], ...(ngDevMode ? [{ debugName: "newCreatedCards" }] : []));
9312
9325
  this.shouldAppendFetchedData = true;
9313
9326
  }
9314
9327
  ngOnInit() {
@@ -9320,6 +9333,16 @@ class KitCardDetailsComponent {
9320
9333
  this.initSearchSubscription();
9321
9334
  this.initStateFromUrl();
9322
9335
  }
9336
+ get skipNewCreatedCardFilter() {
9337
+ return this.newCreatedCards().length ? {
9338
+ logic: KitFilterLogic.AND,
9339
+ filters: this.newCreatedCards().map(card => ({
9340
+ field: 'id',
9341
+ operator: KitFilterOperator.NEQ,
9342
+ value: card.id,
9343
+ })),
9344
+ } : {};
9345
+ }
9323
9346
  loadMoreData() {
9324
9347
  this.shouldAppendFetchedData = true;
9325
9348
  this.dataState.update(state => ({
@@ -9340,18 +9363,36 @@ class KitCardDetailsComponent {
9340
9363
  ...this.cardData(),
9341
9364
  ...cards,
9342
9365
  ]);
9343
- this.total.set(this.total() + 1);
9366
+ this.newCreatedCards.set([
9367
+ ...this.newCreatedCards(),
9368
+ ...cards,
9369
+ ]);
9370
+ this.dataState.update(state => ({
9371
+ ...state,
9372
+ filters: this.skipNewCreatedCardFilter,
9373
+ }));
9374
+ this.total.set(this.total() + cards.length);
9344
9375
  }
9345
9376
  deleteCard(cardId) {
9346
9377
  this.isLoading.set(true);
9347
9378
  this.cardData.set(this.cardData().filter(card => card.id.toString() !== cardId.toString()));
9348
9379
  this.total.set(this.total() - 1);
9349
9380
  const skip = (this.dataState().skip ?? 0) + 1;
9381
+ if (this.newCreatedCards().some(card => card.id.toString() === cardId.toString())) {
9382
+ this.newCreatedCards.set(this.newCreatedCards().filter(card => card.id.toString() !== cardId.toString()));
9383
+ this.dataState.update(state => ({
9384
+ ...state,
9385
+ filters: this.skipNewCreatedCardFilter,
9386
+ }));
9387
+ this.isLoading.set(false);
9388
+ return;
9389
+ }
9350
9390
  if (skip >= this.total()) {
9391
+ this.isLoading.set(false);
9351
9392
  return;
9352
9393
  }
9353
9394
  this.shouldAppendFetchedData = true;
9354
- this.dataStateChanged.emit({ skip, take: 1 });
9395
+ this.dataStateChanged.emit({ skip, take: 1, filters: this.skipNewCreatedCardFilter, search: this.dataState().search });
9355
9396
  }
9356
9397
  updateSpecificCardData(cardData) {
9357
9398
  this.cardData.set(this.cardData().map(card => {
@@ -9362,8 +9403,9 @@ class KitCardDetailsComponent {
9362
9403
  }));
9363
9404
  }
9364
9405
  initSearchSubscription() {
9365
- this.kitTextboxComponent().changed.pipe(filter(() => !this.isLoading()), debounceTime(500), takeUntilDestroyed(this.destroyRef)).subscribe(searchValue => {
9406
+ this.kitTextboxComponent().changed.pipe(filter(() => !this.isLoading()), debounceTime(500), takeUntilDestroyed(this.destroyRef), map(value => value.trim())).subscribe(searchValue => {
9366
9407
  this.cardData.set([]);
9408
+ this.newCreatedCards.set([]);
9367
9409
  this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined });
9368
9410
  this.shouldAppendFetchedData = true;
9369
9411
  this.updateData();
@@ -9399,7 +9441,7 @@ class KitCardDetailsComponent {
9399
9441
  ...this.cardData(),
9400
9442
  ...data.results.data,
9401
9443
  ]);
9402
- this.total.set(data.results.total);
9444
+ this.total.set(data.results.total + this.newCreatedCards().length);
9403
9445
  this.shouldAppendFetchedData = false;
9404
9446
  }
9405
9447
  if (!handledInitialActiveId
@@ -9437,7 +9479,7 @@ class KitCardDetailsComponent {
9437
9479
  setStateToUrl(state) {
9438
9480
  const queryParams = Object.keys(state).reduce((acc, key) => {
9439
9481
  const val = state[key];
9440
- if (val !== undefined) {
9482
+ if (val !== undefined && key !== 'filters') {
9441
9483
  acc[key] = val;
9442
9484
  }
9443
9485
  return acc;