@tet/tet-components 1.3.157-testing → 1.4.0-staging

package/dist/collection/components/basic/steppers/tet-stepper/tet-stepper.js

@@ -4,71 +4,70 @@ import { h, Host } from "@stencil/core";
  */
 export class TetStepper {
     constructor() {
-        /**
-         * Renders a single stepper step.
-         *
-         * @param step
-         * @param index
-         */
-        this.renderStep = (step, index) => {
-            return [
-                this.renderStepData(step),
-                this.renderStepLine(step, index)
-            ];
+        this.stepperData = [];
+    }
+    /**
+     * Renders a single stepper step.
+     *
+     * @param step
+     * @param index
+     */
+    renderStep = (step, index) => {
+        return [
+            this.renderStepData(step),
+            this.renderStepLine(step, index)
+        ];
+    };
+    /**
+     * Renders step data.
+     *
+     * @param step
+     */
+    renderStepData = (step) => {
+        let content;
+        const descriptionBlockClasses = {
+            'stepper-step-description': true,
         };
-        /**
-         * Renders step data.
-         *
-         * @param step
-         */
-        this.renderStepData = (step) => {
-            let content;
-            const descriptionBlockClasses = {
-                'stepper-step-description': true,
-            };
-            const descriptionBlock = h("div", { class: descriptionBlockClasses }, h("div", { innerHTML: step === null || step === void 0 ? void 0 : step.description }));
-            switch (step === null || step === void 0 ? void 0 : step.type) {
-                case 'icon':
-                    const iconClasses = {
-                        'icon': true,
-                        [`tet-${step === null || step === void 0 ? void 0 : step.icon}-circled`]: true,
-                    };
-                    content = h("div", { class: "stepper-step-content-icon" }, h("em", { class: iconClasses }));
-                    break;
-                case 'data':
-                    const dataClasses = {
-                        'stepper-step-content-data': true,
-                    };
-                    content = h("div", { class: dataClasses }, h("div", { innerHTML: step === null || step === void 0 ? void 0 : step.data }));
-                    break;
-            }
-            const liClasses = {
-                'stepper-step': true,
-                'data': (step === null || step === void 0 ? void 0 : step.type) === 'data',
-                'icon': (step === null || step === void 0 ? void 0 : step.type) === 'icon',
-            };
-            return h("li", { class: liClasses }, h("div", { class: "stepper-step-content" }, content), step.description ? descriptionBlock : null);
+        const descriptionBlock = h("div", { class: descriptionBlockClasses }, h("div", { innerHTML: step?.description }));
+        switch (step?.type) {
+            case 'icon':
+                const iconClasses = {
+                    'icon': true,
+                    [`tet-${step?.icon}-circled`]: true,
+                };
+                content = h("div", { class: "stepper-step-content-icon" }, h("em", { class: iconClasses }));
+                break;
+            case 'data':
+                const dataClasses = {
+                    'stepper-step-content-data': true,
+                };
+                content = h("div", { class: dataClasses }, h("div", { innerHTML: step?.data }));
+                break;
+        }
+        const liClasses = {
+            'stepper-step': true,
+            'data': step?.type === 'data',
+            'icon': step?.type === 'icon',
         };
-        /**
-         * Renders a line between steps.
-         *
-         * @param step
-         * @param index
-         */
-        this.renderStepLine = (step, index) => {
-            var _a, _b;
-            const lineClasses = {
-                'stepper-line': true,
-                'active': step.active,
-                'post-icon': step.type === 'icon',
-                'post-data': step.type === 'data',
-                'pre-icon': ((_a = this.stepperData[index + 1]) === null || _a === void 0 ? void 0 : _a.type) === 'icon',
-                'pre-data': ((_b = this.stepperData[index + 1]) === null || _b === void 0 ? void 0 : _b.type) === 'data',
-            };
-            return this.stepperData.length - 1 > index ? h("li", { class: lineClasses }) : null;
+        return h("li", { class: liClasses }, h("div", { class: "stepper-step-content" }, content), step.description ? descriptionBlock : null);
+    };
+    /**
+     * Renders a line between steps.
+     *
+     * @param step
+     * @param index
+     */
+    renderStepLine = (step, index) => {
+        const lineClasses = {
+            'stepper-line': true,
+            'active': step.active,
+            'post-icon': step.type === 'icon',
+            'post-data': step.type === 'data',
+            'pre-icon': this.stepperData[index + 1]?.type === 'icon',
+            'pre-data': this.stepperData[index + 1]?.type === 'data',
         };
-        this.stepperData = [];
-    }
+        return this.stepperData.length - 1 > index ? h("li", { class: lineClasses }) : null;
+    };
     render() {
         return (h(Host, { key: 'ce4bfa7c45846d165e0a5c45f32122bb58a2db71' }, h("ol", { key: '64e1a8c9af5091f9f73359be37765cdf5dd33e27', class: "stepper" }, this.stepperData.map(this.renderStep))));
     }

package/dist/collection/components/basic/steppers/tet-stepper-v2/tet-stepper-v2.js

@@ -4,37 +4,36 @@ import { h, Host } from "@stencil/core";
  */
 export class TetStepperV2 {
     constructor() {
-        this.renderStep = (step, index) => {
-            return (h("li", { class: "stepper-step" }, this.renderLine(index), h("div", { class: "stepper-step-wrapper" }, h("div", { class: "stepper-step-wrapper-icon", "aria-hidden": "true" }, this.renderStepIcon(step.icon)), h("div", { class: "stepper-step-wrapper-content" }, this.renderStepTitle(step === null || step === void 0 ? void 0 : step.title), this.renderStepDescription(step === null || step === void 0 ? void 0 : step.description)))));
-        };
-        this.renderStepIcon = (icon) => {
-            switch (icon) {
-                case 'check':
-                    return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "check" })));
-                case 'circle':
-                    return h("div", { class: "circle" });
-                case 'circle-attention':
-                    return h("div", { class: "circle attention" });
-                case 'circle-not-active':
-                default:
-                    return h("div", { class: "circle not-active" });
-            }
-        };
-        this.renderStepTitle = (title) => {
-            return title ? h("h2", { class: "stepper-step-wrapper-content-title", innerHTML: title }) : null;
-        };
-        this.renderStepDescription = (description) => {
-            return description ? h("div", { class: "stepper-step-wrapper-content-description", innerHTML: description }) : null;
-        };
-        this.renderLine = (index) => {
-            var _a;
-            const isLastStep = this.stepperData.length - 1 > index;
-            const active = (_a = this.stepperData[index + 1]) === null || _a === void 0 ? void 0 : _a.active;
-            return isLastStep ? h("div", { class: { 'stepper-line': true, active } }) : null;
-        };
         this.stepperData = [];
         this.theme = 'light';
     }
+    renderStep = (step, index) => {
+        return (h("li", { class: "stepper-step" }, this.renderLine(index), h("div", { class: "stepper-step-wrapper" }, h("div", { class: "stepper-step-wrapper-icon", "aria-hidden": "true" }, this.renderStepIcon(step.icon)), h("div", { class: "stepper-step-wrapper-content" }, this.renderStepTitle(step?.title), this.renderStepDescription(step?.description)))));
+    };
+    renderStepIcon = (icon) => {
+        switch (icon) {
+            case 'check':
+                return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "check" })));
+            case 'circle':
+                return h("div", { class: "circle" });
+            case 'circle-attention':
+                return h("div", { class: "circle attention" });
+            case 'circle-not-active':
+            default:
+                return h("div", { class: "circle not-active" });
+        }
+    };
+    renderStepTitle = (title) => {
+        return title ? h("h2", { class: "stepper-step-wrapper-content-title", innerHTML: title }) : null;
+    };
+    renderStepDescription = (description) => {
+        return description ? h("div", { class: "stepper-step-wrapper-content-description", innerHTML: description }) : null;
+    };
+    renderLine = (index) => {
+        const isLastStep = this.stepperData.length - 1 > index;
+        const active = this.stepperData[index + 1]?.active;
+        return isLastStep ? h("div", { class: { 'stepper-line': true, active } }) : null;
+    };
     render() {
         return (h(Host, { key: '77c04aee60320522729589f4497a1e9fdc69b938' }, h("ol", { key: 'c907e291dded101a263a23c11247fbdc7c4b8aca', class: {
                 'stepper': true,

package/dist/collection/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.js

@@ -4,29 +4,28 @@ import { h, Host } from "@stencil/core";
  */
 export class TetStepperV3 {
     constructor() {
-        this.renderStep = (step, index) => {
-            var _a;
-            const nextStepActive = (_a = this.stepperData[index + 1]) === null || _a === void 0 ? void 0 : _a.active;
-            return (h("li", { class: "step" }, h("div", { class: { 'status-wrapper': true, 'active': step.active } }, h("div", { class: "line top" }), h("div", { class: { 'line': true, 'bottom': true, 'next-step-active': nextStepActive } }), this.renderStepIcon(step.icon)), h("div", { class: "content" }, this.renderStepTitle(step === null || step === void 0 ? void 0 : step.title), this.renderStepDescription(step === null || step === void 0 ? void 0 : step.description))));
-        };
-        this.renderStepIcon = (icon) => {
-            if (icon === 'check') {
-                return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "check" })));
-            }
-            if (icon === 'circle-attention') {
-                return h("div", { class: "circle-attention" });
-            }
-            return h("div", { class: "circle" });
-        };
-        this.renderStepTitle = (title) => {
-            return title ? h("div", { class: "content-title", innerHTML: title }) : null;
-        };
-        this.renderStepDescription = (description) => {
-            return description ? h("div", { class: "content-description", innerHTML: description }) : null;
-        };
         this.stepperData = [];
         this.theme = 'light';
     }
+    renderStep = (step, index) => {
+        const nextStepActive = this.stepperData[index + 1]?.active;
+        return (h("li", { class: "step" }, h("div", { class: { 'status-wrapper': true, 'active': step.active } }, h("div", { class: "line top" }), h("div", { class: { 'line': true, 'bottom': true, 'next-step-active': nextStepActive } }), this.renderStepIcon(step.icon)), h("div", { class: "content" }, this.renderStepTitle(step?.title), this.renderStepDescription(step?.description))));
+    };
+    renderStepIcon = (icon) => {
+        if (icon === 'check') {
+            return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "check" })));
+        }
+        if (icon === 'circle-attention') {
+            return h("div", { class: "circle-attention" });
+        }
+        return h("div", { class: "circle" });
+    };
+    renderStepTitle = (title) => {
+        return title ? h("div", { class: "content-title", innerHTML: title }) : null;
+    };
+    renderStepDescription = (description) => {
+        return description ? h("div", { class: "content-description", innerHTML: description }) : null;
+    };
     render() {
         return (h(Host, { key: '5187ae66bd860b81edc8da8184867dfa8e8a1457' }, h("ol", { key: '60676200653c835b84406e400abb82f84c752b0e', class: {
                 stepper: true,

package/dist/collection/components/simple/filter/tet-filter/tet-filter.js

@@ -4,20 +4,14 @@ import { h, Host } from "@stencil/core";
  */
 export class TetFilter {
     constructor() {
-        this.handleTagClick = (tag) => {
-            this.filterState = this.filterState.map(t => (Object.assign(Object.assign({}, t), { active: t.id === tag.id ? !t.active : t.active })));
-            this.filterChange.emit(this.filterState);
-        };
-        this.handleClearClick = () => {
-            this.filterState = this.filterState.map(tag => (Object.assign(Object.assign({}, tag), { active: false })));
-            this.filterChange.emit(this.filterState);
-        };
         this.theme = 'light';
         this.clearFilterButtonTitle = 'Notīrīt filtru';
         this.showClearFilterButton = true;
         this.tags = [];
         this.filterState = [];
     }
+    /** Emits when filters change */
+    filterChange;
     componentWillLoad() {
         this.initializeFilterState();
     }
@@ -25,10 +19,31 @@ export class TetFilter {
         this.initializeFilterState(newTags);
     }
     initializeFilterState(newTags = this.tags) {
-        this.filterState = newTags.map(tag => (Object.assign(Object.assign({}, tag), { active: tag.active || false })));
+        this.filterState = newTags.map(tag => ({
+            ...tag,
+            active: tag.active || false
+        }));
     }
+    handleTagClick = (tag) => {
+        this.filterState = this.filterState.map(t => ({
+            ...t,
+            active: t.id === tag.id ? !t.active : t.active
+        }));
+        this.filterChange.emit(this.filterState);
+    };
+    handleClearClick = () => {
+        this.filterState = this.filterState.map(tag => ({
+            ...tag,
+            active: false
+        }));
+        this.filterChange.emit(this.filterState);
+    };
     render() {
-        return (h(Host, { key: 'acd0fba9386534409c64a70272a6fd6377861f94' }, h("div", { key: '7df212ad35d95f73ae89860eab343b346d0fd356', class: { 'filter-container': true, [`theme-${this.theme}`]: true } }, h("tet-tag-group", { key: '0ee0bde7cdd9740ddc366377c27b9981daf89b2f', tags: this.filterState.map(tag => (Object.assign(Object.assign({}, tag), { clickAction: () => this.handleTagClick(tag), showIcon: tag.active && !tag.disabled }))), theme: this.theme }), this.showClearFilterButton && this.filterState.some(tag => tag.active) && (h("button", { key: '4cb485cbb43ff103cbcc50dd496a14ec29d1835d', class: "clear-button", onClick: this.handleClearClick }, h("tet-icon", { key: '0000473680562d3de9192f22d230503e91152e86', name: "tc-reload", style: { '--icon-size': '1rem', '--icon-container-display': 'flex' }, accessibilityLabel: this.clearFilterButtonTitle }), this.clearFilterButtonTitle)))));
+        return (h(Host, { key: 'acd0fba9386534409c64a70272a6fd6377861f94' }, h("div", { key: '7df212ad35d95f73ae89860eab343b346d0fd356', class: { 'filter-container': true, [`theme-${this.theme}`]: true } }, h("tet-tag-group", { key: '0ee0bde7cdd9740ddc366377c27b9981daf89b2f', tags: this.filterState.map(tag => ({
+                ...tag,
+                clickAction: () => this.handleTagClick(tag),
+                showIcon: tag.active && !tag.disabled
+            })), theme: this.theme }), this.showClearFilterButton && this.filterState.some(tag => tag.active) && (h("button", { key: '4cb485cbb43ff103cbcc50dd496a14ec29d1835d', class: "clear-button", onClick: this.handleClearClick }, h("tet-icon", { key: '0000473680562d3de9192f22d230503e91152e86', name: "tc-reload", style: { '--icon-size': '1rem', '--icon-container-display': 'flex' }, accessibilityLabel: this.clearFilterButtonTitle }), this.clearFilterButtonTitle)))));
     }
     static get is() { return "tet-filter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-header/tet-datepicker-header.js

@@ -3,27 +3,21 @@ import { addYears, subtractYears } from "../../index";
 import { capitalize } from "../../../../../../services/utils/index";
 export class TetDatepickerHeader {
     constructor() {
-        this.getControlButtonDate = () => {
-            const fullYear = this.internalDate.getFullYear();
-            const monthNameFormatter = new Intl.DateTimeFormat(this.locale, { month: 'long' });
-            const monthName = capitalize(monthNameFormatter.format(this.internalDate));
-            return `${monthName} ${fullYear}`;
-        };
-        this.changeDatepickerView = () => {
-            let view;
-            if (this.datepickerView === 'month') {
-                view = 'multi-year';
-            }
-            if (this.datepickerView === 'year' || this.datepickerView === 'multi-year') {
-                view = 'month';
-            }
-            this.datepickerViewChanged.emit(view);
-        };
         this.locale = undefined;
         this.selectedDate = undefined;
         this.internalDate = undefined;
         this.datepickerView = undefined;
     }
+    /** Event that will be emitted when the internal date will change. */
+    internalDateChanged;
+    /** Event that will be emitted when the datepicker view will change. */
+    datepickerViewChanged;
+    getControlButtonDate = () => {
+        const fullYear = this.internalDate.getFullYear();
+        const monthNameFormatter = new Intl.DateTimeFormat(this.locale, { month: 'long' });
+        const monthName = capitalize(monthNameFormatter.format(this.internalDate));
+        return `${monthName} ${fullYear}`;
+    };
     subtractDates() {
         let newDate;
         if (this.datepickerView === 'multi-year') {
@@ -50,6 +44,16 @@ export class TetDatepickerHeader {
         }
         this.internalDateChanged.emit(newDate);
     }
+    changeDatepickerView = () => {
+        let view;
+        if (this.datepickerView === 'month') {
+            view = 'multi-year';
+        }
+        if (this.datepickerView === 'year' || this.datepickerView === 'multi-year') {
+            view = 'month';
+        }
+        this.datepickerViewChanged.emit(view);
+    };
     render() {
         return (h("div", { key: '27fc5ef4ed5ebfb75db9ff719f0888728aa9944d', class: "header" }, this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.subtractDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-left" })))

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-month-view/tet-datepicker-month-view.js

@@ -3,144 +3,25 @@ import { isUndefinedOrNull } from "../../../../../../services/utils/index";
 import { DATEPICKER_WEEK_DAYS } from "../../index";
 export class TetDatepickerMonthView {
     constructor() {
-        this.days = DATEPICKER_WEEK_DAYS;
-        this.previousMonthPreviewDates = [];
-        this.monthDates = [];
-        this.nextMonthPreviewDates = [];
-        this.getDaysInMonth = (month, year) => {
-            const date = new Date(year, month, 1);
-            const days = [];
-            while (date.getMonth() === month) {
-                days.push(new Date(date));
-                date.setDate(date.getDate() + 1);
-            }
-            return days;
-        };
-        this.getPreviousMonthPreviewDates = () => {
-            const firstMonthDay = new Date(this.internalDate.getFullYear(), this.internalDate.getMonth(), 1);
-            let previousMonthPreviewDays = firstMonthDay.getDay() - 1;
-            // An exception - sundays have zero index.
-            // Meaning that they actually would have negative preview days from the previous month, if using the existing logic.
-            if (previousMonthPreviewDays === -1) {
-                previousMonthPreviewDays = 6;
-            }
-            return this.getPreviousMonthLastDates(previousMonthPreviewDays);
-        };
-        this.getNextMonthPreviewDates = () => {
-            const currentDateCount = this.monthDates.length + this.previousMonthPreviewDates.length;
-            const nextMonthPreviewDays = 7 - currentDateCount % 7;
-            // If all rows are full, do not render additional preview date fields.
-            if (nextMonthPreviewDays === 7) {
-                return [];
-            }
-            return Array.from({ length: nextMonthPreviewDays }).map((_, day) => day + 1);
-        };
-        this.getPreviousMonthLastDates = (lastDays) => {
-            const previousMonthPreviewDays = [];
-            if (!lastDays) {
-                return previousMonthPreviewDays;
-            }
-            const previousMonthLastDate = new Date(this.internalDate.getFullYear(), this.internalDate.getMonth(), 0);
-            const previousMonthLastPreviewDay = (previousMonthLastDate.getDate() - lastDays) + 1;
-            Array.from({ length: lastDays }).forEach((_, days) => {
-                const previousMonth = this.internalDate.getMonth() - 1;
-                const date = new Date(this.internalDate.getFullYear(), previousMonth, previousMonthLastPreviewDay + days);
-                previousMonthPreviewDays.push(date);
-            });
-            return previousMonthPreviewDays;
-        };
-        this.isSelectedDate = (date) => {
-            if (this.rangePickerMode || isUndefinedOrNull(this.selectedDate)) {
-                return false;
-            }
-            return date.toDateString() === this.selectedDate.toDateString();
-        };
-        this.handleDateSelection = (date) => {
-            var _a, _b;
-            const newDate = new Date(date);
-            this.internalDateChanged.emit(newDate);
-            if (!this.rangePickerMode) {
-                this.datepickerClosed.emit(true);
-                return;
-            }
-            const isSelectedDateRangeEnd = this.isRangeEnd(date);
-            const isSelectedBeforeRangeStartDate = date.getTime() < ((_b = (_a = this.rangeDates) === null || _a === void 0 ? void 0 : _a.startDate) === null || _b === void 0 ? void 0 : _b.getTime());
-            if (this.rangeDates.startDate && this.rangeDates.endDate || isSelectedBeforeRangeStartDate) {
-                this.rangeDateSet.emit({ date: newDate, position: 0 });
-                return;
-            }
-            if (this.rangeDates.startDate && !isSelectedDateRangeEnd) {
-                this.rangeDateSet.emit({ date: newDate, position: 1 });
-                this.datepickerClosed.emit(true);
-            }
-            if (isUndefinedOrNull(this.rangeDates.startDate) && isUndefinedOrNull(this.rangeDates.endDate)) {
-                this.rangeDateSet.emit({ date: newDate, position: 0 });
-            }
-        };
-        this.isRangeStart = (date) => {
-            var _a, _b;
-            return date.toDateString() === ((_b = (_a = this.rangeDates) === null || _a === void 0 ? void 0 : _a.startDate) === null || _b === void 0 ? void 0 : _b.toDateString());
-        };
-        this.isRangeEnd = (date) => {
-            var _a, _b;
-            return date.toDateString() === ((_b = (_a = this.rangeDates) === null || _a === void 0 ? void 0 : _a.endDate) === null || _b === void 0 ? void 0 : _b.toDateString());
-        };
-        this.isSelectedInRange = (date) => {
-            var _a, _b, _c, _d;
-            const isDateInStartRange = date.getTime() >= ((_b = (_a = this.rangeDates) === null || _a === void 0 ? void 0 : _a.startDate) === null || _b === void 0 ? void 0 : _b.getTime());
-            const isDateInEndRange = date.getTime() <= ((_d = (_c = this.rangeDates) === null || _c === void 0 ? void 0 : _c.endDate) === null || _d === void 0 ? void 0 : _d.getTime());
-            return isDateInStartRange && isDateInEndRange;
-        };
-        this.isInRange = (date) => {
-            var _a, _b, _c;
-            const isRangeStartAndEndSet = this.rangeDates.startDate && this.rangeDates.endDate;
-            if (!this.rangePickerMode || isUndefinedOrNull(this.rangeDates.startDate) || isRangeStartAndEndSet) {
-                return false;
-            }
-            const isDatePastRangeStart = date.getTime() > ((_b = (_a = this.rangeDates) === null || _a === void 0 ? void 0 : _a.startDate) === null || _b === void 0 ? void 0 : _b.getTime());
-            const isDateInHoverRange = date.getTime() <= ((_c = this.inRangeHoverDate) === null || _c === void 0 ? void 0 : _c.getTime());
-            return isDatePastRangeStart && isDateInHoverRange;
-        };
-        this.setInRangeHover = (date, event) => {
-            var _a, _b;
-            const isRangeStartAndEndSet = this.rangeDates.startDate && this.rangeDates.endDate;
-            if (!this.rangePickerMode || isUndefinedOrNull(this.rangeDates.startDate) || isRangeStartAndEndSet) {
-                return;
-            }
-            const element = event.target;
-            const isDatePastRangeStart = date.getTime() > ((_b = (_a = this.rangeDates) === null || _a === void 0 ? void 0 : _a.startDate) === null || _b === void 0 ? void 0 : _b.getTime());
-            if (isDatePastRangeStart) {
-                element.classList.add('in-range-hover');
-                this.inRangeHoverDate = date;
-            }
-        };
-        this.removeInRangeHover = (event) => {
-            const element = event.target;
-            element.classList.contains('in-range-hover') && element.classList.remove('in-range-hover');
-            this.inRangeHoverDate = null;
-        };
-        this.getDateContainerClasses = (date) => {
-            return {
-                'date-container': true,
-                'range-start': this.isRangeStart(date),
-                'in-range': this.isInRange(date),
-                'in-range-selected': this.isSelectedInRange(date),
-                'range-end': this.isRangeEnd(date)
-            };
-        };
-        this.getDateClasses = (date) => {
-            return {
-                date: true,
-                current: this.isCurrentDate(date),
-                selected: this.isSelectedDate(date)
-            };
-        };
         this.rangeDates = undefined;
         this.inRangeHoverDate = undefined;
         this.selectedDate = undefined;
         this.internalDate = undefined;
         this.rangePickerMode = false;
     }
+    days = DATEPICKER_WEEK_DAYS;
+    currentDate;
+    previousMonthPreviewDates = [];
+    monthDates = [];
+    nextMonthPreviewDates = [];
+    /** Event that will be emitted when the internal date will change. */
+    internalDateChanged;
+    /** Event that will be emitted when date will change. */
+    dateChanged;
+    /** Event that will be emitted when the datepicker will be closed. */
+    datepickerClosed;
+    /** Event that will be emitted when one of the range dates will be set. */
+    rangeDateSet;
     handleDateChange() {
         this.previousMonthPreviewDates = this.getPreviousMonthPreviewDates();
         this.monthDates = this.getDaysInMonth(this.internalDate.getMonth(), this.internalDate.getFullYear());
@@ -152,9 +33,131 @@ export class TetDatepickerMonthView {
         this.monthDates = this.getDaysInMonth(this.internalDate.getMonth(), this.internalDate.getFullYear());
         this.nextMonthPreviewDates = this.getNextMonthPreviewDates();
     }
+    getDaysInMonth = (month, year) => {
+        const date = new Date(year, month, 1);
+        const days = [];
+        while (date.getMonth() === month) {
+            days.push(new Date(date));
+            date.setDate(date.getDate() + 1);
+        }
+        return days;
+    };
+    getPreviousMonthPreviewDates = () => {
+        const firstMonthDay = new Date(this.internalDate.getFullYear(), this.internalDate.getMonth(), 1);
+        let previousMonthPreviewDays = firstMonthDay.getDay() - 1;
+        // An exception - sundays have zero index.
+        // Meaning that they actually would have negative preview days from the previous month, if using the existing logic.
+        if (previousMonthPreviewDays === -1) {
+            previousMonthPreviewDays = 6;
+        }
+        return this.getPreviousMonthLastDates(previousMonthPreviewDays);
+    };
+    getNextMonthPreviewDates = () => {
+        const currentDateCount = this.monthDates.length + this.previousMonthPreviewDates.length;
+        const nextMonthPreviewDays = 7 - currentDateCount % 7;
+        // If all rows are full, do not render additional preview date fields.
+        if (nextMonthPreviewDays === 7) {
+            return [];
+        }
+        return Array.from({ length: nextMonthPreviewDays }).map((_, day) => day + 1);
+    };
+    getPreviousMonthLastDates = (lastDays) => {
+        const previousMonthPreviewDays = [];
+        if (!lastDays) {
+            return previousMonthPreviewDays;
+        }
+        const previousMonthLastDate = new Date(this.internalDate.getFullYear(), this.internalDate.getMonth(), 0);
+        const previousMonthLastPreviewDay = (previousMonthLastDate.getDate() - lastDays) + 1;
+        Array.from({ length: lastDays }).forEach((_, days) => {
+            const previousMonth = this.internalDate.getMonth() - 1;
+            const date = new Date(this.internalDate.getFullYear(), previousMonth, previousMonthLastPreviewDay + days);
+            previousMonthPreviewDays.push(date);
+        });
+        return previousMonthPreviewDays;
+    };
     isCurrentDate(date) {
         return date.toDateString() === this.currentDate.toDateString();
     }
+    isSelectedDate = (date) => {
+        if (this.rangePickerMode || isUndefinedOrNull(this.selectedDate)) {
+            return false;
+        }
+        return date.toDateString() === this.selectedDate.toDateString();
+    };
+    handleDateSelection = (date) => {
+        const newDate = new Date(date);
+        this.internalDateChanged.emit(newDate);
+        if (!this.rangePickerMode) {
+            this.datepickerClosed.emit(true);
+            return;
+        }
+        const isSelectedDateRangeEnd = this.isRangeEnd(date);
+        const isSelectedBeforeRangeStartDate = date.getTime() < this.rangeDates?.startDate?.getTime();
+        if (this.rangeDates.startDate && this.rangeDates.endDate || isSelectedBeforeRangeStartDate) {
+            this.rangeDateSet.emit({ date: newDate, position: 0 });
+            return;
+        }
+        if (this.rangeDates.startDate && !isSelectedDateRangeEnd) {
+            this.rangeDateSet.emit({ date: newDate, position: 1 });
+            this.datepickerClosed.emit(true);
+        }
+        if (isUndefinedOrNull(this.rangeDates.startDate) && isUndefinedOrNull(this.rangeDates.endDate)) {
+            this.rangeDateSet.emit({ date: newDate, position: 0 });
+        }
+    };
+    isRangeStart = (date) => {
+        return date.toDateString() === this.rangeDates?.startDate?.toDateString();
+    };
+    isRangeEnd = (date) => {
+        return date.toDateString() === this.rangeDates?.endDate?.toDateString();
+    };
+    isSelectedInRange = (date) => {
+        const isDateInStartRange = date.getTime() >= this.rangeDates?.startDate?.getTime();
+        const isDateInEndRange = date.getTime() <= this.rangeDates?.endDate?.getTime();
+        return isDateInStartRange && isDateInEndRange;
+    };
+    isInRange = (date) => {
+        const isRangeStartAndEndSet = this.rangeDates.startDate && this.rangeDates.endDate;
+        if (!this.rangePickerMode || isUndefinedOrNull(this.rangeDates.startDate) || isRangeStartAndEndSet) {
+            return false;
+        }
+        const isDatePastRangeStart = date.getTime() > this.rangeDates?.startDate?.getTime();
+        const isDateInHoverRange = date.getTime() <= this.inRangeHoverDate?.getTime();
+        return isDatePastRangeStart && isDateInHoverRange;
+    };
+    setInRangeHover = (date, event) => {
+        const isRangeStartAndEndSet = this.rangeDates.startDate && this.rangeDates.endDate;
+        if (!this.rangePickerMode || isUndefinedOrNull(this.rangeDates.startDate) || isRangeStartAndEndSet) {
+            return;
+        }
+        const element = event.target;
+        const isDatePastRangeStart = date.getTime() > this.rangeDates?.startDate?.getTime();
+        if (isDatePastRangeStart) {
+            element.classList.add('in-range-hover');
+            this.inRangeHoverDate = date;
+        }
+    };
+    removeInRangeHover = (event) => {
+        const element = event.target;
+        element.classList.contains('in-range-hover') && element.classList.remove('in-range-hover');
+        this.inRangeHoverDate = null;
+    };
+    getDateContainerClasses = (date) => {
+        return {
+            'date-container': true,
+            'range-start': this.isRangeStart(date),
+            'in-range': this.isInRange(date),
+            'in-range-selected': this.isSelectedInRange(date),
+            'range-end': this.isRangeEnd(date)
+        };
+    };
+    getDateClasses = (date) => {
+        return {
+            date: true,
+            current: this.isCurrentDate(date),
+            selected: this.isSelectedDate(date)
+        };
+    };
     render() {
         return (h(Host, { key: '1d1f4ceb9d4b72afde073a6ca4440d52b63fc977' }, h("div", { key: 'e63dc978734dea3f4a1c144e395defb7d9561d91', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '71f8e0f8be3cf971d39b59ef67b1c0424cbf8a4b', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
     }