@indigina/ui-kit 1.0.82 → 1.0.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/indigina-ui-kit.umd.js +15 -4
- package/bundles/indigina-ui-kit.umd.js.map +1 -1
- package/esm2015/lib/components/kit-daterange/kit-daterange.component.js +16 -5
- package/esm2015/public-api.js +2 -2
- package/fesm2015/indigina-ui-kit.js +15 -4
- package/fesm2015/indigina-ui-kit.js.map +1 -1
- package/indigina-ui-kit.metadata.json +1 -1
- package/lib/components/kit-daterange/kit-daterange.component.d.ts +9 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -1
|
@@ -2316,6 +2316,10 @@
|
|
|
2316
2316
|
* An action which is emitted when start date changed
|
|
2317
2317
|
*/
|
|
2318
2318
|
this.startDateChanged = new core.EventEmitter();
|
|
2319
|
+
/**
|
|
2320
|
+
* An action which is emitted when daterange popup closed
|
|
2321
|
+
*/
|
|
2322
|
+
this.closed = new core.EventEmitter();
|
|
2319
2323
|
/**
|
|
2320
2324
|
* An action which is emitted when end date changed
|
|
2321
2325
|
*/
|
|
@@ -2325,31 +2329,37 @@
|
|
|
2325
2329
|
*/
|
|
2326
2330
|
this.icon = exports.KitSvgIcon.CALENDAR;
|
|
2327
2331
|
this.KitDaterangeType = exports.KitDaterangeType;
|
|
2328
|
-
this.KitDaterangeIconPosition = exports.KitDaterangeIconPosition;
|
|
2329
2332
|
}
|
|
2330
2333
|
KitDaterangeComponent.prototype.openCalendarPopup = function () {
|
|
2331
2334
|
this.popup.activate();
|
|
2332
2335
|
};
|
|
2333
2336
|
KitDaterangeComponent.prototype.onStartDateChange = function (value) {
|
|
2334
|
-
this.startDateChanged.emit(value);
|
|
2335
2337
|
this.startDateControl.patchValue(value);
|
|
2336
2338
|
this.startDateControl.markAsDirty();
|
|
2339
|
+
this.startDateChanged.emit(value);
|
|
2337
2340
|
};
|
|
2338
2341
|
KitDaterangeComponent.prototype.onEndDateChange = function (value) {
|
|
2339
|
-
this.endDateChanged.emit(value);
|
|
2340
2342
|
this.endDateControl.patchValue(value);
|
|
2341
2343
|
this.endDateControl.markAsDirty();
|
|
2344
|
+
this.endDateChanged.emit(value);
|
|
2342
2345
|
};
|
|
2343
2346
|
KitDaterangeComponent.prototype.onBlur = function () {
|
|
2344
2347
|
this.startDateControl.markAsTouched();
|
|
2345
2348
|
this.endDateControl.markAsTouched();
|
|
2346
2349
|
};
|
|
2350
|
+
KitDaterangeComponent.prototype.onClose = function () {
|
|
2351
|
+
var rangeValue = {
|
|
2352
|
+
start: this.startDateControl.value || this.defaultStartDate || null,
|
|
2353
|
+
end: this.endDateControl.value || this.defaultEndDate || null,
|
|
2354
|
+
};
|
|
2355
|
+
this.closed.emit(rangeValue);
|
|
2356
|
+
};
|
|
2347
2357
|
return KitDaterangeComponent;
|
|
2348
2358
|
}());
|
|
2349
2359
|
KitDaterangeComponent.decorators = [
|
|
2350
2360
|
{ type: core.Component, args: [{
|
|
2351
2361
|
selector: 'kit-daterange',
|
|
2352
|
-
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 <kendo-label *ngIf=\"startLabel\" class=\"label display-block\"\n [text]=\"startLabel\"\n [for]=\"startInput\"\n ></kendo-label>\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 <kendo-label *ngIf=\"endLabel\" class=\"label display-block\"\n [text]=\"endLabel\"\n [for]=\"endInput\"\n ></kendo-label>\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\"
|
|
2362
|
+
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 <kendo-label *ngIf=\"startLabel\" class=\"label display-block\"\n [text]=\"startLabel\"\n [for]=\"startInput\"\n ></kendo-label>\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 <kendo-label *ngIf=\"endLabel\" class=\"label display-block\"\n [text]=\"endLabel\"\n [for]=\"endInput\"\n ></kendo-label>\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",
|
|
2353
2363
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
2354
2364
|
encapsulation: core.ViewEncapsulation.None,
|
|
2355
2365
|
styles: ["@charset \"UTF-8\";.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}.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{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 .label{color:#74777d}.kit-daterange.disabled .k-input{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{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;grid-gap:8px;gap:8px;border-radius:4px;border:1px solid #efefef;background:#ffffff;cursor:pointer}.kit-daterange .daterange-button:hover{border-color:#c1c7d0}.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;grid-gap:8px;gap:8px}.kit-daterange .label{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input:hover .k-input{border-color:#c1c7d0}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 8px;border:none;background:none;cursor:pointer}.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-wrap{border:none;border-radius:0;background:none}.kit-daterange .k-dateinput-wrap.k-state-focused{box-shadow:none}.kit-daterange .k-dateinput-wrap.k-state-focused .k-input{border-color:#00b0ad}.kit-daterange .k-input{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::placeholder{color:#74777d}.kit-daterange .k-input::selection{background:#00b0ad}.kit-daterange .k-popup{border:1px solid #efefef;box-shadow:none}.kit-daterange .k-popup .k-calendar-header{margin-bottom:6px;padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;line-height:1.26}.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{content:\"\\e016\"}.kit-daterange .k-popup .k-next-view .k-icon:before{content:\"\\e014\"}.kit-daterange .k-popup .k-today{padding:0 6px;color:#56a2f7}.kit-daterange .k-popup .k-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1}.kit-daterange .k-popup .k-calendar-td{border-radius:0;border:1px solid #dfdfdf}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#ffffff}.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-other-month .k-link{color:#a9a8a8}.kit-daterange .k-popup .k-link{margin:0;padding:0;width:100%;height:100%}.kit-daterange .k-popup .k-calendar-view{padding:0;grid-gap: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"]
|
|
@@ -2375,6 +2385,7 @@
|
|
|
2375
2385
|
startDateControl: [{ type: core.Input }],
|
|
2376
2386
|
endDateControl: [{ type: core.Input }],
|
|
2377
2387
|
startDateChanged: [{ type: core.Output }],
|
|
2388
|
+
closed: [{ type: core.Output }],
|
|
2378
2389
|
endDateChanged: [{ type: core.Output }],
|
|
2379
2390
|
popup: [{ type: core.ViewChild, args: ['popup', { read: kendoAngularDateinputs.DateRangePopupComponent },] }]
|
|
2380
2391
|
};
|