@nvidia-elements/core 2.11.0 → 2.11.1
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.
- package/CHANGELOG.md +7 -0
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert2.js +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/badge/badge2.js +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundles/index.js +1 -1
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card2.js +4 -4
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox2.js +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/custom-elements.json +20 -0
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog2.js +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer2.js +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/format-bytes/format-bytes2.js +1 -1
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-number/format-number2.js +1 -1
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/format-truncate/format-truncate2.js +1 -1
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/gauge/gauge2.js +1 -1
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/header/header2.js +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row2.js +1 -1
- package/dist/icon/icon2.js +2 -2
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/controllers/state-scroll.controller.js +27 -17
- package/dist/internal/controllers/state-scroll.controller.js.map +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-group2.js +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification2.js +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/pagination/pagination2.js +1 -1
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search2.js +1 -1
- package/dist/select/select2.js +1 -1
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps2.js +2 -2
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast2.js +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/viewport/viewport-gridlines2.js +1 -1
- package/dist/viewport/viewport-minimap2.js +1 -1
- package/dist/viewport/viewport.examples.js.map +1 -1
- package/dist/viewport/viewport.examples.json +2 -2
- package/dist/viewport/viewport2.js +1 -1
- package/dist/week/week2.js +1 -1
- package/package.json +1 -1
package/dist/range/range2.js
CHANGED
package/dist/search/search2.js
CHANGED
package/dist/select/select2.js
CHANGED
package/dist/steps/steps2.js
CHANGED
|
@@ -23,7 +23,7 @@ var v = class extends h(d) {
|
|
|
23
23
|
static {
|
|
24
24
|
this.metadata = {
|
|
25
25
|
tag: "nve-steps-item",
|
|
26
|
-
version: "2.11.
|
|
26
|
+
version: "2.11.1",
|
|
27
27
|
parents: ["nve-steps"]
|
|
28
28
|
};
|
|
29
29
|
}
|
|
@@ -69,7 +69,7 @@ var y = class extends d {
|
|
|
69
69
|
static {
|
|
70
70
|
this.metadata = {
|
|
71
71
|
tag: "nve-steps",
|
|
72
|
-
version: "2.11.
|
|
72
|
+
version: "2.11.1",
|
|
73
73
|
children: ["nve-steps-item"]
|
|
74
74
|
};
|
|
75
75
|
}
|
package/dist/switch/switch2.js
CHANGED
package/dist/tabs/tabs-group2.js
CHANGED
package/dist/tabs/tabs2.js
CHANGED
|
@@ -20,7 +20,7 @@ var _ = class extends h(f) {
|
|
|
20
20
|
static {
|
|
21
21
|
this.metadata = {
|
|
22
22
|
tag: "nve-tabs-item",
|
|
23
|
-
version: "2.11.
|
|
23
|
+
version: "2.11.1",
|
|
24
24
|
parents: ["nve-tabs"]
|
|
25
25
|
};
|
|
26
26
|
}
|
|
@@ -53,7 +53,7 @@ var v = class extends f {
|
|
|
53
53
|
static {
|
|
54
54
|
this.metadata = {
|
|
55
55
|
tag: "nve-tabs",
|
|
56
|
-
version: "2.11.
|
|
56
|
+
version: "2.11.1",
|
|
57
57
|
children: ["nve-tabs-item"]
|
|
58
58
|
};
|
|
59
59
|
}
|
package/dist/tag/tag2.js
CHANGED
package/dist/time/time2.js
CHANGED
package/dist/toast/toast2.js
CHANGED
package/dist/toolbar/toolbar2.js
CHANGED
package/dist/tooltip/tooltip2.js
CHANGED
package/dist/tree/tree-node2.js
CHANGED
package/dist/tree/tree2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"viewport.examples.js","names":[],"sources":["../../src/viewport/viewport.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/toolbar/define.js';\nimport '@nvidia-elements/core/viewport/define.js';\n\nexport default {\n title: 'Elements/Viewport',\n component: 'nve-viewport'\n};\n\n/**\n * @summary Auto-fit a bounded SVG with direct pan and zoom; the minimap represents its single content root as one rectangle.\n */\nexport const Default = {\n render: () => html`\n <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n <nve-viewport-gridlines></nve-viewport-gridlines>\n\n <svg\n role=\"img\"\n aria-label=\"Three geometric forms in a spatial field\"\n width=\"900\"\n height=\"600\"\n viewBox=\"0 0 900 600\"\n style=\"position: absolute; left: 0; top: 0\"\n >\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n </svg>\n\n <nve-viewport-minimap></nve-viewport-minimap>\n </nve-viewport>\n `\n};\n\n/**\n * @summary Provide custom minimap content to replace the automatic bounding boxes with a simplified representation of the viewport content.\n */\nexport const Minimap = {\n render: () => html`\n <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n <nve-viewport-gridlines></nve-viewport-gridlines>\n\n <svg\n role=\"img\"\n aria-label=\"Three geometric forms in a spatial field\"\n width=\"900\"\n height=\"600\"\n viewBox=\"0 0 900 600\"\n style=\"position: absolute; left: 0; top: 0\"\n >\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n </svg>\n\n <nve-viewport-minimap>\n <svg slot=\"preview\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n </svg>\n </nve-viewport-minimap>\n </nve-viewport>\n `\n};\n\n/**\n * @summary Place custom content in the background slot to provide a spatial reference without affecting content fitting.\n */\nexport const Background = {\n render: () => html`\n <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n <svg\n slot=\"background\"\n aria-hidden=\"true\"\n width=\"20480\"\n height=\"20480\"\n viewBox=\"-10240 -10240 20480 20480\"\n style=\"position: absolute; left: -10240px; top: -10240px\"\n >\n <defs>\n <pattern id=\"viewport-background-dots\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\">\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"var(--nve-ref-border-color-emphasis)\"></circle>\n </pattern>\n </defs>\n <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-dots)\"></rect>\n </svg>\n\n <svg\n role=\"img\"\n aria-label=\"Three geometric forms in a spatial field\"\n width=\"900\"\n height=\"600\"\n viewBox=\"0 0 900 600\"\n style=\"position: absolute; left: 0; top: 0\"\n >\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n </svg>\n </nve-viewport>\n `\n};\n\n/**\n * @summary Place native and Elements controls inside a viewport without losing their standard interactions.\n */\nexport const InteractiveContent = {\n render: () => html`\n <nve-viewport x=\"-20\" y=\"-20\" scale=\"0.9\" behavior-pan behavior-zoom style=\"height: 420px\">\n <nve-viewport-gridlines step=\"20\" target-spacing=\"72\"></nve-viewport-gridlines>\n\n <nve-card style=\"position: absolute; left: 280px; top: 110px; width: 300px\">\n <nve-card-header>\n <h2 nve-text=\"heading sm bold\">Viewport content</h2>\n </nve-card-header>\n <nve-card-content>\n <nve-input>\n <label>Label</label>\n <input value=\"Editable value\" />\n </nve-input>\n </nve-card-content>\n </nve-card>\n </nve-viewport>\n `\n};\n\n/**\n * @summary Configure panning to require Space when application content needs to handle its own drag interactions.\n */\nexport const PanWithSpace = {\n render: () => html`\n <style>\n #viewport-space-pan-card {\n cursor: var(--drag-cursor, auto);\n }\n\n #viewport-space-pan-card:hover {\n --drag-cursor: grab;\n }\n\n #viewport-space-pan-card[data-dragging] {\n --background: var(--nve-sys-layer-overlay-background);\n --box-shadow: var(--nve-ref-shadow-300);\n --drag-cursor: grabbing;\n }\n </style>\n\n <div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n <nve-alert-group status=\"accent\">\n <nve-alert>\n <p nve-text=\"body sm medium\">\n Pan the viewport with <kbd nve-text=\"code\">Space</kbd>, or using the middle mouse button.\n </p>\n </nve-alert>\n </nve-alert-group>\n\n <nve-viewport\n id=\"viewport-space-pan-demo\"\n behavior-pan=\"space\"\n behavior-zoom\n style=\"flex: 1; --min-height: 0\"\n >\n <nve-viewport-gridlines step=\"20\"></nve-viewport-gridlines>\n\n <nve-card\n id=\"viewport-space-pan-card\"\n data-draggable-card\n data-card-drag-handle\n style=\"position: absolute; left: 290px; top: 120px; width: 300px\"\n >\n <nve-card-header>\n <h2 nve-text=\"heading sm bold\">Drag this card</h2>\n </nve-card-header>\n <nve-card-content>\n <p nve-text=\"body relaxed\" nve-layout=\"pad:md\" style=\"text-align: center\">Application-defined dragging remains independent in this mode.</p>\n </nve-card-content>\n </nve-card>\n </nve-viewport>\n </div>\n\n <script type=\"module\">\n const viewport = document.querySelector('#viewport-space-pan-demo');\n const handles = viewport.querySelectorAll('[data-card-drag-handle]');\n\n handles.forEach(handle => {\n const card = handle.closest('[data-draggable-card]');\n let pointerId;\n let startClientX;\n let startClientY;\n let startLeft;\n let startTop;\n\n const finishDrag = event => {\n if (event.pointerId !== pointerId) return;\n pointerId = undefined;\n card.removeAttribute('data-dragging');\n };\n\n handle.addEventListener('pointerdown', event => {\n if (\n (event.pointerType !== 'mouse' && event.pointerType !== 'pen') ||\n event.button !== 0 ||\n event.defaultPrevented\n ) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n pointerId = event.pointerId;\n startClientX = event.clientX;\n startClientY = event.clientY;\n startLeft = Number.parseFloat(card.style.left);\n startTop = Number.parseFloat(card.style.top);\n card.setAttribute('data-dragging', '');\n handle.setPointerCapture(pointerId);\n });\n\n handle.addEventListener('pointermove', event => {\n if (event.pointerId !== pointerId) return;\n\n card.style.left = startLeft + (event.clientX - startClientX) / viewport.scale + 'px';\n card.style.top = startTop + (event.clientY - startClientY) / viewport.scale + 'px';\n event.preventDefault();\n });\n\n handle.addEventListener('pointerup', finishDrag);\n handle.addEventListener('pointercancel', finishDrag);\n handle.addEventListener('lostpointercapture', finishDrag);\n });\n </script>\n `\n};\n\n/**\n * @summary Use external controls with `commandfor` to invoke viewport pan, zoom, reset, and fit commands.\n */\nexport const Commands = {\n render: () => html`\n <div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n <nve-toolbar aria-label=\"Viewport navigation controls\">\n <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-left\" aria-label=\"Pan left\">←</nve-button>\n <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-up\" aria-label=\"Pan up\">↑</nve-button>\n <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-down\" aria-label=\"Pan down\">↓</nve-button>\n <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-right\" aria-label=\"Pan right\">→</nve-button>\n <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-out\" aria-label=\"Zoom out\">−</nve-button>\n <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-reset\">100%</nve-button>\n <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-in\" aria-label=\"Zoom in\">+</nve-button>\n <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-to-fit\">Fit</nve-button>\n </nve-toolbar>\n\n <nve-viewport\n id=\"viewport-command-demo\"\n autofit\n fit-inset=\"24\"\n behavior-pan\n behavior-zoom\n style=\"flex: 1; --min-height: 0\"\n >\n <nve-viewport-gridlines></nve-viewport-gridlines>\n\n <svg\n role=\"img\"\n aria-label=\"Three geometric forms in a spatial field\"\n width=\"900\"\n height=\"600\"\n viewBox=\"0 0 900 600\"\n style=\"position: absolute; left: 0; top: 0\"\n >\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n </svg>\n </nve-viewport>\n </div>\n `\n};\n\n/**\n * @summary Viewport navigation helpers let application logic animate specific content regions into view.\n */\nexport const Reveal = {\n render: () => html`\n <div nve-layout=\"column gap:sm align:horizontal-stretch\" style=\"height: 420px\">\n <div nve-layout=\"row align:center\">\n <nve-button-group container=\"rounded\" behavior-select=\"single\" aria-label=\"Navigate to workflow region\">\n <nve-button data-viewport-region=\"viewport-region-ingest\">Ingest</nve-button>\n <nve-button data-viewport-region=\"viewport-region-train\">Train</nve-button>\n <nve-button data-viewport-region=\"viewport-region-deploy\">Deploy</nve-button>\n </nve-button-group>\n </div>\n\n <nve-viewport id=\"viewport-reveal-demo\" autofit fit-inset=\"24\" style=\"flex: 1; --min-height: 0\">\n <nve-viewport-gridlines step=\"40\"></nve-viewport-gridlines>\n\n <svg\n aria-hidden=\"true\"\n width=\"500\"\n height=\"320\"\n viewBox=\"0 0 500 320\"\n style=\"position: absolute; left: 380px; top: 144px\"\n >\n <path\n d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\"\n fill=\"none\"\n stroke=\"var(--nve-ref-border-color-emphasis)\"\n stroke-width=\"4\"\n ></path>\n </svg>\n\n <nve-card id=\"viewport-region-ingest\" style=\"position: absolute; left: 80px; top: 80px; width: 320px\">\n <nve-card-header><h2 nve-text=\"heading sm bold\">Ingest</h2></nve-card-header>\n <nve-card-content>\n <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Validate and prepare the dataset.</p>\n </nve-card-content>\n </nve-card>\n <nve-card id=\"viewport-region-train\" style=\"position: absolute; left: 480px; top: 240px; width: 320px\">\n <nve-card-header><h2 nve-text=\"heading sm bold\">Train</h2></nve-card-header>\n <nve-card-content>\n <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Run and compare model experiments.</p>\n </nve-card-content>\n </nve-card>\n <nve-card id=\"viewport-region-deploy\" style=\"position: absolute; left: 880px; top: 400px; width: 320px\">\n <nve-card-header><h2 nve-text=\"heading sm bold\">Deploy</h2></nve-card-header>\n <nve-card-content>\n <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Promote the selected model.</p>\n </nve-card-content>\n </nve-card>\n </nve-viewport>\n </div>\n\n <script type=\"module\">\n const viewport = document.querySelector('#viewport-reveal-demo');\n const buttons = Array.from(document.querySelectorAll('[data-viewport-region]'));\n const framing = 80;\n\n buttons.forEach(button => {\n button.addEventListener('click', () => {\n const region = viewport.querySelector('#' + button.dataset.viewportRegion);\n viewport.reveal(\n {\n x: region.offsetLeft - framing,\n y: region.offsetTop - framing,\n width: region.offsetWidth + framing * 2,\n height: region.offsetHeight + framing * 2\n },\n { animated: true, duration: 500 }\n );\n });\n });\n </script>\n `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
|
|
1
|
+
{"version":3,"file":"viewport.examples.js","names":[],"sources":["../../src/viewport/viewport.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/toolbar/define.js';\nimport '@nvidia-elements/core/viewport/define.js';\n\nexport default {\n title: 'Elements/Viewport',\n component: 'nve-viewport'\n};\n\n/**\n * @summary Auto-fit a bounded SVG with direct pan and zoom; the minimap represents its single content root as one rectangle.\n */\nexport const Default = {\n render: () => html`\n <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n <nve-viewport-gridlines></nve-viewport-gridlines>\n\n <svg\n role=\"img\"\n aria-label=\"Three geometric forms in a spatial field\"\n width=\"900\"\n height=\"600\"\n viewBox=\"0 0 900 600\"\n style=\"position: absolute; left: 0; top: 0\"\n >\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n </svg>\n\n <nve-viewport-minimap></nve-viewport-minimap>\n </nve-viewport>\n `\n};\n\n/**\n * @summary Provide custom minimap content to replace the automatic bounding boxes with a simplified representation of the viewport content.\n */\nexport const Minimap = {\n render: () => html`\n <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n <nve-viewport-gridlines></nve-viewport-gridlines>\n\n <svg\n role=\"img\"\n aria-label=\"Three geometric forms in a spatial field\"\n width=\"900\"\n height=\"600\"\n viewBox=\"0 0 900 600\"\n style=\"position: absolute; left: 0; top: 0\"\n >\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n </svg>\n\n <nve-viewport-minimap>\n <svg slot=\"preview\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n </svg>\n </nve-viewport-minimap>\n </nve-viewport>\n `\n};\n\n/**\n * @summary Place custom content in the background slot to provide a spatial reference without affecting content fitting.\n */\nexport const Background = {\n render: () => html`\n <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n <svg\n slot=\"background\"\n aria-hidden=\"true\"\n width=\"20480\"\n height=\"20480\"\n viewBox=\"-10240 -10240 20480 20480\"\n style=\"position: absolute; left: -10240px; top: -10240px\"\n >\n <defs>\n <pattern id=\"viewport-background-dots\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\">\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"var(--nve-ref-border-color-emphasis)\"></circle>\n </pattern>\n </defs>\n <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-dots)\"></rect>\n </svg>\n\n <svg\n role=\"img\"\n aria-label=\"Three geometric forms in a spatial field\"\n width=\"900\"\n height=\"600\"\n viewBox=\"0 0 900 600\"\n style=\"position: absolute; left: 0; top: 0\"\n >\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n </svg>\n </nve-viewport>\n `\n};\n\n/**\n * @summary Place native and Elements controls inside a viewport without losing their standard interactions.\n */\nexport const InteractiveContent = {\n render: () => html`\n <nve-viewport x=\"-20\" y=\"-20\" scale=\"0.9\" behavior-pan behavior-zoom style=\"height: 420px\">\n <nve-viewport-gridlines step=\"20\" target-spacing=\"72\"></nve-viewport-gridlines>\n\n <nve-card style=\"position: absolute; left: 280px; top: 110px; width: 300px\">\n <nve-card-header>\n <h2 nve-text=\"heading sm bold\">Viewport content</h2>\n </nve-card-header>\n <nve-card-content>\n <nve-input>\n <label>Label</label>\n <input value=\"Editable value\" />\n </nve-input>\n </nve-card-content>\n </nve-card>\n </nve-viewport>\n `\n};\n\n/**\n * @summary Configure panning to require Space when application content needs to handle its own drag interactions.\n */\nexport const PanWithSpace = {\n render: () => html`\n <style>\n #viewport-space-pan-card {\n cursor: var(--drag-cursor, auto);\n }\n\n #viewport-space-pan-card:hover {\n --drag-cursor: grab;\n }\n\n #viewport-space-pan-card[data-dragging] {\n --background: var(--nve-sys-layer-overlay-background);\n --box-shadow: var(--nve-ref-shadow-300);\n --drag-cursor: grabbing;\n }\n </style>\n\n <div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n <nve-alert-group status=\"accent\">\n <nve-alert>\n <p nve-text=\"body sm medium\">\n Pan the viewport with <kbd nve-text=\"code\">Space</kbd>, or using the middle mouse button.\n </p>\n </nve-alert>\n </nve-alert-group>\n\n <nve-viewport\n id=\"viewport-space-pan-demo\"\n behavior-pan=\"space\"\n behavior-zoom\n style=\"flex: 1; --min-height: 0\"\n >\n <nve-viewport-gridlines step=\"20\"></nve-viewport-gridlines>\n\n <nve-card\n id=\"viewport-space-pan-card\"\n data-draggable-card\n data-card-drag-handle\n style=\"position: absolute; left: 290px; top: 120px; width: 300px\"\n >\n <nve-card-header>\n <h2 nve-text=\"heading sm bold\">Drag this card</h2>\n </nve-card-header>\n <nve-card-content>\n <p nve-text=\"body relaxed\" nve-layout=\"pad:md\" style=\"text-align: center\">Application-defined dragging remains independent in this mode.</p>\n </nve-card-content>\n </nve-card>\n </nve-viewport>\n </div>\n\n <script type=\"module\">\n const viewport = document.querySelector('#viewport-space-pan-demo');\n const handles = viewport.querySelectorAll('[data-card-drag-handle]');\n\n handles.forEach(handle => {\n const card = handle.closest('[data-draggable-card]');\n let pointerId;\n let startClientX;\n let startClientY;\n let startLeft;\n let startTop;\n\n const finishDrag = event => {\n if (event.pointerId !== pointerId) return;\n pointerId = undefined;\n card.removeAttribute('data-dragging');\n };\n\n handle.addEventListener('pointerdown', event => {\n if (\n (event.pointerType !== 'mouse' && event.pointerType !== 'pen') ||\n event.button !== 0 ||\n event.defaultPrevented\n ) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n pointerId = event.pointerId;\n startClientX = event.clientX;\n startClientY = event.clientY;\n startLeft = Number.parseFloat(card.style.left);\n startTop = Number.parseFloat(card.style.top);\n card.setAttribute('data-dragging', '');\n handle.setPointerCapture(pointerId);\n });\n\n handle.addEventListener('pointermove', event => {\n if (event.pointerId !== pointerId) return;\n\n card.style.left = startLeft + (event.clientX - startClientX) / viewport.scale + 'px';\n card.style.top = startTop + (event.clientY - startClientY) / viewport.scale + 'px';\n event.preventDefault();\n });\n\n handle.addEventListener('pointerup', finishDrag);\n handle.addEventListener('pointercancel', finishDrag);\n handle.addEventListener('lostpointercapture', finishDrag);\n });\n </script>\n `\n};\n\n/**\n * @summary Use external controls with `commandfor` to invoke viewport pan, zoom, reset, and fit commands.\n */\nexport const Commands = {\n render: () => html`\n <div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n <nve-toolbar aria-label=\"Viewport navigation controls\">\n <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-left\" aria-label=\"Pan left\">←</nve-button>\n <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-up\" aria-label=\"Pan up\">↑</nve-button>\n <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-down\" aria-label=\"Pan down\">↓</nve-button>\n <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-right\" aria-label=\"Pan right\">→</nve-button>\n <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-out\" aria-label=\"Zoom out\">−</nve-button>\n <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-reset\">100%</nve-button>\n <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-in\" aria-label=\"Zoom in\">+</nve-button>\n <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-to-fit\">Fit</nve-button>\n </nve-toolbar>\n\n <nve-viewport\n id=\"viewport-command-demo\"\n autofit\n fit-inset=\"24\"\n behavior-pan\n behavior-zoom\n style=\"flex: 1; --min-height: 0\"\n >\n <nve-viewport-gridlines></nve-viewport-gridlines>\n\n <svg\n role=\"img\"\n aria-label=\"Three geometric forms in a spatial field\"\n width=\"900\"\n height=\"600\"\n viewBox=\"0 0 900 600\"\n style=\"position: absolute; left: 0; top: 0\"\n >\n <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n </svg>\n </nve-viewport>\n </div>\n `\n};\n\n/**\n * @summary Viewport navigation helpers let application logic animate specific content regions into view.\n */\nexport const ProgrammaticNavigation = {\n render: () => html`\n <div nve-layout=\"column gap:sm align:horizontal-stretch\" style=\"height: 420px\">\n <div nve-layout=\"row align:center\">\n <nve-button-group container=\"rounded\" behavior-select=\"single\" aria-label=\"Navigate to workflow region\">\n <nve-button data-viewport-region=\"viewport-region-ingest\">Ingest</nve-button>\n <nve-button data-viewport-region=\"viewport-region-train\">Train</nve-button>\n <nve-button data-viewport-region=\"viewport-region-deploy\">Deploy</nve-button>\n </nve-button-group>\n </div>\n\n <nve-viewport id=\"viewport-reveal-demo\" autofit fit-inset=\"24\" style=\"flex: 1; --min-height: 0\">\n <nve-viewport-gridlines step=\"40\"></nve-viewport-gridlines>\n\n <svg\n aria-hidden=\"true\"\n width=\"500\"\n height=\"320\"\n viewBox=\"0 0 500 320\"\n style=\"position: absolute; left: 380px; top: 144px\"\n >\n <path\n d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\"\n fill=\"none\"\n stroke=\"var(--nve-ref-border-color-emphasis)\"\n stroke-width=\"4\"\n ></path>\n </svg>\n\n <nve-card id=\"viewport-region-ingest\" style=\"position: absolute; left: 80px; top: 80px; width: 320px\">\n <nve-card-header><h2 nve-text=\"heading sm bold\">Ingest</h2></nve-card-header>\n <nve-card-content>\n <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Validate and prepare the dataset.</p>\n </nve-card-content>\n </nve-card>\n <nve-card id=\"viewport-region-train\" style=\"position: absolute; left: 480px; top: 240px; width: 320px\">\n <nve-card-header><h2 nve-text=\"heading sm bold\">Train</h2></nve-card-header>\n <nve-card-content>\n <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Run and compare model experiments.</p>\n </nve-card-content>\n </nve-card>\n <nve-card id=\"viewport-region-deploy\" style=\"position: absolute; left: 880px; top: 400px; width: 320px\">\n <nve-card-header><h2 nve-text=\"heading sm bold\">Deploy</h2></nve-card-header>\n <nve-card-content>\n <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Promote the selected model.</p>\n </nve-card-content>\n </nve-card>\n </nve-viewport>\n </div>\n\n <script type=\"module\">\n const viewport = document.querySelector('#viewport-reveal-demo');\n const buttons = Array.from(document.querySelectorAll('[data-viewport-region]'));\n const framing = 80;\n\n buttons.forEach(button => {\n button.addEventListener('click', () => {\n const region = viewport.querySelector('#' + button.dataset.viewportRegion);\n viewport.reveal(\n {\n x: region.offsetLeft - framing,\n y: region.offsetTop - framing,\n width: region.offsetWidth + framing * 2,\n height: region.offsetHeight + framing * 2\n },\n { animated: true, duration: 500 }\n );\n });\n });\n </script>\n `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"tags": []
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
|
-
"id": "viewport-
|
|
61
|
-
"name": "
|
|
60
|
+
"id": "viewport-programmatic-navigation",
|
|
61
|
+
"name": "ProgrammaticNavigation",
|
|
62
62
|
"template": "<div nve-layout=\"column gap:sm align:horizontal-stretch\" style=\"height: 420px\">\n <div nve-layout=\"row align:center\">\n <nve-button-group container=\"rounded\" behavior-select=\"single\" aria-label=\"Navigate to workflow region\">\n <nve-button data-viewport-region=\"viewport-region-ingest\">Ingest</nve-button>\n <nve-button data-viewport-region=\"viewport-region-train\">Train</nve-button>\n <nve-button data-viewport-region=\"viewport-region-deploy\">Deploy</nve-button>\n </nve-button-group>\n </div>\n <nve-viewport id=\"viewport-reveal-demo\" autofit fit-inset=\"24\" style=\"flex: 1; --min-height: 0\">\n <nve-viewport-gridlines step=\"40\"></nve-viewport-gridlines>\n <svg aria-hidden=\"true\" width=\"500\" height=\"320\" viewBox=\"0 0 500 320\" style=\"position: absolute; left: 380px; top: 144px\">\n <path d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"4\"></path>\n </svg>\n <nve-card id=\"viewport-region-ingest\" style=\"position: absolute; left: 80px; top: 80px; width: 320px\">\n <nve-card-header><h2 nve-text=\"heading sm bold\">Ingest</h2></nve-card-header>\n <nve-card-content>\n <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Validate and prepare the dataset.</p>\n </nve-card-content>\n </nve-card>\n <nve-card id=\"viewport-region-train\" style=\"position: absolute; left: 480px; top: 240px; width: 320px\">\n <nve-card-header><h2 nve-text=\"heading sm bold\">Train</h2></nve-card-header>\n <nve-card-content>\n <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Run and compare model experiments.</p>\n </nve-card-content>\n </nve-card>\n <nve-card id=\"viewport-region-deploy\" style=\"position: absolute; left: 880px; top: 400px; width: 320px\">\n <nve-card-header><h2 nve-text=\"heading sm bold\">Deploy</h2></nve-card-header>\n <nve-card-content>\n <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Promote the selected model.</p>\n </nve-card-content>\n </nve-card>\n </nve-viewport>\n</div>\n<script type=\"module\">\n const viewport = document.querySelector(\"#viewport-reveal-demo\");\n const buttons = Array.from(document.querySelectorAll(\"[data-viewport-region]\"));\n const framing = 80;\n buttons.forEach((button) => {\n button.addEventListener(\"click\", () => {\n const region = viewport.querySelector(\"#\" + button.dataset.viewportRegion);\n viewport.reveal(\n {\n x: region.offsetLeft - framing,\n y: region.offsetTop - framing,\n width: region.offsetWidth + framing * 2,\n height: region.offsetHeight + framing * 2,\n },\n { animated: true, duration: 500 },\n );\n });\n });\n</script>\n",
|
|
63
63
|
"summary": "Viewport navigation helpers let application logic animate specific content regions into view.",
|
|
64
64
|
"description": "",
|
package/dist/week/week2.js
CHANGED