@pnp/spfx-controls-react/lib-commonjs/controls/adaptiveCardHost/fluentUI/Elements.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FluentUIToggleInput = exports.FluentUITimeInput = exports.FluentUITextInput = exports.FluentUINumberInput = exports.FluentUIDateInput = exports.FluentUIChoiceSetInput = void 0;
exports.registerFluentUIElements = registerFluentUIElements;
var tslib_1 = require("tslib");
var react_theme_provider_1 = require("@fluentui/react-theme-provider");
var card_elements_1 = require("adaptivecards/lib/card-elements");
var enums_1 = require("adaptivecards/lib/enums");
var serialization_1 = require("adaptivecards/lib/serialization");
var strings_1 = require("adaptivecards/lib/strings");
var Button_1 = require("@fluentui/react/lib/Button");
var Checkbox_1 = require("@fluentui/react/lib/Checkbox");
var ChoiceGroup_1 = require("@fluentui/react/lib/ChoiceGroup");
var ComboBox_1 = require("@fluentui/react/lib/ComboBox");
var DatePicker_1 = require("@fluentui/react/lib/DatePicker");
var Icons_1 = require("@fluentui/react/lib/Icons");
var SpinButton_1 = require("@fluentui/react/lib/SpinButton");
var Stack_1 = require("@fluentui/react/lib/Stack");
var TextField_1 = require("@fluentui/react/lib/TextField");
var Toggle_1 = require("@fluentui/react/lib/Toggle");
var React = tslib_1.__importStar(require("react"));
var ReactDOM = tslib_1.__importStar(require("react-dom"));
var HostCapability_1 = require("./HostCapability");
var internalRender = function (renderReact) {
    var div = document.createElement("div");
    ReactDOM.render(renderReact(), div); // eslint-disable-line @microsoft/spfx/pair-react-dom-render-unmount
    return div;
};
var inlineButtonRootStyle = {
    marginLeft: 8,
};
var FluentUIChoiceSetInput = /** @class */ (function (_super) {
    tslib_1.__extends(FluentUIChoiceSetInput, _super);
    function FluentUIChoiceSetInput() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.isMultiSelect = false;
        _this.wrap = false;
        _this.choices = [];
        _this.selectedValues = [];
        _this.defaultSelectedValues = [];
        _this.updateSelectedValues = function (key, isMultiSelect, selected) {
            if (isMultiSelect) {
                if (selected) {
                    _this.selectedValues.push(key);
                }
                else {
                    _this.removeItemFromArray(_this.selectedValues, key);
                }
            }
            else {
                _this.selectedValues = [];
                _this.selectedValues.push(key);
            }
        };
        _this.removeItemFromArray = function (arr, item) {
            var index = arr.indexOf(item);
            arr.splice(index, 1);
        };
        return _this;
    }
    Object.defineProperty(FluentUIChoiceSetInput.prototype, "isCompact", {
        get: function () {
            return !this.style || this.style === "compact";
        },
        set: function (value) {
            this.style = value ? undefined : "expanded";
        },
        enumerable: false,
        configurable: true
    });
    FluentUIChoiceSetInput.prototype.internalRender = function () {
        var _this = this;
        var theme = (0, HostCapability_1.getFluentUIThemeFromHostCapability)(this.hostConfig);
        if (this.defaultValue) {
            this.defaultSelectedValues = this.defaultValue.split(this.hostConfig.choiceSetInputValueSeparator);
            this.selectedValues = this.defaultSelectedValues;
        }
        var optionsChoiceGroup = (this.choices) ?
            this.choices.map(function (x, index) {
                return {
                    key: x.value, text: x.title,
                    styles: { root: { marginTop: index > 0 ? _this.hostConfig.spacing.default : 0 } }
                };
            })
            : [];
        var options = (this.choices) ?
            this.choices.map(function (x) { return { key: x.value, text: x.title }; })
            : [];
        var control = function () {
            return React.createElement(React.Fragment, null,
                _this.isMultiSelect === false && _this.style === "expanded" &&
                    React.createElement(react_theme_provider_1.ThemeProvider, { theme: theme, style: { backgroundColor: "transparent" } },
                        React.createElement(ChoiceGroup_1.ChoiceGroup, { defaultSelectedKey: _this.defaultValue, options: optionsChoiceGroup, onChange: function (ev, option) {
                                _this.updateSelectedValues(option.key, _this.isMultiSelect, true);
                                _this.valueChanged();
                            }, componentRef: function (input) { _this.refControl = input; } })),
                _this.isMultiSelect === true && _this.style === "expanded" &&
                    React.createElement(Stack_1.Stack, { tokens: { childrenGap: _this.hostConfig.spacing.default } }, _this.choices.map(function (x, index) {
                        var defaultChecked = _this.defaultSelectedValues.indexOf(x.value) > -1;
                        return React.createElement(react_theme_provider_1.ThemeProvider, { key: x.value, theme: theme, style: { backgroundColor: "transparent" } },
                            React.createElement(Checkbox_1.Checkbox, { title: x.title, key: x.value, defaultChecked: defaultChecked, label: x.title, onChange: function (ev, checked) {
                                    _this.updateSelectedValues(x.value, _this.isMultiSelect, checked);
                                    _this.valueChanged();
                                }, componentRef: function (input) {
                                    if (index === 0)
                                        _this.refControl = input;
                                } }));
                    })),
                (_this.style === "compact" || _this.style === "filtered") &&
                    React.createElement(react_theme_provider_1.ThemeProvider, { theme: theme, style: { backgroundColor: "transparent" } },
                        React.createElement(ComboBox_1.ComboBox, { placeholder: _this.placeholder, multiSelect: _this.isMultiSelect, defaultSelectedKey: _this.defaultSelectedValues, allowFreeform: false, autoComplete: (_this.style === "filtered") ? "on" : "off", options: options, onChange: function (ev, option, index, value) {
                                _this.updateSelectedValues(option.key.toString(), _this.isMultiSelect, (_this.isMultiSelect) ? option.selected : true);
                                _this.valueChanged();
                            }, componentRef: function (input) { _this.refControl = input; } })));
        };
        this.element = internalRender(control);
        this.element.style.width = "100%";
        return this.element;
    };
    FluentUIChoiceSetInput.prototype.getJsonTypeName = function () {
        return "Input.ChoiceSet";
    };
    FluentUIChoiceSetInput.prototype.focus = function () {
        if (this.refControl)
            this.refControl.focus();
    };
    FluentUIChoiceSetInput.prototype.internalValidateProperties = function (context) {
        _super.prototype.internalValidateProperties.call(this, context);
        if (this.choices.length === 0) {
            context.addFailure(this, enums_1.ValidationEvent.CollectionCantBeEmpty, strings_1.Strings.errors.choiceSetMustHaveAtLeastOneChoice());
        }
        for (var _i = 0, _a = this.choices; _i < _a.length; _i++) {
            var choice = _a[_i];
            if (!choice.title || !choice.value) {
                context.addFailure(this, enums_1.ValidationEvent.PropertyCantBeNull, strings_1.Strings.errors.choiceSetChoicesMustHaveTitleAndValue());
            }
        }
    };
    FluentUIChoiceSetInput.prototype.isSet = function () {
        return this.value ? true : false;
    };
    FluentUIChoiceSetInput.prototype.isValid = function () {
        if (!this.value) {
            return !this.isRequired;
        }
        return true;
    };
    Object.defineProperty(FluentUIChoiceSetInput.prototype, "value", {
        get: function () {
            var _this = this;
            if (this.selectedValues) {
                var result_1 = "";
                this.selectedValues.map(function (x) {
                    if (result_1 !== "") {
                        result_1 += _this.hostConfig.choiceSetInputValueSeparator;
                    }
                    result_1 += x;
                });
                return result_1;
            }
            else {
                return undefined;
            }
        },
        enumerable: false,
        configurable: true
    });
    FluentUIChoiceSetInput.valueProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "value");
    FluentUIChoiceSetInput.choicesProperty = new serialization_1.SerializableObjectCollectionProperty(serialization_1.Versions.v1_0, "choices", card_elements_1.Choice);
    FluentUIChoiceSetInput.styleProperty = new serialization_1.ValueSetProperty(serialization_1.Versions.v1_0, "style", [
        { value: "compact" },
        { value: "expanded" },
        { value: "filtered", targetVersion: serialization_1.Versions.v1_5 }
    ], "compact");
    FluentUIChoiceSetInput.isMultiSelectProperty = new serialization_1.BoolProperty(serialization_1.Versions.v1_0, "isMultiSelect", false);
    FluentUIChoiceSetInput.placeholderProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "placeholder");
    FluentUIChoiceSetInput.wrapProperty = new serialization_1.BoolProperty(serialization_1.Versions.v1_2, "wrap", false);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIChoiceSetInput.valueProperty)
    ], FluentUIChoiceSetInput.prototype, "defaultValue", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIChoiceSetInput.styleProperty)
    ], FluentUIChoiceSetInput.prototype, "style", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIChoiceSetInput.isMultiSelectProperty)
    ], FluentUIChoiceSetInput.prototype, "isMultiSelect", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIChoiceSetInput.placeholderProperty)
    ], FluentUIChoiceSetInput.prototype, "placeholder", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIChoiceSetInput.wrapProperty)
    ], FluentUIChoiceSetInput.prototype, "wrap", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIChoiceSetInput.choicesProperty)
    ], FluentUIChoiceSetInput.prototype, "choices", void 0);
    return FluentUIChoiceSetInput;
}(card_elements_1.Input));
exports.FluentUIChoiceSetInput = FluentUIChoiceSetInput;
var FluentUIDateInput = /** @class */ (function (_super) {
    tslib_1.__extends(FluentUIDateInput, _super);
    function FluentUIDateInput() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FluentUIDateInput.prototype.internalRender = function () {
        var _this = this;
        var theme = (0, HostCapability_1.getFluentUIThemeFromHostCapability)(this.hostConfig);
        var control = function () {
            return React.createElement(react_theme_provider_1.ThemeProvider, { theme: theme },
                React.createElement(DatePicker_1.DatePicker, { id: _this.id, placeholder: _this.placeholder, minDate: _this.convertStringToDate(_this.min), maxDate: _this.convertStringToDate(_this.max), onSelectDate: function (date) {
                        _this._value = date;
                        _this.valueChanged();
                    }, theme: theme, value: _this.defaultValue ? _this.convertStringToDate(_this.defaultValue) : undefined, componentRef: function (input) { _this.refControl = input; } }));
        };
        this.element = internalRender(control);
        this.element.style.width = "100%";
        return this.element;
    };
    FluentUIDateInput.prototype.convertStringToDate = function (value) {
        if (value) {
            try {
                return new Date(value);
            }
            catch (_a) {
                return null;
            }
        }
        else {
            return null;
        }
    };
    FluentUIDateInput.prototype.getJsonTypeName = function () {
        return "Input.Date";
    };
    FluentUIDateInput.prototype.focus = function () {
        if (this.refControl)
            this.refControl.focus();
    };
    FluentUIDateInput.prototype.updateInputControlAriaLabelledBy = function () {
        if (this.element) {
            var joinedLabelIds = this.getAllLabelIds().join(" ");
            if (joinedLabelIds) {
                this.element.setAttribute("aria-labelledby", joinedLabelIds);
            }
            else {
                this.element.removeAttribute("aria-labelledby");
            }
        }
    };
    FluentUIDateInput.prototype.isSet = function () {
        return this.value ? true : false;
    };
    FluentUIDateInput.prototype.isValid = function () {
        if (!this.value) {
            return !this.isRequired;
        }
        var valueAsDate = new Date(this.value);
        var result = true;
        if (this.min) {
            var minDate = new Date(this.min);
            result = result && valueAsDate >= minDate;
        }
        if (this.max) {
            var maxDate = new Date(this.max);
            result = result && valueAsDate <= maxDate;
        }
        return result;
    };
    Object.defineProperty(FluentUIDateInput.prototype, "value", {
        get: function () {
            if (this._value) {
                var offset = this._value.getTimezoneOffset();
                var value = new Date(this._value.getTime() - (offset * 60 * 1000));
                return value.toISOString().split('T')[0];
            }
            else if (this.defaultValue) {
                var date = this.convertStringToDate(this.defaultValue);
                var offset = date.getTimezoneOffset();
                var value = new Date(date.getTime() - (offset * 60 * 1000));
                return value.toISOString().split('T')[0];
            }
            else {
                return undefined;
            }
        },
        enumerable: false,
        configurable: true
    });
    FluentUIDateInput.valueProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "value");
    FluentUIDateInput.placeholderProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "placeholder");
    FluentUIDateInput.minProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "min");
    FluentUIDateInput.maxProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "max");
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIDateInput.valueProperty)
    ], FluentUIDateInput.prototype, "defaultValue", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIDateInput.minProperty)
    ], FluentUIDateInput.prototype, "min", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIDateInput.maxProperty)
    ], FluentUIDateInput.prototype, "max", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIDateInput.placeholderProperty)
    ], FluentUIDateInput.prototype, "placeholder", void 0);
    return FluentUIDateInput;
}(card_elements_1.Input));
exports.FluentUIDateInput = FluentUIDateInput;
var FluentUINumberInput = /** @class */ (function (_super) {
    tslib_1.__extends(FluentUINumberInput, _super);
    function FluentUINumberInput() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FluentUINumberInput.prototype.internalRender = function () {
        var _this = this;
        var theme = (0, HostCapability_1.getFluentUIThemeFromHostCapability)(this.hostConfig);
        var control = function () {
            return React.createElement(SpinButton_1.SpinButton, { id: _this.id, defaultValue: "".concat(_this.defaultValue), placeholder: _this.placeholder, min: _this.min, max: _this.max, onChange: function () { return _this.valueChanged(); }, theme: theme, componentRef: function (input) { _this.refControl = input; } });
        };
        this.element = internalRender(control);
        this.element.style.width = "100%";
        return this.element;
    };
    FluentUINumberInput.prototype.getJsonTypeName = function () {
        return "Input.Number";
    };
    FluentUINumberInput.prototype.focus = function () {
        if (this.refControl)
            this.refControl.focus();
    };
    FluentUINumberInput.prototype.updateInputControlAriaLabelledBy = function () {
        if (this.element) {
            var joinedLabelIds = this.getAllLabelIds().join(" ");
            if (joinedLabelIds) {
                this.element.setAttribute("aria-labelledby", joinedLabelIds);
            }
            else {
                this.element.removeAttribute("aria-labelledby");
            }
        }
    };
    FluentUINumberInput.prototype.isSet = function () {
        return this.value !== undefined && !isNaN(this.value);
    };
    FluentUINumberInput.prototype.isValid = function () {
        if (!this.value) {
            return !this.isRequired;
        }
        var result = true;
        if (this.min !== undefined) {
            result = result && this.value >= this.min;
        }
        if (this.max !== undefined) {
            result = result && this.value <= this.max;
        }
        return result;
    };
    Object.defineProperty(FluentUINumberInput.prototype, "value", {
        get: function () {
            if (this.refControl) {
                return Number(this.refControl.value);
            }
            else {
                return undefined;
            }
        },
        enumerable: false,
        configurable: true
    });
    FluentUINumberInput.valueProperty = new serialization_1.NumProperty(serialization_1.Versions.v1_0, "value");
    FluentUINumberInput.placeholderProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "placeholder");
    FluentUINumberInput.minProperty = new serialization_1.NumProperty(serialization_1.Versions.v1_0, "min");
    FluentUINumberInput.maxProperty = new serialization_1.NumProperty(serialization_1.Versions.v1_0, "max");
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUINumberInput.valueProperty)
    ], FluentUINumberInput.prototype, "defaultValue", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUINumberInput.minProperty)
    ], FluentUINumberInput.prototype, "min", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUINumberInput.maxProperty)
    ], FluentUINumberInput.prototype, "max", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUINumberInput.placeholderProperty)
    ], FluentUINumberInput.prototype, "placeholder", void 0);
    return FluentUINumberInput;
}(card_elements_1.Input));
exports.FluentUINumberInput = FluentUINumberInput;
var FluentUITextInput = /** @class */ (function (_super) {
    tslib_1.__extends(FluentUITextInput, _super);
    function FluentUITextInput() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.isMultiline = false;
        _this.style = enums_1.InputTextStyle.Text;
        _this.handleKeyDown = function (e) {
            // Enter pressed
            if (e.key === 'Enter' && _this.inlineAction) {
                _this.inlineAction.execute();
            }
        };
        _this.buildInlineActionButton = function () {
            return internalRender((_this.inlineAction.iconUrl) ?
                _this.inlineIconActionButton :
                _this.buildTextOnlyInlineActionActionButton);
        };
        _this.inlineActionClickHandler = function (e) {
            e.stopPropagation();
            e.preventDefault();
            _this.inlineAction.execute();
        };
        _this.inlineIconActionButton = function () {
            var theme = _this.hostConfig.hostCapabilities.getCustomProperty(HostCapability_1.hostCapabilitiesFluentUIThemeKey);
            return React.createElement(Button_1.IconButton, { default: true, text: _this.inlineAction.title, ariaDescription: _this.inlineAction.title, className: _this.hostConfig.makeCssClassName("ac-inlineActionButton", "iconOnly"), theme: theme, styles: {
                    icon: {
                        height: "100%",
                    },
                    root: inlineButtonRootStyle,
                }, iconProps: {
                    imageProps: {
                        height: "100%",
                        src: _this.inlineAction.iconUrl,
                    },
                }, onClick: _this.inlineActionClickHandler });
        };
        _this.buildTextOnlyInlineActionActionButton = function () {
            var theme = _this.hostConfig.hostCapabilities.getCustomProperty(HostCapability_1.hostCapabilitiesFluentUIThemeKey);
            return React.createElement(Button_1.DefaultButton, { className: _this.hostConfig.makeCssClassName("ac-inlineActionButton", "textOnly"), text: _this.inlineAction.title, ariaDescription: _this.inlineAction.title, onClick: _this.inlineActionClickHandler, styles: {
                    root: inlineButtonRootStyle,
                }, theme: theme });
        };
        return _this;
    }
    FluentUITextInput.prototype.internalRender = function () {
        var _this = this;
        var theme = (0, HostCapability_1.getFluentUIThemeFromHostCapability)(this.hostConfig);
        var control = function () {
            return React.createElement(TextField_1.TextField, { id: _this.id, type: enums_1.InputTextStyle[_this.style].toLowerCase(), defaultValue: _this.defaultValue, multiline: _this.isMultiline, maxLength: _this.maxLength, placeholder: _this.placeholder, pattern: _this.regex, onChange: function () { return _this.valueChanged(); }, onKeyDown: _this.handleKeyDown, theme: theme, componentRef: function (input) { _this.refControl = input; } });
        };
        this.element = internalRender(control);
        this.element.style.width = "100%";
        return this.element;
    };
    FluentUITextInput.prototype.overrideInternalRender = function () {
        var inputControl = _super.prototype.overrideInternalRender.call(this);
        if (this.inlineAction) {
            this.inputControlContainerElement.appendChild(this.buildInlineActionButton());
        }
        return inputControl;
    };
    FluentUITextInput.prototype.getJsonTypeName = function () {
        return "Input.Text";
    };
    FluentUITextInput.prototype.focus = function () {
        if (this.refControl)
            this.refControl.focus();
    };
    FluentUITextInput.prototype.updateInputControlAriaLabelledBy = function () {
        if (this.element) {
            var joinedLabelIds = this.getAllLabelIds().join(" ");
            if (joinedLabelIds) {
                this.element.setAttribute("aria-labelledby", joinedLabelIds);
            }
            else {
                this.element.removeAttribute("aria-labelledby");
            }
        }
    };
    FluentUITextInput.prototype.getActionById = function (id) {
        var result = _super.prototype.getActionById.call(this, id);
        if (!result && this.inlineAction) {
            result = this.inlineAction.getActionById(id);
        }
        return result;
    };
    FluentUITextInput.prototype.isSet = function () {
        return this.value ? true : false;
    };
    FluentUITextInput.prototype.isValid = function () {
        if (!this.value) {
            return !this.isRequired;
        }
        if (this.regex) {
            return new RegExp(this.regex, "g").test(this.value); // eslint-disable-line @rushstack/security/no-unsafe-regexp
        }
        return true;
    };
    Object.defineProperty(FluentUITextInput.prototype, "value", {
        get: function () {
            var _a;
            if (this.renderedInputControlElement) {
                return (_a = this.refControl) === null || _a === void 0 ? void 0 : _a.value;
            }
            else {
                return undefined;
            }
        },
        enumerable: false,
        configurable: true
    });
    FluentUITextInput.valueProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "value");
    FluentUITextInput.maxLengthProperty = new serialization_1.NumProperty(serialization_1.Versions.v1_0, "maxLength");
    FluentUITextInput.isMultilineProperty = new serialization_1.BoolProperty(serialization_1.Versions.v1_0, "isMultiline", false);
    FluentUITextInput.placeholderProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "placeholder");
    FluentUITextInput.styleProperty = new serialization_1.EnumProperty(serialization_1.Versions.v1_0, "style", enums_1.InputTextStyle, enums_1.InputTextStyle.Text);
    FluentUITextInput.inlineActionProperty = new card_elements_1.ActionProperty(serialization_1.Versions.v1_0, "inlineAction", ["Action.ShowCard"]);
    FluentUITextInput.regexProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_3, "regex", true);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITextInput.valueProperty)
    ], FluentUITextInput.prototype, "defaultValue", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITextInput.maxLengthProperty)
    ], FluentUITextInput.prototype, "maxLength", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITextInput.isMultilineProperty)
    ], FluentUITextInput.prototype, "isMultiline", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITextInput.placeholderProperty)
    ], FluentUITextInput.prototype, "placeholder", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITextInput.styleProperty)
    ], FluentUITextInput.prototype, "style", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITextInput.inlineActionProperty)
    ], FluentUITextInput.prototype, "inlineAction", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITextInput.regexProperty)
    ], FluentUITextInput.prototype, "regex", void 0);
    return FluentUITextInput;
}(card_elements_1.Input));
exports.FluentUITextInput = FluentUITextInput;
var FluentUITimeInput = /** @class */ (function (_super) {
    tslib_1.__extends(FluentUITimeInput, _super);
    function FluentUITimeInput() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FluentUITimeInput.convertTimeStringToDate = function (timeString) {
        return new Date("1973-09-04T" + timeString + ":00Z");
    };
    FluentUITimeInput.prototype.internalRender = function () {
        var _this = this;
        var theme = (0, HostCapability_1.getFluentUIThemeFromHostCapability)(this.hostConfig);
        var control = function () {
            return React.createElement(TextField_1.TextField, { id: _this.id, type: "time", defaultValue: _this.defaultValue, min: _this.min, max: _this.max, placeholder: _this.placeholder, onChange: function () { return _this.valueChanged(); }, theme: theme, componentRef: function (input) { _this.refControl = input; } });
        };
        this.element = internalRender(control);
        this.element.style.width = "100%";
        return this.element;
    };
    FluentUITimeInput.prototype.getJsonTypeName = function () {
        return "Input.Time";
    };
    FluentUITimeInput.prototype.focus = function () {
        if (this.refControl)
            this.refControl.focus();
    };
    FluentUITimeInput.prototype.updateInputControlAriaLabelledBy = function () {
        if (this.element) {
            var joinedLabelIds = this.getAllLabelIds().join(" ");
            if (joinedLabelIds) {
                this.element.setAttribute("aria-labelledby", joinedLabelIds);
            }
            else {
                this.element.removeAttribute("aria-labelledby");
            }
        }
    };
    FluentUITimeInput.prototype.isSet = function () {
        return this.value ? true : false;
    };
    FluentUITimeInput.prototype.isValid = function () {
        if (!this.value) {
            return !this.isRequired;
        }
        var valueAsDate = FluentUITimeInput.convertTimeStringToDate(this.value);
        var result = true;
        if (this.min) {
            var minDate = FluentUITimeInput.convertTimeStringToDate(this.min);
            result = result && valueAsDate >= minDate;
        }
        if (this.max) {
            var maxDate = FluentUITimeInput.convertTimeStringToDate(this.max);
            result = result && valueAsDate <= maxDate;
        }
        return result;
    };
    Object.defineProperty(FluentUITimeInput.prototype, "value", {
        get: function () {
            var _a;
            if (this.renderedInputControlElement) {
                return (_a = this.refControl) === null || _a === void 0 ? void 0 : _a.value;
            }
            else {
                return undefined;
            }
        },
        enumerable: false,
        configurable: true
    });
    FluentUITimeInput.valueProperty = new card_elements_1.TimeProperty(serialization_1.Versions.v1_0, "value");
    FluentUITimeInput.placeholderProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "placeholder");
    FluentUITimeInput.minProperty = new card_elements_1.TimeProperty(serialization_1.Versions.v1_0, "min");
    FluentUITimeInput.maxProperty = new card_elements_1.TimeProperty(serialization_1.Versions.v1_0, "max");
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITimeInput.valueProperty)
    ], FluentUITimeInput.prototype, "defaultValue", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITimeInput.minProperty)
    ], FluentUITimeInput.prototype, "min", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITimeInput.maxProperty)
    ], FluentUITimeInput.prototype, "max", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUITimeInput.placeholderProperty)
    ], FluentUITimeInput.prototype, "placeholder", void 0);
    return FluentUITimeInput;
}(card_elements_1.Input));
exports.FluentUITimeInput = FluentUITimeInput;
var FluentUIToggleInput = /** @class */ (function (_super) {
    tslib_1.__extends(FluentUIToggleInput, _super);
    function FluentUIToggleInput() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.valueOn = "true";
        _this.valueOff = "false";
        _this.wrap = false;
        return _this;
    }
    FluentUIToggleInput.prototype.internalRender = function () {
        var _this = this;
        var theme = (0, HostCapability_1.getFluentUIThemeFromHostCapability)(this.hostConfig);
        var control = function () {
            return React.createElement(react_theme_provider_1.ThemeProvider, { theme: theme, style: { backgroundColor: "transparent" } },
                React.createElement(Toggle_1.Toggle, { id: _this.id, inlineLabel: true, onText: _this.title, offText: _this.title, onChange: function (event, checked) {
                        _this._value = checked;
                        _this.valueChanged();
                    }, defaultChecked: _this.defaultValue === _this.valueOn, styles: { root: { marginBottom: 0, marginTop: 0 } }, componentRef: function (input) { _this.refControl = input; } }));
        };
        this.element = internalRender(control);
        this.element.style.width = "100%";
        return this.element;
    };
    Object.defineProperty(FluentUIToggleInput.prototype, "isNullable", {
        get: function () {
            return false;
        },
        enumerable: false,
        configurable: true
    });
    FluentUIToggleInput.prototype.getJsonTypeName = function () {
        return "Input.Toggle";
    };
    FluentUIToggleInput.prototype.focus = function () {
        if (this.refControl)
            this.refControl.focus();
    };
    FluentUIToggleInput.prototype.updateInputControlAriaLabelledBy = function () {
        if (this.element) {
            var joinedLabelIds = this.getAllLabelIds().join(" ");
            if (joinedLabelIds) {
                this.element.setAttribute("aria-labelledby", joinedLabelIds);
            }
            else {
                this.element.removeAttribute("aria-labelledby");
            }
        }
    };
    FluentUIToggleInput.prototype.isSet = function () {
        if (this.isRequired) {
            return this.value === this.valueOn;
        }
        return this.value ? true : false;
    };
    Object.defineProperty(FluentUIToggleInput.prototype, "value", {
        get: function () {
            if (this._value !== null && this._value !== undefined) {
                return this._value ? this.valueOn : this.valueOff;
            }
            else {
                if (this.isRequired) {
                    return undefined;
                }
                else {
                    return this.valueOff;
                }
            }
        },
        enumerable: false,
        configurable: true
    });
    FluentUIToggleInput.valueProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "value");
    FluentUIToggleInput.titleProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "title");
    FluentUIToggleInput.valueOnProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "valueOn", true, undefined, "true", function (_sender) {
        return "true";
    });
    FluentUIToggleInput.valueOffProperty = new serialization_1.StringProperty(serialization_1.Versions.v1_0, "valueOff", true, undefined, "false", function (_sender) {
        return "false";
    });
    FluentUIToggleInput.wrapProperty = new serialization_1.BoolProperty(serialization_1.Versions.v1_2, "wrap", false);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIToggleInput.valueProperty)
    ], FluentUIToggleInput.prototype, "defaultValue", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIToggleInput.titleProperty)
    ], FluentUIToggleInput.prototype, "title", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIToggleInput.valueOnProperty)
    ], FluentUIToggleInput.prototype, "valueOn", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIToggleInput.valueOffProperty)
    ], FluentUIToggleInput.prototype, "valueOff", void 0);
    tslib_1.__decorate([
        (0, serialization_1.property)(FluentUIToggleInput.wrapProperty)
    ], FluentUIToggleInput.prototype, "wrap", void 0);
    return FluentUIToggleInput;
}(card_elements_1.Input));
exports.FluentUIToggleInput = FluentUIToggleInput;
function registerFluentUIElements(registry) {
    (0, Icons_1.initializeIcons)();
    registry.register("Input.Text", FluentUITextInput);
    registry.register("Input.Number", FluentUINumberInput);
    registry.register("Input.Time", FluentUITimeInput);
    registry.register("Input.Date", FluentUIDateInput);
    registry.register("Input.Toggle", FluentUIToggleInput);
    registry.register("Input.ChoiceSet", FluentUIChoiceSetInput);
}
//# sourceMappingURL=Elements.js.map