@schukai/monster 4.150.5 → 4.150.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/source/components/datatable/filter.mjs +2 -3
- package/source/components/datatable/style/filter.pcss +20 -0
- package/source/components/datatable/stylesheet/filter.mjs +1 -1
- package/source/components/form/style/control-bar.pcss +4 -0
- package/source/components/form/stylesheet/control-bar.mjs +1 -1
- package/source/dom/updater.mjs +65 -40
- package/test/cases/components/datatable/filter-availability.mjs +20 -0
- package/test/cases/components/form/control-bar.mjs +6 -0
- package/test/cases/dom/updater.mjs +246 -0
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.150.
|
|
1
|
+
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.150.7"}
|
|
@@ -1751,7 +1751,7 @@ function getTemplate() {
|
|
|
1751
1751
|
<slot name="hidden"></slot>
|
|
1752
1752
|
</div>
|
|
1753
1753
|
<div data-monster-role="select-and-search">
|
|
1754
|
-
<monster-
|
|
1754
|
+
<div data-monster-role="filter-actions">
|
|
1755
1755
|
<monster-message-state-button data-monster-role="search-button" class="stretched-control">i18n{search}</monster-message-state-button>
|
|
1756
1756
|
<monster-select class="stretched-control"
|
|
1757
1757
|
data-monster-selected-template="summary"
|
|
@@ -1776,8 +1776,7 @@ function getTemplate() {
|
|
|
1776
1776
|
</div>
|
|
1777
1777
|
</monster-popper-button>
|
|
1778
1778
|
<monster-button data-monster-role="reset-button" class="stretched-control">i18n{reset}</monster-button>
|
|
1779
|
-
|
|
1780
|
-
</monster-button-bar>
|
|
1779
|
+
</div>
|
|
1781
1780
|
</div>
|
|
1782
1781
|
|
|
1783
1782
|
</div>
|
|
@@ -118,6 +118,14 @@
|
|
|
118
118
|
width:100%;
|
|
119
119
|
justify-content: flex-end;
|
|
120
120
|
|
|
121
|
+
& [data-monster-role=filter-actions] {
|
|
122
|
+
display: flex;
|
|
123
|
+
flex-flow: row wrap;
|
|
124
|
+
justify-content: flex-end;
|
|
125
|
+
gap: 0.5rem;
|
|
126
|
+
width: 100%;
|
|
127
|
+
}
|
|
128
|
+
|
|
121
129
|
& monster-button {
|
|
122
130
|
display: flex;
|
|
123
131
|
}
|
|
@@ -181,6 +189,18 @@
|
|
|
181
189
|
row-gap: 0.5rem;
|
|
182
190
|
column-gap: 0;
|
|
183
191
|
|
|
192
|
+
& [data-monster-role=filter-actions] {
|
|
193
|
+
display: grid;
|
|
194
|
+
grid-template-columns: minmax(0, 1fr);
|
|
195
|
+
width: 100%;
|
|
196
|
+
|
|
197
|
+
& > * {
|
|
198
|
+
box-sizing: border-box;
|
|
199
|
+
min-width: 0;
|
|
200
|
+
width: 100%;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
184
204
|
& monster-message-state-button {
|
|
185
205
|
width: 100%;
|
|
186
206
|
}
|
|
@@ -85,7 +85,7 @@ try {
|
|
|
85
85
|
--monster-button-background-color,var(--monster-color-tertiary-4)
|
|
86
86
|
);border-color:var(
|
|
87
87
|
--monster-button-border-color,var(--monster-bg-color-tertiary-4)
|
|
88
|
-
)}button:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}button:disabled{cursor:not-allowed}button:active{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2);z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{display:flex;justify-content:space-between;align-content:center;flex-wrap:nowrap;flex-direction:row;align-items:stretch}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px);z-index:var(--monster-z-index-outline)}[data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-focus-ring-width:2px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-color-blue-4);--monster-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-focus-ring-color:var(--monster-color-yellow-2)}}:after,:before,:root{--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}a,a:active,a:focus-visible,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);text-decoration:none;outline:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus-visible,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}:host{width:100%}[data-monster-role=container]{container-name:filter;container-type:inline-size}[data-monster-role=control] .hidden{display:none}[data-monster-role=control] [data-monster-role=query]{width:100%;height:100%}[data-monster-role=control] monster-input-group{height:100%}[data-monster-role=control] monster-input-group::part(control){height:100%;align-items:stretch;min-block-size:calc(var(--monster-control-min-block-size, 2.75rem) - var(--monster-theme-control-border-width, 1px)*2)}[data-monster-role=control] monster-input-group [data-monster-role=operator]{height:100%;align-self:stretch;border:none;background-color:transparent;color:var(--monster-theme-control-color)}[data-monster-role=control] monster-input-group [data-monster-role=operator],[data-monster-role=control] monster-input-group [data-monster-role=query]{box-sizing:border-box;min-block-size:calc(var(--monster-control-min-block-size, 2.75rem) - var(--monster-theme-control-border-width, 1px)*2)}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=remove-badges]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control] [data-monster-role=layout]{align-items:flex-end;display:flex;justify-content:flex-start;width:100%;flex-direction:column}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;-moz-column-gap:1rem;column-gap:1rem;row-gap:.5rem;justify-content:flex-start}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]) ::slotted(label){display:flex;gap:.1rem;flex-direction:column;border-bottom:thin dotted var(--monster-theme-control-border-color);padding:2px;align-items:stretch;min-width:15em;min-height:4.1rem}:is([data-monster-role=control] [data-monster-role=layout]) [name=hidden]{display:none}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]{place-content:center flex-end;align-items:stretch;display:flex;flex-flow:row nowrap;row-gap:1.5rem;-moz-column-gap:.5rem;column-gap:.5rem;margin-top:1rem;width:100%;justify-content:flex-end}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-button{display:flex}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(control){height:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(button-button){height:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(button-control){height:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-select{min-width:150px}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-visible=false]{display:none}@container filter (width < 500px){[data-monster-role=control] [data-monster-role=layout]{flex-flow:column nowrap;row-gap:.5rem;-moz-column-gap:0;column-gap:0;display:contents}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]{display:contents}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]) ::slotted(label){min-width:-moz-fit-content;min-width:fit-content}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]{display:flex;flex-direction:column;row-gap:.5rem;-moz-column-gap:0;column-gap:0}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-message-state-button{width:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-select{width:100%;min-width:-moz-fit-content;min-width:fit-content}}
|
|
88
|
+
)}button:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}button:disabled{cursor:not-allowed}button:active{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2);z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{display:flex;justify-content:space-between;align-content:center;flex-wrap:nowrap;flex-direction:row;align-items:stretch}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px);z-index:var(--monster-z-index-outline)}[data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-focus-ring-width:2px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-color-blue-4);--monster-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-focus-ring-color:var(--monster-color-yellow-2)}}:after,:before,:root{--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}a,a:active,a:focus-visible,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);text-decoration:none;outline:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus-visible,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}:host{width:100%}[data-monster-role=container]{container-name:filter;container-type:inline-size}[data-monster-role=control] .hidden{display:none}[data-monster-role=control] [data-monster-role=query]{width:100%;height:100%}[data-monster-role=control] monster-input-group{height:100%}[data-monster-role=control] monster-input-group::part(control){height:100%;align-items:stretch;min-block-size:calc(var(--monster-control-min-block-size, 2.75rem) - var(--monster-theme-control-border-width, 1px)*2)}[data-monster-role=control] monster-input-group [data-monster-role=operator]{height:100%;align-self:stretch;border:none;background-color:transparent;color:var(--monster-theme-control-color)}[data-monster-role=control] monster-input-group [data-monster-role=operator],[data-monster-role=control] monster-input-group [data-monster-role=query]{box-sizing:border-box;min-block-size:calc(var(--monster-control-min-block-size, 2.75rem) - var(--monster-theme-control-border-width, 1px)*2)}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=remove-badges]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control] [data-monster-role=layout]{align-items:flex-end;display:flex;justify-content:flex-start;width:100%;flex-direction:column}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;-moz-column-gap:1rem;column-gap:1rem;row-gap:.5rem;justify-content:flex-start}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]) ::slotted(label){display:flex;gap:.1rem;flex-direction:column;border-bottom:thin dotted var(--monster-theme-control-border-color);padding:2px;align-items:stretch;min-width:15em;min-height:4.1rem}:is([data-monster-role=control] [data-monster-role=layout]) [name=hidden]{display:none}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]{place-content:center flex-end;align-items:stretch;display:flex;flex-flow:row nowrap;row-gap:1.5rem;-moz-column-gap:.5rem;column-gap:.5rem;margin-top:1rem;width:100%;justify-content:flex-end}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-role=filter-actions]{display:flex;flex-flow:row wrap;justify-content:flex-end;gap:.5rem;width:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-button{display:flex}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(control){height:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(button-button){height:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(button-control){height:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-select{min-width:150px}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-visible=false]{display:none}@container filter (width < 500px){[data-monster-role=control] [data-monster-role=layout]{flex-flow:column nowrap;row-gap:.5rem;-moz-column-gap:0;column-gap:0;display:contents}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]{display:contents}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]) ::slotted(label){min-width:-moz-fit-content;min-width:fit-content}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]{display:flex;flex-direction:column;row-gap:.5rem;-moz-column-gap:0;column-gap:0}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-role=filter-actions]{display:grid;grid-template-columns:minmax(0,1fr);width:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-role=filter-actions])>*{box-sizing:border-box;min-width:0;width:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-message-state-button{width:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-select{width:100%;min-width:-moz-fit-content;min-width:fit-content}}
|
|
89
89
|
}`,
|
|
90
90
|
0,
|
|
91
91
|
);
|
|
@@ -113,6 +113,10 @@ div[data-monster-role="control"] {
|
|
|
113
113
|
min-width: 0;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
& > slot:not([name])::slotted(monster-control-bar) {
|
|
117
|
+
--monster-control-min-block-size: inherit;
|
|
118
|
+
}
|
|
119
|
+
|
|
116
120
|
& > slot:not([name])::slotted(form),
|
|
117
121
|
& > slot:not([name])::slotted(div),
|
|
118
122
|
& > slot:not([name])::slotted(section) {
|
|
@@ -101,7 +101,7 @@ try {
|
|
|
101
101
|
--monster-action-menu-border-radius,var(--monster-border-radius)
|
|
102
102
|
);box-shadow:var(
|
|
103
103
|
--monster-action-menu-box-shadow,var(--monster-box-shadow-1)
|
|
104
|
-
)}div[data-monster-role=control] [data-monster-role=button-bar],div[data-monster-role=control] [data-monster-role=control-bar]{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;height:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height)}[data-monster-layout-alignment=right]:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]){justify-content:flex-end}[data-monster-layout-alignment=center]:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]){justify-content:center}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name]){display:flex;flex:var(--monster-control-bar-slot-flex,0 1 auto);min-width:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) :not(slot){display:flex}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=popper-nav]{display:flex;align-items:stretch;flex:0 0 var(--monster-control-bar-height);height:var(--monster-control-bar-height);min-width:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height)}:is(:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=popper-nav]):has(>[data-monster-role=switch][hidden]){display:none}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=switch]{--monster-control-min-block-size:var(--monster-control-bar-height);display:flex;height:var(--monster-control-bar-height);min-width:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height);width:var(--monster-control-bar-height)}.hidden:is(:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=switch]){display:none}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(*){--monster-control-min-block-size:var(--monster-control-bar-height);display:flex;box-sizing:border-box;flex:var(--monster-control-bar-item-flex,0 0 auto)!important;align-self:stretch;height:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height);min-width:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(div),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(form),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(section){flex-direction:row;align-items:stretch;gap:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(button),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(input),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(select),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(textarea){-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border-width:var(--monster-theme-control-border-width,var(--monster-border-width));border-radius:var(--monster-theme-control-border-radius,var(--monster-border-radius));border-style:var(--monster-theme-control-border-style,var(--monster-border-style));border-color:var(--monster-theme-control-border-color,var(--monster-bg-color-primary-4));line-height:1.5;height:var(--monster-control-bar-height);padding:var(--monster-select-control-padding,.4rem .6rem);width:auto!important;inline-size:auto!important}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-select){--monster-select-container-align-self:stretch;--monster-select-container-block-size:100%;--monster-select-container-overflow:hidden;--monster-select-selection-flex-wrap:nowrap;--monster-select-selection-margin:0;--monster-select-control-min-block-size:var(--monster-control-bar-height);--monster-select-control-padding:0.4rem 0.6rem;width:auto!important;inline-size:auto!important;max-inline-size:100%;min-inline-size:var(--monster-control-bar-select-min-inline-size,12rem)!important;min-width:var(--monster-control-bar-select-min-inline-size,12rem)!important}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-button),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-popper-button){--monster-button-control-inline-size:var(
|
|
104
|
+
)}div[data-monster-role=control] [data-monster-role=button-bar],div[data-monster-role=control] [data-monster-role=control-bar]{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;height:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height)}[data-monster-layout-alignment=right]:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]){justify-content:flex-end}[data-monster-layout-alignment=center]:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]){justify-content:center}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name]){display:flex;flex:var(--monster-control-bar-slot-flex,0 1 auto);min-width:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) :not(slot){display:flex}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=popper-nav]{display:flex;align-items:stretch;flex:0 0 var(--monster-control-bar-height);height:var(--monster-control-bar-height);min-width:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height)}:is(:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=popper-nav]):has(>[data-monster-role=switch][hidden]){display:none}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=switch]{--monster-control-min-block-size:var(--monster-control-bar-height);display:flex;height:var(--monster-control-bar-height);min-width:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height);width:var(--monster-control-bar-height)}.hidden:is(:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=switch]){display:none}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(*){--monster-control-min-block-size:var(--monster-control-bar-height);display:flex;box-sizing:border-box;flex:var(--monster-control-bar-item-flex,0 0 auto)!important;align-self:stretch;height:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height);min-width:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-control-bar){--monster-control-min-block-size:inherit}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(div),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(form),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(section){flex-direction:row;align-items:stretch;gap:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(button),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(input),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(select),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(textarea){-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border-width:var(--monster-theme-control-border-width,var(--monster-border-width));border-radius:var(--monster-theme-control-border-radius,var(--monster-border-radius));border-style:var(--monster-theme-control-border-style,var(--monster-border-style));border-color:var(--monster-theme-control-border-color,var(--monster-bg-color-primary-4));line-height:1.5;height:var(--monster-control-bar-height);padding:var(--monster-select-control-padding,.4rem .6rem);width:auto!important;inline-size:auto!important}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-select){--monster-select-container-align-self:stretch;--monster-select-container-block-size:100%;--monster-select-container-overflow:hidden;--monster-select-selection-flex-wrap:nowrap;--monster-select-selection-margin:0;--monster-select-control-min-block-size:var(--monster-control-bar-height);--monster-select-control-padding:0.4rem 0.6rem;width:auto!important;inline-size:auto!important;max-inline-size:100%;min-inline-size:var(--monster-control-bar-select-min-inline-size,12rem)!important;min-width:var(--monster-control-bar-select-min-inline-size,12rem)!important}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-button),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-popper-button){--monster-button-control-inline-size:var(
|
|
105
105
|
--monster-control-bar-button-inline-size,max-content
|
|
106
106
|
);--monster-button-inline-size:var(
|
|
107
107
|
--monster-control-bar-button-inline-size,max-content
|
package/source/dom/updater.mjs
CHANGED
|
@@ -854,7 +854,10 @@ function removeElement(_change, renderContext) {
|
|
|
854
854
|
*/
|
|
855
855
|
function insertElement(change, renderContext) {
|
|
856
856
|
const subject = this[internalSymbol].subject.getRealSubject();
|
|
857
|
-
|
|
857
|
+
const changePath = clone(change?.["path"]);
|
|
858
|
+
if (!isArray(changePath)) {
|
|
859
|
+
return false;
|
|
860
|
+
}
|
|
858
861
|
const mem = new WeakSet();
|
|
859
862
|
let wd = 0;
|
|
860
863
|
let changed = false;
|
|
@@ -873,36 +876,41 @@ function insertElement(change, renderContext) {
|
|
|
873
876
|
let found = false;
|
|
874
877
|
wd++;
|
|
875
878
|
|
|
876
|
-
const p = clone(
|
|
877
|
-
if (!isArray(p)) return changed;
|
|
879
|
+
const p = clone(changePath);
|
|
878
880
|
|
|
879
881
|
while (p.length > 0) {
|
|
880
882
|
const current = p.join(".");
|
|
881
883
|
|
|
882
884
|
let iterator = new Set();
|
|
883
|
-
const
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
885
|
+
const candidates = getBindingCandidates(
|
|
886
|
+
container,
|
|
887
|
+
ATTRIBUTE_UPDATER_INSERT,
|
|
888
|
+
renderContext?.candidates.insert ?? new WeakMap(),
|
|
889
|
+
);
|
|
890
|
+
for (const candidate of candidates) {
|
|
891
|
+
const definition = candidate.getAttribute(ATTRIBUTE_UPDATER_INSERT);
|
|
892
|
+
if (definition?.includes(`path:${current}`)) {
|
|
893
|
+
iterator.add(candidate);
|
|
894
|
+
}
|
|
893
895
|
}
|
|
894
896
|
|
|
895
897
|
for (const [, containerElement] of iterator.entries()) {
|
|
896
|
-
if (mem.has(containerElement)) continue;
|
|
897
|
-
mem.add(containerElement);
|
|
898
|
-
|
|
899
|
-
found = true;
|
|
900
|
-
|
|
901
898
|
const attributes = containerElement.getAttribute(
|
|
902
899
|
ATTRIBUTE_UPDATER_INSERT,
|
|
903
900
|
);
|
|
904
901
|
if (attributes === null) continue;
|
|
905
902
|
|
|
903
|
+
if (
|
|
904
|
+
mem.has(containerElement) ||
|
|
905
|
+
renderContext?.insert.get(containerElement) === attributes
|
|
906
|
+
) {
|
|
907
|
+
continue;
|
|
908
|
+
}
|
|
909
|
+
mem.add(containerElement);
|
|
910
|
+
renderContext?.insert.set(containerElement, attributes);
|
|
911
|
+
|
|
912
|
+
found = true;
|
|
913
|
+
|
|
906
914
|
const def = trimSpaces(attributes);
|
|
907
915
|
const i = def.indexOf(" ");
|
|
908
916
|
const key = trimSpaces(def.substr(0, i));
|
|
@@ -929,40 +937,53 @@ function insertElement(change, renderContext) {
|
|
|
929
937
|
|
|
930
938
|
const dataPath = cmd.split(":").pop();
|
|
931
939
|
|
|
932
|
-
let insertPoint;
|
|
933
|
-
if (containerElement.hasChildNodes()) {
|
|
934
|
-
insertPoint = containerElement.lastChild;
|
|
935
|
-
}
|
|
936
|
-
|
|
937
940
|
if (!isIterable(value)) {
|
|
938
941
|
throw new Error("the value is not iterable");
|
|
939
942
|
}
|
|
940
943
|
|
|
941
944
|
const available = new Set();
|
|
945
|
+
const existing = new Map();
|
|
946
|
+
const managedNodes = [];
|
|
947
|
+
for (const node of containerElement.querySelectorAll(
|
|
948
|
+
`[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}]`,
|
|
949
|
+
)) {
|
|
950
|
+
const ref = node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE);
|
|
951
|
+
if (!existing.has(ref)) {
|
|
952
|
+
existing.set(ref, node);
|
|
953
|
+
}
|
|
954
|
+
if (ref.includes(refPrefix)) {
|
|
955
|
+
managedNodes.push(node);
|
|
956
|
+
}
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
let template;
|
|
960
|
+
const pending = containerElement.ownerDocument.createDocumentFragment();
|
|
961
|
+
let structureChanged = false;
|
|
942
962
|
|
|
943
963
|
for (const [i] of Object.entries(value)) {
|
|
944
964
|
const ref = refPrefix + i;
|
|
945
965
|
const currentPath = `${dataPath}.${i}`;
|
|
946
966
|
|
|
947
967
|
available.add(ref);
|
|
948
|
-
const refElement =
|
|
949
|
-
`[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}="${ref}"]`,
|
|
950
|
-
);
|
|
968
|
+
const refElement = existing.get(ref);
|
|
951
969
|
|
|
952
970
|
if (refElement instanceof HTMLElement) {
|
|
953
|
-
insertPoint = refElement;
|
|
954
971
|
continue;
|
|
955
972
|
}
|
|
956
973
|
|
|
957
|
-
|
|
974
|
+
template ??= findDocumentTemplate(key, containerElement);
|
|
975
|
+
pending.appendChild(
|
|
976
|
+
createNewDocumentFragment(template, key, ref, currentPath),
|
|
977
|
+
);
|
|
958
978
|
changed = true;
|
|
959
979
|
}
|
|
960
980
|
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
981
|
+
if (pending.hasChildNodes()) {
|
|
982
|
+
containerElement.appendChild(pending);
|
|
983
|
+
structureChanged = true;
|
|
984
|
+
}
|
|
964
985
|
|
|
965
|
-
for (const
|
|
986
|
+
for (const node of managedNodes) {
|
|
966
987
|
if (
|
|
967
988
|
!available.has(
|
|
968
989
|
node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
|
|
@@ -972,11 +993,16 @@ function insertElement(change, renderContext) {
|
|
|
972
993
|
teardownManagedSubtree(node);
|
|
973
994
|
containerElement.removeChild(node);
|
|
974
995
|
changed = true;
|
|
996
|
+
structureChanged = true;
|
|
975
997
|
} catch (e) {
|
|
976
998
|
addErrorAttribute(containerElement, e);
|
|
977
999
|
}
|
|
978
1000
|
}
|
|
979
1001
|
}
|
|
1002
|
+
|
|
1003
|
+
if (structureChanged && renderContext) {
|
|
1004
|
+
renderContext.candidates.insert = new WeakMap();
|
|
1005
|
+
}
|
|
980
1006
|
}
|
|
981
1007
|
|
|
982
1008
|
p.pop();
|
|
@@ -987,7 +1013,6 @@ function insertElement(change, renderContext) {
|
|
|
987
1013
|
throw new Error("the maximum depth for the recursion is reached.");
|
|
988
1014
|
}
|
|
989
1015
|
}
|
|
990
|
-
|
|
991
1016
|
return changed;
|
|
992
1017
|
}
|
|
993
1018
|
|
|
@@ -996,24 +1021,21 @@ function insertElement(change, renderContext) {
|
|
|
996
1021
|
* @private
|
|
997
1022
|
* @license AGPLv3
|
|
998
1023
|
* @since 1.8.0
|
|
999
|
-
* @param {
|
|
1024
|
+
* @param {Template} template
|
|
1000
1025
|
* @param {string} key
|
|
1001
1026
|
* @param {string} ref
|
|
1002
1027
|
* @param {string} path
|
|
1003
1028
|
* @throws {Error} no template was found with the specified key.
|
|
1004
1029
|
*/
|
|
1005
|
-
function
|
|
1006
|
-
const template = findDocumentTemplate(key, container);
|
|
1007
|
-
|
|
1030
|
+
function createNewDocumentFragment(template, key, ref, path) {
|
|
1008
1031
|
const nodes = template.createDocumentFragment();
|
|
1009
|
-
for (const
|
|
1032
|
+
for (const node of nodes.childNodes) {
|
|
1010
1033
|
if (node instanceof HTMLElement) {
|
|
1011
1034
|
applyRecursive(node, key, path);
|
|
1012
1035
|
node.setAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE, ref);
|
|
1013
1036
|
}
|
|
1014
|
-
|
|
1015
|
-
container.appendChild(node);
|
|
1016
1037
|
}
|
|
1038
|
+
return nodes;
|
|
1017
1039
|
}
|
|
1018
1040
|
|
|
1019
1041
|
/**
|
|
@@ -1113,9 +1135,11 @@ function createRenderContext() {
|
|
|
1113
1135
|
patch: new WeakSet(),
|
|
1114
1136
|
attributes: new WeakSet(),
|
|
1115
1137
|
properties: new WeakSet(),
|
|
1138
|
+
insert: new WeakMap(),
|
|
1116
1139
|
removeProcessed: false,
|
|
1117
1140
|
insertBindingsPresent: undefined,
|
|
1118
1141
|
candidates: {
|
|
1142
|
+
insert: new WeakMap(),
|
|
1119
1143
|
replace: new WeakMap(),
|
|
1120
1144
|
patch: new WeakMap(),
|
|
1121
1145
|
attributes: new WeakMap(),
|
|
@@ -1134,6 +1158,7 @@ function createRenderContext() {
|
|
|
1134
1158
|
function invalidateRenderCandidates(renderContext) {
|
|
1135
1159
|
renderContext.removeProcessed = false;
|
|
1136
1160
|
renderContext.insertBindingsPresent = undefined;
|
|
1161
|
+
renderContext.candidates.insert = new WeakMap();
|
|
1137
1162
|
renderContext.candidates.replace = new WeakMap();
|
|
1138
1163
|
renderContext.candidates.patch = new WeakMap();
|
|
1139
1164
|
renderContext.candidates.attributes = new WeakMap();
|
|
@@ -34,4 +34,24 @@ describe("Datatable filter availability", () => {
|
|
|
34
34
|
assert.equal(control.getOption("disabled"), true, role);
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
+
|
|
38
|
+
it("keeps filter controls outside an overflow popper", async () => {
|
|
39
|
+
globalThis.name = "";
|
|
40
|
+
globalThis.location = window.location;
|
|
41
|
+
const element = document.createElement("monster-datatable-filter");
|
|
42
|
+
document.getElementById("mocks").append(element);
|
|
43
|
+
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
44
|
+
|
|
45
|
+
const actionBar = element.shadowRoot.querySelector(
|
|
46
|
+
'[data-monster-role="filter-actions"]',
|
|
47
|
+
);
|
|
48
|
+
assert.equal(actionBar?.localName, "div");
|
|
49
|
+
assert.deepEqual(
|
|
50
|
+
[...actionBar.children].map((control) =>
|
|
51
|
+
control.getAttribute("data-monster-role"),
|
|
52
|
+
),
|
|
53
|
+
["search-button", "filter-select", "save-button", "reset-button"],
|
|
54
|
+
);
|
|
55
|
+
assert.equal(element.shadowRoot.querySelector("monster-button-bar"), null);
|
|
56
|
+
});
|
|
37
57
|
});
|
|
@@ -404,6 +404,12 @@ describe("ControlBar", function () {
|
|
|
404
404
|
expect(cssText).to.contain(
|
|
405
405
|
"--monster-control-min-block-size: var(--monster-control-bar-height)",
|
|
406
406
|
);
|
|
407
|
+
expect(cssText).to.contain(
|
|
408
|
+
"::slotted(monster-control-bar)",
|
|
409
|
+
);
|
|
410
|
+
expect(cssText).to.contain(
|
|
411
|
+
"--monster-control-min-block-size: inherit",
|
|
412
|
+
);
|
|
407
413
|
expect(cssText).to.contain("::slotted(form)");
|
|
408
414
|
expect(cssText).to.contain("height: var(--monster-control-bar-height)");
|
|
409
415
|
expect(cssText).to.contain(
|
|
@@ -725,6 +725,14 @@ describe("DOM", function () {
|
|
|
725
725
|
|
|
726
726
|
describe("Updater()", function () {
|
|
727
727
|
describe("Repeat", function () {
|
|
728
|
+
const waitUntil = async (predicate, message, timeout = 5000) => {
|
|
729
|
+
const deadline = Date.now() + timeout;
|
|
730
|
+
while (!predicate() && Date.now() < deadline) {
|
|
731
|
+
await new Promise((resolve) => setTimeout(resolve, 5));
|
|
732
|
+
}
|
|
733
|
+
expect(predicate(), message).to.equal(true);
|
|
734
|
+
};
|
|
735
|
+
|
|
728
736
|
it("should build 6 li elements from an array", function (done) {
|
|
729
737
|
let element = document.getElementById("test1");
|
|
730
738
|
const testData = {
|
|
@@ -769,6 +777,244 @@ describe("DOM", function () {
|
|
|
769
777
|
})
|
|
770
778
|
.catch(done);
|
|
771
779
|
});
|
|
780
|
+
|
|
781
|
+
[false, true].forEach((batchUpdates) => {
|
|
782
|
+
it(`should bulk insert and reuse indexed entries with batchUpdates=${batchUpdates} issue #548`, async function () {
|
|
783
|
+
this.timeout(5000);
|
|
784
|
+
const mocks = document.getElementById("mocks");
|
|
785
|
+
mocks.innerHTML = `
|
|
786
|
+
<template id="bulk-row">
|
|
787
|
+
<li data-monster-replace="path:bulk-row.label"></li>
|
|
788
|
+
</template>
|
|
789
|
+
<ul id="bulk-rows" data-monster-insert="bulk-row path:items"></ul>
|
|
790
|
+
`;
|
|
791
|
+
|
|
792
|
+
const rows = document.getElementById("bulk-rows");
|
|
793
|
+
const updater = new Updater(rows, { items: [] });
|
|
794
|
+
updater.setBatchUpdates(batchUpdates);
|
|
795
|
+
|
|
796
|
+
const originalAppendChild = rows.appendChild;
|
|
797
|
+
const originalQuerySelector = rows.querySelector;
|
|
798
|
+
let appendCalls = 0;
|
|
799
|
+
let appendedFragments = 0;
|
|
800
|
+
let exactReferenceLookups = 0;
|
|
801
|
+
|
|
802
|
+
rows.appendChild = function (node) {
|
|
803
|
+
appendCalls++;
|
|
804
|
+
if (node instanceof DocumentFragment) {
|
|
805
|
+
appendedFragments++;
|
|
806
|
+
}
|
|
807
|
+
return originalAppendChild.call(this, node);
|
|
808
|
+
};
|
|
809
|
+
rows.querySelector = function (selector) {
|
|
810
|
+
if (selector.startsWith('[data-monster-insert-reference="')) {
|
|
811
|
+
exactReferenceLookups++;
|
|
812
|
+
}
|
|
813
|
+
return originalQuerySelector.call(this, selector);
|
|
814
|
+
};
|
|
815
|
+
|
|
816
|
+
const waitForLength = (length) =>
|
|
817
|
+
waitUntil(
|
|
818
|
+
() => rows.children.length === length,
|
|
819
|
+
`expected ${length} bulk rows`,
|
|
820
|
+
);
|
|
821
|
+
|
|
822
|
+
try {
|
|
823
|
+
await updater.run();
|
|
824
|
+
const items = updater.getSubject().items;
|
|
825
|
+
for (let index = 0; index < 872; index++) {
|
|
826
|
+
items.push({ label: `Row ${index}` });
|
|
827
|
+
}
|
|
828
|
+
await waitForLength(872);
|
|
829
|
+
|
|
830
|
+
expect(appendCalls).to.equal(1);
|
|
831
|
+
expect(appendedFragments).to.equal(1);
|
|
832
|
+
expect(exactReferenceLookups).to.equal(0);
|
|
833
|
+
expect(rows.firstElementChild.textContent).to.equal("Row 0");
|
|
834
|
+
expect(rows.lastElementChild.textContent).to.equal("Row 871");
|
|
835
|
+
|
|
836
|
+
const firstRow = rows.firstElementChild;
|
|
837
|
+
items.splice(400, 0, { label: "Inserted middle" });
|
|
838
|
+
await waitForLength(873);
|
|
839
|
+
expect(rows.children[400].textContent).to.equal("Inserted middle");
|
|
840
|
+
expect(rows.lastElementChild.textContent).to.equal("Row 871");
|
|
841
|
+
|
|
842
|
+
items.splice(400, 1);
|
|
843
|
+
await waitForLength(872);
|
|
844
|
+
expect(rows.children[400].textContent).to.equal("Row 400");
|
|
845
|
+
|
|
846
|
+
items[0].label = "Updated row";
|
|
847
|
+
items.splice(870, 2);
|
|
848
|
+
await waitForLength(870);
|
|
849
|
+
|
|
850
|
+
expect(rows.firstElementChild).to.equal(firstRow);
|
|
851
|
+
expect(rows.firstElementChild.textContent).to.equal("Updated row");
|
|
852
|
+
expect(rows.lastElementChild.textContent).to.equal("Row 869");
|
|
853
|
+
expect(appendCalls).to.equal(2);
|
|
854
|
+
expect(appendedFragments).to.equal(2);
|
|
855
|
+
} finally {
|
|
856
|
+
updater.dispose();
|
|
857
|
+
rows.appendChild = originalAppendChild;
|
|
858
|
+
rows.querySelector = originalQuerySelector;
|
|
859
|
+
}
|
|
860
|
+
});
|
|
861
|
+
});
|
|
862
|
+
|
|
863
|
+
it("should process two insert containers with the same data path issue #548", async function () {
|
|
864
|
+
const mocks = document.getElementById("mocks");
|
|
865
|
+
mocks.innerHTML = `
|
|
866
|
+
<template id="first-row"><li data-monster-replace="path:first-row"></li></template>
|
|
867
|
+
<template id="second-row"><li data-monster-replace="path:second-row"></li></template>
|
|
868
|
+
<div id="bulk-groups">
|
|
869
|
+
<ul id="first-rows" data-monster-insert="first-row path:items"></ul>
|
|
870
|
+
<ul id="second-rows" data-monster-insert="second-row path:items"></ul>
|
|
871
|
+
</div>
|
|
872
|
+
`;
|
|
873
|
+
|
|
874
|
+
const updater = new Updater(document.getElementById("bulk-groups"), {
|
|
875
|
+
items: [],
|
|
876
|
+
});
|
|
877
|
+
updater.setBatchUpdates(true);
|
|
878
|
+
|
|
879
|
+
try {
|
|
880
|
+
await updater.run();
|
|
881
|
+
updater.getSubject().items.push("Shared");
|
|
882
|
+
await waitUntil(
|
|
883
|
+
() =>
|
|
884
|
+
document.getElementById("first-rows").textContent === "Shared" &&
|
|
885
|
+
document.getElementById("second-rows").textContent === "Shared",
|
|
886
|
+
"expected both insert containers to render",
|
|
887
|
+
);
|
|
888
|
+
|
|
889
|
+
expect(document.getElementById("first-rows").textContent).to.equal(
|
|
890
|
+
"Shared",
|
|
891
|
+
);
|
|
892
|
+
expect(document.getElementById("second-rows").textContent).to.equal(
|
|
893
|
+
"Shared",
|
|
894
|
+
);
|
|
895
|
+
} finally {
|
|
896
|
+
updater.dispose();
|
|
897
|
+
}
|
|
898
|
+
});
|
|
899
|
+
|
|
900
|
+
it("should discover an insert binding created by replace in non-batch mode issue #548", async function () {
|
|
901
|
+
const mocks = document.getElementById("mocks");
|
|
902
|
+
mocks.innerHTML = `
|
|
903
|
+
<template id="dynamic-row">
|
|
904
|
+
<article data-monster-replace="path:dynamic-row.html"></article>
|
|
905
|
+
</template>
|
|
906
|
+
<template id="dynamic-child">
|
|
907
|
+
<span data-monster-replace="path:dynamic-child.label"></span>
|
|
908
|
+
</template>
|
|
909
|
+
<div id="dynamic-root" data-monster-insert="dynamic-row path:items"></div>
|
|
910
|
+
`;
|
|
911
|
+
|
|
912
|
+
const updater = new Updater(document.getElementById("dynamic-root"), {
|
|
913
|
+
items: [{ html: "", children: [] }],
|
|
914
|
+
});
|
|
915
|
+
updater.setBatchUpdates(false);
|
|
916
|
+
|
|
917
|
+
try {
|
|
918
|
+
await updater.run();
|
|
919
|
+
const item = updater.getSubject().items[0];
|
|
920
|
+
item.html =
|
|
921
|
+
'<div id="dynamic-children" data-monster-insert="dynamic-child path:items.0.children"></div>';
|
|
922
|
+
item.children.push({ label: "Child" });
|
|
923
|
+
|
|
924
|
+
await waitUntil(
|
|
925
|
+
() =>
|
|
926
|
+
document.getElementById("dynamic-children")?.textContent.trim() ===
|
|
927
|
+
"Child",
|
|
928
|
+
"expected the dynamically created insert binding to render",
|
|
929
|
+
);
|
|
930
|
+
} finally {
|
|
931
|
+
updater.dispose();
|
|
932
|
+
}
|
|
933
|
+
});
|
|
934
|
+
|
|
935
|
+
it("should process a changed insert definition in the same snapshot issue #548", async function () {
|
|
936
|
+
this.timeout(6000);
|
|
937
|
+
const mocks = document.getElementById("mocks");
|
|
938
|
+
mocks.innerHTML = `
|
|
939
|
+
<template id="old-row">
|
|
940
|
+
<span data-monster-replace="path:old-row"></span>
|
|
941
|
+
</template>
|
|
942
|
+
<template id="new-row">
|
|
943
|
+
<span data-monster-replace="path:new-row"></span>
|
|
944
|
+
</template>
|
|
945
|
+
<div id="rebound-insert"
|
|
946
|
+
data-monster-insert="old-row path:oldItems"
|
|
947
|
+
data-monster-attributes="data-monster-insert path:insertDefinition"></div>
|
|
948
|
+
`;
|
|
949
|
+
|
|
950
|
+
const updater = new Updater(mocks, {
|
|
951
|
+
oldItems: [],
|
|
952
|
+
insertDefinition: "old-row path:oldItems",
|
|
953
|
+
newItems: [],
|
|
954
|
+
});
|
|
955
|
+
updater.setBatchUpdates(false);
|
|
956
|
+
|
|
957
|
+
try {
|
|
958
|
+
await updater.run();
|
|
959
|
+
const container = document.getElementById("rebound-insert");
|
|
960
|
+
const subject = updater.getSubject();
|
|
961
|
+
subject.oldItems.push("Old");
|
|
962
|
+
subject.insertDefinition = "new-row path:newItems";
|
|
963
|
+
subject.newItems.push("New");
|
|
964
|
+
|
|
965
|
+
await waitUntil(
|
|
966
|
+
() =>
|
|
967
|
+
Array.from(container.children, (node) => node.textContent).join("") ===
|
|
968
|
+
"OldNew",
|
|
969
|
+
"expected the changed insert definition to render",
|
|
970
|
+
);
|
|
971
|
+
|
|
972
|
+
expect(container.getAttribute("data-monster-insert")).to.equal(
|
|
973
|
+
"new-row path:newItems",
|
|
974
|
+
);
|
|
975
|
+
expect(container.children.length).to.equal(2);
|
|
976
|
+
} finally {
|
|
977
|
+
updater.dispose();
|
|
978
|
+
}
|
|
979
|
+
});
|
|
980
|
+
|
|
981
|
+
it("should preserve multi-root template entries issue #548", async function () {
|
|
982
|
+
const mocks = document.getElementById("mocks");
|
|
983
|
+
mocks.innerHTML = `
|
|
984
|
+
<template id="multi-row">
|
|
985
|
+
<strong data-monster-replace="path:multi-row.label"></strong>
|
|
986
|
+
<em data-monster-replace="path:multi-row.label"></em>
|
|
987
|
+
</template>
|
|
988
|
+
<div id="multi-rows" data-monster-insert="multi-row path:items"></div>
|
|
989
|
+
`;
|
|
990
|
+
|
|
991
|
+
const rows = document.getElementById("multi-rows");
|
|
992
|
+
const updater = new Updater(rows, {
|
|
993
|
+
items: [{ label: "First" }, { label: "Second" }],
|
|
994
|
+
});
|
|
995
|
+
|
|
996
|
+
try {
|
|
997
|
+
await updater.run();
|
|
998
|
+
expect(Array.from(rows.children, (node) => node.textContent)).to.deep.equal([
|
|
999
|
+
"First",
|
|
1000
|
+
"First",
|
|
1001
|
+
"Second",
|
|
1002
|
+
"Second",
|
|
1003
|
+
]);
|
|
1004
|
+
|
|
1005
|
+
updater.getSubject().items.splice(0, 1);
|
|
1006
|
+
await waitUntil(
|
|
1007
|
+
() => rows.children.length === 2,
|
|
1008
|
+
"expected both top-level nodes of the removed entry to be removed",
|
|
1009
|
+
);
|
|
1010
|
+
expect(Array.from(rows.children, (node) => node.textContent)).to.deep.equal([
|
|
1011
|
+
"Second",
|
|
1012
|
+
"Second",
|
|
1013
|
+
]);
|
|
1014
|
+
} finally {
|
|
1015
|
+
updater.dispose();
|
|
1016
|
+
}
|
|
1017
|
+
});
|
|
772
1018
|
});
|
|
773
1019
|
});
|
|
774
1020
|
|