@schukai/monster 3.64.0 → 3.65.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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";