@tabworthy/components 0.2.0

package/dist/collection/components/tabworthy-times/tabworthy-times.js

@@ -0,0 +1,832 @@
+import { h, Host } from "@stencil/core";
+import moment from "moment";
+import { getISODateString, removeTimezoneOffset } from "../../../../shared/utils/utils";
+const defaultLabels = {
+    selected: "selected",
+    openCalendar: "Open date and time picker",
+    calendar: "date and time picker",
+    invalidDateError: "We could not find a matching date",
+    minDateError: `Please fill in a date after `,
+    maxDateError: `Please fill in a date before `,
+    rangeOutOfBoundsError: `Please enter a valid range of dates`,
+    disabledDateError: `Please choose an available date`,
+    to: "to",
+    startDate: "Start date",
+    timeLabel: "Time"
+};
+export class InclusiveTimes {
+    constructor() {
+        // Enable or disable range mode
+        this.range = false;
+        // A label for the text field
+        this.label = "Choose a date and time";
+        // A placeholder for the text field
+        this.placeholder = "";
+        // Locale used for internal translations and date parsing
+        this.locale = (navigator === null || navigator === void 0 ? void 0 : navigator.language) || "en-US";
+        // If the datetime picker is disabled
+        this.disabled = false;
+        // Which date to be displayed when calendar is first opened
+        this.startDate = getISODateString(new Date());
+        // Reference date used for Chrono date parsing. Equals "today"
+        this.referenceDate = getISODateString(new Date());
+        // Use 12-hour format with AM/PM
+        this.use12HourFormat = true;
+        // Labels used for internal translations
+        this.timesLabels = defaultLabels;
+        // Prevent hiding the calendar
+        this.inline = false;
+        // Current error state of the input field
+        this.hasError = false;
+        // Show or hide the next/previous year buttons
+        this.showYearStepper = false;
+        // Show or hide the next/previous month buttons
+        this.showMonthStepper = true;
+        // Show or hide the clear button
+        this.showClearButton = true;
+        // Show or hide the today button
+        this.showTodayButton = true;
+        // Function to disable individual dates
+        this.disableDate = () => false;
+        // Component name used to generate CSS classes
+        this.elementClassName = "tabworthy-times";
+        // Which day that should start the week (0 is sunday, 1 is monday)
+        this.firstDayOfWeek = 1;
+        // Format for the value prop (input/output format). Defaults to ISO 8601 format.
+        this.format = "YYYY-MM-DDTHH:mm:ss";
+        this.selectedHours = 12;
+        this.selectedMinutes = 0;
+        this.errorState = this.hasError;
+        this.disabledState = this.disabled;
+        this.errorMessage = "";
+        this.handlePickerSelection = async (dateString) => {
+            const dates = dateString.split(",");
+            if (this.range && dates.length === 2) {
+                const startDate = removeTimezoneOffset(new Date(dates[0]));
+                const endDate = removeTimezoneOffset(new Date(dates[1]));
+                this.updateValue([startDate, endDate]);
+                // Update calendar with selected dates
+                if (this.pickerRef) {
+                    this.pickerRef.value = [startDate, endDate];
+                }
+            }
+            else {
+                const date = removeTimezoneOffset(new Date(dates[0]));
+                this.updateValue(date);
+                // Update calendar with selected date
+                if (this.pickerRef) {
+                    this.pickerRef.value = date;
+                }
+            }
+        };
+        this.handleTimeChange = (event) => {
+            this.selectedHours = event.detail.hours;
+            this.selectedMinutes = event.detail.minutes;
+            // Update the value if we have a selected date
+            if (this.selectedDate) {
+                this.updateValue(this.selectedDate);
+            }
+        };
+        this.handleCalendarButtonClick = async () => {
+            if (this.modalRef) {
+                await this.modalRef.setTriggerElement(this.calendarButtonRef);
+                await this.modalRef.open();
+            }
+        };
+        this.handleYearChange = (eventDetail) => {
+            if (this.changeYear) {
+                this.changeYear.emit(eventDetail);
+            }
+        };
+        this.handleChangedMonths = (_eventDetail) => {
+            // Can be used for month change tracking
+        };
+        this.handleInputBlur = () => {
+            this.formatInput();
+        };
+        this.handleInputChange = (event) => {
+            const value = event.target.value;
+            // Try to parse the input value as a datetime
+            const parsed = moment(value);
+            if (parsed.isValid()) {
+                this.selectedHours = parsed.hours();
+                this.selectedMinutes = parsed.minutes();
+                this.updateValue(parsed.toDate());
+            }
+        };
+    }
+    watchValue(_newValue) {
+        this.syncFromValueProp();
+    }
+    watchDisabled(newValue) {
+        this.disabledState = newValue;
+    }
+    watchHasError(newValue) {
+        this.errorState = newValue;
+    }
+    componentDidLoad() {
+        this.syncFromValueProp();
+        this.componentReady.emit();
+        if (!this.id) {
+            console.error('tabworthy-times: The "id" prop is required for accessibility');
+        }
+    }
+    syncFromValueProp() {
+        if (this.value) {
+            this.internalValue = this.value;
+            // Parse the first datetime value to set time picker
+            const firstValue = Array.isArray(this.value) ? this.value[0] : this.value;
+            if (firstValue) {
+                const parsed = moment(firstValue, this.format);
+                if (parsed.isValid()) {
+                    this.selectedDate = parsed.toDate();
+                    this.selectedHours = parsed.hours();
+                    this.selectedMinutes = parsed.minutes();
+                }
+            }
+        }
+        else {
+            this.internalValue = null;
+        }
+    }
+    updateValue(date) {
+        if (Array.isArray(date)) {
+            // Range mode
+            const formattedDates = date.map((d) => {
+                const m = moment(d);
+                m.hours(this.selectedHours);
+                m.minutes(this.selectedMinutes);
+                m.seconds(0);
+                return m.format(this.format);
+            });
+            this.internalValue = formattedDates;
+            this.value = formattedDates;
+            this.selectDateTime.emit(formattedDates);
+        }
+        else {
+            // Single date mode
+            const m = moment(date);
+            m.hours(this.selectedHours);
+            m.minutes(this.selectedMinutes);
+            m.seconds(0);
+            const formatted = m.format(this.format);
+            this.internalValue = formatted;
+            this.value = formatted;
+            this.selectedDate = date;
+            this.selectDateTime.emit(formatted);
+        }
+        this.errorState = false;
+        this.formatInput();
+    }
+    formatInput() {
+        if (!this.internalValue)
+            return;
+        if (Array.isArray(this.internalValue)) {
+            // Format range
+            const formatted = this.internalValue
+                .map((v) => moment(v, this.format).format("lll"))
+                .join(` ${this.timesLabels.to} `);
+            this.inputRef.value = formatted;
+        }
+        else {
+            // Format single datetime
+            this.inputRef.value = moment(this.internalValue, this.format).format("lll");
+        }
+    }
+    getClassName(suffix) {
+        return `${this.elementClassName}__${suffix}`;
+    }
+    async clearValue() {
+        this.internalValue = null;
+        this.value = undefined;
+        this.selectedDate = undefined;
+        this.inputRef.value = "";
+        if (this.pickerRef) {
+            this.pickerRef.value = null;
+        }
+        this.selectDateTime.emit(undefined);
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'e922c649f8ed2bf03711fe99ae73bca550c9d8ef', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, h("label", { key: '6b8c053bcb4d232c52e0b95da141e4a433f2bc16', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), h("div", { key: '1950259cf662cedae9b8f0fed6a61f095d3a4424', class: this.getClassName("input-container") }, h("input", { key: '1c6bfced55bd60706eadf6304eb7204c89bda8d6', id: `${this.id}-input`, ref: (r) => (this.inputRef = r), type: "text", class: this.getClassName("input"), placeholder: this.placeholder, disabled: this.disabledState, value: (_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.toString(), onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (h("button", { key: '60b202b017d7ffe5de182908c809a24eba4f8e56', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (h("span", { innerHTML: this.calendarButtonContent })) : (this.timesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: '83716e92fd3711c65b23f007bba209bcc60a4d7d', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
+                if (this.pickerRef) {
+                    this.pickerRef.modalIsOpen = true;
+                }
+            }, onClosed: () => {
+                if (this.pickerRef) {
+                    this.pickerRef.modalIsOpen = false;
+                }
+            }, inline: this.inline }, h("div", { key: '3972712165cdc3069498d5683ca7b8b25041e44d', class: this.getClassName("picker-container") }, h("tabworthy-dates-calendar", { key: 'e6472861402e4926227657fb68f57d8671452260', range: this.range, locale: this.locale, onSelectDate: (event) => this.handlePickerSelection(event.detail), onChangeMonth: (event) => this.handleChangedMonths(event.detail), onChangeYear: (event) => this.handleYearChange(event.detail), labels: this.datesCalendarLabels, ref: (el) => (this.pickerRef = el), startDate: this.startDate, firstDayOfWeek: this.firstDayOfWeek, showHiddenTitle: true, disabled: this.disabledState, showMonthStepper: this.showMonthStepper, showYearStepper: this.showYearStepper, showClearButton: this.showClearButton, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline }, h("div", { key: 'e9f7b9baa9544ae651b4b6b73094a215cabcc796', slot: "after-calendar", class: this.getClassName("time-section") }, h("tabworthy-times-picker", { key: 'b4c2f14b9311d1e3c186825785d6f64580f2896c', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (h("div", { key: '684dce5fc46c53feea28b19eca46746d7538aa3f', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
+    }
+    static get is() { return "tabworthy-times"; }
+    static get encapsulation() { return "scoped"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "id"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "range": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "\"Choose a date and time\""
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "\"\""
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator?.language || \"en-US\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "startDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-date",
+                "defaultValue": "getISODateString(new Date())"
+            },
+            "referenceDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference-date",
+                "defaultValue": "getISODateString(new Date())"
+            },
+            "use12HourFormat": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-1-2-hour-format",
+                "defaultValue": "true"
+            },
+            "timesLabels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimesLabels",
+                    "resolved": "TimesLabels",
+                    "references": {
+                        "TimesLabels": {
+                            "location": "local",
+                            "path": "/Users/damirbogdanov_1/work/tabworthy-components/src/components/tabworthy-times/tabworthy-times.tsx",
+                            "id": "src/components/tabworthy-times/tabworthy-times.tsx::TimesLabels"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultLabels"
+            },
+            "datesCalendarLabels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatesCalendarLabels",
+                    "resolved": "{ clearButton: string; monthSelect: string; nextMonthButton: string; nextYearButton: string; picker: string; previousMonthButton: string; previousYearButton: string; todayButton: string; yearSelect: string; keyboardHint: string; selected: string; chooseAsStartDate: string; chooseAsEndDate: string; }",
+                    "references": {
+                        "DatesCalendarLabels": {
+                            "location": "import",
+                            "path": "../tabworthy-dates-calendar/tabworthy-dates-calendar",
+                            "id": "src/components/tabworthy-dates-calendar/tabworthy-dates-calendar.tsx::DatesCalendarLabels",
+                            "referenceLocation": "DatesCalendarLabels"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inline",
+                "defaultValue": "false"
+            },
+            "hasError": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-error",
+                "defaultValue": "false"
+            },
+            "showYearStepper": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-year-stepper",
+                "defaultValue": "false"
+            },
+            "showMonthStepper": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-month-stepper",
+                "defaultValue": "true"
+            },
+            "showClearButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-clear-button",
+                "defaultValue": "true"
+            },
+            "showTodayButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-today-button",
+                "defaultValue": "true"
+            },
+            "calendarButtonContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "calendar-button-content"
+            },
+            "disableDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: Date) => boolean",
+                    "resolved": "(date: Date) => boolean",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => false"
+            },
+            "elementClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "element-class-name",
+                "defaultValue": "\"tabworthy-times\""
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-day-of-week",
+                "defaultValue": "1"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "\"YYYY-MM-DDTHH:mm:ss\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "selectedDate": {},
+            "selectedHours": {},
+            "selectedMinutes": {},
+            "errorState": {},
+            "disabledState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectDateTime",
+                "name": "selectDateTime",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string | string[] | undefined",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "changeYear",
+                "name": "changeYear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "YearChangedEventDetails",
+                    "resolved": "YearChangedEventDetails",
+                    "references": {
+                        "YearChangedEventDetails": {
+                            "location": "import",
+                            "path": "../tabworthy-dates-calendar/tabworthy-dates-calendar",
+                            "id": "src/components/tabworthy-dates-calendar/tabworthy-dates-calendar.tsx::YearChangedEventDetails",
+                            "referenceLocation": "YearChangedEventDetails"
+                        }
+                    }
+                }
+            }, {
+                "method": "componentReady",
+                "name": "componentReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clearValue": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "hasError",
+                "methodName": "watchHasError"
+            }];
+    }
+}