@indigina/ui-kit 1.0.80 → 1.0.84

package/bundles/indigina-ui-kit.umd.js

@@ -2279,6 +2279,143 @@
         { type: core.RendererFactory2 }
     ]; };
 
+    exports.KitDaterangeType = void 0;
+    (function (KitDaterangeType) {
+        KitDaterangeType["DEFAULT"] = "default";
+        KitDaterangeType["BUTTON"] = "button";
+    })(exports.KitDaterangeType || (exports.KitDaterangeType = {}));
+    exports.KitDaterangeIconPosition = void 0;
+    (function (KitDaterangeIconPosition) {
+        KitDaterangeIconPosition["LEFT"] = "left";
+        KitDaterangeIconPosition["RIGHT"] = "right";
+    })(exports.KitDaterangeIconPosition || (exports.KitDaterangeIconPosition = {}));
+    var KitDaterangeComponent = /** @class */ (function () {
+        function KitDaterangeComponent() {
+            this.type = exports.KitDaterangeType.DEFAULT;
+            /**
+             * Defines a value that is going to be applied as a daterange format
+             */
+            this.format = 'dd MMM yyyy';
+            /**
+             * Defines a state whether the component will be valid or not
+             */
+            this.isValid = true;
+            /**
+             * Defines a value which used to set position of the calendar icon
+             */
+            this.iconPosition = exports.KitDaterangeIconPosition.RIGHT;
+            /**
+             * Defines a value that is going to be applied as a start date form control
+             */
+            this.startDateControl = new forms.FormControl();
+            /**
+             * Defines a value that is going to be applied as an end date form control
+             */
+            this.endDateControl = new forms.FormControl();
+            /**
+             * An action which is emitted when start date changed
+             */
+            this.startDateChanged = new core.EventEmitter();
+            /**
+             * An action which is emitted when daterange popup closed
+             */
+            this.closed = new core.EventEmitter();
+            /**
+             * An action which is emitted when end date changed
+             */
+            this.endDateChanged = new core.EventEmitter();
+            /**
+             * An icon which will be used in a daterange input icon
+             */
+            this.icon = exports.KitSvgIcon.CALENDAR;
+            this.KitDaterangeType = exports.KitDaterangeType;
+        }
+        KitDaterangeComponent.prototype.openCalendarPopup = function () {
+            this.popup.activate();
+        };
+        KitDaterangeComponent.prototype.onStartDateChange = function (value) {
+            this.startDateControl.patchValue(value);
+            this.startDateControl.markAsDirty();
+            this.startDateChanged.emit(value);
+        };
+        KitDaterangeComponent.prototype.onEndDateChange = function (value) {
+            this.endDateControl.patchValue(value);
+            this.endDateControl.markAsDirty();
+            this.endDateChanged.emit(value);
+        };
+        KitDaterangeComponent.prototype.onBlur = function () {
+            this.startDateControl.markAsTouched();
+            this.endDateControl.markAsTouched();
+        };
+        KitDaterangeComponent.prototype.onClose = function () {
+            var rangeValue = {
+                start: this.startDateControl.value || this.defaultStartDate || null,
+                end: this.endDateControl.value || this.defaultEndDate || null,
+            };
+            this.closed.emit(rangeValue);
+        };
+        return KitDaterangeComponent;
+    }());
+    KitDaterangeComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'kit-daterange',
+                    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",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    encapsulation: core.ViewEncapsulation.None,
+                    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:20px;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,.kit-daterange .k-popup .k-next-view .k-icon:before{position:absolute;top:-2px}.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-th{height:24px}.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"]
+                },] }
+    ];
+    KitDaterangeComponent.propDecorators = {
+        type: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        startLabel: [{ type: core.Input }],
+        endLabel: [{ type: core.Input }],
+        startPlaceholder: [{ type: core.Input }],
+        endPlaceholder: [{ type: core.Input }],
+        format: [{ type: core.Input }],
+        defaultStartDate: [{ type: core.Input }],
+        defaultEndDate: [{ type: core.Input }],
+        min: [{ type: core.Input }],
+        max: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        isValid: [{ type: core.Input }],
+        iconPosition: [{ type: core.Input }],
+        messageIcon: [{ type: core.Input }],
+        messageText: [{ type: core.Input }],
+        startDateControl: [{ type: core.Input }],
+        endDateControl: [{ type: core.Input }],
+        startDateChanged: [{ type: core.Output }],
+        closed: [{ type: core.Output }],
+        endDateChanged: [{ type: core.Output }],
+        popup: [{ type: core.ViewChild, args: ['popup', { read: kendoAngularDateinputs.DateRangePopupComponent },] }]
+    };
+
+    var KitDaterangeModule = /** @class */ (function () {
+        function KitDaterangeModule() {
+        }
+        return KitDaterangeModule;
+    }());
+    KitDaterangeModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        KitDaterangeComponent,
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        kendoAngularDateinputs.DateInputsModule,
+                        kendoAngularLabel.LabelModule,
+                        KitSvgIconModule,
+                        KitInputMessageModule,
+                    ],
+                    exports: [
+                        KitDaterangeComponent,
+                    ],
+                    providers: [
+                        kendoAngularDateinputs.DateRangeService,
+                    ],
+                },] }
+    ];
+
     // KitButton
 
     /**
@@ -2291,6 +2428,8 @@
     exports.KitButtonModule = KitButtonModule;
     exports.KitCheckboxComponent = KitCheckboxComponent;
     exports.KitCheckboxModule = KitCheckboxModule;
+    exports.KitDaterangeComponent = KitDaterangeComponent;
+    exports.KitDaterangeModule = KitDaterangeModule;
     exports.KitDatetimepickerComponent = KitDatetimepickerComponent;
     exports.KitDatetimepickerModule = KitDatetimepickerModule;
     exports.KitDropdownComponent = KitDropdownComponent;