From 8db1be509665666c4ca11f59d3ae58a652f9a1c6 Mon Sep 17 00:00:00 2001 From: Old Li <33386249+azlis@users.noreply.github.com> Date: Sun, 25 Feb 2024 20:36:11 +0800 Subject: [PATCH] feat(DatePicker): add IsEditable parameter (#2963) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add IsEditable parameter * feat: add GetReadOnlyAttribute * feat: notify Value property changes * feat: added GetUID extension method to JSModuleExtensions * feat: Add support for manual input in DateTimePicker component * refactor: refactoring code * refactor: 移除无效引用 * doc: 添加文档 * refactor: refactoring code * fix: 修复时间间隔符不一致问题 * feat: Add support for manual input in DateTime component * refactor: 更新手动输入逻辑 * doc: 更新示例 * doc: 更新示例 * doc: 更新资源文件 * refactor: 重构 Readonly 字符串 * refactor: Range 组件支持手工输入 * test: 更新单元测试 * test: 更新单元测试 * test: 更新单元测试 * test: 更新单元测试 * test: 更新单元测试 --------- Co-authored-by: Argo-AscioTech --- .../Components/Samples/DateTimePickers.razor | 2 +- .../Samples/DateTimePickers.razor.cs | 7 ++ .../Components/Samples/DateTimeRanges.razor | 6 +- .../Samples/DateTimeRanges.razor.cs | 8 +++ src/BootstrapBlazor.Server/Locales/en-US.json | 5 +- src/BootstrapBlazor.Server/Locales/zh-CN.json | 3 +- .../DateTimePicker/DateTimePicker.razor | 2 +- .../DateTimePicker/DateTimePicker.razor.cs | 29 ++++++++ .../DateTimeRange/DateTimeRange.razor | 4 +- .../DateTimeRange/DateTimeRange.razor.cs | 69 +++++++++++++------ .../css/bootstrap.blazor.editor.min.css | 2 +- .../UnitTest/Components/DateTimePickerTest.cs | 40 +++++++++++ test/UnitTest/Components/DateTimeRangeTest.cs | 30 ++++++++ 13 files changed, 176 insertions(+), 31 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor index fdbe93af741..90284147f8e 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor @@ -41,7 +41,7 @@
- +
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs index 600ee1042ef..b564278a926 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs @@ -178,6 +178,13 @@ private AttributeItem[] GetAttributes() => Type = "bool", ValueList = "true/false", DefaultValue = "false" + }, + new() { + Name = "IsEditable", + Description = Localizer["AttrIsEditable"], + Type = "bool", + ValueList = "true/false", + DefaultValue = "false" } ]; } diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor index 9e3e92c815e..a9f8685d607 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor @@ -5,13 +5,13 @@

@Localizer["Description"]

-@* - + + - *@ +
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor.cs index f6afb8636d1..8aadf175cd0 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor.cs @@ -226,6 +226,14 @@ private static List GetAttributes() => Type = "IEnumerable", ValueList = " — ", DefaultValue = " — " + }, + new() + { + Name = "IsEditable", + Description = "Is manual date entry allowed", + Type = "bool", + ValueList = "true/false", + DefaultValue = "false" } ]; } diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 793b90b8c86..d8fa3858c0b 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2411,13 +2411,13 @@ "NormalTitle": "Select the day", "NormalIntro": "Select the control based on the date of the day in 「day」as the base unit", "ShowIconTitle": "Wether show the component icon", - "ShowIconIntro": "Save space by settingShowIcon=\"false\" to not display component icons", + "ShowIconIntro": "Save space by setting ShowIcon=\"false\" to not display component icons", "ValidateFormTitle": "Client validation", "ValidateFormIntro": "Check data validity and prompt automatically based on custom validation rules", "DateTimeOffsetTitle": "Click on the pop-up date box", "DateTimeOffsetIntro": "Select the control based on the date of the day in 「day」 as the base unit", "BindValueTitle": "Data is bound in both directions", - "BindValueIntro": "The values in the text box change as the date component time changes", + "BindValueIntro": "The values in the text box change as the date component time changes. Enable manual input function by setting IsEditable=\"true\"", "ViewModeTitle": "Selector with time", "ViewModeIntro": "Select the date and time in the same selector, click the confirm button and close the pop-up window", "ViewModeTip": "Set the value of the viewMode property to The DateTime of DatePickerViewMode.DateTime", @@ -2447,6 +2447,7 @@ "Att8": "The value of the component is a two-way binding with ValueChanged", "Att9": "Get/Set Component display mode The default is the month-to-day display mode", "AttrAutoClose": "Whether auto close the popup window", + "AttrIsEditable": "Is manual date entry allowed", "Event1": "Confirm that the button calls back the delegate", "Event2": "Callback delegates are used for bidirectional binding when component values change", "BlockGroupLabel": "Prev", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 1df6cae3c77..6dc2524b8c9 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2417,7 +2417,7 @@ "DateTimeOffsetTitle": "点击弹出日期框", "DateTimeOffsetIntro": "以「日」为基本单位，基础的日期选择控件，此示例绑定 DateTimeOffset 数据类型", "BindValueTitle": "数据双向绑定", - "BindValueIntro": "日期组件时间改变时文本框内的数值也跟着改变", + "BindValueIntro": "日期组件时间改变时文本框内的数值也跟着改变，通过设置 IsEditable=\"true\" 开启手工录入功能", "ViewModeTitle": "带时间的选择器", "ViewModeIntro": "在同一个选择器里选择日期和时间，点击确认按钮后关闭弹窗", "ViewModeTip": "设置 ViewMode 属性值为 DatePickerViewMode.DateTime", @@ -2447,6 +2447,7 @@ "Att8": "组件值与 ValueChanged 作为双向绑定的值", "Att9": "获得/设置 组件显示模式 默认为显示年月日模式", "AttrAutoClose": "选中日期后是否自动关闭弹窗", + "AttrIsEditable": "是否允许手动录入日期", "Event1": "确认按钮回调委托", "Event2": "组件值改变时回调委托供双向绑定使用", "BlockGroupLabel": "前置标签", diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index 8f3cc0a18fb..af791af3744 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -8,7 +8,7 @@ }
- + @if (ShowIcon) { diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs index b857c14b1a9..96b5f911bf9 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs @@ -3,6 +3,7 @@ // Website: https://www.blazor.zone or https://argozhang.github.io/ using Microsoft.Extensions.Localization; +using System.Globalization; namespace BootstrapBlazor.Components; @@ -134,6 +135,12 @@ public string? Format [Parameter] public bool AutoClose { get; set; } = true; + /// + /// 获得/设置 是否可以编辑内容 默认 false + /// + [Parameter] + public bool IsEditable { get; set; } + /// /// 获得/设置 是否自动设置值为当前时间 默认 true /// @@ -312,4 +319,26 @@ private async Task OnClear() } return ret; } + + /// + /// + /// + /// + /// + /// + /// + protected override bool TryParseValueFromString(string value, [MaybeNullWhen(false)] out TValue result, out string? validationErrorMessage) + { + var format = ViewMode == DatePickerViewMode.DateTime ? DateTimeFormat : DateFormat; + result = default; + validationErrorMessage = null; + var ret = DateTime.TryParseExact(value, format, CultureInfo.InvariantCulture, DateTimeStyles.None, out var val); + if (ret) + { + result = (TValue)(object)val; + } + return ret; + } + + private string? ReadonlyString => IsEditable ? null : "readonly"; } diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor index 7c258728202..1711d62f19f 100644 --- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor +++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor @@ -10,10 +10,10 @@
- +
@SeparateText - +
@if (ShowClearButton) { diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs index 87b31810ab3..28f9063a937 100644 --- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs @@ -3,6 +3,7 @@ // Website: https://www.blazor.zone or https://argozhang.github.io/ using Microsoft.Extensions.Localization; +using System.Globalization; using System.Reflection; namespace BootstrapBlazor.Components; @@ -37,15 +38,47 @@ public partial class DateTimeRange private DateTime StartValue { get; set; } - private string? StartValueString => Value.Start != DateTime.MinValue - ? GetValueString(Value.Start) - : null; + private string? StartValueString + { + set + { + var format = ViewMode == DatePickerViewMode.DateTime ? DateTimeFormat : DateFormat; + var ret = DateTime.TryParseExact(value, format, CultureInfo.InvariantCulture, DateTimeStyles.None, out var startDateValue); + if (ret) + { + StartValue = startDateValue; + Value.Start = startDateValue; + SelectedValue.Start = startDateValue; + } + } + get + { + var format = ViewMode == DatePickerViewMode.DateTime ? DateTimeFormat : DateFormat; + return Value.Start != DateTime.MinValue ? Value.Start.ToString(format) : null; + } + } private DateTime EndValue { get; set; } - private string? EndValueString => Value.End != DateTime.MinValue - ? GetValueString(Value.End) - : null; + private string? EndValueString + { + set + { + var format = ViewMode == DatePickerViewMode.DateTime ? DateTimeFormat : DateFormat; + var ret = DateTime.TryParseExact(value, format, CultureInfo.InvariantCulture, DateTimeStyles.None, out var endDateValue); + if (ret) + { + EndValue = endDateValue; + Value.End = endDateValue; + SelectedValue.End = endDateValue; + } + } + get + { + var format = ViewMode == DatePickerViewMode.DateTime ? DateTimeFormat : DateFormat; + return Value.End != DateTime.MinValue ? Value.End.ToString(format) : null; + } + } [NotNull] private string? StartPlaceHolderText { get; set; } @@ -56,6 +89,12 @@ public partial class DateTimeRange [NotNull] private string? SeparateText { get; set; } + /// + /// 获得/设置 是否可以编辑内容 默认 false + /// + [Parameter] + public bool IsEditable { get; set; } + /// /// 获得/设置 是否点击快捷侧边栏自动关闭弹窗 默认 false /// @@ -200,6 +239,8 @@ public bool AllowNull [NotNull] private IIconTheme? IconTheme { get; set; } + private string? ReadonlyString => IsEditable ? null : "readonly"; + private string? ValueClassString => CssBuilder.Default("datetime-range-input") .AddClass("datetime", ViewMode == DatePickerViewMode.DateTime) .AddClass("disabled", IsDisabled) @@ -295,20 +336,6 @@ private async Task OnClickSidebarItem(DateTimeRangeSidebarItem item) } } - private string GetValueString(DateTime value) - { - string? ret; - //if (ViewMode == DatePickerViewMode.DateTime) - //{ - // ret = value.ToString(DateTimeFormat); - //} - //else - //{ - ret = value.ToString(DateFormat); - //} - return ret; - } - /// /// 点击 清除按钮调用此方法 /// @@ -446,4 +473,6 @@ private void UpdateValue(DateTime d) public override bool IsComplexValue(object? propertyValue) => false; private static DateTime GetEndDateTime(DateTime dt) => dt.Date.AddHours(23).AddMinutes(59).AddSeconds(59); + + private DateTime GetSafeStartValue() => SelectedValue.Start.Date == SelectedValue.End.Date ? SelectedValue.Start.GetSafeMonthDateTime(-1) : SelectedValue.Start.Date; } diff --git a/src/Extensions/Components/BootstrapBlazor.SummerNote/wwwroot/css/bootstrap.blazor.editor.min.css b/src/Extensions/Components/BootstrapBlazor.SummerNote/wwwroot/css/bootstrap.blazor.editor.min.css index 4ca84729096..591aa543775 100644 --- a/src/Extensions/Components/BootstrapBlazor.SummerNote/wwwroot/css/bootstrap.blazor.editor.min.css +++ b/src/Extensions/Components/BootstrapBlazor.SummerNote/wwwroot/css/bootstrap.blazor.editor.min.css @@ -1 +1 @@ -@font-face{font-display:auto;font-family:summernote;font-style:normal;font-weight:400;src:url(font/summernote.eot?#iefix) format("embedded-opentype"),url(font/summernote.woff2) format("woff2"),url(font/summernote.woff) format("woff"),url(font/summernote.ttf) format("truetype")}[class*=" note-icon"]:before,[class^=note-icon]:before{text-rendering:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;speak:none;display:inline-block;font-family:summernote;font-size:inherit;font-style:normal;text-decoration:inherit;text-transform:none;vertical-align:middle}.note-icon-fw{text-align:center;width:1.25em}.note-icon-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.note-icon-pull-left{float:left}.note-icon-pull-right{float:right}.note-icon.note-icon-pull-left{margin-right:.3em}.note-icon.note-icon-pull-right{margin-left:.3em}.note-icon-align:before{content:""}.note-icon-align-center:before{content:""}.note-icon-align-indent:before{content:""}.note-icon-align-justify:before{content:""}.note-icon-align-left:before{content:""}.note-icon-align-outdent:before{content:""}.note-icon-align-right:before{content:""}.note-icon-arrow-circle-down:before{content:""}.note-icon-arrow-circle-left:before{content:""}.note-icon-arrow-circle-right:before{content:""}.note-icon-arrow-circle-up:before{content:""}.note-icon-arrows-alt:before{content:""}.note-icon-arrows-h:before{content:""}.note-icon-arrows-v:before{content:""}.note-icon-bold:before{content:""}.note-icon-caret:before{content:""}.note-icon-chain-broken:before{content:""}.note-icon-circle:before{content:""}.note-icon-close:before{content:""}.note-icon-code:before{content:""}.note-icon-col-after:before{content:""}.note-icon-col-before:before{content:""}.note-icon-col-remove:before{content:""}.note-icon-eraser:before{content:""}.note-icon-float-left:before{content:""}.note-icon-float-none:before{content:""}.note-icon-float-right:before{content:""}.note-icon-font:before{content:""}.note-icon-frame:before{content:""}.note-icon-italic:before{content:""}.note-icon-link:before{content:""}.note-icon-magic:before{content:""}.note-icon-menu-check:before{content:""}.note-icon-minus:before{content:""}.note-icon-orderedlist:before{content:""}.note-icon-pencil:before{content:""}.note-icon-picture:before{content:""}.note-icon-question:before{content:""}.note-icon-redo:before{content:""}.note-icon-rollback:before{content:""}.note-icon-row-above:before{content:""}.note-icon-row-below:before{content:""}.note-icon-row-remove:before{content:""}.note-icon-special-character:before{content:""}.note-icon-square:before{content:""}.note-icon-strikethrough:before{content:""}.note-icon-subscript:before{content:""}.note-icon-summernote:before{content:""}.note-icon-superscript:before{content:""}.note-icon-table:before{content:""}.note-icon-text-height:before{content:""}.note-icon-trash:before{content:""}.note-icon-underline:before{content:""}.note-icon-undo:before{content:""}.note-icon-unorderedlist:before{content:""}.note-icon-video:before{content:""}.note-editor{position:relative}.note-editor .note-dropzone{background-color:#fff;color:#87cefa;display:none;opacity:.95;position:absolute;z-index:100}.note-editor .note-dropzone .note-dropzone-message{display:table-cell;font-size:28px;font-weight:700;text-align:center;vertical-align:middle}.note-editor .note-dropzone.hover{color:#098ddf}.note-editor.dragover .note-dropzone{display:table}.note-editor .note-editing-area{position:relative}.note-editor .note-editing-area .note-editable{outline:0}.note-editor .note-editing-area .note-editable sup{vertical-align:super}.note-editor .note-editing-area .note-editable sub{vertical-align:sub}.note-editor .note-editing-area .note-editable img.note-float-left{margin-right:10px}.note-editor .note-editing-area .note-editable img.note-float-right{margin-left:10px}.note-editor.note-airframe,.note-editor.note-frame{border:1px solid #00000032}.note-editor.note-airframe.codeview .note-editing-area .note-editable,.note-editor.note-frame.codeview .note-editing-area .note-editable{display:none}.note-editor.note-airframe.codeview .note-editing-area .note-codable,.note-editor.note-frame.codeview .note-editing-area .note-codable{display:block}.note-editor.note-airframe .note-editing-area,.note-editor.note-frame .note-editing-area{overflow:hidden}.note-editor.note-airframe .note-editing-area .note-editable,.note-editor.note-frame .note-editing-area .note-editable{word-wrap:break-word;overflow:auto;padding:10px}.note-editor.note-airframe .note-editing-area .note-editable[contenteditable=false],.note-editor.note-frame .note-editing-area .note-editable[contenteditable=false]{background-color:#8080801d}.note-editor.note-airframe .note-editing-area .note-codable,.note-editor.note-frame .note-editing-area .note-codable{background-color:#222;border:0;border-radius:0;box-shadow:none;-ms-box-sizing:border-box;box-sizing:border-box;color:#ccc;display:none;font-family:Menlo,Monaco,monospace,sans-serif;font-size:14px;margin-bottom:0;outline:0;padding:10px;resize:none;width:100%}.note-editor.note-airframe.fullscreen,.note-editor.note-frame.fullscreen{left:0;position:fixed;top:0;width:100%!important;z-index:1050}.note-editor.note-airframe.fullscreen .note-resizebar,.note-editor.note-frame.fullscreen .note-resizebar{display:none}.note-editor.note-airframe .note-status-output,.note-editor.note-frame .note-status-output{border:0;border-top:1px solid #e2e2e2;color:#000;display:block;font-size:14px;height:20px;line-height:1.42857143;margin-bottom:0;width:100%}.note-editor.note-airframe .note-status-output:empty,.note-editor.note-frame .note-status-output:empty{border-top:0 solid transparent;height:0}.note-editor.note-airframe .note-status-output .pull-right,.note-editor.note-frame .note-status-output .pull-right{float:right!important}.note-editor.note-airframe .note-status-output .text-muted,.note-editor.note-frame .note-status-output .text-muted{color:#777}.note-editor.note-airframe .note-status-output .text-primary,.note-editor.note-frame .note-status-output .text-primary{color:#286090}.note-editor.note-airframe .note-status-output .text-success,.note-editor.note-frame .note-status-output .text-success{color:#3c763d}.note-editor.note-airframe .note-status-output .text-info,.note-editor.note-frame .note-status-output .text-info{color:#31708f}.note-editor.note-airframe .note-status-output .text-warning,.note-editor.note-frame .note-status-output .text-warning{color:#8a6d3b}.note-editor.note-airframe .note-status-output .text-danger,.note-editor.note-frame .note-status-output .text-danger{color:#a94442}.note-editor.note-airframe .note-status-output .alert,.note-editor.note-frame .note-status-output .alert{background-color:#f5f5f5;border-radius:0;color:#000;margin:-7px 0 0;padding:7px 10px 2px}.note-editor.note-airframe .note-status-output .alert .note-icon,.note-editor.note-frame .note-status-output .alert .note-icon{margin-right:5px}.note-editor.note-airframe .note-status-output .alert-success,.note-editor.note-frame .note-status-output .alert-success{background-color:#dff0d8!important;color:#3c763d!important}.note-editor.note-airframe .note-status-output .alert-info,.note-editor.note-frame .note-status-output .alert-info{background-color:#d9edf7!important;color:#31708f!important}.note-editor.note-airframe .note-status-output .alert-warning,.note-editor.note-frame .note-status-output .alert-warning{background-color:#fcf8e3!important;color:#8a6d3b!important}.note-editor.note-airframe .note-status-output .alert-danger,.note-editor.note-frame .note-status-output .alert-danger{background-color:#f2dede!important;color:#a94442!important}.note-editor.note-airframe .note-statusbar,.note-editor.note-frame .note-statusbar{background-color:#8080801d;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #00000032}.note-editor.note-airframe .note-statusbar .note-resizebar,.note-editor.note-frame .note-statusbar .note-resizebar{cursor:ns-resize;height:9px;padding-top:1px;width:100%}.note-editor.note-airframe .note-statusbar .note-resizebar .note-icon-bar,.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar{border-top:1px solid #00000032;margin:1px auto;width:20px}.note-editor.note-airframe .note-statusbar.locked .note-resizebar,.note-editor.note-frame .note-statusbar.locked .note-resizebar{cursor:default}.note-editor.note-airframe .note-statusbar.locked .note-resizebar .note-icon-bar,.note-editor.note-frame .note-statusbar.locked .note-resizebar .note-icon-bar{display:none}.note-editor.note-airframe .note-placeholder,.note-editor.note-frame .note-placeholder{padding:10px}.note-editor.note-airframe{border:0}.note-editor.note-airframe .note-editing-area .note-editable{padding:0}.note-popover.popover{display:none;max-width:none}.note-popover.popover .popover-content a{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.note-popover.popover .arrow{left:20px!important}.note-toolbar{position:relative}.note-editor .note-toolbar,.note-popover .popover-content{margin:0;padding:0 0 5px 5px}.note-editor .note-toolbar>.note-btn-group,.note-popover .popover-content>.note-btn-group{margin-left:0;margin-right:5px;margin-top:5px}.note-editor .note-toolbar .note-btn-group .note-table,.note-popover .popover-content .note-btn-group .note-table{min-width:0;padding:5px}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker{font-size:18px}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher{cursor:pointer;height:10em;position:absolute!important;width:10em;z-index:3}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;height:5em;position:relative!important;width:5em;z-index:1}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;height:1em;position:absolute!important;width:1em;z-index:2}.note-editor .note-toolbar .note-style .dropdown-style blockquote,.note-editor .note-toolbar .note-style .dropdown-style pre,.note-popover .popover-content .note-style .dropdown-style blockquote,.note-popover .popover-content .note-style .dropdown-style pre{margin:0;padding:5px 10px}.note-editor .note-toolbar .note-style .dropdown-style h1,.note-editor .note-toolbar .note-style .dropdown-style h2,.note-editor .note-toolbar .note-style .dropdown-style h3,.note-editor .note-toolbar .note-style .dropdown-style h4,.note-editor .note-toolbar .note-style .dropdown-style h5,.note-editor .note-toolbar .note-style .dropdown-style h6,.note-editor .note-toolbar .note-style .dropdown-style p,.note-popover .popover-content .note-style .dropdown-style h1,.note-popover .popover-content .note-style .dropdown-style h2,.note-popover .popover-content .note-style .dropdown-style h3,.note-popover .popover-content .note-style .dropdown-style h4,.note-popover .popover-content .note-style .dropdown-style h5,.note-popover .popover-content .note-style .dropdown-style h6,.note-popover .popover-content .note-style .dropdown-style p{margin:0;padding:0}.note-editor .note-toolbar .note-color-all .note-dropdown-menu,.note-popover .popover-content .note-color-all .note-dropdown-menu{min-width:337px}.note-editor .note-toolbar .note-color .dropdown-toggle,.note-popover .popover-content .note-color .dropdown-toggle{padding-left:5px;width:20px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette{display:inline-block;margin:0;width:160px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette:first-child,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette:first-child{margin:0 5px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title{border-bottom:1px solid #eee;font-size:12px;margin:2px 7px;text-align:center}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select{border-radius:5px;cursor:pointer;font-size:11px;margin:3px;padding:0 3px;width:100%}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select:hover,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select:hover{background:#eee}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-row,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-row{height:20px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select-btn,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select-btn{display:none}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn{border:1px solid #eee}.note-editor .note-toolbar .note-para .note-dropdown-menu,.note-popover .popover-content .note-para .note-dropdown-menu{min-width:228px;padding:5px}.note-editor .note-toolbar .note-para .note-dropdown-menu>div+div,.note-popover .popover-content .note-para .note-dropdown-menu>div+div{margin-left:5px}.note-editor .note-toolbar .note-dropdown-menu,.note-popover .popover-content .note-dropdown-menu{min-width:160px}.note-editor .note-toolbar .note-dropdown-menu.right,.note-popover .popover-content .note-dropdown-menu.right{left:auto;right:0}.note-editor .note-toolbar .note-dropdown-menu.right:before,.note-popover .popover-content .note-dropdown-menu.right:before{left:auto!important;right:9px}.note-editor .note-toolbar .note-dropdown-menu.right:after,.note-popover .popover-content .note-dropdown-menu.right:after{left:auto!important;right:10px}.note-editor .note-toolbar .note-dropdown-menu.note-check a i,.note-popover .popover-content .note-dropdown-menu.note-check a i{color:#00bfff;visibility:hidden}.note-editor .note-toolbar .note-dropdown-menu.note-check a.checked i,.note-popover .popover-content .note-dropdown-menu.note-check a.checked i{visibility:visible}.note-editor .note-toolbar .note-fontsize-10,.note-popover .popover-content .note-fontsize-10{font-size:10px}.note-editor .note-toolbar .note-color-palette,.note-popover .popover-content .note-color-palette{line-height:1}.note-editor .note-toolbar .note-color-palette div .note-color-btn,.note-popover .popover-content .note-color-palette div .note-color-btn{border:0;border-radius:0;height:20px;margin:0;padding:0;width:20px}.note-editor .note-toolbar .note-color-palette div .note-color-btn:hover,.note-popover .popover-content .note-color-palette div .note-color-btn:hover{transform:scale(1.2);transition:all .2s}.note-modal .modal-dialog{border-radius:5px;box-shadow:0 3px 9px rgba(0,0,0,.5);outline:0}.note-modal .form-group{margin-left:0;margin-right:0}.note-modal .note-modal-form{margin:0}.note-modal .note-image-dialog .note-dropzone{border:4px dashed #d3d3d3;color:#d3d3d3;font-size:30px;line-height:4;margin-bottom:10px;min-height:100px;text-align:center}@-moz-document url-prefix(){.note-modal .note-image-input{height:auto}}.note-placeholder{color:#808080;display:none;position:absolute}.note-handle .note-control-selection{border:1px solid #000;display:none;position:absolute}.note-handle .note-control-selection>div{position:absolute}.note-handle .note-control-selection .note-control-selection-bg{background-color:#000;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);filter:alpha(opacity=30);height:100%;-webkit-opacity:.3;-khtml-opacity:.3;-moz-opacity:.3;opacity:.3;width:100%}.note-handle .note-control-selection .note-control-handle,.note-handle .note-control-selection .note-control-holder,.note-handle .note-control-selection .note-control-sizing{border:1px solid #000;height:7px;width:7px}.note-handle .note-control-selection .note-control-sizing{background-color:#000}.note-handle .note-control-selection .note-control-nw{border-bottom:0;border-right:0;left:-5px;top:-5px}.note-handle .note-control-selection .note-control-ne{border-bottom:0;border-left:0;right:-5px;top:-5px}.note-handle .note-control-selection .note-control-sw{border-right:0;border-top:0;bottom:-5px;left:-5px}.note-handle .note-control-selection .note-control-se{bottom:-5px;cursor:se-resize;right:-5px}.note-handle .note-control-selection .note-control-se.note-control-holder{border-left:0;border-top:0;cursor:default}.note-handle .note-control-selection .note-control-selection-info{background-color:#000;border-radius:5px;bottom:0;color:#fff;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);filter:alpha(opacity=70);font-size:12px;margin:5px;-webkit-opacity:.7;-khtml-opacity:.7;-moz-opacity:.7;opacity:.7;padding:5px;right:0}.note-hint-popover{min-width:100px;padding:2px}.note-hint-popover .popover-content{max-height:150px;overflow:auto;padding:3px}.note-hint-popover .popover-content .note-hint-group .note-hint-item{display:block!important;padding:3px}.note-hint-popover .popover-content .note-hint-group .note-hint-item.active,.note-hint-popover .popover-content .note-hint-group .note-hint-item:hover{background-color:#428bca;clear:both;color:#fff;cursor:pointer;display:block;font-weight:400;line-height:1.4;outline:0;text-decoration:none;white-space:nowrap}body .note-fullscreen-body,html .note-fullscreen-body{overflow:hidden!important}.note-toolbar{background:#8080801d}.note-btn-group .note-btn{border-color:#00000032;font-size:13px;padding:.28rem .65rem}.editor .editor-body{cursor:pointer;min-height:50px;height:auto}.editor .editor-body:focus:before{content:none}.editor .editor-body:empty:before{content:attr(placeholder)}.editor .note-editor{background-color:#fff}.editor .note-editor .note-right{float:right}.editor .note-btn-close{background-image:-webkit-linear-gradient(top,#5bc0de 0%,#2aabd2 100%);background-image:-o-linear-gradient(top,#5bc0de 0%,#2aabd2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#2aabd2));background-image:linear-gradient(to bottom,#5bc0de 0%,#2aabd2 100%);background-repeat:repeat-x;border-color:#28a4c9;color:#fff}.editor .dropdown-menu{overflow:unset;max-height:unset;max-width:unset}.editor .btn-light{border-color:#00000032}.editor .btn-light:hover{background-color:#e2e6ea;border-color:#dae0e5}.editor .btn-light:not(:disabled):not(.disabled).active,.editor .btn-light:not(:disabled):not(.disabled):active,.editor .show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df} \ No newline at end of file +@font-face{font-display:auto;font-family:summernote;font-style:normal;font-weight:400;src:url(font/summernote.eot?#iefix) format("embedded-opentype"),url(font/summernote.woff2) format("woff2"),url(font/summernote.woff) format("woff"),url(font/summernote.ttf) format("truetype")}[class*=" note-icon"]:before,[class^=note-icon]:before{text-rendering:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;speak:none;display:inline-block;font-family:summernote;font-size:inherit;font-style:normal;text-decoration:inherit;text-transform:none;vertical-align:middle}.note-icon-fw{text-align:center;width:1.25em}.note-icon-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.note-icon-pull-left{float:left}.note-icon-pull-right{float:right}.note-icon.note-icon-pull-left{margin-right:.3em}.note-icon.note-icon-pull-right{margin-left:.3em}.note-icon-align:before{content:""}.note-icon-align-center:before{content:""}.note-icon-align-indent:before{content:""}.note-icon-align-justify:before{content:""}.note-icon-align-left:before{content:""}.note-icon-align-outdent:before{content:""}.note-icon-align-right:before{content:""}.note-icon-arrow-circle-down:before{content:""}.note-icon-arrow-circle-left:before{content:""}.note-icon-arrow-circle-right:before{content:""}.note-icon-arrow-circle-up:before{content:""}.note-icon-arrows-alt:before{content:""}.note-icon-arrows-h:before{content:""}.note-icon-arrows-v:before{content:""}.note-icon-bold:before{content:""}.note-icon-caret:before{content:""}.note-icon-chain-broken:before{content:""}.note-icon-circle:before{content:""}.note-icon-close:before{content:""}.note-icon-code:before{content:""}.note-icon-col-after:before{content:""}.note-icon-col-before:before{content:""}.note-icon-col-remove:before{content:""}.note-icon-eraser:before{content:""}.note-icon-float-left:before{content:""}.note-icon-float-none:before{content:""}.note-icon-float-right:before{content:""}.note-icon-font:before{content:""}.note-icon-frame:before{content:""}.note-icon-italic:before{content:""}.note-icon-link:before{content:""}.note-icon-magic:before{content:""}.note-icon-menu-check:before{content:""}.note-icon-minus:before{content:""}.note-icon-orderedlist:before{content:""}.note-icon-pencil:before{content:""}.note-icon-picture:before{content:""}.note-icon-question:before{content:""}.note-icon-redo:before{content:""}.note-icon-rollback:before{content:""}.note-icon-row-above:before{content:""}.note-icon-row-below:before{content:""}.note-icon-row-remove:before{content:""}.note-icon-special-character:before{content:""}.note-icon-square:before{content:""}.note-icon-strikethrough:before{content:""}.note-icon-subscript:before{content:""}.note-icon-summernote:before{content:""}.note-icon-superscript:before{content:""}.note-icon-table:before{content:""}.note-icon-text-height:before{content:""}.note-icon-trash:before{content:""}.note-icon-underline:before{content:""}.note-icon-undo:before{content:""}.note-icon-unorderedlist:before{content:""}.note-icon-video:before{content:""}.note-editor{position:relative}.note-editor .note-dropzone{background-color:#fff;color:#87cefa;display:none;opacity:.95;position:absolute;z-index:100}.note-editor .note-dropzone .note-dropzone-message{display:table-cell;font-size:28px;font-weight:700;text-align:center;vertical-align:middle}.note-editor .note-dropzone.hover{color:#098ddf}.note-editor.dragover .note-dropzone{display:table}.note-editor .note-editing-area{position:relative}.note-editor .note-editing-area .note-editable{outline:0}.note-editor .note-editing-area .note-editable sup{vertical-align:super}.note-editor .note-editing-area .note-editable sub{vertical-align:sub}.note-editor .note-editing-area .note-editable img.note-float-left{margin-right:10px}.note-editor .note-editing-area .note-editable img.note-float-right{margin-left:10px}.note-editor.note-airframe,.note-editor.note-frame{border:1px solid #00000032}.note-editor.note-airframe.codeview .note-editing-area .note-editable,.note-editor.note-frame.codeview .note-editing-area .note-editable{display:none}.note-editor.note-airframe.codeview .note-editing-area .note-codable,.note-editor.note-frame.codeview .note-editing-area .note-codable{display:block}.note-editor.note-airframe .note-editing-area,.note-editor.note-frame .note-editing-area{overflow:hidden}.note-editor.note-airframe .note-editing-area .note-editable,.note-editor.note-frame .note-editing-area .note-editable{word-wrap:break-word;overflow:auto;padding:10px}.note-editor.note-airframe .note-editing-area .note-editable[contenteditable=false],.note-editor.note-frame .note-editing-area .note-editable[contenteditable=false]{background-color:#8080801d}.note-editor.note-airframe .note-editing-area .note-codable,.note-editor.note-frame .note-editing-area .note-codable{background-color:#222;border:0;border-radius:0;box-shadow:none;-ms-box-sizing:border-box;box-sizing:border-box;color:#ccc;display:none;font-family:Menlo,Monaco,monospace,sans-serif;font-size:14px;margin-bottom:0;outline:0;padding:10px;resize:none;width:100%}.note-editor.note-airframe.fullscreen,.note-editor.note-frame.fullscreen{left:0;position:fixed;top:0;width:100%!important;z-index:1050}.note-editor.note-airframe.fullscreen .note-resizebar,.note-editor.note-frame.fullscreen .note-resizebar{display:none}.note-editor.note-airframe .note-status-output,.note-editor.note-frame .note-status-output{border:0;border-top:1px solid #e2e2e2;color:#000;display:block;font-size:14px;height:20px;line-height:1.42857143;margin-bottom:0;width:100%}.note-editor.note-airframe .note-status-output:empty,.note-editor.note-frame .note-status-output:empty{border-top:0 solid transparent;height:0}.note-editor.note-airframe .note-status-output .pull-right,.note-editor.note-frame .note-status-output .pull-right{float:right!important}.note-editor.note-airframe .note-status-output .text-muted,.note-editor.note-frame .note-status-output .text-muted{color:#777}.note-editor.note-airframe .note-status-output .text-primary,.note-editor.note-frame .note-status-output .text-primary{color:#286090}.note-editor.note-airframe .note-status-output .text-success,.note-editor.note-frame .note-status-output .text-success{color:#3c763d}.note-editor.note-airframe .note-status-output .text-info,.note-editor.note-frame .note-status-output .text-info{color:#31708f}.note-editor.note-airframe .note-status-output .text-warning,.note-editor.note-frame .note-status-output .text-warning{color:#8a6d3b}.note-editor.note-airframe .note-status-output .text-danger,.note-editor.note-frame .note-status-output .text-danger{color:#a94442}.note-editor.note-airframe .note-status-output .alert,.note-editor.note-frame .note-status-output .alert{background-color:#f5f5f5;border-radius:0;color:#000;margin:-7px 0 0;padding:7px 10px 2px}.note-editor.note-airframe .note-status-output .alert .note-icon,.note-editor.note-frame .note-status-output .alert .note-icon{margin-right:5px}.note-editor.note-airframe .note-status-output .alert-success,.note-editor.note-frame .note-status-output .alert-success{background-color:#dff0d8!important;color:#3c763d!important}.note-editor.note-airframe .note-status-output .alert-info,.note-editor.note-frame .note-status-output .alert-info{background-color:#d9edf7!important;color:#31708f!important}.note-editor.note-airframe .note-status-output .alert-warning,.note-editor.note-frame .note-status-output .alert-warning{background-color:#fcf8e3!important;color:#8a6d3b!important}.note-editor.note-airframe .note-status-output .alert-danger,.note-editor.note-frame .note-status-output .alert-danger{background-color:#f2dede!important;color:#a94442!important}.note-editor.note-airframe .note-statusbar,.note-editor.note-frame .note-statusbar{background-color:#8080801d;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #00000032}.note-editor.note-airframe .note-statusbar .note-resizebar,.note-editor.note-frame .note-statusbar .note-resizebar{cursor:ns-resize;height:9px;padding-top:1px;width:100%}.note-editor.note-airframe .note-statusbar .note-resizebar .note-icon-bar,.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar{border-top:1px solid #00000032;margin:1px auto;width:20px}.note-editor.note-airframe .note-statusbar.locked .note-resizebar,.note-editor.note-frame .note-statusbar.locked .note-resizebar{cursor:default}.note-editor.note-airframe .note-statusbar.locked .note-resizebar .note-icon-bar,.note-editor.note-frame .note-statusbar.locked .note-resizebar .note-icon-bar{display:none}.note-editor.note-airframe .note-placeholder,.note-editor.note-frame .note-placeholder{padding:10px}.note-editor.note-airframe{border:0}.note-editor.note-airframe .note-editing-area .note-editable{padding:0}.note-popover.popover{display:none;max-width:none}.note-popover.popover .popover-content a{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.note-popover.popover .arrow{left:20px!important}.note-toolbar{position:relative}.note-editor .note-toolbar,.note-popover .popover-content{margin:0;padding:0 0 5px 5px}.note-editor .note-toolbar>.note-btn-group,.note-popover .popover-content>.note-btn-group{margin-left:0;margin-right:5px;margin-top:5px}.note-editor .note-toolbar .note-btn-group .note-table,.note-popover .popover-content .note-btn-group .note-table{min-width:0;padding:5px}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker{font-size:18px}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher{cursor:pointer;height:10em;position:absolute!important;width:10em;z-index:3}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;height:5em;position:relative!important;width:5em;z-index:1}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;height:1em;position:absolute!important;width:1em;z-index:2}.note-editor .note-toolbar .note-style .dropdown-style blockquote,.note-editor .note-toolbar .note-style .dropdown-style pre,.note-popover .popover-content .note-style .dropdown-style blockquote,.note-popover .popover-content .note-style .dropdown-style pre{margin:0;padding:5px 10px}.note-editor .note-toolbar .note-style .dropdown-style h1,.note-editor .note-toolbar .note-style .dropdown-style h2,.note-editor .note-toolbar .note-style .dropdown-style h3,.note-editor .note-toolbar .note-style .dropdown-style h4,.note-editor .note-toolbar .note-style .dropdown-style h5,.note-editor .note-toolbar .note-style .dropdown-style h6,.note-editor .note-toolbar .note-style .dropdown-style p,.note-popover .popover-content .note-style .dropdown-style h1,.note-popover .popover-content .note-style .dropdown-style h2,.note-popover .popover-content .note-style .dropdown-style h3,.note-popover .popover-content .note-style .dropdown-style h4,.note-popover .popover-content .note-style .dropdown-style h5,.note-popover .popover-content .note-style .dropdown-style h6,.note-popover .popover-content .note-style .dropdown-style p{margin:0;padding:0}.note-editor .note-toolbar .note-color-all .note-dropdown-menu,.note-popover .popover-content .note-color-all .note-dropdown-menu{min-width:337px}.note-editor .note-toolbar .note-color .dropdown-toggle,.note-popover .popover-content .note-color .dropdown-toggle{padding-left:5px;width:20px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette{display:inline-block;margin:0;width:160px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette:first-child,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette:first-child{margin:0 5px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title{border-bottom:1px solid #eee;font-size:12px;margin:2px 7px;text-align:center}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select{border-radius:5px;cursor:pointer;font-size:11px;margin:3px;padding:0 3px;width:100%}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select:hover,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select:hover{background:#eee}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-row,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-row{height:20px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select-btn,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select-btn{display:none}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn{border:1px solid #eee}.note-editor .note-toolbar .note-para .note-dropdown-menu,.note-popover .popover-content .note-para .note-dropdown-menu{min-width:228px;padding:5px}.note-editor .note-toolbar .note-para .note-dropdown-menu>div+div,.note-popover .popover-content .note-para .note-dropdown-menu>div+div{margin-left:5px}.note-editor .note-toolbar .note-dropdown-menu,.note-popover .popover-content .note-dropdown-menu{min-width:160px}.note-editor .note-toolbar .note-dropdown-menu.right,.note-popover .popover-content .note-dropdown-menu.right{left:auto;right:0}.note-editor .note-toolbar .note-dropdown-menu.right:before,.note-popover .popover-content .note-dropdown-menu.right:before{left:auto!important;right:9px}.note-editor .note-toolbar .note-dropdown-menu.right:after,.note-popover .popover-content .note-dropdown-menu.right:after{left:auto!important;right:10px}.note-editor .note-toolbar .note-dropdown-menu.note-check a i,.note-popover .popover-content .note-dropdown-menu.note-check a i{color:#00bfff;visibility:hidden}.note-editor .note-toolbar .note-dropdown-menu.note-check a.checked i,.note-popover .popover-content .note-dropdown-menu.note-check a.checked i{visibility:visible}.note-editor .note-toolbar .note-fontsize-10,.note-popover .popover-content .note-fontsize-10{font-size:10px}.note-editor .note-toolbar .note-color-palette,.note-popover .popover-content .note-color-palette{line-height:1}.note-editor .note-toolbar .note-color-palette div .note-color-btn,.note-popover .popover-content .note-color-palette div .note-color-btn{border:0;border-radius:0;height:20px;margin:0;padding:0;width:20px}.note-editor .note-toolbar .note-color-palette div .note-color-btn:hover,.note-popover .popover-content .note-color-palette div .note-color-btn:hover{transform:scale(1.2);transition:all .2s}.note-modal .modal-dialog{border-radius:5px;box-shadow:0 3px 9px rgba(0,0,0,.5);outline:0}.note-modal .form-group{margin-left:0;margin-right:0}.note-modal .note-modal-form{margin:0}.note-modal .note-image-dialog .note-dropzone{border:4px dashed #d3d3d3;color:#d3d3d3;font-size:30px;line-height:4;margin-bottom:10px;min-height:100px;text-align:center}@-moz-document url-prefix(){.note-modal .note-image-input{height:auto}}.note-placeholder{color:#808080;display:none;position:absolute}.note-handle .note-control-selection{border:1px solid #000;display:none;position:absolute}.note-handle .note-control-selection>div{position:absolute}.note-handle .note-control-selection .note-control-selection-bg{background-color:#000;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);filter:alpha(opacity=30);height:100%;-webkit-opacity:.3;-khtml-opacity:.3;-moz-opacity:.3;opacity:.3;width:100%}.note-handle .note-control-selection .note-control-handle,.note-handle .note-control-selection .note-control-holder,.note-handle .note-control-selection .note-control-sizing{border:1px solid #000;height:7px;width:7px}.note-handle .note-control-selection .note-control-sizing{background-color:#000}.note-handle .note-control-selection .note-control-nw{border-bottom:0;border-right:0;left:-5px;top:-5px}.note-handle .note-control-selection .note-control-ne{border-bottom:0;border-left:0;right:-5px;top:-5px}.note-handle .note-control-selection .note-control-sw{border-right:0;border-top:0;bottom:-5px;left:-5px}.note-handle .note-control-selection .note-control-se{bottom:-5px;cursor:se-resize;right:-5px}.note-handle .note-control-selection .note-control-se.note-control-holder{border-left:0;border-top:0;cursor:default}.note-handle .note-control-selection .note-control-selection-info{background-color:#000;border-radius:5px;bottom:0;color:#fff;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);filter:alpha(opacity=70);font-size:12px;margin:5px;-webkit-opacity:.7;-khtml-opacity:.7;-moz-opacity:.7;opacity:.7;padding:5px;right:0}.note-hint-popover{min-width:100px;padding:2px}.note-hint-popover .popover-content{max-height:150px;overflow:auto;padding:3px}.note-hint-popover .popover-content .note-hint-group .note-hint-item{display:block!important;padding:3px}.note-hint-popover .popover-content .note-hint-group .note-hint-item.active,.note-hint-popover .popover-content .note-hint-group .note-hint-item:hover{background-color:#428bca;clear:both;color:#fff;cursor:pointer;display:block;font-weight:400;line-height:1.4;outline:0;text-decoration:none;white-space:nowrap}body .note-fullscreen-body,html .note-fullscreen-body{overflow:hidden!important}.note-toolbar{background:#8080801d}.note-btn-group .note-btn{border-color:#00000032;font-size:13px;padding:.28rem .65rem}.editor .editor-body{cursor:pointer;min-height:50px;height:auto}.editor .editor-body:focus:before{content:none}.editor .editor-body:empty:before{content:attr(placeholder)}.editor .note-editor{background-color:#fff}.editor .note-editor .note-right{float:right}.editor .note-btn-close{background-image:-webkit-linear-gradient(top,#5bc0de 0%,#2aabd2 100%);background-image:-o-linear-gradient(top,#5bc0de 0%,#2aabd2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#2aabd2));background-image:linear-gradient(to bottom,#5bc0de 0%,#2aabd2 100%);background-repeat:repeat-x;border-color:#28a4c9;color:#fff}.editor .dropdown-menu{overflow:unset;max-height:unset;max-width:unset}.editor .btn-light{border-color:#00000032}.editor .btn-light:hover{background-color:#e2e6ea;border-color:#dae0e5}.editor .btn-light:not(:disabled):not(.disabled).active,.editor .btn-light:not(:disabled):not(.disabled):active,.editor .show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.editor .note-toolbar{flex-wrap:wrap} \ No newline at end of file diff --git a/test/UnitTest/Components/DateTimePickerTest.cs b/test/UnitTest/Components/DateTimePickerTest.cs index 1ede6213f07..01056e9a633 100644 --- a/test/UnitTest/Components/DateTimePickerTest.cs +++ b/test/UnitTest/Components/DateTimePickerTest.cs @@ -2,6 +2,8 @@ // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. // Website: https://www.blazor.zone or https://argozhang.github.io/ +using AngleSharp.Dom; + namespace UnitTest.Components; public class DateTimePickerTest : BootstrapBlazorTestBase @@ -923,6 +925,44 @@ public void FormatValueAsString_Ok() Assert.Equal($"{DateTime.Today:yyyy-MM-dd}", v); } + [Fact] + public async Task IsEditable_Ok() + { + var cut = Context.RenderComponent>(pb => + { + pb.Add(a => a.IsEditable, true); + pb.Add(a => a.ViewMode, DatePickerViewMode.Date); + pb.Add(a => a.DateFormat, "MM/dd/yyyy"); + }); + var input = cut.Find(".datetime-picker-input"); + Assert.False(input.HasAttribute("readonly")); + + // input value + await cut.InvokeAsync(() => + { + input.Change("02/15/2024"); + }); + Assert.Equal("02/15/2024", cut.Instance.Value.ToString("MM/dd/yyyy")); + + // error input value + await cut.InvokeAsync(() => + { + input.Change("test"); + }); + Assert.Equal("02/15/2024", cut.Instance.Value.ToString("MM/dd/yyyy")); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.ViewMode, DatePickerViewMode.DateTime); + pb.Add(a => a.DateTimeFormat, "MM/dd/yyyy HH:mm:ss"); + }); + await cut.InvokeAsync(() => + { + input.Change("02/15/2024 01:00:00"); + }); + Assert.Equal("02/15/2024 01:00:00", cut.Instance.Value.ToString("MM/dd/yyyy HH:mm:ss")); + } + class MockDateTimePicker : DatePickerBody { public static bool GetSafeYearDateTime_Ok() diff --git a/test/UnitTest/Components/DateTimeRangeTest.cs b/test/UnitTest/Components/DateTimeRangeTest.cs index dc3ee663857..341e4b87830 100644 --- a/test/UnitTest/Components/DateTimeRangeTest.cs +++ b/test/UnitTest/Components/DateTimeRangeTest.cs @@ -541,4 +541,34 @@ await cut.InvokeAsync(() => Assert.Equal(DateTime.Today, cut.Instance.Value.Start); Assert.Equal(DateTime.Today.AddDays(1).AddSeconds(-1), cut.Instance.Value.End); } + + [Fact] + public async Task IsEditable_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.Value, new DateTimeRangeValue()); + pb.Add(a => a.IsEditable, true); + pb.Add(a => a.ViewMode, DatePickerViewMode.Date); + pb.Add(a => a.DateFormat, "MM/dd/yyyy"); + }); + var inputs = cut.FindAll(".datetime-range-input"); + Assert.False(inputs[0].HasAttribute("readonly")); + Assert.False(inputs[1].HasAttribute("readonly")); + + // input value + var input = cut.Find(".datetime-range-input"); + await cut.InvokeAsync(() => + { + input.Change("02/15/2024"); + }); + + inputs = cut.FindAll(".datetime-range-input"); + await cut.InvokeAsync(() => + { + inputs[1].Change("02/16/2024"); + }); + Assert.Equal("02/15/2024", cut.Instance.Value.Start.ToString("MM/dd/yyyy")); + Assert.Equal("02/16/2024", cut.Instance.Value.End.ToString("MM/dd/yyyy")); + } }