@indigina/ui-kit 1.1.48 → 1.1.50

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.
@@ -2488,11 +2488,6 @@ var KitDaterangeType;
2488
2488
  KitDaterangeType["DEFAULT"] = "default";
2489
2489
  KitDaterangeType["BUTTON"] = "button";
2490
2490
  })(KitDaterangeType || (KitDaterangeType = {}));
2491
- var KitDaterangeIconPosition;
2492
- (function (KitDaterangeIconPosition) {
2493
- KitDaterangeIconPosition["LEFT"] = "left";
2494
- KitDaterangeIconPosition["RIGHT"] = "right";
2495
- })(KitDaterangeIconPosition || (KitDaterangeIconPosition = {}));
2496
2491
  class KitDaterangeComponent {
2497
2492
  constructor() {
2498
2493
  this.type = KitDaterangeType.DEFAULT;
@@ -2501,13 +2496,9 @@ class KitDaterangeComponent {
2501
2496
  */
2502
2497
  this.format = 'dd MMM yyyy';
2503
2498
  /**
2504
- * Defines a state whether the component will be valid or not
2505
- */
2506
- this.isValid = true;
2507
- /**
2508
- * Defines a value which used to set position of the calendar icon
2499
+ * Defines a state whether the component will be invalid
2509
2500
  */
2510
- this.iconPosition = KitDaterangeIconPosition.RIGHT;
2501
+ this.invalid = false;
2511
2502
  /**
2512
2503
  * Defines a value that is going to be applied as a start date form control
2513
2504
  */
@@ -2559,11 +2550,11 @@ class KitDaterangeComponent {
2559
2550
  this.closed.emit(rangeValue);
2560
2551
  }
2561
2552
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitDaterangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2562
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitDaterangeComponent, selector: "kit-daterange", inputs: { type: "type", label: "label", startLabel: "startLabel", endLabel: "endLabel", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", format: "format", defaultStartDate: "defaultStartDate", defaultEndDate: "defaultEndDate", min: "min", max: "max", disabled: "disabled", isValid: "isValid", iconPosition: "iconPosition", messageIcon: "messageIcon", messageText: "messageText", startDateControl: "startDateControl", endDateControl: "endDateControl" }, outputs: { startDateChanged: "startDateChanged", closed: "closed", endDateChanged: "endDateChanged" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: DateRangePopupComponent }], ngImport: i0, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"!isValid\"\n [ngClass]=\"[iconPosition, type]\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"startInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"endInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.DEFAULT\"\n #popup appendTo=\"component\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.BUTTON\"\n #popup appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n </kendo-daterange>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.invalid .daterange-button .button-text{color:#27282a}.kit-daterange.invalid .k-input-inner{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.disabled .daterange-button{border-color:#c1c7d0;background-color:#f3f4f6;cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:#9a9fa6}.kit-daterange.disabled .daterange-button .button-icon{stroke:#c1c7d0}.kit-daterange.disabled .k-input-inner{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-daterange.disabled .daterange-input-button .button-icon{stroke:#c1c7d0}.kit-daterange.left .daterange-input-button{left:0;right:initial}.kit-daterange.left .k-input-inner{padding:4px 8px 4px 28px}.kit-daterange.left .daterange-button{flex-direction:row-reverse}.kit-daterange .daterange-button{display:none;align-items:center;padding:8px;width:100%;height:34px;gap:8px;border-radius:4px;border:1px solid #efefef;background:#fff;cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:#27282a;font-size:13px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .daterange-wrapper{display:flex;gap:8px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 8px;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{border:none;border-radius:0;background:none}.kit-daterange .k-dateinput.k-focus{box-shadow:none}.kit-daterange .k-dateinput.k-focus .k-input-inner{border-color:#00b0ad}.kit-daterange .k-input-inner{padding:4px 28px 4px 8px;width:100%;height:34px;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;background-color:#fff;border:1px solid #efefef}.kit-daterange .k-input-inner::placeholder{color:#74777d}.kit-daterange .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-daterange .k-popup{border:1px solid #efefef;box-shadow:none}.kit-daterange .k-popup .k-calendar-header{padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;font-weight:500;line-height:1.26}.kit-daterange .k-popup .k-button{padding:0}.kit-daterange .k-popup .k-button:hover:before{background:none}.kit-daterange .k-popup .k-button-icon{padding:0;width:16px;height:16px;color:#002a3a}.kit-daterange .k-popup .k-prev-view .k-icon:before,.kit-daterange .k-popup .k-next-view .k-icon:before{position:absolute}.kit-daterange .k-popup .k-prev-view .k-icon:before{content:\"\\e016\"}.kit-daterange .k-popup .k-next-view .k-icon:before{content:\"\\e014\"}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 6px;color:#56a2f7}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-table{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-tr{display:flex}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{display:flex;padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1;border-radius:0;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-th{align-items:center;justify-content:center;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-td{border:1px solid #dfdfdf}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#fff}.kit-daterange .k-popup .k-calendar-td.k-state-focused .k-link,.kit-daterange .k-popup .k-calendar-td.k-state-active .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-start,.kit-daterange .k-popup .k-calendar-td.k-range-end{background:none}.kit-daterange .k-popup .k-calendar-td.k-range-start.k-today .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end.k-today .k-link{color:#fff}.kit-daterange .k-popup .k-calendar-td.k-range-start .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end .k-link{color:#fff;border:1px solid #dfdfdf;border-radius:50%;background:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:#aad0fb}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-today.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:#a9a8a8}.kit-daterange .k-popup .k-link{display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:100%;height:100%}.kit-daterange .k-popup .k-calendar-view{padding:0;gap:0}.kit-daterange .k-popup .k-calendar-content{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-yearview .k-calendar-td,.kit-daterange .k-popup .k-calendar-decadeview .k-calendar-td,.kit-daterange .k-popup .k-calendar-centuryview .k-calendar-td{width:76px;height:76px}.kit-daterange .k-popup .k-range-split-start:after,.kit-daterange .k-popup .k-range-split-end:after{background-image:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i2$1.DateRangeComponent, selector: "kendo-daterange" }, { kind: "component", type: i2$1.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { kind: "directive", type: i2$1.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "directive", type: i2$1.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { 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 }); }
2553
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitDaterangeComponent, selector: "kit-daterange", inputs: { type: "type", label: "label", startLabel: "startLabel", endLabel: "endLabel", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", format: "format", defaultStartDate: "defaultStartDate", defaultEndDate: "defaultEndDate", min: "min", max: "max", disabled: "disabled", invalid: "invalid", messageIcon: "messageIcon", messageText: "messageText", startDateControl: "startDateControl", endDateControl: "endDateControl" }, outputs: { startDateChanged: "startDateChanged", closed: "closed", endDateChanged: "endDateChanged" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: DateRangePopupComponent }], ngImport: i0, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [ngClass]=\"type\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"$any(startInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"$any(endInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n @if (type === KitDaterangeType.DEFAULT) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n @if (type === KitDaterangeType.BUTTON) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n </kendo-daterange>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-button .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-daterange.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-input-button .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-daterange.disabled .daterange-button{border-color:var(--ui-kit-color-grey-11);background-color:#f3f4f6;cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .daterange-button .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);border-color:var(--ui-kit-color-grey-11)}.kit-daterange.disabled .daterange-input-button .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button{display:none;align-items:center;gap:8px;padding:8px;width:100%;height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white);cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:var(--ui-kit-color-grey-10);font-size:14px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .daterange-button:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-daterange .daterange-wrapper{display:flex;gap:10px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 12px 0 8px;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white)}.kit-daterange .k-dateinput.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-daterange .k-dateinput.k-focus+.daterange-input-button .button-icon{stroke:var(--ui-kit-color-main)}.kit-daterange .k-dateinput:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .k-input-inner{padding:0 36px 0 12px;width:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-daterange .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-daterange .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-daterange .k-popup .k-calendar-title{padding:6px 8px;font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-daterange .k-popup .k-calendar-nav-prev,.kit-daterange .k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-nav-prev:before,.kit-daterange .k-popup .k-calendar-nav-next:before{opacity:0}.kit-daterange .k-popup .k-calendar-nav-prev:hover,.kit-daterange .k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px}.kit-daterange .k-popup .k-calendar-view{padding:13px 8px 3px;gap:32px}.kit-daterange .k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-daterange .k-popup .k-calendar-tr{display:flex;gap:16px}.kit-daterange .k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:var(--ui-kit-color-selected)}.kit-daterange .k-popup .k-calendar-td.k-range-mid .k-link{color:var(--ui-kit-color-main)}.kit-daterange .k-popup .k-link{padding:0;width:60px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-daterange .k-popup .k-calendar-th{width:24px;height:24px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-monthview .k-link{width:24px}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-daterange .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-daterange .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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i2$1.DateRangeComponent, selector: "kendo-daterange" }, { kind: "component", type: i2$1.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { kind: "directive", type: i2$1.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "directive", type: i2$1.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { 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 }); }
2563
2554
  }
2564
2555
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitDaterangeComponent, decorators: [{
2565
2556
  type: Component,
2566
- args: [{ selector: 'kit-daterange', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"!isValid\"\n [ngClass]=\"[iconPosition, type]\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"startInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"endInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.DEFAULT\"\n #popup appendTo=\"component\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.BUTTON\"\n #popup appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n </kendo-daterange>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.invalid .daterange-button .button-text{color:#27282a}.kit-daterange.invalid .k-input-inner{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.disabled .daterange-button{border-color:#c1c7d0;background-color:#f3f4f6;cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:#9a9fa6}.kit-daterange.disabled .daterange-button .button-icon{stroke:#c1c7d0}.kit-daterange.disabled .k-input-inner{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-daterange.disabled .daterange-input-button .button-icon{stroke:#c1c7d0}.kit-daterange.left .daterange-input-button{left:0;right:initial}.kit-daterange.left .k-input-inner{padding:4px 8px 4px 28px}.kit-daterange.left .daterange-button{flex-direction:row-reverse}.kit-daterange .daterange-button{display:none;align-items:center;padding:8px;width:100%;height:34px;gap:8px;border-radius:4px;border:1px solid #efefef;background:#fff;cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:#27282a;font-size:13px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .daterange-wrapper{display:flex;gap:8px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 8px;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{border:none;border-radius:0;background:none}.kit-daterange .k-dateinput.k-focus{box-shadow:none}.kit-daterange .k-dateinput.k-focus .k-input-inner{border-color:#00b0ad}.kit-daterange .k-input-inner{padding:4px 28px 4px 8px;width:100%;height:34px;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;background-color:#fff;border:1px solid #efefef}.kit-daterange .k-input-inner::placeholder{color:#74777d}.kit-daterange .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-daterange .k-popup{border:1px solid #efefef;box-shadow:none}.kit-daterange .k-popup .k-calendar-header{padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;font-weight:500;line-height:1.26}.kit-daterange .k-popup .k-button{padding:0}.kit-daterange .k-popup .k-button:hover:before{background:none}.kit-daterange .k-popup .k-button-icon{padding:0;width:16px;height:16px;color:#002a3a}.kit-daterange .k-popup .k-prev-view .k-icon:before,.kit-daterange .k-popup .k-next-view .k-icon:before{position:absolute}.kit-daterange .k-popup .k-prev-view .k-icon:before{content:\"\\e016\"}.kit-daterange .k-popup .k-next-view .k-icon:before{content:\"\\e014\"}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 6px;color:#56a2f7}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-table{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-tr{display:flex}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{display:flex;padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1;border-radius:0;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-th{align-items:center;justify-content:center;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-td{border:1px solid #dfdfdf}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#fff}.kit-daterange .k-popup .k-calendar-td.k-state-focused .k-link,.kit-daterange .k-popup .k-calendar-td.k-state-active .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-start,.kit-daterange .k-popup .k-calendar-td.k-range-end{background:none}.kit-daterange .k-popup .k-calendar-td.k-range-start.k-today .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end.k-today .k-link{color:#fff}.kit-daterange .k-popup .k-calendar-td.k-range-start .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end .k-link{color:#fff;border:1px solid #dfdfdf;border-radius:50%;background:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:#aad0fb}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-today.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:#a9a8a8}.kit-daterange .k-popup .k-link{display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:100%;height:100%}.kit-daterange .k-popup .k-calendar-view{padding:0;gap:0}.kit-daterange .k-popup .k-calendar-content{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-yearview .k-calendar-td,.kit-daterange .k-popup .k-calendar-decadeview .k-calendar-td,.kit-daterange .k-popup .k-calendar-centuryview .k-calendar-td{width:76px;height:76px}.kit-daterange .k-popup .k-range-split-start:after,.kit-daterange .k-popup .k-range-split-end:after{background-image:none}\n"] }]
2557
+ args: [{ selector: 'kit-daterange', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [ngClass]=\"type\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"$any(startInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"$any(endInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n @if (type === KitDaterangeType.DEFAULT) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n @if (type === KitDaterangeType.BUTTON) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n </kendo-daterange>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-button .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-daterange.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-input-button .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-daterange.disabled .daterange-button{border-color:var(--ui-kit-color-grey-11);background-color:#f3f4f6;cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .daterange-button .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);border-color:var(--ui-kit-color-grey-11)}.kit-daterange.disabled .daterange-input-button .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button{display:none;align-items:center;gap:8px;padding:8px;width:100%;height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white);cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:var(--ui-kit-color-grey-10);font-size:14px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .daterange-button:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-daterange .daterange-wrapper{display:flex;gap:10px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 12px 0 8px;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white)}.kit-daterange .k-dateinput.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-daterange .k-dateinput.k-focus+.daterange-input-button .button-icon{stroke:var(--ui-kit-color-main)}.kit-daterange .k-dateinput:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .k-input-inner{padding:0 36px 0 12px;width:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-daterange .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-daterange .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-daterange .k-popup .k-calendar-title{padding:6px 8px;font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-daterange .k-popup .k-calendar-nav-prev,.kit-daterange .k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-nav-prev:before,.kit-daterange .k-popup .k-calendar-nav-next:before{opacity:0}.kit-daterange .k-popup .k-calendar-nav-prev:hover,.kit-daterange .k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px}.kit-daterange .k-popup .k-calendar-view{padding:13px 8px 3px;gap:32px}.kit-daterange .k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-daterange .k-popup .k-calendar-tr{display:flex;gap:16px}.kit-daterange .k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:var(--ui-kit-color-selected)}.kit-daterange .k-popup .k-calendar-td.k-range-mid .k-link{color:var(--ui-kit-color-main)}.kit-daterange .k-popup .k-link{padding:0;width:60px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-daterange .k-popup .k-calendar-th{width:24px;height:24px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-monthview .k-link{width:24px}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-daterange .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-daterange .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"] }]
2567
2558
  }], propDecorators: { type: [{
2568
2559
  type: Input
2569
2560
  }], label: [{
@@ -2588,9 +2579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
2588
2579
  type: Input
2589
2580
  }], disabled: [{
2590
2581
  type: Input
2591
- }], isValid: [{
2592
- type: Input
2593
- }], iconPosition: [{
2582
+ }], invalid: [{
2594
2583
  type: Input
2595
2584
  }], messageIcon: [{
2596
2585
  type: Input
@@ -3937,13 +3926,15 @@ class KitBadgeDirective {
3937
3926
  }
3938
3927
  }
3939
3928
  createBadge() {
3940
- const badgeTypeClass = this.kitBadgeText && 'kit-badge-text' || 'kit-badge-status';
3929
+ const badgeText = this.kitBadgeText ?? '';
3930
+ const hasBadgeText = badgeText !== '';
3931
+ const badgeTypeClass = hasBadgeText && 'kit-badge-text' || 'kit-badge-status';
3941
3932
  const cssClasses = `kit-badge-content ${this.kitBadgeTheme} ${badgeTypeClass}`;
3942
3933
  this.badgeElement = this.renderer.createElement('span');
3943
3934
  this.elementRef.nativeElement.classList.add('kit-badge');
3944
3935
  this.renderer.setAttribute(this.badgeElement, 'class', cssClasses);
3945
- if (this.kitBadgeText) {
3946
- const text = this.renderer.createText(this.kitBadgeText.toString());
3936
+ if (hasBadgeText) {
3937
+ const text = this.renderer.createText(badgeText.toString());
3947
3938
  this.renderer.appendChild(this.badgeElement, text);
3948
3939
  }
3949
3940
  this.renderer.appendChild(this.elementRef.nativeElement, this.badgeElement);
@@ -4373,7 +4364,7 @@ class KitDatepickerComponent {
4373
4364
  provide: NG_VALUE_ACCESSOR,
4374
4365
  useExisting: forwardRef(() => KitDatepickerComponent),
4375
4366
  multi: true,
4376
- }], 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]=\"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 (close)=\"onClose($event)\"\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-main)}.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-11)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12)}.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}.kit-datepicker-popup.k-popup .k-calendar-header{padding:3px 0 13px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:2px 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:13px 6px 3px;min-height:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;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:60px;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:24px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.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 }); }
4367
+ }], 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]=\"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 (close)=\"onClose($event)\"\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-11)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12)}.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}.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:13px 8px 3px;min-height:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;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:60px;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:24px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.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 }); }
4377
4368
  }
4378
4369
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitDatepickerComponent, decorators: [{
4379
4370
  type: Component,
@@ -4381,7 +4372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
4381
4372
  provide: NG_VALUE_ACCESSOR,
4382
4373
  useExisting: forwardRef(() => KitDatepickerComponent),
4383
4374
  multi: true,
4384
- }], template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"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 (close)=\"onClose($event)\"\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-main)}.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-11)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12)}.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}.kit-datepicker-popup.k-popup .k-calendar-header{padding:3px 0 13px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:2px 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:13px 6px 3px;min-height:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;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:60px;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:24px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.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"] }]
4375
+ }], template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"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 (close)=\"onClose($event)\"\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-11)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12)}.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}.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:13px 8px 3px;min-height:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;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:60px;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:24px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.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"] }]
4385
4376
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
4386
4377
  type: Inject,
4387
4378
  args: [DOCUMENT]
@@ -5000,5 +4991,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
5000
4991
  * Generated bundle index. Do not edit.
5001
4992
  */
5002
4993
 
5003
- export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAutocompleteState, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeIconPosition, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitFileUploadComponent, KitFileUploadModule, KitGridColumnComponent, KitGridComponent, KitGridModule, KitGridSortDirection, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillModule, KitPopupComponent, KitPopupDirective, KitPopupModule, KitProfileMenuComponent, KitProfileMenuModule, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID };
4994
+ export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAutocompleteState, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitFileUploadComponent, KitFileUploadModule, KitGridColumnComponent, KitGridComponent, KitGridModule, KitGridSortDirection, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillModule, KitPopupComponent, KitPopupDirective, KitPopupModule, KitProfileMenuComponent, KitProfileMenuModule, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID };
5004
4995
  //# sourceMappingURL=indigina-ui-kit.mjs.map