@schukai/monster 3.99.1 → 3.99.2

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.
@@ -31,7 +31,7 @@ import {
31
31
  ATTRIBUTE_ERRORMESSAGE,
32
32
  ATTRIBUTE_ROLE,
33
33
  } from "../../dom/constants.mjs";
34
- import {addErrorAttribute} from "../../dom/error.mjs";
34
+ import { addErrorAttribute } from "../../dom/error.mjs";
35
35
 
36
36
  export { ActionButton };
37
37
 
@@ -35,7 +35,7 @@ import { ApiButtonStyleSheet } from "./stylesheet/api-button.mjs";
35
35
  import { isObject, isFunction } from "../../types/is.mjs";
36
36
  import { getGlobal } from "../../types/global.mjs";
37
37
  import { Formatter } from "../../text/formatter.mjs";
38
- import {addErrorAttribute} from "../../dom/error.mjs";
38
+ import { addErrorAttribute } from "../../dom/error.mjs";
39
39
  export { ApiButton };
40
40
 
41
41
  /**
@@ -41,7 +41,7 @@ import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
41
41
  import { ButtonBarStyleSheet } from "./stylesheet/button-bar.mjs";
42
42
  import { positionPopper } from "./util/floating-ui.mjs";
43
43
  import { convertToPixels } from "../../dom/dimension.mjs";
44
- import {addErrorAttribute} from "../../dom/error.mjs";
44
+ import { addErrorAttribute } from "../../dom/error.mjs";
45
45
  export { ButtonBar };
46
46
 
47
47
  /**
@@ -30,7 +30,7 @@ import { ATTRIBUTE_BUTTON_CLASS } from "./constants.mjs";
30
30
  import { ButtonStyleSheet } from "./stylesheet/button.mjs";
31
31
  import { RippleStyleSheet } from "../stylesheet/ripple.mjs";
32
32
  import { fireCustomEvent } from "../../dom/events.mjs";
33
- import {addErrorAttribute} from "../../dom/error.mjs";
33
+ import { addErrorAttribute } from "../../dom/error.mjs";
34
34
 
35
35
  export { Button };
36
36
 
@@ -24,7 +24,7 @@ import {
24
24
  ATTRIBUTE_ERRORMESSAGE,
25
25
  ATTRIBUTE_ROLE,
26
26
  } from "../../dom/constants.mjs";
27
- import {addErrorAttribute} from "../../dom/error.mjs";
27
+ import { addErrorAttribute } from "../../dom/error.mjs";
28
28
 
29
29
  export { ContextError };
30
30
 
@@ -29,7 +29,7 @@ import { FieldSetStyleSheet } from "./stylesheet/field-set.mjs";
29
29
  import "../layout/collapse.mjs";
30
30
  import "./toggle-switch.mjs";
31
31
  import { getLocaleOfDocument } from "../../dom/locale.mjs";
32
- import {addErrorAttribute} from "../../dom/error.mjs";
32
+ import { addErrorAttribute } from "../../dom/error.mjs";
33
33
 
34
34
  export { FieldSet };
35
35
 
@@ -12,27 +12,27 @@
12
12
  * SPDX-License-Identifier: AGPL-3.0
13
13
  */
14
14
 
15
- import {instanceSymbol} from "../../constants.mjs";
16
- import {addAttributeToken} from "../../dom/attributes.mjs";
15
+ import { instanceSymbol } from "../../constants.mjs";
16
+ import { addAttributeToken } from "../../dom/attributes.mjs";
17
17
  import {
18
- ATTRIBUTE_ERRORMESSAGE,
19
- ATTRIBUTE_ROLE,
18
+ ATTRIBUTE_ERRORMESSAGE,
19
+ ATTRIBUTE_ROLE,
20
20
  } from "../../dom/constants.mjs";
21
21
  import {
22
- assembleMethodSymbol,
23
- registerCustomElement,
22
+ assembleMethodSymbol,
23
+ registerCustomElement,
24
24
  } from "../../dom/customelement.mjs";
25
- import {getDocument} from "../../dom/util.mjs";
26
- import {isFunction} from "../../types/is.mjs";
27
- import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
28
- import {Popper} from "./popper.mjs";
29
- import {STYLE_DISPLAY_MODE_BLOCK} from "./constants.mjs";
30
- import {PopperButtonStyleSheet} from "./stylesheet/popper-button.mjs";
31
- import {positionPopper} from "./util/floating-ui.mjs";
25
+ import { getDocument } from "../../dom/util.mjs";
26
+ import { isFunction } from "../../types/is.mjs";
27
+ import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
28
+ import { Popper } from "./popper.mjs";
29
+ import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
30
+ import { PopperButtonStyleSheet } from "./stylesheet/popper-button.mjs";
31
+ import { positionPopper } from "./util/floating-ui.mjs";
32
32
  import "./button.mjs";
33
- import {addErrorAttribute} from "../../dom/error.mjs";
33
+ import { addErrorAttribute } from "../../dom/error.mjs";
34
34
 
35
- export {PopperButton};
35
+ export { PopperButton };
36
36
 
37
37
  /**
38
38
  * @private
@@ -141,205 +141,205 @@ const arrowElementSymbol = Symbol("arrowElement");
141
141
  * @fires monster-changed
142
142
  */
143
143
  class PopperButton extends Popper {
144
- /**
145
- * This method is called by the `instanceof` operator.
146
- * @return {symbol}
147
- * @since 2.1.0
148
- */
149
- static get [instanceSymbol]() {
150
- return Symbol.for(
151
- "@schukai/monster/components/form/popper-button@@instance",
152
- );
153
- }
154
-
155
- /**
156
- * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
157
- * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
158
- *
159
- * The individual configuration values can be found in the table.
160
- *
161
- * @property {Object} templates - The templates for the control.
162
- * @property {string} templates.main - The main template.
163
- * @property {object} labels - The labels for the control.
164
- * @property {string} labels.button - The label for the button.
165
- * @property {string} content - The content of the popper.
166
- * @property {object} popper - The popper options.
167
- * @extends {Button.defaults}
168
- */
169
- get defaults() {
170
- return Object.assign({}, super.defaults, {
171
- templates: {
172
- main: getTemplate(),
173
- },
174
- actions: {
175
- click: (e) => {
176
- this.toggleDialog();
177
- },
178
- },
179
- classes: {
180
- button: "monster-button",
181
- },
182
- labels: {
183
- button: '<slot name="button"></slot>',
184
- },
185
- mode: "click",
186
- value: null,
187
- });
188
- }
189
-
190
- /**
191
- *
192
- * @return {Monster.Components.Form.PopperButton}
193
- */
194
- [assembleMethodSymbol]() {
195
- super[assembleMethodSymbol]();
196
- initControlReferences.call(this);
197
- initEventHandler.call(this);
198
-
199
- return this;
200
- }
201
-
202
- /**
203
- * @return {string}
204
- */
205
- static getTag() {
206
- return "monster-popper-button";
207
- }
208
-
209
- /**
210
- * @return {CSSStyleSheet[]}
211
- */
212
- static getCSSStyleSheet() {
213
- const styles = super.getCSSStyleSheet();
214
- styles.push(PopperButtonStyleSheet);
215
- return styles;
216
- }
217
-
218
- /**
219
- * @return {void}
220
- */
221
- connectedCallback() {
222
- super.connectedCallback();
223
-
224
- const document = getDocument();
225
-
226
- for (const [, type] of Object.entries(["click", "touch"])) {
227
- // close on outside ui-events
228
- document.addEventListener(type, this[closeEventHandler]);
229
- }
230
-
231
- updatePopper.call(this);
232
- attachResizeObserver.call(this);
233
- }
234
-
235
- /**
236
- * @return {void}
237
- */
238
- disconnectedCallback() {
239
- super.disconnectedCallback();
240
-
241
- // close on outside ui-events
242
- for (const [, type] of Object.entries(["click", "touch"])) {
243
- document.removeEventListener(type, this[closeEventHandler]);
244
- }
245
-
246
- disconnectResizeObserver.call(this);
247
- }
248
-
249
- /**
250
- * The Button.click() method simulates a click on the internal button element.
251
- *
252
- * @since 3.27.0
253
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
254
- */
255
- click() {
256
- if (this.getOption("disabled") === true) {
257
- return;
258
- }
259
-
260
- if (
261
- this[buttonElementSymbol] &&
262
- isFunction(this[buttonElementSymbol].click)
263
- ) {
264
- this[buttonElementSymbol].click();
265
- }
266
- }
267
-
268
- /**
269
- * The Button.focus() method sets focus on the internal button element.
270
- *
271
- * @since 3.27.0
272
- * @param {Object} options
273
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
274
- */
275
- focus(options) {
276
- if (this.getOption("disabled") === true) {
277
- return;
278
- }
279
-
280
- if (
281
- this[buttonElementSymbol] &&
282
- isFunction(this[buttonElementSymbol].focus)
283
- ) {
284
- this[buttonElementSymbol].focus(options);
285
- }
286
- }
287
-
288
- /**
289
- * The Button.blur() method removes focus from the internal button element.
290
- */
291
- blur() {
292
- if (
293
- this[buttonElementSymbol] &&
294
- isFunction(this[buttonElementSymbol].blur)
295
- ) {
296
- this[buttonElementSymbol].blur();
297
- }
298
- }
299
-
300
- /**
301
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
302
- * @return {boolean}
303
- */
304
- static get formAssociated() {
305
- return true;
306
- }
307
-
308
- /**
309
- * The current selection of the Select
310
- *
311
- * ```
312
- * e = document.querySelector('monster-select');
313
- * console.log(e.value)
314
- * // ↦ 1
315
- * // ↦ ['1','2']
316
- * ```
317
- *
318
- * @property {string|array}
319
- */
320
- get value() {
321
- return this.getOption("value");
322
- }
323
-
324
- /**
325
- * Set selection
326
- *
327
- * ```
328
- * e = document.querySelector('monster-select');
329
- * e.value=1
330
- * ```
331
- *
332
- * @property {string|array} value
333
- * @throws {Error} unsupported type
334
- */
335
- set value(value) {
336
- this.setOption("value", value);
337
- try {
338
- this?.setFormValue(this.value);
339
- } catch (e) {
340
- addErrorAttribute(this, e);
341
- }
342
- }
144
+ /**
145
+ * This method is called by the `instanceof` operator.
146
+ * @return {symbol}
147
+ * @since 2.1.0
148
+ */
149
+ static get [instanceSymbol]() {
150
+ return Symbol.for(
151
+ "@schukai/monster/components/form/popper-button@@instance",
152
+ );
153
+ }
154
+
155
+ /**
156
+ * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
157
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
158
+ *
159
+ * The individual configuration values can be found in the table.
160
+ *
161
+ * @property {Object} templates - The templates for the control.
162
+ * @property {string} templates.main - The main template.
163
+ * @property {object} labels - The labels for the control.
164
+ * @property {string} labels.button - The label for the button.
165
+ * @property {string} content - The content of the popper.
166
+ * @property {object} popper - The popper options.
167
+ * @extends {Button.defaults}
168
+ */
169
+ get defaults() {
170
+ return Object.assign({}, super.defaults, {
171
+ templates: {
172
+ main: getTemplate(),
173
+ },
174
+ actions: {
175
+ click: (e) => {
176
+ this.toggleDialog();
177
+ },
178
+ },
179
+ classes: {
180
+ button: "monster-button",
181
+ },
182
+ labels: {
183
+ button: '<slot name="button"></slot>',
184
+ },
185
+ mode: "click",
186
+ value: null,
187
+ });
188
+ }
189
+
190
+ /**
191
+ *
192
+ * @return {Monster.Components.Form.PopperButton}
193
+ */
194
+ [assembleMethodSymbol]() {
195
+ super[assembleMethodSymbol]();
196
+ initControlReferences.call(this);
197
+ initEventHandler.call(this);
198
+
199
+ return this;
200
+ }
201
+
202
+ /**
203
+ * @return {string}
204
+ */
205
+ static getTag() {
206
+ return "monster-popper-button";
207
+ }
208
+
209
+ /**
210
+ * @return {CSSStyleSheet[]}
211
+ */
212
+ static getCSSStyleSheet() {
213
+ const styles = super.getCSSStyleSheet();
214
+ styles.push(PopperButtonStyleSheet);
215
+ return styles;
216
+ }
217
+
218
+ /**
219
+ * @return {void}
220
+ */
221
+ connectedCallback() {
222
+ super.connectedCallback();
223
+
224
+ const document = getDocument();
225
+
226
+ for (const [, type] of Object.entries(["click", "touch"])) {
227
+ // close on outside ui-events
228
+ document.addEventListener(type, this[closeEventHandler]);
229
+ }
230
+
231
+ updatePopper.call(this);
232
+ attachResizeObserver.call(this);
233
+ }
234
+
235
+ /**
236
+ * @return {void}
237
+ */
238
+ disconnectedCallback() {
239
+ super.disconnectedCallback();
240
+
241
+ // close on outside ui-events
242
+ for (const [, type] of Object.entries(["click", "touch"])) {
243
+ document.removeEventListener(type, this[closeEventHandler]);
244
+ }
245
+
246
+ disconnectResizeObserver.call(this);
247
+ }
248
+
249
+ /**
250
+ * The Button.click() method simulates a click on the internal button element.
251
+ *
252
+ * @since 3.27.0
253
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
254
+ */
255
+ click() {
256
+ if (this.getOption("disabled") === true) {
257
+ return;
258
+ }
259
+
260
+ if (
261
+ this[buttonElementSymbol] &&
262
+ isFunction(this[buttonElementSymbol].click)
263
+ ) {
264
+ this[buttonElementSymbol].click();
265
+ }
266
+ }
267
+
268
+ /**
269
+ * The Button.focus() method sets focus on the internal button element.
270
+ *
271
+ * @since 3.27.0
272
+ * @param {Object} options
273
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
274
+ */
275
+ focus(options) {
276
+ if (this.getOption("disabled") === true) {
277
+ return;
278
+ }
279
+
280
+ if (
281
+ this[buttonElementSymbol] &&
282
+ isFunction(this[buttonElementSymbol].focus)
283
+ ) {
284
+ this[buttonElementSymbol].focus(options);
285
+ }
286
+ }
287
+
288
+ /**
289
+ * The Button.blur() method removes focus from the internal button element.
290
+ */
291
+ blur() {
292
+ if (
293
+ this[buttonElementSymbol] &&
294
+ isFunction(this[buttonElementSymbol].blur)
295
+ ) {
296
+ this[buttonElementSymbol].blur();
297
+ }
298
+ }
299
+
300
+ /**
301
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
302
+ * @return {boolean}
303
+ */
304
+ static get formAssociated() {
305
+ return true;
306
+ }
307
+
308
+ /**
309
+ * The current selection of the Select
310
+ *
311
+ * ```
312
+ * e = document.querySelector('monster-select');
313
+ * console.log(e.value)
314
+ * // ↦ 1
315
+ * // ↦ ['1','2']
316
+ * ```
317
+ *
318
+ * @property {string|array}
319
+ */
320
+ get value() {
321
+ return this.getOption("value");
322
+ }
323
+
324
+ /**
325
+ * Set selection
326
+ *
327
+ * ```
328
+ * e = document.querySelector('monster-select');
329
+ * e.value=1
330
+ * ```
331
+ *
332
+ * @property {string|array} value
333
+ * @throws {Error} unsupported type
334
+ */
335
+ set value(value) {
336
+ this.setOption("value", value);
337
+ try {
338
+ this?.setFormValue(this.value);
339
+ } catch (e) {
340
+ addErrorAttribute(this, e);
341
+ }
342
+ }
343
343
  }
344
344
 
345
345
  /**
@@ -347,67 +347,67 @@ class PopperButton extends Popper {
347
347
  * @return {initEventHandler}
348
348
  */
349
349
  function initEventHandler() {
350
- this[closeEventHandler] = (event) => {
351
- const path = event.composedPath();
352
-
353
- for (const [, element] of Object.entries(path)) {
354
- if (element === this) {
355
- return;
356
- }
357
- }
358
- this.hideDialog();
359
- };
360
-
361
- return this;
350
+ this[closeEventHandler] = (event) => {
351
+ const path = event.composedPath();
352
+
353
+ for (const [, element] of Object.entries(path)) {
354
+ if (element === this) {
355
+ return;
356
+ }
357
+ }
358
+ this.hideDialog();
359
+ };
360
+
361
+ return this;
362
362
  }
363
363
 
364
364
  /**
365
365
  * @private
366
366
  */
367
367
  function attachResizeObserver() {
368
- // against flickering
369
- this[resizeObserverSymbol] = new ResizeObserver(() => {
370
- if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
371
- try {
372
- this[timerCallbackSymbol].touch();
373
- return;
374
- } catch (e) {
375
- delete this[timerCallbackSymbol];
376
- }
377
- }
378
-
379
- this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
380
- updatePopper.call(this);
381
- });
382
- });
383
-
384
- this[resizeObserverSymbol].observe(this.parentElement);
368
+ // against flickering
369
+ this[resizeObserverSymbol] = new ResizeObserver(() => {
370
+ if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
371
+ try {
372
+ this[timerCallbackSymbol].touch();
373
+ return;
374
+ } catch (e) {
375
+ delete this[timerCallbackSymbol];
376
+ }
377
+ }
378
+
379
+ this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
380
+ updatePopper.call(this);
381
+ });
382
+ });
383
+
384
+ this[resizeObserverSymbol].observe(this.parentElement);
385
385
  }
386
386
 
387
387
  function disconnectResizeObserver() {
388
- if (this[resizeObserverSymbol] instanceof ResizeObserver) {
389
- this[resizeObserverSymbol].disconnect();
390
- }
388
+ if (this[resizeObserverSymbol] instanceof ResizeObserver) {
389
+ this[resizeObserverSymbol].disconnect();
390
+ }
391
391
  }
392
392
 
393
393
  /**
394
394
  * @private
395
395
  */
396
396
  function updatePopper() {
397
- if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
398
- return;
399
- }
400
-
401
- if (this.getOption("disabled", false) === true) {
402
- return;
403
- }
404
-
405
- positionPopper.call(
406
- this,
407
- this[controlElementSymbol],
408
- this[popperElementSymbol],
409
- this.getOption("popper", {}),
410
- );
397
+ if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
398
+ return;
399
+ }
400
+
401
+ if (this.getOption("disabled", false) === true) {
402
+ return;
403
+ }
404
+
405
+ positionPopper.call(
406
+ this,
407
+ this[controlElementSymbol],
408
+ this[popperElementSymbol],
409
+ this.getOption("popper", {}),
410
+ );
411
411
  }
412
412
 
413
413
  /**
@@ -415,21 +415,21 @@ function updatePopper() {
415
415
  * @return {Select}
416
416
  */
417
417
  function initControlReferences() {
418
- this[controlElementSymbol] = this.shadowRoot.querySelector(
419
- `[${ATTRIBUTE_ROLE}=control]`,
420
- );
418
+ this[controlElementSymbol] = this.shadowRoot.querySelector(
419
+ `[${ATTRIBUTE_ROLE}=control]`,
420
+ );
421
421
 
422
- this[buttonElementSymbol] = this.shadowRoot.querySelector(
423
- `[${ATTRIBUTE_ROLE}=button]`,
424
- );
422
+ this[buttonElementSymbol] = this.shadowRoot.querySelector(
423
+ `[${ATTRIBUTE_ROLE}=button]`,
424
+ );
425
425
 
426
- this[popperElementSymbol] = this.shadowRoot.querySelector(
427
- `[${ATTRIBUTE_ROLE}=popper]`,
428
- );
426
+ this[popperElementSymbol] = this.shadowRoot.querySelector(
427
+ `[${ATTRIBUTE_ROLE}=popper]`,
428
+ );
429
429
 
430
- this[arrowElementSymbol] = this.shadowRoot.querySelector(
431
- `[${ATTRIBUTE_ROLE}=arrow]`,
432
- );
430
+ this[arrowElementSymbol] = this.shadowRoot.querySelector(
431
+ `[${ATTRIBUTE_ROLE}=arrow]`,
432
+ );
433
433
  }
434
434
 
435
435
  /**
@@ -437,8 +437,8 @@ function initControlReferences() {
437
437
  * @return {string}
438
438
  */
439
439
  function getTemplate() {
440
- // language=HTML
441
- return `
440
+ // language=HTML
441
+ return `
442
442
  <div data-monster-role="control" part="control">
443
443
  <button data-monster-attributes="disabled path:disabled | if:true, class path:classes.button"
444
444
  data-monster-role="button"