diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js new file mode 100644 index 0000000000..7929316275 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js @@ -0,0 +1,84 @@ +/** +@ngdoc directive +@name umbraco.directives.directive:umbSearchFilter +@restrict E +@scope + +@description +Added in Umbraco version 8.7.0 Use this directive to render an umbraco search filter. + +
++ +@param {boolean} model Set to+ +++ + +
true or false to set the checkbox to checked or unchecked.
+@param {string} inputId Set the id of the checkbox.
+@param {string} text Set the text for the checkbox label.
+@param {string} labelKey Set a dictinary/localization string for the checkbox label
+@param {callback} onChange Callback when the value of the checkbox change by interaction.
+@param {boolean} autoFocus Add autofocus to the input field
+@param {boolean} preventSubmitOnEnter Set the enter prevent directive or not
+
+**/
+
+(function () {
+ 'use strict';
+
+ function UmbSearchFilterController($timeout, localizationService) {
+
+ var vm = this;
+
+ vm.$onInit = onInit;
+ vm.change = change;
+
+ function onInit() {
+ vm.inputId = vm.inputId || "umb-check_" + String.CreateGuid();
+
+ // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [
+ if (vm.labelKey) {
+ localizationService.localize(vm.labelKey).then(function (data) {
+ if(data.indexOf('[') === -1){
+ vm.text = data;
+ }
+ });
+ }
+ }
+
+ function change() {
+ if (vm.onChange) {
+ $timeout(function () {
+ vm.onChange({ model: vm.model, value: vm.value });
+ }, 0);
+ }
+ }
+ }
+
+ var component = {
+ templateUrl: 'views/components/forms/umb-search-filter.html',
+ controller: UmbSearchFilterController,
+ controllerAs: 'vm',
+ transclude: true,
+ bindings: {
+ model: "=",
+ inputId: "@",
+ text: "@",
+ labelKey: "@?",
+ onChange: "&?",
+ autoFocus: "",
+ preventSubmitOnEnter: ""
+ }
+ };
+
+ angular.module('umbraco.directives').component('umbSearchFilter', component);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index a36105763c..bf98d1f2e9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -113,6 +113,9 @@ label.control-label, .control-label {
}
}
+.form-search .umb-search-field {
+ width: 100%;
+}
// GENERAL STYLES
// --------------
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
index d6e2d8133d..14b82892e7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
@@ -15,20 +15,15 @@