@pnp/spfx-controls-react 3.24.0-beta.2252463 → 3.24.0-beta.2280641

package/lib-commonjs/controls/adaptiveCardHost/fluentUI/Elements.js

@@ -0,0 +1,723 @@
+"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