@schukai/monster 3.63.0 → 3.63.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/package.json +1 -1
  3. package/source/components/datatable/dataset.mjs +0 -3
  4. package/source/components/datatable/datatable.mjs +18 -4
  5. package/source/components/datatable/pagination.mjs +0 -2
  6. package/source/components/datatable/save-button.mjs +269 -239
  7. package/source/components/datatable/status.mjs +2 -2
  8. package/source/components/datatable/style/column-bar.pcss +5 -3
  9. package/source/components/datatable/style/dataset.pcss +1 -0
  10. package/source/components/datatable/style/datatable.pcss +8 -18
  11. package/source/components/datatable/style/embedded-pagination.pcss +2 -2
  12. package/source/components/datatable/style/filter.pcss +1 -1
  13. package/source/components/datatable/style/pagination.pcss +3 -3
  14. package/source/components/datatable/stylesheet/change-button.mjs +1 -1
  15. package/source/components/datatable/stylesheet/column-bar.mjs +1 -1
  16. package/source/components/datatable/stylesheet/dataset.mjs +1 -1
  17. package/source/components/datatable/stylesheet/datatable.mjs +1 -1
  18. package/source/components/datatable/stylesheet/embedded-pagination.mjs +1 -1
  19. package/source/components/datatable/stylesheet/filter.mjs +1 -1
  20. package/source/components/datatable/stylesheet/pagination.mjs +1 -1
  21. package/source/components/datatable/stylesheet/save-button.mjs +1 -1
  22. package/source/components/datatable/stylesheet/select-filter.mjs +1 -1
  23. package/source/components/datatable/stylesheet/status.mjs +1 -1
  24. package/source/components/form/context-error.mjs +7 -8
  25. package/source/components/form/context-help.mjs +7 -2
  26. package/source/components/form/select.mjs +22 -5
  27. package/source/components/form/style/context-error.pcss +1 -1
  28. package/source/components/form/style/context-help.pcss +5 -1
  29. package/source/components/form/style/select.pcss +81 -56
  30. package/source/components/form/style/toggle-switch.pcss +0 -6
  31. package/source/components/form/stylesheet/action-button.mjs +1 -1
  32. package/source/components/form/stylesheet/context-error.mjs +1 -1
  33. package/source/components/form/stylesheet/context-help.mjs +1 -1
  34. package/source/components/form/stylesheet/select.mjs +1 -1
  35. package/source/components/form/stylesheet/state-button.mjs +1 -1
  36. package/source/components/form/stylesheet/toggle-switch.mjs +1 -1
  37. package/source/components/form/toggle-switch.mjs +23 -19
  38. package/source/components/host/collapse.mjs +0 -5
  39. package/source/components/host/style/collapse.pcss +3 -2
  40. package/source/components/host/stylesheet/call-button.mjs +1 -1
  41. package/source/components/host/stylesheet/collapse.mjs +1 -1
  42. package/source/components/host/stylesheet/details.mjs +1 -1
  43. package/source/components/host/stylesheet/host.mjs +1 -1
  44. package/source/components/host/stylesheet/overlay.mjs +1 -1
  45. package/source/components/host/stylesheet/toggle-button.mjs +1 -1
  46. package/source/components/host/stylesheet/viewer.mjs +1 -1
  47. package/source/components/layout/split-screen.mjs +3 -1
  48. package/source/components/layout/style/tabs.pcss +0 -1
  49. package/source/components/layout/style/width-toggle.pcss +26 -0
  50. package/source/components/layout/stylesheet/tabs.mjs +1 -1
  51. package/source/components/layout/stylesheet/width-toggle.mjs +27 -0
  52. package/source/components/layout/tabs.mjs +17 -1
  53. package/source/components/layout/width-toggle.mjs +242 -0
  54. package/source/components/notify/stylesheet/message.mjs +1 -1
  55. package/source/components/style/color.pcss +11 -0
  56. package/source/components/style/icons.pcss +73 -69
  57. package/source/components/style/mixin/icon.pcss +32 -37
  58. package/source/components/style/mixin/property.pcss +38 -2
  59. package/source/components/style/property.pcss +2 -0
  60. package/source/components/style/table.pcss +6 -4
  61. package/source/components/style/theme.pcss +33 -5
  62. package/source/components/stylesheet/color.mjs +1 -1
  63. package/source/components/stylesheet/icons.mjs +1 -1
  64. package/source/components/stylesheet/property.mjs +1 -1
  65. package/source/components/stylesheet/table.mjs +1 -1
  66. package/source/components/stylesheet/theme.mjs +1 -1
  67. package/source/dom/customcontrol.mjs +7 -1
  68. package/source/dom/util/init-options-from-attributes.mjs +61 -48
  69. package/source/monster.mjs +2 -0
  70. package/source/types/version.mjs +1 -1
  71. package/test/cases/monster.mjs +1 -1
  72. package/test/web/test.html +2 -2
  73. package/test/web/tests.js +54 -26
package/source/components/stylesheet/theme.mjs CHANGED
@@ -20,7 +20,7 @@ const ThemeStyleSheet = new CSSStyleSheet();
20
20
  try {
21
21
  ThemeStyleSheet.insertRule(`
22
22
  @layer theme {
23
- .monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}
23
+ .monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}
24
24
  }`, 0);
25
25
  } catch (e) {
26
26
  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
package/source/dom/customcontrol.mjs CHANGED
@@ -25,7 +25,7 @@ const attachedInternalSymbol = Symbol("attachedInternal");
25
25
  * After defining a `CustomElement`, the `registerCustomElement` method must be called with the new class name. Only then
26
26
  * will the tag defined via the `getTag` method be made known to the DOM.
27
27
  *
28
- * <img src="./images/customcontrol-class.png">
28
+ * <img src="./images/custom-control.png">
29
29
  *
30
30
  * This control uses `attachInternals()` to integrate the control into a form. If the target environment does not support
31
31
  * this method, the [polyfill](https://www.npmjs.com/package/element-internals-polyfill) can be used.
@@ -41,6 +41,12 @@ const attachedInternalSymbol = Symbol("attachedInternal");
41
41
  *
42
42
  * Read the HTML specification for Custom Element Reactions: {@link https://html.spec.whatwg.org/dev/custom-elements.html#custom-element-reactions|Custom Element Reactions}.
43
43
  *
44
+ * @startuml custom-control.png
45
+ * skinparam monochrome true
46
+ * skinparam shadowing false
47
+ * HTMLElement <|-- CustomElement
48
+ * CustomElement <|-- CustomControl
49
+ * @enduml
44
50
  * @summary A base class for custom controls based on CustomElement.
45
51
  * @copyright schukai GmbH
46
52
  * @license AGPLv3
package/source/dom/util/init-options-from-attributes.mjs CHANGED
@@ -5,12 +5,18 @@
5
5
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
6
6
  */
7
7
 
8
- import { Pathfinder } from "../../data/pathfinder.mjs";
9
- import { isFunction } from "../../types/is.mjs";
10
- import { attributeObserverSymbol } from "../customelement.mjs";
11
- import { extractKeys } from "./extract-keys.mjs";
8
+ import {Pathfinder} from "../../data/pathfinder.mjs";
9
+ import {
10
+ isBoolean,
11
+ isString,
12
+ isObject,
13
+ isArray,
14
+ isFunction,
15
+ isInteger,
16
+ } from "../../types/is.mjs";
17
+ import {extractKeys} from "./extract-keys.mjs";
12
18
 
13
- export { initOptionsFromAttributes };
19
+ export {initOptionsFromAttributes};
14
20
 
15
21
  /**
16
22
  * Initializes the given options object based on the attributes of the current DOM element.
@@ -22,6 +28,7 @@ export { initOptionsFromAttributes };
22
28
  * For example, the attribute 'data-monster-option-foo' maps to the 'bar' property in the options object.
23
29
  *
24
30
  * The mapping object would look like this:
31
+ *
25
32
  * {
26
33
  * 'foo': (value) => value + 'bar'
27
34
  * // the value of the attribute 'data-monster-option-foo' is appended with 'bar'
@@ -32,6 +39,8 @@ export { initOptionsFromAttributes };
32
39
  * // and assigned to the 'bar.baz' property in the options object.
33
40
  * // e.g. <div data-monster-option-bar-baz="foo"></div>
34
41
  * }
42
+ *
43
+ * Array values have to be separated by '::'.
35
44
  *
36
45
  * @since 3.38.0
37
46
  * @param {HTMLElement} element - The DOM element to be used as the source of the attributes.
@@ -42,56 +51,60 @@ export { initOptionsFromAttributes };
42
51
  * @this HTMLElement - The context of the DOM element.
43
52
  */
44
53
  function initOptionsFromAttributes(
45
- element,
46
- options,
47
- mapping = {},
48
- prefix = "data-monster-option-",
54
+ element,
55
+ options,
56
+ mapping = {},
57
+ prefix = "data-monster-option-",
49
58
  ) {
50
- if (!(element instanceof HTMLElement)) return options;
51
- if (!element.hasAttributes()) return options;
59
+ if (!(element instanceof HTMLElement)) return options;
60
+ if (!element.hasAttributes()) return options;
52
61
 
53
- const keyMap = extractKeys(options);
54
- const finder = new Pathfinder(options);
62
+ const keyMap = extractKeys(options);
63
+ const finder = new Pathfinder(options);
55
64
 
56
- element.getAttributeNames().forEach((name) => {
57
- if (!name.startsWith(prefix)) return;
65
+ element.getAttributeNames().forEach((name) => {
66
+ if (!name.startsWith(prefix)) return;
58
67
 
59
- // check if the attribute name is a valid option.
60
- // the mapping between the attribute is simple. The dash is replaced by a dot.
61
- // e.g. data-monster-url => url
62
- const optionName = keyMap.get(name.substring(prefix.length).toLowerCase());
63
- if (!finder.exists(optionName)) return;
68
+ // check if the attribute name is a valid option.
69
+ // the mapping between the attribute is simple. The dash is replaced by a dot.
70
+ // e.g. data-monster-url => url
71
+ const optionName = keyMap.get(name.substring(prefix.length).toLowerCase());
72
+ if (!finder.exists(optionName)) return;
64
73
 
65
- if (element.hasAttribute(name)) {
66
- let value = element.getAttribute(name);
67
- if (
68
- mapping.hasOwnProperty(optionName) &&
69
- isFunction(mapping[optionName])
70
- ) {
71
- value = mapping[optionName](value);
72
- }
74
+ if (element.hasAttribute(name)) {
75
+ let value = element.getAttribute(name);
76
+ if (
77
+ mapping.hasOwnProperty(optionName) &&
78
+ isFunction(mapping[optionName])
79
+ ) {
80
+ value = mapping[optionName](value);
81
+ }
73
82
 
74
- let optionValue = finder.getVia(optionName);
75
- if (optionValue === null || optionValue === undefined) {
76
- optionValue = value;
77
- }
83
+ let optionValue = finder.getVia(optionName);
84
+ if (optionValue === null || optionValue === undefined) {
85
+ optionValue = value;
86
+ }
78
87
 
79
- const typeOfOptionValue = typeof optionValue;
80
- if (optionValue === null || optionValue === undefined) {
81
- value = null;
82
- } else if (typeOfOptionValue === "boolean") {
83
- value = value === "true";
84
- } else if (typeOfOptionValue === "number") {
85
- value = Number(value);
86
- } else if (typeOfOptionValue === "string") {
87
- value = String(value);
88
- } else if (typeOfOptionValue === "object") {
89
- value = JSON.parse(value);
90
- }
88
+ //const typeOfOptionValue = typeof optionValue;
89
+ if (optionValue === null || optionValue === undefined) {
90
+ value = null;
91
+ } else if (isBoolean(optionValue)) {
92
+ value = value === "true";
93
+ } else if (isInteger(optionValue)) {
94
+ value = Number(value);
95
+ } else if (isString(optionValue)) {
96
+ value = String(value);
97
+ } else if (isObject(optionValue)) {
98
+ value = JSON.parse(value);
99
+ } else if (isArray(optionValue)) {
100
+ value = value.split("::");
101
+ } else {
102
+ value = optionValue;
103
+ }
91
104
 
92
- finder.setVia(optionName, value);
93
- }
94
- });
105
+ finder.setVia(optionName, value);
106
+ }
107
+ });
95
108
 
96
- return options;
109
+ return options;
97
110
  }
package/source/monster.mjs CHANGED
@@ -29,6 +29,7 @@ export * from "./components/form/util/floating-ui.mjs";
29
29
  export * from "./components/form/context-help.mjs";
30
30
  export * from "./components/form/tabs.mjs";
31
31
  export * from "./components/form/state-button.mjs";
32
+ export * from "./components/form/form-field.mjs";
32
33
  export * from "./components/form/popper.mjs";
33
34
  export * from "./components/form/select.mjs";
34
35
  export * from "./components/form/confirm-button.mjs";
@@ -48,6 +49,7 @@ export * from "./components/form/stylesheet/message-state-button.mjs";
48
49
  export * from "./components/form/stylesheet/button-bar.mjs";
49
50
  export * from "./components/form/stylesheet/context-help.mjs";
50
51
  export * from "./components/form/stylesheet/state-button.mjs";
52
+ export * from "./components/form/stylesheet/form-field.mjs";
51
53
  export * from "./components/form/stylesheet/popper.mjs";
52
54
  export * from "./components/form/stylesheet/select.mjs";
53
55
  export * from "./components/form/stylesheet/confirm-button.mjs";
package/source/types/version.mjs CHANGED
@@ -152,7 +152,7 @@ function getMonsterVersion() {
152
152
  }
153
153
 
154
154
  /** don't touch, replaced by make with package.json version */
155
- monsterVersion = new Version("3.63.0");
155
+ monsterVersion = new Version("3.63.2");
156
156
 
157
157
  return monsterVersion;
158
158
  }
package/test/cases/monster.mjs CHANGED
@@ -7,7 +7,7 @@ describe('Monster', function () {
7
7
  let monsterVersion
8
8
 
9
9
  /** don´t touch, replaced by make with package.json version */
10
- monsterVersion = new Version("3.63.0")
10
+ monsterVersion = new Version("3.63.2")
11
11
 
12
12
  let m = getMonsterVersion();
13
13
 
package/test/web/test.html CHANGED
@@ -15,8 +15,8 @@
15
15
  </head>
16
16
  <body>
17
17
  <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
18
- <h1 style='margin-bottom: 0.1em;'>Monster 3.60.0</h1>
19
- <div id="lastupdate" style='font-size:0.7em'>last update So 24. Mär 19:58:09 CET 2024</div>
18
+ <h1 style='margin-bottom: 0.1em;'>Monster 3.63.0</h1>
19
+ <div id="lastupdate" style='font-size:0.7em'>last update Mi 27. Mär 12:32:39 CET 2024</div>
20
20
  </div>
21
21
  <div id="mocha-errors"
22
22
  style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>