@schukai/monster 3.65.21 → 3.67.0

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.
Files changed (23) hide show
  1. package/CHANGELOG.md +32 -4
  2. package/package.json +1 -1
  3. package/source/components/datatable/change-button.mjs +5 -6
  4. package/source/components/datatable/dataset.mjs +202 -202
  5. package/source/components/datatable/datasource/dom.mjs +1 -1
  6. package/source/components/datatable/datatable.mjs +10 -6
  7. package/source/components/datatable/filter.mjs +20 -5
  8. package/source/components/datatable/pagination.mjs +4 -4
  9. package/source/components/datatable/save-button.mjs +4 -5
  10. package/source/components/datatable/status.mjs +4 -5
  11. package/source/components/datatable/stylesheet/embedded-pagination.mjs +2 -4
  12. package/source/components/form/select.mjs +132 -82
  13. package/source/components/form/style/select.pcss +1 -1
  14. package/source/components/form/stylesheet/select.mjs +2 -4
  15. package/source/components/host/call-button.mjs +5 -4
  16. package/source/components/layout/stylesheet/collapse.mjs +2 -4
  17. package/source/components/notify/message.mjs +6 -3
  18. package/source/components/style/mixin/property.pcss +8 -8
  19. package/source/components/stylesheet/link.mjs +1 -3
  20. package/source/components/stylesheet/mixin/property.mjs +1 -3
  21. package/source/data/datasource/dom.mjs +85 -85
  22. package/source/dom/resource/data.mjs +122 -122
  23. package/source/dom/template.mjs +113 -113
package/source/components/datatable/filter.mjs CHANGED
@@ -215,6 +215,10 @@ class Filter extends CustomElement {
215
215
  * @property {Object} templates Template definitions
216
216
  * @property {string} templates.main Main template
217
217
  * @property {Object} labels Label definitions
218
+ * @property {Object} formatter label Template Formatter definitions
219
+ * @property {Object} formatter.marker
220
+ * @property {Object} formatter.marker.open
221
+ * @property {Object} formatter.marker.close
218
222
  * @property {string} labels.search Search button label
219
223
  * @property {string} labels.reset Reset button label
220
224
  * @property {Object} queries Query definitions
@@ -227,8 +231,14 @@ class Filter extends CustomElement {
227
231
  templates: {
228
232
  main: getTemplate(),
229
233
  },
230
-
234
+ formatter: {
235
+ marker: {
236
+ open: null,
237
+ close: null
238
+ }
239
+ },
231
240
  labels: {
241
+
232
242
  search: "Search",
233
243
  reset: "Reset",
234
244
  save: "Save",
@@ -726,7 +736,7 @@ function initTabEvents() {
726
736
  }
727
737
  }
728
738
 
729
- const host = findElementWithSelectorUpwards( this,"monster-host");
739
+ const host = findElementWithSelectorUpwards(this, "monster-host");
730
740
  if (!(host && this.id)) {
731
741
  return;
732
742
  }
@@ -767,7 +777,7 @@ function updateFilterTabs() {
767
777
  return;
768
778
  }
769
779
 
770
- const host = findElementWithSelectorUpwards( this,"monster-host");
780
+ const host = findElementWithSelectorUpwards(this, "monster-host");
771
781
  if (!(host && this.id)) {
772
782
  return;
773
783
  }
@@ -925,6 +935,7 @@ function buildSearchQuery(queries) {
925
935
  */
926
936
  function collectSearchQueries() {
927
937
  const currentHash = parseBracketedKeyValueHash(getGlobal().location.hash);
938
+ const self = this;
928
939
 
929
940
  return new Promise((resolve, reject) => {
930
941
  const query = [];
@@ -1001,6 +1012,10 @@ function collectSearchQueries() {
1001
1012
  },
1002
1013
  });
1003
1014
 
1015
+ if (self.getOption("formatter.marker.open")) {
1016
+ formatter.setMarker(self.getOption("formatter.marker.open"),self.getOption("formatter.marker.close"));
1017
+ }
1018
+
1004
1019
  let queryPart = formatter.format(template);
1005
1020
  if (queryPart) {
1006
1021
  if (isFunction(wrapCallback)) {
@@ -1065,7 +1080,7 @@ function getControlValuesFromLabel(label) {
1065
1080
  * @returns {Promise<unknown>}
1066
1081
  */
1067
1082
  function initFromConfig() {
1068
- const host = findElementWithSelectorUpwards( this,"monster-host");
1083
+ const host = findElementWithSelectorUpwards(this, "monster-host");
1069
1084
 
1070
1085
  if (!(isInstance(host, Host) && this.id)) {
1071
1086
  return Promise.resolve();
@@ -1108,7 +1123,7 @@ function initFromConfig() {
1108
1123
  * @private
1109
1124
  */
1110
1125
  function updateConfig() {
1111
- const host = findElementWithSelectorUpwards( this,"monster-host");
1126
+ const host = findElementWithSelectorUpwards(this, "monster-host");
1112
1127
  if (!(host && this.id)) {
1113
1128
  return;
1114
1129
  }
package/source/components/datatable/pagination.mjs CHANGED
@@ -17,7 +17,7 @@ import {
17
17
  CustomElement,
18
18
  registerCustomElement,
19
19
  } from "../../dom/customelement.mjs";
20
- import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
20
+ import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
21
21
  import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
22
22
  import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
23
23
  import { Datasource } from "./datasource.mjs";
@@ -189,11 +189,11 @@ class Pagination extends CustomElement {
189
189
  const selector = this.getOption("datasource.selector", "");
190
190
 
191
191
  if (isString(selector)) {
192
- const element = findElementWithSelectorUpwards( this,selector);
193
- if (element===null) {
192
+ const element = findElementWithSelectorUpwards(this, selector);
193
+ if (element === null) {
194
194
  throw new Error("the selector must match exactly one element");
195
195
  }
196
-
196
+
197
197
  if (!(element instanceof Datasource)) {
198
198
  throw new TypeError("the element must be a datasource");
199
199
  }
package/source/components/datatable/save-button.mjs CHANGED
@@ -22,7 +22,7 @@ import {
22
22
  attributeObserverSymbol,
23
23
  registerCustomElement,
24
24
  } from "../../dom/customelement.mjs";
25
- import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
25
+ import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
26
26
  import { isString, isArray } from "../../types/is.mjs";
27
27
  import { Observer } from "../../types/observer.mjs";
28
28
  import { TokenList } from "../../types/tokenlist.mjs";
@@ -155,12 +155,11 @@ class SaveButton extends CustomElement {
155
155
  const selector = this.getOption("datasource.selector");
156
156
 
157
157
  if (isString(selector)) {
158
-
159
- const element = findElementWithSelectorUpwards( this,selector);
160
- if (element===null) {
158
+ const element = findElementWithSelectorUpwards(this, selector);
159
+ if (element === null) {
161
160
  throw new Error("the selector must match exactly one element");
162
161
  }
163
-
162
+
164
163
  if (!(element instanceof Datasource)) {
165
164
  throw new TypeError("the element must be a datasource");
166
165
  }
package/source/components/datatable/status.mjs CHANGED
@@ -17,7 +17,7 @@ import {
17
17
  CustomElement,
18
18
  registerCustomElement,
19
19
  } from "../../dom/customelement.mjs";
20
- import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
20
+ import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
21
21
  import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
22
22
  import { Datasource } from "./datasource.mjs";
23
23
  import { SpinnerStyleSheet } from "../stylesheet/spinner.mjs";
@@ -175,12 +175,11 @@ function initEventHandler() {
175
175
  const self = this;
176
176
 
177
177
  if (isString(selector)) {
178
-
179
- const element = findElementWithSelectorUpwards( this,selector);
180
- if (element===null) {
178
+ const element = findElementWithSelectorUpwards(this, selector);
179
+ if (element === null) {
181
180
  throw new Error("the selector must match exactly one element");
182
181
  }
183
-
182
+
184
183
  if (!(element instanceof Datasource)) {
185
184
  throw new TypeError("the element must be a datasource");
186
185
  }
package/source/components/datatable/stylesheet/embedded-pagination.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
2
+ * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
3
3
  * Node module: @schukai/monster
4
4
  *
5
5
  * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
@@ -8,8 +8,6 @@
8
8
  * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
9
9
  * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
10
10
  * For more information about purchasing a commercial license, please contact schukai GmbH.
11
- *
12
- * SPDX-License-Identifier: AGPL-3.0
13
11
  */
14
12
 
15
13
  import { addAttributeToken } from "../../../dom/attributes.mjs";
@@ -27,7 +25,7 @@ try {
27
25
  EmbeddedPaginationStyleSheet.insertRule(
28
26
  `
29
27
  @layer embeddedpagination {
30
- :where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}: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-color-primary-1:var(--monster-color-cinnamon-6);--monster-color-primary-2:var(--monster-color-cinnamon-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-cinnamon-1);--monster-bg-color-primary-2:var(--monster-color-cinnamon-2);--monster-bg-color-primary-3:var(--monster-color-cinnamon-3);--monster-bg-color-primary-4:var(--monster-color-cinnamon-6);--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);--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);--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);--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);--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);--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);--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);--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;--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-gradient-tangerine-1);--monster-theme-control-color:var(--monster-gradient-tangerine-6);--monster-theme-control-border-color:var(--monster-gradient-tangerine-2);--monster-theme-control-hover-color:var(--monster-gradient-tangerine-6);--monster-theme-control-hover-bg-color:var(--monster-gradient-tangerine-2);--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);--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--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:1px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}@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);--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);--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);--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);--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);--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);--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);--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);--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-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);--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)}}[data-monster-role=pagination]{box-sizing:border-box;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.6;text-align:justify}[data-monster-role=pagination] ul{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:20px 0;padding-left:0}[data-monster-role=pagination] ul li{border-left:1px solid #000;margin:0;padding:0 10px}[data-monster-role=pagination] ul li a,[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover,[data-monster-role=pagination] ul li a:link,[data-monster-role=pagination] ul li a:visited{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color);outline:none;padding:0 .4rem;text-decoration:none;width:-moz-max-content;width:max-content}[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover{outline:none}[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}[data-monster-role=pagination] ul li a.current{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:unset}[data-monster-role=pagination] ul li a.disabled{cursor:not-allowed}[data-monster-role=pagination] ul li:first-child{border-left:none}@media (max-width:768px){[data-monster-role=pagination] ul li{padding:0 2px}[data-monster-role=pagination] ul li:first-child,[data-monster-role=pagination] ul li:nth-child(2){display:none}[data-monster-role=pagination] ul li:nth-child(3){border-left:none}}
28
+ :where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}: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-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);--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);--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);--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);--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);--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);--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);--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);--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;--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-gradient-tangerine-1);--monster-theme-control-color:var(--monster-gradient-tangerine-6);--monster-theme-control-border-color:var(--monster-gradient-tangerine-2);--monster-theme-control-hover-color:var(--monster-gradient-tangerine-6);--monster-theme-control-hover-bg-color:var(--monster-gradient-tangerine-2);--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);--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--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}@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);--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);--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);--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);--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);--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);--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);--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);--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-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);--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)}}[data-monster-role=pagination]{box-sizing:border-box;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.6;text-align:justify}[data-monster-role=pagination] ul{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:20px 0;padding-left:0}[data-monster-role=pagination] ul li{border-left:1px solid #000;margin:0;padding:0 10px}[data-monster-role=pagination] ul li a,[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover,[data-monster-role=pagination] ul li a:link,[data-monster-role=pagination] ul li a:visited{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color);outline:none;padding:0 .4rem;text-decoration:none;width:-moz-max-content;width:max-content}[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover{outline:none}[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}[data-monster-role=pagination] ul li a.current{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:unset}[data-monster-role=pagination] ul li a.disabled{cursor:not-allowed}[data-monster-role=pagination] ul li:first-child{border-left:none}@media (max-width:768px){[data-monster-role=pagination] ul li{padding:0 2px}[data-monster-role=pagination] ul li:first-child,[data-monster-role=pagination] ul li:nth-child(2){display:none}[data-monster-role=pagination] ul li:nth-child(3){border-left:none}}
31
29
  }`,
32
30
  0,
33
31
  );
package/source/components/form/select.mjs CHANGED
@@ -100,6 +100,12 @@ const keyFilterEventSymbol = Symbol("keyFilterEvent");
100
100
  */
101
101
  const lazyLoadDoneSymbol = Symbol("lazyLoadDone");
102
102
 
103
+ /**
104
+ * @private
105
+ * @type {symbol}
106
+ */
107
+ const isLoadingSymbol = Symbol("isLoading");
108
+
103
109
  /**
104
110
  * local symbol
105
111
  * @private
@@ -127,6 +133,13 @@ const resizeObserverSymbol = Symbol("resizeObserver");
127
133
  * @type {symbol}
128
134
  */
129
135
  const keyEventHandler = Symbol("keyEventHandler");
136
+
137
+ /**
138
+ * local symbol
139
+ * @private
140
+ * @type {symbol}
141
+ */
142
+ const lastFetchedDataSymbol = Symbol("lastFetchedData");
130
143
  /**
131
144
  * local symbol
132
145
  * @private
@@ -420,6 +433,8 @@ class Select extends CustomControl {
420
433
  * @property {Boolean} features.lazyLoad=false Load options when first opening the dropdown
421
434
  * @property {Boolean} features.closeOnSelect=false Close the dropdown when an option is selected (since 3.54.0)
422
435
  * @property {Boolean} features.emptyValueIfNoOptions=false If no options are available, the selection is set to an empty array
436
+ * @property {Boolean} features.storeFetchedData=false Store fetched data in the object
437
+ * @property {Boolean} features.useStrictValueComparison=true Use strict value comparison for the selection
423
438
  * @property {Boolean} filter.defaultValue=* Default filter value, if the filter is empty
424
439
  * @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled
425
440
  * @property {Object} templates Template definitions
@@ -455,6 +470,8 @@ class Select extends CustomControl {
455
470
  lazyLoad: false,
456
471
  closeOnSelect: false,
457
472
  emptyValueIfNoOptions: false,
473
+ storeFetchedData: false,
474
+ useStrictValueComparison: false,
458
475
  },
459
476
  url: null,
460
477
  labels: {
@@ -545,35 +562,7 @@ class Select extends CustomControl {
545
562
  }
546
563
 
547
564
  if (self.getOption("url") !== null && !lazyLoadFlag) {
548
- setStatusOrRemoveBadges.call(this, "loading");
549
-
550
- new Processing(200, () => {
551
- this.fetch()
552
- .then(() => {
553
- setTimeout(() => {
554
- let result;
555
- if (self.hasAttribute("value")) {
556
- result = setSelection.call(self, self.getAttribute("value"));
557
- } else {
558
- result = setSelection.call(self, []);
559
- }
560
-
561
- result
562
- .then(() => {})
563
- .catch((e) => {
564
- addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
565
- });
566
- }, 100);
567
- })
568
- .catch((e) => {
569
- addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
570
- setStatusOrRemoveBadges.call(this, "error");
571
- });
572
- })
573
- .run()
574
- .catch((e) => {
575
- addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
576
- });
565
+ self.fetch();
577
566
  }
578
567
 
579
568
  let lastValue = self.value;
@@ -600,6 +589,20 @@ class Select extends CustomControl {
600
589
  return this;
601
590
  }
602
591
 
592
+ /**
593
+ *
594
+ * @returns {*}
595
+ * @throws {Error} storeFetchedData is not enabled
596
+ * @since 3.66.0
597
+ */
598
+ getLastFetchedData() {
599
+ if (this.getOption("features.storeFetchedData") === false) {
600
+ throw new Error("storeFetchedData is not enabled");
601
+ }
602
+
603
+ return this?.[lastFetchedDataSymbol];
604
+ }
605
+
603
606
  /**
604
607
  * The Button.click() method simulates a click on the internal button element.
605
608
  *
@@ -663,34 +666,65 @@ class Select extends CustomControl {
663
666
 
664
667
  if (url !== undefined && url !== null) {
665
668
  url = validateString(url);
669
+ } else {
670
+ url = this.getOption("url");
671
+ if (url === null) {
672
+ return Promise.reject(new Error("No url defined"));
673
+ }
666
674
  }
667
675
 
668
676
  hide.call(this);
669
677
 
670
678
  return new Promise((resolve, reject) => {
671
- fetchData
672
- .call(this, url)
673
- .then((map) => {
674
- if (
675
- isObject(map) ||
676
- isArray(map) ||
677
- map instanceof Set ||
678
- map instanceof Map
679
- ) {
680
- this.importOptions(map);
681
- setTimeout(() => {
682
- setStatusOrRemoveBadges.call(this, "closed");
683
- resolve();
684
- }, 10);
685
- return;
686
- }
679
+ setStatusOrRemoveBadges.call(this, "loading");
687
680
 
688
- setStatusOrRemoveBadges.call(this, "error");
689
- reject(new Error("invalid response"));
690
- })
681
+ new Processing(10, () => {
682
+ this.setOption("options", []);
683
+
684
+ fetchData
685
+ .call(this, url)
686
+ .then((map) => {
687
+ this[isLoadingSymbol] = false;
688
+ if (
689
+ isObject(map) ||
690
+ isArray(map) ||
691
+ map instanceof Set ||
692
+ map instanceof Map
693
+ ) {
694
+ this.importOptions(map);
695
+ this[lastFetchedDataSymbol] = map;
696
+
697
+ let result;
698
+ const selection = this.getOption("selection");
699
+ if (selection) {
700
+ result = setSelection.call(this, selection);
701
+ } else if (this.hasAttribute("value")) {
702
+ result = setSelection.call(this, this.getAttribute("value"));
703
+ } else {
704
+ result = setSelection.call(this, []);
705
+ }
706
+
707
+ setTimeout(() => {
708
+ setStatusOrRemoveBadges.call(this, "closed");
709
+ resolve();
710
+ }, 10);
711
+
712
+ return result;
713
+ }
714
+
715
+ setStatusOrRemoveBadges.call(this, "error");
716
+ reject(new Error("invalid response"));
717
+ })
718
+ .catch((e) => {
719
+ this[isLoadingSymbol] = false;
720
+ setStatusOrRemoveBadges.call(this, "error");
721
+ reject(e);
722
+ });
723
+ })
724
+ .run()
691
725
  .catch((e) => {
692
726
  setStatusOrRemoveBadges.call(this, "error");
693
- reject(e);
727
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
694
728
  });
695
729
  });
696
730
  }
@@ -778,6 +812,7 @@ class Select extends CustomControl {
778
812
  value,
779
813
  label,
780
814
  visibility,
815
+ data: map.get(value),
781
816
  });
782
817
  });
783
818
 
@@ -793,7 +828,7 @@ class Select extends CustomControl {
793
828
 
794
829
  /**
795
830
  * @private
796
- * @return {Monster.Components.Form.Select}
831
+ * @return {Select}
797
832
  */
798
833
  calcAndSetOptionsDimension() {
799
834
  calcAndSetOptionsDimension.call(this);
@@ -996,11 +1031,31 @@ function buildSelectionLabel(value) {
996
1031
  const options = this.getOption("options");
997
1032
 
998
1033
  for (let i = 0; i < options.length; i++) {
999
- const o = options?.[i];
1000
- if (isObject(o) && o?.["value"] === value) {
1001
- return o?.["label"];
1002
- } else if (isPrimitive(o) && o === value) {
1034
+ let o = options?.[i];
1035
+ let l, v, v2;
1036
+
1037
+ if (this.getOption("features.useStrictValueComparison") === true) {
1038
+ v = value;
1039
+ } else {
1040
+ v = `${value}`;
1041
+ }
1042
+
1043
+ if (isPrimitive(o) && o === value) {
1003
1044
  return o;
1045
+ } else if (!isObject(o)) {
1046
+ continue;
1047
+ }
1048
+
1049
+ if (this.getOption("features.useStrictValueComparison") === true) {
1050
+ l = o?.["label"];
1051
+ v2 = o?.["value"];
1052
+ } else {
1053
+ l = `${o?.["label"]}`;
1054
+ v2 = `${o?.["value"]}`;
1055
+ }
1056
+
1057
+ if (v2 === v) {
1058
+ return l;
1004
1059
  }
1005
1060
  }
1006
1061
 
@@ -1497,8 +1552,13 @@ function handleOptionKeyboardEvents(event) {
1497
1552
  case "Space":
1498
1553
  const path = event.composedPath();
1499
1554
  const element = path?.[0];
1500
-
1501
- fireEvent(element.getElementsByTagName("input"), "click");
1555
+ if (element instanceof HTMLElement) {
1556
+ const input = element.getElementsByTagName("input");
1557
+ if (!input) {
1558
+ return;
1559
+ }
1560
+ fireEvent(input, "click");
1561
+ }
1502
1562
  event.preventDefault();
1503
1563
  break;
1504
1564
 
@@ -2041,29 +2101,10 @@ function show() {
2041
2101
  setStatusOrRemoveBadges.call(this, "loading");
2042
2102
 
2043
2103
  new Processing(200, () => {
2044
- this.fetch()
2045
- .then(() => {
2046
- setTimeout(() => {
2047
- let result;
2048
- if (this.hasAttribute("value")) {
2049
- result = setSelection.call(this, this.getAttribute("value"));
2050
- } else {
2051
- result = setSelection.call(this, []);
2052
- }
2053
-
2054
- result
2055
- .then(() => {
2056
- show.call(this);
2057
- })
2058
- .catch((e) => {
2059
- addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
2060
- });
2061
- }, 100);
2062
- })
2063
- .catch((e) => {
2064
- addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
2065
- setStatusOrRemoveBadges.call(this, "error");
2066
- });
2104
+ this.fetch().catch((e) => {
2105
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
2106
+ setStatusOrRemoveBadges.call(this, "error");
2107
+ });
2067
2108
  })
2068
2109
  .run()
2069
2110
  .catch((e) => {
@@ -2304,6 +2345,7 @@ function initEventHandler() {
2304
2345
  function setStatusOrRemoveBadges(suggestion) {
2305
2346
  setTimeout(() => {
2306
2347
  const selection = this.getOption("selection");
2348
+
2307
2349
  const clearAllFlag =
2308
2350
  isArray(selection) &&
2309
2351
  selection.length > 0 &&
@@ -2311,20 +2353,28 @@ function setStatusOrRemoveBadges(suggestion) {
2311
2353
 
2312
2354
  const current = this.getOption("classes.statusOrRemoveBadge");
2313
2355
 
2314
- if (clearAllFlag) {
2315
- if (current !== "clear") {
2316
- this.setOption("classes.statusOrRemoveBadge", "clear");
2356
+ if (this[isLoadingSymbol] === true) {
2357
+ if (current !== "loading") {
2358
+ this.setOption("classes.statusOrRemoveBadge", "loading");
2317
2359
  }
2318
2360
  return;
2319
2361
  }
2320
2362
 
2321
2363
  if (suggestion === "loading") {
2364
+ this[isLoadingSymbol] = true;
2322
2365
  if (current !== "loading") {
2323
2366
  this.setOption("classes.statusOrRemoveBadge", "loading");
2324
2367
  }
2325
2368
  return;
2326
2369
  }
2327
2370
 
2371
+ if (clearAllFlag) {
2372
+ if (current !== "clear") {
2373
+ this.setOption("classes.statusOrRemoveBadge", "clear");
2374
+ }
2375
+ return;
2376
+ }
2377
+
2328
2378
  if (this[controlElementSymbol].classList.contains("open")) {
2329
2379
  if (current !== "open") {
2330
2380
  this.setOption("classes.statusOrRemoveBadge", "open");
package/source/components/form/style/select.pcss CHANGED
@@ -63,7 +63,7 @@ div[data-monster-role="control"] {
63
63
  border-color: var(--monster-bg-color-primary-2);
64
64
  border-radius: var(--monster-border-radius);
65
65
  border-style: var(--monster-border-style);
66
- border-width: thin;
66
+ border-width: var(--monster-border-width);
67
67
 
68
68
  background-color: var(--monster-bg-color-primary-1);
69
69
  color: var(--monster-color-primary-1);