@schukai/monster 3.64.0 → 3.65.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (122) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/example/components/form/button.mjs +1 -1
  3. package/example/components/form/field-set.mjs +4 -0
  4. package/example/components/form/select.mjs +1 -1
  5. package/package.json +2 -1
  6. package/source/components/datatable/datatable/header.mjs +228 -221
  7. package/source/components/datatable/style/dataset.pcss +1 -0
  8. package/source/components/datatable/style/datatable.pcss +1 -0
  9. package/source/components/datatable/stylesheet/change-button.mjs +8 -4
  10. package/source/components/datatable/stylesheet/column-bar.mjs +8 -4
  11. package/source/components/datatable/stylesheet/dataset.mjs +9 -5
  12. package/source/components/datatable/stylesheet/datasource.mjs +8 -4
  13. package/source/components/datatable/stylesheet/datatable.mjs +9 -5
  14. package/source/components/datatable/stylesheet/embedded-pagination.mjs +8 -4
  15. package/source/components/datatable/stylesheet/filter-button.mjs +8 -4
  16. package/source/components/datatable/stylesheet/filter-controls-defaults.mjs +8 -4
  17. package/source/components/datatable/stylesheet/filter-date-range.mjs +8 -4
  18. package/source/components/datatable/stylesheet/filter-range.mjs +8 -4
  19. package/source/components/datatable/stylesheet/filter.mjs +8 -4
  20. package/source/components/datatable/stylesheet/pagination.mjs +8 -4
  21. package/source/components/datatable/stylesheet/save-button.mjs +8 -4
  22. package/source/components/datatable/stylesheet/select-filter.mjs +8 -4
  23. package/source/components/datatable/stylesheet/status.mjs +8 -4
  24. package/source/components/form/button.mjs +263 -281
  25. package/source/components/form/field-set.mjs +300 -0
  26. package/source/components/form/popper.mjs +13 -480
  27. package/source/components/form/style/field-set.pcss +13 -0
  28. package/source/components/form/stylesheet/action-button.mjs +8 -4
  29. package/source/components/form/stylesheet/api-button.mjs +8 -4
  30. package/source/components/form/stylesheet/button-bar.mjs +9 -5
  31. package/source/components/form/stylesheet/button.mjs +8 -4
  32. package/source/components/form/stylesheet/confirm-button.mjs +9 -5
  33. package/source/components/form/stylesheet/context-error.mjs +8 -4
  34. package/source/components/form/stylesheet/context-help.mjs +8 -4
  35. package/source/components/form/stylesheet/field-set.mjs +31 -0
  36. package/source/components/form/stylesheet/form.mjs +9 -5
  37. package/source/components/form/stylesheet/message-state-button.mjs +8 -4
  38. package/source/components/form/stylesheet/popper-button.mjs +8 -4
  39. package/source/components/form/stylesheet/select.mjs +8 -4
  40. package/source/components/form/stylesheet/state-button.mjs +8 -4
  41. package/source/components/form/stylesheet/toggle-switch.mjs +8 -4
  42. package/source/components/form/stylesheet/tree-select.mjs +8 -4
  43. package/source/components/host/collapse.mjs +14 -516
  44. package/source/components/host/config-manager.mjs +9 -2
  45. package/source/components/host/constants.mjs +9 -4
  46. package/source/components/host/details.mjs +14 -253
  47. package/source/components/host/stylesheet/call-button.mjs +8 -4
  48. package/source/components/host/stylesheet/config-manager.mjs +8 -4
  49. package/source/components/host/stylesheet/host.mjs +9 -5
  50. package/source/components/host/stylesheet/overlay.mjs +9 -5
  51. package/source/components/host/stylesheet/toggle-button.mjs +8 -4
  52. package/source/components/host/stylesheet/viewer.mjs +8 -4
  53. package/source/components/layout/collapse.mjs +542 -0
  54. package/source/components/layout/details.mjs +271 -0
  55. package/source/components/layout/panel.mjs +6 -0
  56. package/source/components/layout/popper.mjs +476 -0
  57. package/source/components/{host → layout}/stylesheet/collapse.mjs +8 -4
  58. package/source/components/{host → layout}/stylesheet/details.mjs +8 -4
  59. package/source/components/layout/stylesheet/panel.mjs +8 -4
  60. package/source/components/{form → layout}/stylesheet/popper.mjs +8 -4
  61. package/source/components/layout/stylesheet/split-panel.mjs +8 -4
  62. package/source/components/layout/stylesheet/tabs.mjs +8 -4
  63. package/source/components/layout/stylesheet/width-toggle.mjs +8 -4
  64. package/source/components/layout/tabs.mjs +3 -3
  65. package/source/components/layout/width-toggle.mjs +3 -3
  66. package/source/components/navigation/style/table-of-content.pcss +84 -0
  67. package/source/components/navigation/stylesheet/table-of-content.mjs +31 -0
  68. package/source/components/navigation/table-of-content.mjs +418 -0
  69. package/source/components/notify/stylesheet/message.mjs +8 -4
  70. package/source/components/notify/stylesheet/notify.mjs +8 -4
  71. package/source/components/state/stylesheet/log.mjs +8 -4
  72. package/source/components/state/stylesheet/state.mjs +9 -5
  73. package/source/components/style/link.pcss +0 -1
  74. package/source/components/style/mixin/typography.pcss +7 -7
  75. package/source/components/style/typography.pcss +1 -1
  76. package/source/components/stylesheet/badge.mjs +8 -4
  77. package/source/components/stylesheet/border.mjs +8 -4
  78. package/source/components/stylesheet/button.mjs +8 -4
  79. package/source/components/stylesheet/card.mjs +8 -4
  80. package/source/components/stylesheet/color.mjs +8 -4
  81. package/source/components/stylesheet/common.mjs +8 -4
  82. package/source/components/stylesheet/control.mjs +8 -4
  83. package/source/components/stylesheet/data-grid.mjs +8 -4
  84. package/source/components/stylesheet/display.mjs +8 -4
  85. package/source/components/stylesheet/floating-ui.mjs +8 -4
  86. package/source/components/stylesheet/form.mjs +8 -4
  87. package/source/components/stylesheet/host.mjs +8 -4
  88. package/source/components/stylesheet/icons.mjs +8 -4
  89. package/source/components/stylesheet/link.mjs +8 -4
  90. package/source/components/stylesheet/mixin/badge.mjs +31 -0
  91. package/source/components/stylesheet/mixin/button.mjs +31 -0
  92. package/source/components/stylesheet/mixin/form.mjs +31 -0
  93. package/source/components/stylesheet/mixin/hover.mjs +31 -0
  94. package/source/components/stylesheet/mixin/icon.mjs +31 -0
  95. package/source/components/stylesheet/mixin/media.mjs +31 -0
  96. package/source/components/stylesheet/mixin/property.mjs +31 -0
  97. package/source/components/stylesheet/mixin/skeleton.mjs +31 -0
  98. package/source/components/stylesheet/mixin/spinner.mjs +31 -0
  99. package/source/components/stylesheet/mixin/typography.mjs +31 -0
  100. package/source/components/stylesheet/normalize.mjs +8 -4
  101. package/source/components/stylesheet/popper.mjs +8 -4
  102. package/source/components/stylesheet/property.mjs +8 -4
  103. package/source/components/stylesheet/ripple.mjs +8 -4
  104. package/source/components/stylesheet/skeleton.mjs +8 -4
  105. package/source/components/stylesheet/space.mjs +8 -4
  106. package/source/components/stylesheet/spinner.mjs +8 -4
  107. package/source/components/stylesheet/table.mjs +8 -4
  108. package/source/components/stylesheet/theme.mjs +8 -4
  109. package/source/components/stylesheet/typography.mjs +9 -5
  110. package/source/components/tree-menu/stylesheet/tree-menu.mjs +8 -4
  111. package/source/dom/ready.mjs +10 -4
  112. package/source/monster.mjs +17 -80
  113. package/source/types/proxyobserver.mjs +4 -2
  114. package/source/types/version.mjs +1 -1
  115. package/test/cases/monster.mjs +1 -1
  116. package/test/web/tests.js +4 -4
  117. package/source/components/form/form-field.mjs +0 -341
  118. package/source/components/form/style/form-field.pcss +0 -4
  119. package/source/components/form/stylesheet/form-field.mjs +0 -27
  120. /package/source/components/{host → layout}/style/collapse.pcss +0 -0
  121. /package/source/components/{host → layout}/style/details.pcss +0 -0
  122. /package/source/components/{form → layout}/style/popper.pcss +0 -0
@@ -0,0 +1,84 @@
1
+ @import "../../style/property.pcss";
2
+ @import "../../style/color.pcss";
3
+ @import "../../style/border.pcss";
4
+ @import "../../style/theme.pcss";
5
+
6
+
7
+ :host {
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ .navigation {
12
+
13
+ box-sizing: border-box;
14
+ position: absolute;
15
+ top: 0;
16
+ display: block;
17
+ cursor: pointer;
18
+ width: 20px;
19
+
20
+ transition: top 0.2s ease, visibility 0.1s ease;
21
+
22
+ & [data-monster-role="navigation-list"] {
23
+
24
+ & ul {
25
+ margin: 0;
26
+ padding: 0 0 0 10px;
27
+ list-style-type: none;
28
+ }
29
+
30
+ & ul li {
31
+ position: relative;
32
+ padding-left: 10px;
33
+ }
34
+
35
+ & ul li:before {
36
+ content: "";
37
+ position: absolute;
38
+ left: 0;
39
+ top: 0;
40
+ bottom: 0;
41
+ width: 10px;
42
+ border-left: 1px dotted var(--monster-color-primary-2);
43
+ margin-top: 0;
44
+ }
45
+ }
46
+
47
+ & [data-monster-role=navigation-control] {
48
+ width: 20px;
49
+ }
50
+
51
+ & .heading-strip {
52
+ display: flex;
53
+ height: 0;
54
+
55
+ background-color: var(--monster-bg-color-primary-3);
56
+ margin-bottom: 10px;
57
+
58
+ &.level-h1 {
59
+ height: 6px;
60
+ }
61
+
62
+ &.level-h2 {
63
+ height: 4px;
64
+ }
65
+
66
+ &.level-h3 {
67
+ height: 2px;
68
+ }
69
+
70
+ &.level-h4 {
71
+ height: 1px;
72
+ }
73
+
74
+ &.level-h5 {
75
+ height: 1px;
76
+ }
77
+
78
+ &.level-h6 {
79
+ height: 1px;
80
+ }
81
+
82
+ }
83
+
84
+ }
@@ -0,0 +1,31 @@
1
+ /**
2
+ * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
3
+ * Node module: @schukai/monster
4
+ *
5
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
6
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
7
+ *
8
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
9
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
10
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
11
+ */
12
+
13
+ import {addAttributeToken} from "../../../dom/attributes.mjs";
14
+ import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
15
+
16
+ export {TableOfContentStyleSheet}
17
+
18
+ /**
19
+ * @private
20
+ * @type {CSSStyleSheet}
21
+ */
22
+ const TableOfContentStyleSheet = new CSSStyleSheet();
23
+
24
+ try {
25
+ TableOfContentStyleSheet.insertRule(`
26
+ @layer tableofcontent {
27
+ :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)}}:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}.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)}:host{box-sizing:border-box}.navigation{box-sizing:border-box;cursor:pointer;display:block;position:absolute;top:0;transition:top .2s ease,visibility .1s ease;width:20px}.navigation [data-monster-role=navigation-list] ul{list-style-type:none;margin:0;padding:0 0 0 10px}.navigation [data-monster-role=navigation-list] ul li{padding-left:10px;position:relative}.navigation [data-monster-role=navigation-list] ul li:before{border-left:1px dotted var(--monster-color-primary-2);bottom:0;content:\"\";left:0;margin-top:0;position:absolute;top:0;width:10px}.navigation [data-monster-role=navigation-control]{width:20px}.navigation .heading-strip{background-color:var(--monster-bg-color-primary-3);display:flex;height:0;margin-bottom:10px}.navigation .heading-strip.level-h1{height:6px}.navigation .heading-strip.level-h2{height:4px}.navigation .heading-strip.level-h3{height:2px}.navigation .heading-strip.level-h4,.navigation .heading-strip.level-h5,.navigation .heading-strip.level-h6{height:1px}
28
+ }`, 0);
29
+ } catch (e) {
30
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
31
+ }
@@ -0,0 +1,418 @@
1
+ /**
2
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
3
+ * Node module: @schukai/monster
4
+ *
5
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
6
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
7
+ *
8
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
9
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
10
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
11
+ */
12
+
13
+ import {instanceSymbol} from "../../constants.mjs";
14
+ import {addAttributeToken} from "../../dom/attributes.mjs";
15
+ import {
16
+ ATTRIBUTE_ERRORMESSAGE,
17
+ ATTRIBUTE_ROLE,
18
+ } from "../../dom/constants.mjs";
19
+ import {CustomElement} from "../../dom/customelement.mjs";
20
+ import {
21
+ assembleMethodSymbol,
22
+ registerCustomElement,
23
+ } from "../../dom/customelement.mjs";
24
+ import {findTargetElementFromEvent} from "../../dom/events.mjs";
25
+ import {isFunction} from "../../types/is.mjs";
26
+ import {TableOfContentStyleSheet} from "./stylesheet/table-of-content.mjs";
27
+ import {fireCustomEvent} from "../../dom/events.mjs";
28
+ import {getWindow} from "../../dom/util.mjs";
29
+ import "../layout/popper.mjs";
30
+
31
+ export {TableOfContent};
32
+
33
+ /**
34
+ * @private
35
+ * @type {symbol}
36
+ */
37
+ const tableOfContentElementSymbol = Symbol("tableOfContentElement");
38
+
39
+ /**
40
+ * @private
41
+ * @type {symbol}
42
+ */
43
+ const navigationElementSymbol = Symbol("navigation");
44
+
45
+
46
+ /**
47
+ * @private
48
+ * @type {symbol}
49
+ */
50
+ const navigationControlElementSymbol = Symbol("navigationControlElement");
51
+
52
+ /**
53
+ * @private
54
+ * @type {symbol}
55
+ */
56
+ const navigationListElementSymbol = Symbol("navigationListElement");
57
+
58
+ /**
59
+ * @private
60
+ * @type {symbol}
61
+ */
62
+ const windowEventHandlerSymbol = Symbol("windowsEventHandler");
63
+
64
+ /**
65
+ * @private
66
+ * @type {symbol}
67
+ */
68
+ const scrollableParentSymbol = Symbol("scrollableParent");
69
+
70
+ /**
71
+ * @private
72
+ * @type {symbol}
73
+ */
74
+ const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler");
75
+
76
+ /**
77
+ * A TableOfContent
78
+ *
79
+ * @fragments /fragments/components/form/table-of-content/
80
+ *
81
+ * @example /examples/components/form/table-of-content-simple
82
+ *
83
+ * @since 3.66.0
84
+ * @copyright schukai GmbH
85
+ * @summary A beautiful TableOfContent that can make your life easier and also looks good.
86
+ */
87
+ class TableOfContent extends CustomElement {
88
+ /**
89
+ * This method is called by the `instanceof` operator.
90
+ * @returns {symbol}
91
+ */
92
+ static get [instanceSymbol]() {
93
+ return Symbol.for("@schukai/monster/components/navigation/table-of-content@@instance");
94
+ }
95
+
96
+ /**
97
+ *
98
+ * @return {Components.Navigation.TableOfContent
99
+ */
100
+ [assembleMethodSymbol]() {
101
+ super[assembleMethodSymbol]();
102
+ initControlReferences.call(this);
103
+ initEventHandler.call(this);
104
+ return this;
105
+ }
106
+
107
+ /**
108
+ * To set the options via the html tag the attribute `data-monster-options` must be used.
109
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
110
+ *
111
+ * The individual configuration values can be found in the table.
112
+ *
113
+ * @property {Object} templates Template definitions
114
+ * @property {string} templates.main Main template
115
+ * @property {Object} labels Label definitions
116
+ * @property {Object} actions Callbacks
117
+ * @property {string} actions.click="throw Error" Callback when clicked
118
+ * @property {Object} features Features
119
+ * @property {number} offset=100 Navigation offset from top
120
+ * @property {Object} classes CSS classes
121
+ * @property {boolean} disabled=false Disabled state
122
+ */
123
+ get defaults() {
124
+ return Object.assign({}, super.defaults, {
125
+ templates: {
126
+ main: getTemplate(),
127
+ },
128
+ labels: {},
129
+ classes: {},
130
+ disabled: false,
131
+ features: {},
132
+ offset: 100,
133
+ actions: {
134
+ click: () => {
135
+ throw new Error("the click action is not defined");
136
+ },
137
+ }
138
+ });
139
+ }
140
+
141
+ /**
142
+ * @return {void}
143
+ */
144
+ connectedCallback() {
145
+ super.connectedCallback();
146
+
147
+ initNavigation.call(this);
148
+
149
+ setTimeout(() => {
150
+
151
+ this[scrollableParentSymbol] = findScrollableParent(this);
152
+
153
+ if (this[scrollableParentSymbol] === getWindow()) {
154
+ this[scrollableParentSymbol].addEventListener('scroll', this[windowEventHandlerSymbol]);
155
+ calcAndSetNavigationTopWindowContext.call(this);
156
+ } else {
157
+ this[scrollableParentSymbol].addEventListener('scroll', this[scrollableEventHandlerSymbol]);
158
+ calcAndSetNavigationTopScrollableParentContext.call(this);
159
+ }
160
+ }, 100);
161
+ }
162
+
163
+ /**
164
+ * @return {void}
165
+ */
166
+ disconnectedCallback() {
167
+ super.disconnectedCallback();
168
+
169
+ if (this[scrollableParentSymbol] === getWindow()) {
170
+ this[scrollableParentSymbol].removeEventListener('scroll', this[windowEventHandlerSymbol]);
171
+ } else {
172
+ this[scrollableParentSymbol].removeEventListener('scroll', this[scrollableEventHandlerSymbol]);
173
+ }
174
+ }
175
+
176
+ /**
177
+ * @return {string}
178
+ */
179
+ static getTag() {
180
+ return "monster-table-of-content";
181
+ }
182
+
183
+ /**
184
+ * @return {CSSStyleSheet[]}
185
+ */
186
+ static getCSSStyleSheet() {
187
+ return [TableOfContentStyleSheet];
188
+ }
189
+
190
+
191
+ }
192
+
193
+ /**
194
+ * @private
195
+ */
196
+ function calcAndSetNavigationTopWindowContext() {
197
+
198
+ const thisTop = this.getBoundingClientRect().top;
199
+ const topViewport = window.scrollY;
200
+ let top = Math.max(topViewport, thisTop);
201
+
202
+ const offset = this.getOption('offset');
203
+ if (offset > 0) {
204
+ top += offset;
205
+ }
206
+ this[navigationElementSymbol].style.top = top + "px";
207
+ }
208
+
209
+ /**
210
+ * @private
211
+ */
212
+ function calcAndSetNavigationTopScrollableParentContext() {
213
+
214
+ const windowTop = getWindow().scrollY;
215
+ const thisRect = this.getBoundingClientRect();
216
+ const thisTop = thisRect.top;
217
+ const thisBottom = thisRect.bottom;
218
+ const scrollTop = this[scrollableParentSymbol].scrollTop;
219
+ let top = windowTop + thisTop + scrollTop;
220
+
221
+ if (thisBottom < top) {
222
+ top = thisBottom;
223
+ this[navigationElementSymbol].style.visibility = "hidden";
224
+ } else {
225
+ this[navigationElementSymbol].style.visibility = "visible";
226
+ }
227
+ const offset = this.getOption('offset');
228
+ if (offset > 0) {
229
+ top += offset;
230
+ }
231
+
232
+ this[navigationElementSymbol].style.top = top + "px";
233
+ }
234
+
235
+ /**
236
+ * @private
237
+ */
238
+ function initNavigation() {
239
+
240
+ const headings = getHeadings.call(this);
241
+
242
+ for (const heading of headings) {
243
+ const div = document.createElement('div');
244
+ div.classList.add('heading-strip');
245
+ div.classList.add('level-' + heading.tagName.toLowerCase());
246
+ this[navigationControlElementSymbol].appendChild(div);
247
+ }
248
+
249
+ this[navigationListElementSymbol].appendChild(createListFromHeadings.call(this, headings).sublist);
250
+ }
251
+
252
+ /**
253
+ * Recursively creates a nested list (UL) from a list of heading elements.
254
+ * @param {HTMLElement[]} nodeList - The list of heading elements.
255
+ * @param {number} currentLevel - The current heading level we are processing.
256
+ * @returns {{sublist: HTMLUListElement, lastIndex: number}} An object containing the sublist and the index of the last processed element.
257
+ */
258
+ function createListFromHeadings(nodeList, currentLevel = 1) {
259
+ const self = this;
260
+ let ul = document.createElement('ul');
261
+ let i = 0;
262
+
263
+ while (i < nodeList.length) {
264
+ const node = nodeList[i];
265
+ const level = parseInt(node.tagName.substring(1));
266
+
267
+ if (level === currentLevel) {
268
+ const li = document.createElement('li');
269
+ li.textContent = node.textContent;
270
+
271
+ li.addEventListener('click', (e) => {
272
+ e.stopPropagation();
273
+ getWindow().requestAnimationFrame(() => {
274
+ window.scrollTo(0, 0);
275
+ // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
276
+ // mostly supported
277
+ node?.scrollIntoView({behavior: "smooth"});
278
+ });
279
+ });
280
+
281
+ ul.appendChild(li);
282
+ i++;
283
+ } else if (level > currentLevel) {
284
+ if (ul.lastChild) {
285
+ const {sublist, lastIndex} = createListFromHeadings.call(self, nodeList.slice(i), level);
286
+ ul.lastChild.appendChild(sublist);
287
+ i += lastIndex;
288
+ } else {
289
+ throw new Error("Heading structure error: higher level heading without a preceding lower level heading.");
290
+ }
291
+ } else {
292
+ break;
293
+ }
294
+ }
295
+
296
+ return {sublist: ul, lastIndex: i};
297
+ }
298
+
299
+ /**
300
+ * @private
301
+ * @returns {*[]}
302
+ */
303
+ function getHeadings() {
304
+ const allHeadings = [];
305
+
306
+ const slots = this.shadowRoot.querySelectorAll('slot');
307
+
308
+ slots.forEach(slot => {
309
+ const slottedElements = slot.assignedElements();
310
+ slottedElements.forEach(element => {
311
+ if (element instanceof HTMLHeadingElement) {
312
+ allHeadings.push(element);
313
+ return;
314
+ }
315
+
316
+ const headings = element.querySelectorAll("h1, h2, h3, h4, h5, h6");
317
+ let nodeList = Array.from(headings);
318
+ allHeadings.push(...nodeList);
319
+ });
320
+ });
321
+ return allHeadings;
322
+ }
323
+
324
+
325
+ /**
326
+ * @private
327
+ * @return {initEventHandler}
328
+ */
329
+ function initEventHandler() {
330
+
331
+ const self = this;
332
+ let ticking = false;
333
+
334
+ this[windowEventHandlerSymbol] = function () {
335
+ if (!ticking) {
336
+ getWindow().requestAnimationFrame(() => {
337
+ calcAndSetNavigationTopWindowContext.call(self);
338
+ ticking = false;
339
+ });
340
+ ticking = true;
341
+ }
342
+ }
343
+
344
+ this[scrollableEventHandlerSymbol] = function () {
345
+ if (!ticking) {
346
+ getWindow().requestAnimationFrame(() => {
347
+ calcAndSetNavigationTopScrollableParentContext.call(self);
348
+ ticking = false;
349
+ });
350
+ ticking = true;
351
+ }
352
+ }
353
+
354
+ return this;
355
+ }
356
+
357
+ /**
358
+ *
359
+ * @param {HTMLElement} element
360
+ * @return {HTMLElement|Window}
361
+ */
362
+ function findScrollableParent(element) {
363
+
364
+ let parent = element.parentElement;
365
+ while (parent) {
366
+ const overflowY = getWindow().getComputedStyle(parent).overflowY;
367
+ if (overflowY === 'scroll' || overflowY === 'auto') {
368
+ return parent;
369
+ }
370
+ parent = parent.parentElement;
371
+ }
372
+ return getWindow();
373
+ }
374
+
375
+ /**
376
+ * @private
377
+ * @return {void}
378
+ */
379
+ function initControlReferences() {
380
+ this[tableOfContentElementSymbol] = this.shadowRoot.querySelector(
381
+ `[${ATTRIBUTE_ROLE}="control"]`,
382
+ );
383
+
384
+ this[navigationElementSymbol] = this.shadowRoot.querySelector(
385
+ `[${ATTRIBUTE_ROLE}="navigation"]`,
386
+ );
387
+
388
+ this[navigationControlElementSymbol] = this.shadowRoot.querySelector(
389
+ `[${ATTRIBUTE_ROLE}="navigation-control"]`,
390
+ );
391
+
392
+ this[navigationListElementSymbol] = this.shadowRoot.querySelector(
393
+ `[${ATTRIBUTE_ROLE}="navigation-list"]`,
394
+ );
395
+ }
396
+
397
+ /**
398
+ * @private
399
+ * @return {string}
400
+ */
401
+ function getTemplate() {
402
+ // language=HTML
403
+ return `
404
+ <div data-monster-role="control" part="control">
405
+ <div class="navigation" data-monster-role="navigation">
406
+ <monster-popper data-monster-option-mode="enter">
407
+ <div slot="button" data-monster-role="navigation-control">
408
+ </div>
409
+ <div data-monster-role="navigation-list">
410
+ </div>
411
+ </monster-popper>
412
+ </div>
413
+ <slot></slot>
414
+ </div>`;
415
+ }
416
+
417
+
418
+ registerCustomElement(TableOfContent);
@@ -1,9 +1,13 @@
1
-
2
1
  /**
3
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
2
+ * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
4
3
  * Node module: @schukai/monster
5
- * This file is licensed under the AGPLv3 License.
6
- * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
4
+ *
5
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
6
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
7
+ *
8
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
9
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
10
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
7
11
  */
8
12
 
9
13
  import {addAttributeToken} from "../../../dom/attributes.mjs";
@@ -1,9 +1,13 @@
1
-
2
1
  /**
3
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
2
+ * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
4
3
  * Node module: @schukai/monster
5
- * This file is licensed under the AGPLv3 License.
6
- * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
4
+ *
5
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
6
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
7
+ *
8
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
9
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
10
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
7
11
  */
8
12
 
9
13
  import {addAttributeToken} from "../../../dom/attributes.mjs";
@@ -1,9 +1,13 @@
1
-
2
1
  /**
3
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
2
+ * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
4
3
  * Node module: @schukai/monster
5
- * This file is licensed under the AGPLv3 License.
6
- * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
4
+ *
5
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
6
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
7
+ *
8
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
9
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
10
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
7
11
  */
8
12
 
9
13
  import {addAttributeToken} from "../../../dom/attributes.mjs";