@schukai/monster 3.65.21 → 3.67.0

Sign up to get free protection for your applications and to get access to all the features.
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);