fix: filter height

source/components/datatable/filter/select.mjs

@@ -45,9 +45,6 @@ class FilterSelect extends Select {
 	get defaults() {
 		return Object.assign({}, super.defaults, {
 			type: "checkbox",
-			// templateMapping: {
-			// 	selected: getSummaryTemplate(),
-			// },
 		});
 	}
 

source/components/datatable/save-button.mjs

@@ -205,7 +205,10 @@ class SaveButton extends CustomElement {
 					const result = diff(self[originValuesSymbol], currentValues);
 					if (self.getOption("logLevel") === "debug") {
 						console.groupCollapsed("SaveButton");
-						console.log("originValues", JSON.parse(JSON.stringify(currentValues)));
+						console.log(
+							"originValues",
+							JSON.parse(JSON.stringify(currentValues)),
+						);
 						console.log("result of diff", result);
 						console.log("ignoreChanges", ignoreChanges);
 
@@ -232,8 +235,8 @@ class SaveButton extends CustomElement {
 							for (const ignorePattern of ignoreChanges) {
 								const p = new RegExp(ignorePattern);
 
-								let matchPath = item.path
-								if(isArray(item.path)){
+								let matchPath = item.path;
+								if (isArray(item.path)) {
 									matchPath = item.path.join(".");
 								}
 

source/components/datatable/style/filter-controls-defaults.pcss

@@ -3,6 +3,11 @@
 @import "../../style/form.pcss";
 
 
+:host {
+    width: 100%;
+    height: 100%;
+}
+
 div[data-monster-role=control] {
     height: 100%;
     position: relative;

source/components/datatable/style/filter-date-range.pcss

 
 [data-monster-role=input] {
-    width: 100%
+    width: 100%;
+    height: 100%;
 }
 
 .hidden {

source/components/datatable/style/filter-range.pcss

 
 [data-monster-role=input] {
-    width: 100%
+    width: 100%;
+    height: 100%;
 }
 

source/components/datatable/style/filter.pcss

@@ -62,6 +62,7 @@
                 align-items: stretch;
 
                 min-width: 15em;
+                min-height: 4.1rem;
 
             }
 

source/components/datatable/stylesheet/filter-controls-defaults.mjs

@@ -25,7 +25,7 @@ try {
 	FilterControlsDefaultsStyleSheet.insertRule(
 		`
 @layer filtercontrolsdefaults { 
-[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}:is(div[data-monster-role=control] .form-container) .form-group{margin-bottom:.2rem}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]{text-align:right;width:5rem}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]::-webkit-inner-spin-button,:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]::-webkit-outer-spin-button{margin-left:10px}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} 
+[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}:host{height:100%;width:100%}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}:is(div[data-monster-role=control] .form-container) .form-group{margin-bottom:.2rem}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]{text-align:right;width:5rem}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]::-webkit-inner-spin-button,:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]::-webkit-outer-spin-button{margin-left:10px}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} 
 }`,
 		0,
 	);

source/components/datatable/stylesheet/filter-date-range.mjs

@@ -25,7 +25,7 @@ try {
 	FilterDateRangeStyleSheet.insertRule(
 		`
 @layer filterdaterange { 
-[data-monster-role=input]{width:100%}.hidden{display:none} 
+[data-monster-role=input]{height:100%;width:100%}.hidden{display:none} 
 }`,
 		0,
 	);

source/components/datatable/stylesheet/filter-range.mjs

@@ -25,7 +25,7 @@ try {
 	FilterRangeStyleSheet.insertRule(
 		`
 @layer filterrange { 
-[data-monster-role=input]{width:100%} 
+[data-monster-role=input]{height:100%;width:100%} 
 }`,
 		0,
 	);