@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.
- package/CHANGELOG.md +32 -0
- package/example/components/form/button.mjs +1 -1
- package/example/components/form/field-set.mjs +4 -0
- package/example/components/form/select.mjs +1 -1
- package/package.json +2 -1
- package/source/components/datatable/datatable/header.mjs +228 -221
- package/source/components/datatable/style/dataset.pcss +1 -0
- package/source/components/datatable/style/datatable.pcss +1 -0
- package/source/components/datatable/stylesheet/change-button.mjs +8 -4
- package/source/components/datatable/stylesheet/column-bar.mjs +8 -4
- package/source/components/datatable/stylesheet/dataset.mjs +9 -5
- package/source/components/datatable/stylesheet/datasource.mjs +8 -4
- package/source/components/datatable/stylesheet/datatable.mjs +9 -5
- package/source/components/datatable/stylesheet/embedded-pagination.mjs +8 -4
- package/source/components/datatable/stylesheet/filter-button.mjs +8 -4
- package/source/components/datatable/stylesheet/filter-controls-defaults.mjs +8 -4
- package/source/components/datatable/stylesheet/filter-date-range.mjs +8 -4
- package/source/components/datatable/stylesheet/filter-range.mjs +8 -4
- package/source/components/datatable/stylesheet/filter.mjs +8 -4
- package/source/components/datatable/stylesheet/pagination.mjs +8 -4
- package/source/components/datatable/stylesheet/save-button.mjs +8 -4
- package/source/components/datatable/stylesheet/select-filter.mjs +8 -4
- package/source/components/datatable/stylesheet/status.mjs +8 -4
- package/source/components/form/button.mjs +263 -281
- package/source/components/form/field-set.mjs +300 -0
- package/source/components/form/popper.mjs +13 -480
- package/source/components/form/style/field-set.pcss +13 -0
- package/source/components/form/stylesheet/action-button.mjs +8 -4
- package/source/components/form/stylesheet/api-button.mjs +8 -4
- package/source/components/form/stylesheet/button-bar.mjs +9 -5
- package/source/components/form/stylesheet/button.mjs +8 -4
- package/source/components/form/stylesheet/confirm-button.mjs +9 -5
- package/source/components/form/stylesheet/context-error.mjs +8 -4
- package/source/components/form/stylesheet/context-help.mjs +8 -4
- package/source/components/form/stylesheet/field-set.mjs +31 -0
- package/source/components/form/stylesheet/form.mjs +9 -5
- package/source/components/form/stylesheet/message-state-button.mjs +8 -4
- package/source/components/form/stylesheet/popper-button.mjs +8 -4
- package/source/components/form/stylesheet/select.mjs +8 -4
- package/source/components/form/stylesheet/state-button.mjs +8 -4
- package/source/components/form/stylesheet/toggle-switch.mjs +8 -4
- package/source/components/form/stylesheet/tree-select.mjs +8 -4
- package/source/components/host/collapse.mjs +14 -516
- package/source/components/host/config-manager.mjs +9 -2
- package/source/components/host/constants.mjs +9 -4
- package/source/components/host/details.mjs +14 -253
- package/source/components/host/stylesheet/call-button.mjs +8 -4
- package/source/components/host/stylesheet/config-manager.mjs +8 -4
- package/source/components/host/stylesheet/host.mjs +9 -5
- package/source/components/host/stylesheet/overlay.mjs +9 -5
- package/source/components/host/stylesheet/toggle-button.mjs +8 -4
- package/source/components/host/stylesheet/viewer.mjs +8 -4
- package/source/components/layout/collapse.mjs +542 -0
- package/source/components/layout/details.mjs +271 -0
- package/source/components/layout/panel.mjs +6 -0
- package/source/components/layout/popper.mjs +476 -0
- package/source/components/{host → layout}/stylesheet/collapse.mjs +8 -4
- package/source/components/{host → layout}/stylesheet/details.mjs +8 -4
- package/source/components/layout/stylesheet/panel.mjs +8 -4
- package/source/components/{form → layout}/stylesheet/popper.mjs +8 -4
- package/source/components/layout/stylesheet/split-panel.mjs +8 -4
- package/source/components/layout/stylesheet/tabs.mjs +8 -4
- package/source/components/layout/stylesheet/width-toggle.mjs +8 -4
- package/source/components/layout/tabs.mjs +3 -3
- package/source/components/layout/width-toggle.mjs +3 -3
- package/source/components/navigation/style/table-of-content.pcss +84 -0
- package/source/components/navigation/stylesheet/table-of-content.mjs +31 -0
- package/source/components/navigation/table-of-content.mjs +418 -0
- package/source/components/notify/stylesheet/message.mjs +8 -4
- package/source/components/notify/stylesheet/notify.mjs +8 -4
- package/source/components/state/stylesheet/log.mjs +8 -4
- package/source/components/state/stylesheet/state.mjs +9 -5
- package/source/components/style/link.pcss +0 -1
- package/source/components/style/mixin/typography.pcss +7 -7
- package/source/components/style/typography.pcss +1 -1
- package/source/components/stylesheet/badge.mjs +8 -4
- package/source/components/stylesheet/border.mjs +8 -4
- package/source/components/stylesheet/button.mjs +8 -4
- package/source/components/stylesheet/card.mjs +8 -4
- package/source/components/stylesheet/color.mjs +8 -4
- package/source/components/stylesheet/common.mjs +8 -4
- package/source/components/stylesheet/control.mjs +8 -4
- package/source/components/stylesheet/data-grid.mjs +8 -4
- package/source/components/stylesheet/display.mjs +8 -4
- package/source/components/stylesheet/floating-ui.mjs +8 -4
- package/source/components/stylesheet/form.mjs +8 -4
- package/source/components/stylesheet/host.mjs +8 -4
- package/source/components/stylesheet/icons.mjs +8 -4
- package/source/components/stylesheet/link.mjs +8 -4
- package/source/components/stylesheet/mixin/badge.mjs +31 -0
- package/source/components/stylesheet/mixin/button.mjs +31 -0
- package/source/components/stylesheet/mixin/form.mjs +31 -0
- package/source/components/stylesheet/mixin/hover.mjs +31 -0
- package/source/components/stylesheet/mixin/icon.mjs +31 -0
- package/source/components/stylesheet/mixin/media.mjs +31 -0
- package/source/components/stylesheet/mixin/property.mjs +31 -0
- package/source/components/stylesheet/mixin/skeleton.mjs +31 -0
- package/source/components/stylesheet/mixin/spinner.mjs +31 -0
- package/source/components/stylesheet/mixin/typography.mjs +31 -0
- package/source/components/stylesheet/normalize.mjs +8 -4
- package/source/components/stylesheet/popper.mjs +8 -4
- package/source/components/stylesheet/property.mjs +8 -4
- package/source/components/stylesheet/ripple.mjs +8 -4
- package/source/components/stylesheet/skeleton.mjs +8 -4
- package/source/components/stylesheet/space.mjs +8 -4
- package/source/components/stylesheet/spinner.mjs +8 -4
- package/source/components/stylesheet/table.mjs +8 -4
- package/source/components/stylesheet/theme.mjs +8 -4
- package/source/components/stylesheet/typography.mjs +9 -5
- package/source/components/tree-menu/stylesheet/tree-menu.mjs +8 -4
- package/source/dom/ready.mjs +10 -4
- package/source/monster.mjs +17 -80
- package/source/types/proxyobserver.mjs +4 -2
- package/source/types/version.mjs +1 -1
- package/test/cases/monster.mjs +1 -1
- package/test/web/tests.js +4 -4
- package/source/components/form/form-field.mjs +0 -341
- package/source/components/form/style/form-field.pcss +0 -4
- package/source/components/form/stylesheet/form-field.mjs +0 -27
- /package/source/components/{host → layout}/style/collapse.pcss +0 -0
- /package/source/components/{host → layout}/style/details.pcss +0 -0
- /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
|
2
|
+
* Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
|
4
3
|
* Node module: @schukai/monster
|
5
|
-
*
|
6
|
-
*
|
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
|
2
|
+
* Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
|
4
3
|
* Node module: @schukai/monster
|
5
|
-
*
|
6
|
-
*
|
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
|
2
|
+
* Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
|
4
3
|
* Node module: @schukai/monster
|
5
|
-
*
|
6
|
-
*
|
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";
|