@dso-toolkit/core 97.0.0 → 97.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle/dso-action-list-item.js +1 -1
- package/dist/bundle/dso-action-list.js +1 -1
- package/dist/bundle/dso-banner.js +1 -1
- package/dist/bundle/dso-document-component.js +1 -1
- package/dist/bundle/dso-legend.js +1 -1
- package/dist/bundle/dso-map-controls.js +59 -20
- package/dist/bundle/dso-viewer-grid.js +14 -4
- package/dist/bundle/dsot-document-component-demo.js +1 -1
- package/dist/bundle/{p-B41mHKWC.js → p-C2l5d-V9.js} +3 -3
- package/dist/cjs/dso-action-list-item.cjs.entry.js +1 -1
- package/dist/cjs/dso-action-list.cjs.entry.js +1 -1
- package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js +3 -3
- package/dist/cjs/dso-banner.cjs.entry.js +1 -1
- package/dist/cjs/dso-legend.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-controls.cjs.entry.js +58 -19
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +13 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/action-list/action-list.css +1 -1
- package/dist/collection/components/action-list/components/action-list-item.css +1 -1
- package/dist/collection/components/banner/banner.css +2 -2
- package/dist/collection/components/document-component/document-component.js +3 -3
- package/dist/collection/components/legend/legend.css +1 -1
- package/dist/collection/components/map-controls/map-controls.js +67 -19
- package/dist/collection/components/viewer-grid/components/main-panel.js +2 -2
- package/dist/collection/components/viewer-grid/viewer-grid.css +125 -33
- package/dist/collection/components/viewer-grid/viewer-grid.js +31 -1
- package/dist/components/document-component.js +1 -1
- package/dist/components/dso-action-list-item.js +1 -1
- package/dist/components/dso-action-list.js +1 -1
- package/dist/components/dso-banner.js +1 -1
- package/dist/components/dso-legend.js +1 -1
- package/dist/components/dso-map-controls.js +1 -1
- package/dist/components/dso-viewer-grid.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/p-6c41b0a9.entry.js +1 -0
- package/dist/dso-toolkit/{p-a6a4c4a8.entry.js → p-75e5057e.entry.js} +1 -1
- package/dist/dso-toolkit/p-7f3898d7.entry.js +1 -0
- package/dist/dso-toolkit/p-869027bc.entry.js +1 -0
- package/dist/dso-toolkit/{p-65c7a604.entry.js → p-d87dd7c8.entry.js} +1 -1
- package/dist/dso-toolkit/{p-bb1f4780.entry.js → p-dabed551.entry.js} +1 -1
- package/dist/dso-toolkit/{p-b257edd9.entry.js → p-f066244e.entry.js} +1 -1
- package/dist/esm/dso-action-list-item.entry.js +1 -1
- package/dist/esm/dso-action-list.entry.js +1 -1
- package/dist/esm/dso-annotation-locatie_2.entry.js +3 -3
- package/dist/esm/dso-banner.entry.js +1 -1
- package/dist/esm/dso-legend.entry.js +1 -1
- package/dist/esm/dso-map-controls.entry.js +58 -19
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/dso-viewer-grid.entry.js +13 -4
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/map-controls/map-controls.d.ts +6 -0
- package/dist/types/components/viewer-grid/components/main-panel.d.ts +2 -1
- package/dist/types/components/viewer-grid/viewer-grid.d.ts +6 -0
- package/dist/types/components.d.ts +11 -0
- package/package.json +3 -3
- package/dist/dso-toolkit/p-483af9df.entry.js +0 -1
- package/dist/dso-toolkit/p-49b2bbb1.entry.js +0 -1
- package/dist/dso-toolkit/p-9f1f2fa7.entry.js +0 -1
|
@@ -39,7 +39,7 @@ const FilterPanel = ({ open, title, ref, dsoCloseFilterPanel, }) => {
|
|
|
39
39
|
return (index.h("dialog", { class: "filter-panel", ref: ref, inert: !open, "aria-label": label }, open && (index.h(index.Fragment, null, index.h("h3", { class: { "sr-only": !title } }, label), index.h("dso-icon-button", { class: "dso-close", icon: "cross", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseFilterPanel }), index.h("slot", { name: "filter-panel" })))));
|
|
40
40
|
};
|
|
41
41
|
|
|
42
|
-
const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (index.h("div", { class: clsx.clsx("dso-main-panel", {
|
|
42
|
+
const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, printFilterPanel, }) => (index.h("div", { class: clsx.clsx("dso-main-panel", {
|
|
43
43
|
compact: !tabView && documentPanelOpen && !mainPanelExpanded,
|
|
44
44
|
contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,
|
|
45
45
|
expanded: !tabView && documentPanelOpen && mainPanelExpanded,
|
|
@@ -48,14 +48,14 @@ const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, ma
|
|
|
48
48
|
if (e.propertyName === "flex-basis") {
|
|
49
49
|
dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });
|
|
50
50
|
}
|
|
51
|
-
} }, !tabView && documentPanelOpen && (index.h("div", { class: "toggle-button" }, index.h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))), index.h("div", { class: clsx.clsx("content", { invisible: mainPanelHidden }) }, index.h("slot", { name: "main" }))));
|
|
51
|
+
} }, !tabView && documentPanelOpen && (index.h("div", { class: "toggle-button" }, index.h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))), index.h("div", { class: clsx.clsx("content", { invisible: mainPanelHidden }) }, printFilterPanel, index.h("slot", { name: "main" }))));
|
|
52
52
|
|
|
53
53
|
const Overlay = ({ ref, dsoCloseOverlay }) => (index.h("dialog", { class: "overlay", ref: ref, onCancel: (e) => {
|
|
54
54
|
e.preventDefault();
|
|
55
55
|
dsoCloseOverlay(e);
|
|
56
56
|
} }, index.h("dso-icon-button", { class: "overlay-close-button", icon: "cross", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseOverlay }), index.h("slot", { name: "overlay" })));
|
|
57
57
|
|
|
58
|
-
const viewerGridCss = () => `*, *::after, *::before { box-sizing: border-box; } :host .overlay { block-size: calc(100% - 32px); margin-block: 16px; margin-inline: auto 16px; } :host .dso-main-panel { transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in; } button { -webkit-appearance: button; color: inherit; cursor: pointer; font: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; overflow: visible; text-transform: none; } button[disabled] { cursor: default; } button::-moz-focus-inner { border: 0; padding: 0; } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: rect(0 0 0 0); } .overlay-close-button { position: absolute; line-height: 1; inset-block-start: 8px; inset-inline-end: 16px; } .content.invisible { visibility: hidden; } .viewer-grid-columns { position: relative; } .dso-main-panel .content, .dso-document-panel .content { block-size: 100%; padding-block: 0; padding-inline: 16px; } .dso-main-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed { inset-inline-start: -432px; } .dso-main-panel.compact, .dso-main-panel.contracted { flex-shrink: unset; flex-grow: unset; position: absolute; transition: none; } .dso-main-panel.expanded.collapsed { position: absolute; block-size: 100%; } .dso-main-panel .sizing-buttons, .dso-main-panel .toggle-button { inset-inline-start: calc(100% + 1px); transition: inset-inline-start 200ms ease-in; padding-block: 0 8px; padding-inline: 0 4px; } .dso-main-panel .toggle-button { --_dt-icon-button-border-start-start-radius: 0; --_dt-icon-button-border-end-start-radius: 0; } .dso-document-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-document-panel .sizing-buttons { inset-block-start: auto; inset-block-end: 16px; inset-inline-end: calc(100% + 1px); transition: inset-inline-end 200ms ease-in; padding-block: 0 8px; padding-inline: 4px 0; } .dso-document-panel .sizing-buttons .shrink, .dso-document-panel .sizing-buttons .expand { --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px; --_dt-icon-button-border-start-end-radius: 0; --_dt-icon-button-border-end-end-radius: 0; } .sizing-buttons, .toggle-button { overflow-x: hidden; position: absolute; inset-block-start: 16px; inline-size: 44px; z-index: -1; } .map { block-size: 100%; inline-size: 100%; overflow: hidden; position: relative; } .filter-panel, .overlay { background-color: #fff; border: 0; block-size: 100%; margin-block: 0; max-block-size: 100vh; overflow-y: auto; z-index: 101; } .filter-panel { display: block; position: absolute; padding-block: 8px; padding-inline: 16px; inset-block-start: 0; block-size: 100%; inset-inline-start: -380px; inline-size: 100%; transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media screen and (min-width: 992px) { .filter-panel { max-inline-size: 380px; } } .filter-panel[open] { inset-inline-start: 0; box-shadow: none; border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 { color: #275937; } .filter-panel .dso-close { --_dso-icon-button-tertiary-color: #191919; position: absolute; inset-block-start: 20px; inset-inline-end: 20px; } .overlay { padding-block: 40px 8px; padding-inline: 16px; inset-inline-end: 0; inline-size: 624px; } .overlay::backdrop { background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) { .overlay { inline-size: 100vw; } } @media screen and (min-width: 1032px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 375px; min-inline-size: 0; max-inline-size: 375px; } } @media screen and (min-width: 1032px) and (max-width: 375px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 0; transition: none; } } @media screen and (min-width: 1032px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 624px; min-inline-size: 375px; max-inline-size: 624px; } } @media screen and (min-width: 1032px) and (max-width: 624px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 375px; transition: none; } } @media screen and (min-width: 1032px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1024px; } } @media screen and (min-width: 1032px) and (max-width: 768px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 768px; transition: none; } } @media screen and (min-width: 1032px) { :host { display: flex; flex-direction: column; block-size: 100vh; overflow: clip; position: relative; } :host .dso-main-panel.compact, :host .dso-main-panel.expanded { flex-basis: unset; min-inline-size: unset; max-inline-size: unset; inline-size: 440px; } :host .viewer-grid-columns { display: flex; overflow: hidden; flex-grow: 1; } .dso-main-panel, .dso-document-panel { box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4); } .dso-main-panel .content, .dso-document-panel .content { overflow-y: auto; } .filter-panel { margin-inline: 0 auto; inline-size: calc(100vw - 40px); } .filter-panel[open] { border-inline-end: 1px solid #e5e5e5; } .overlay { box-shadow: -2px 0 5px #666; margin-inline: auto 0; } } @media screen and (min-width: 1032px) and (max-width: 1031.99px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; max-inline-size: calc(100vw - 380px); } .filter-panel { inline-size: 380px; inset-inline-start: -380px; } } @media screen and (max-width: 1031.99px) { .dso-navbar { min-block-size: 32px; } .dso-navbar .dso-navbar-header { float: inline-start; } .dso-navbar .dso-navbar-toggle { border-radius: 4px; min-inline-size: auto; padding-block: 5px; padding-inline: 0; } .dso-navbar .dso-navbar-toggle dso-icon { margin-inline-start: 8px; margin-inline-end: 8px; } } @media screen and (max-width: 1031.99px) and (min-width: 992px) { .dso-navbar .dso-navbar-toggle { display: none; } } @media screen and (max-width: 1031.99px) { .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child { margin-inline-end: 8rem; } .dso-nav { list-style: none; margin-block-end: 0; padding-inline-start: 0; } .dso-nav > li > button { border: 0; background-color: transparent; } .dso-nav > li > a, .dso-nav > li > button { display: block; } .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited, .dso-nav > li > button, .dso-nav > li > button:hover, .dso-nav > li > button:focus, .dso-nav > li > button:visited { color: #275937; } .dso-nav > li.dso-active > a, .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a, .dso-nav > li.is-active > button { border-block-end: 4px solid #8b4a6a; font-weight: bold; } .dso-nav.dso-nav-main > li { display: inline-block; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { text-decoration: none; } .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active, .dso-nav.dso-nav-main > li > button:hover, .dso-nav.dso-nav-main > li > button:focus-visible, .dso-nav.dso-nav-main > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { font-size: 1.25em; line-height: 1; margin-block-start: 8px; padding-block: 8px 7px; padding-inline: 16px; } .dso-nav.dso-nav-sub > li { display: inline-block; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { text-decoration: none; } .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active, .dso-nav.dso-nav-sub > li > button:hover, .dso-nav.dso-nav-sub > li > button:focus-visible, .dso-nav.dso-nav-sub > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { font-size: 1rem; margin-block-start: 4px; padding-block: 4px 3px; padding-inline: 8px; } .dso-navbar { padding-inline: 16px; } .dso-nav { border-block-end: 1px solid #ccc; display: flex; gap: 16px; margin-block-start: 0; inline-size: calc(100vw - 32px); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); float: var(--_dt-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dt-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-tertiary:hover { background-color: var(--_dso-button-tertiary-hover-background-color, ); border-color: var(--_dso-button-tertiary-hover-border-color, ); color: var(--_dso-button-tertiary-hover-color, #275937); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary:active { background-color: var(--_dso-button-tertiary-active-background-color, ); border-color: var(--_dso-button-tertiary-active-border-color, ); color: var(--_dso-button-tertiary-active-color, #173521); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover { background-color: var(--_dso-button-tertiary-disabled-background-color, ); border-color: var(--_dso-button-tertiary-disabled-border-color, ); color: var(--_dso-button-tertiary-disabled-color, #afcf9d); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary.dso-small { line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { padding-block: 9px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dt-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; } .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { font-weight: 300; } .overlay { inline-size: calc(100vw - 32px); } .filter-panel, .overlay { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media screen and (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } }`;
|
|
58
|
+
const viewerGridCss = () => `*, *::after, *::before { box-sizing: border-box; } :host .overlay { block-size: calc(100% - 32px); margin-block: 16px; margin-inline: auto 16px; } :host .dso-main-panel { transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in; } button { -webkit-appearance: button; color: inherit; cursor: pointer; font: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; overflow: visible; text-transform: none; } button[disabled] { cursor: default; } button::-moz-focus-inner { border: 0; padding: 0; } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: rect(0 0 0 0); } .overlay-close-button { position: absolute; line-height: 1; inset-block-start: 8px; inset-inline-end: 16px; } .content.invisible { visibility: hidden; } .viewer-grid-columns { position: relative; } .dso-main-panel .content, .dso-document-panel .content { block-size: 100%; padding-block: 0; padding-inline: 16px; } .dso-main-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed { inset-inline-start: -432px; } .dso-main-panel.compact, .dso-main-panel.contracted { flex-shrink: unset; flex-grow: unset; position: absolute; transition: none; } .dso-main-panel.expanded.collapsed { position: absolute; block-size: 100%; } .dso-main-panel .sizing-buttons, .dso-main-panel .toggle-button { inset-inline-start: calc(100% + 1px); transition: inset-inline-start 200ms ease-in; padding-block: 0 8px; padding-inline: 0 4px; } .dso-main-panel .toggle-button { --_dt-icon-button-border-start-start-radius: 0; --_dt-icon-button-border-end-start-radius: 0; } .dso-document-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-document-panel .sizing-buttons { inset-block-start: auto; inset-block-end: 16px; inset-inline-end: calc(100% + 1px); transition: inset-inline-end 200ms ease-in; padding-block: 0 8px; padding-inline: 4px 0; } .dso-document-panel .sizing-buttons .shrink, .dso-document-panel .sizing-buttons .expand { --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px; --_dt-icon-button-border-start-end-radius: 0; --_dt-icon-button-border-end-end-radius: 0; } .sizing-buttons, .toggle-button { overflow-x: hidden; position: absolute; inset-block-start: 16px; inline-size: 44px; z-index: -1; } .map-area { block-size: 100%; inline-size: 100%; overflow: hidden; position: relative; } .map { position: absolute; inset: 0; overflow: hidden; } slot[name=legend] { display: block; position: absolute; inset-block-end: 16px; inset-inline-start: 16px; z-index: 1; } .filter-panel, .overlay { background-color: #fff; border: 0; block-size: 100%; margin-block: 0; max-block-size: 100vh; overflow-y: auto; z-index: 101; } .filter-panel { display: block; position: absolute; padding-block: 8px; padding-inline: 16px; inset-block-start: 0; block-size: 100%; inset-inline-start: -380px; inline-size: 100%; transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media screen and (min-width: 992px) { .filter-panel { max-inline-size: 380px; } } .filter-panel[open] { inset-inline-start: 0; box-shadow: none; border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 { color: #275937; } .filter-panel .dso-close { --_dso-icon-button-tertiary-color: #191919; position: absolute; inset-block-start: 20px; inset-inline-end: 20px; } .overlay { padding-block: 40px 8px; padding-inline: 16px; inset-inline-end: 0; inline-size: 624px; } .overlay::backdrop { background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) { .overlay { inline-size: 100vw; } } @media screen and (min-width: 1032px) { :host(:not([print])[main-size=small]) .dso-main-panel, :host(:not([print])[document-panel-size=small]) .dso-document-panel { flex-basis: 375px; min-inline-size: 0; max-inline-size: 375px; } } @media screen and (min-width: 1032px) and (max-width: 375px) { :host(:not([print])[main-size=small]) .dso-main-panel, :host(:not([print])[document-panel-size=small]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 0; transition: none; } } @media screen and (min-width: 1032px) { :host(:not([print])[main-size=medium]) .dso-main-panel, :host(:not([print])[document-panel-size=medium]) .dso-document-panel { flex-basis: 624px; min-inline-size: 375px; max-inline-size: 624px; } } @media screen and (min-width: 1032px) and (max-width: 624px) { :host(:not([print])[main-size=medium]) .dso-main-panel, :host(:not([print])[document-panel-size=medium]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 375px; transition: none; } } @media screen and (min-width: 1032px) { :host(:not([print])[main-size=large]) .dso-main-panel, :host(:not([print])[document-panel-size=large]) .dso-document-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1024px; } } @media screen and (min-width: 1032px) and (max-width: 768px) { :host(:not([print])[main-size=large]) .dso-main-panel, :host(:not([print])[document-panel-size=large]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 768px; transition: none; } } @media screen and (min-width: 1032px) { :host(:not([print])) { display: flex; flex-direction: column; block-size: 100vh; overflow: clip; position: relative; } :host(:not([print])) .dso-main-panel.compact, :host(:not([print])) .dso-main-panel.expanded { flex-basis: unset; min-inline-size: unset; max-inline-size: unset; inline-size: 440px; } :host(:not([print])) .viewer-grid-columns { display: flex; overflow: hidden; flex-grow: 1; } :host(:not([print])) .dso-main-panel, :host(:not([print])) .dso-document-panel { box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4); } :host(:not([print])) .dso-main-panel .content, :host(:not([print])) .dso-document-panel .content { overflow-y: auto; } :host(:not([print])) .filter-panel { margin-inline: 0 auto; inline-size: calc(100vw - 40px); } :host(:not([print])) .filter-panel[open] { border-inline-end: 1px solid #e5e5e5; } :host(:not([print])) .overlay { box-shadow: -2px 0 5px #666; } } @media screen and (min-width: 1032px) and (max-width: 1031.99px) { :host(:not([print])[filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; max-inline-size: calc(100vw - 380px); } :host(:not([print])) .filter-panel { inline-size: 380px; inset-inline-start: -380px; } } @media screen and (max-width: 1031.99px) { .dso-navbar { min-block-size: 32px; } .dso-navbar .dso-navbar-header { float: inline-start; } .dso-navbar .dso-navbar-toggle { border-radius: 4px; min-inline-size: auto; padding-block: 5px; padding-inline: 0; } .dso-navbar .dso-navbar-toggle dso-icon { margin-inline-start: 8px; margin-inline-end: 8px; } } @media screen and (max-width: 1031.99px) and (min-width: 992px) { .dso-navbar .dso-navbar-toggle { display: none; } } @media screen and (max-width: 1031.99px) { .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child { margin-inline-end: 8rem; } .dso-nav { list-style: none; margin-block-end: 0; padding-inline-start: 0; } .dso-nav > li > button { border: 0; background-color: transparent; } .dso-nav > li > a, .dso-nav > li > button { display: block; } .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited, .dso-nav > li > button, .dso-nav > li > button:hover, .dso-nav > li > button:focus, .dso-nav > li > button:visited { color: #275937; } .dso-nav > li.dso-active > a, .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a, .dso-nav > li.is-active > button { border-block-end: 4px solid #8b4a6a; font-weight: bold; } .dso-nav.dso-nav-main > li { display: inline-block; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { text-decoration: none; } .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active, .dso-nav.dso-nav-main > li > button:hover, .dso-nav.dso-nav-main > li > button:focus-visible, .dso-nav.dso-nav-main > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { font-size: 1.25em; line-height: 1; margin-block-start: 8px; padding-block: 8px 7px; padding-inline: 16px; } .dso-nav.dso-nav-sub > li { display: inline-block; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { text-decoration: none; } .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active, .dso-nav.dso-nav-sub > li > button:hover, .dso-nav.dso-nav-sub > li > button:focus-visible, .dso-nav.dso-nav-sub > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { font-size: 1rem; margin-block-start: 4px; padding-block: 4px 3px; padding-inline: 8px; } .dso-navbar { padding-inline: 16px; } .dso-nav { border-block-end: 1px solid #ccc; display: flex; gap: 16px; margin-block-start: 0; inline-size: calc(100vw - 32px); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); float: var(--_dt-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dt-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-tertiary:hover { background-color: var(--_dso-button-tertiary-hover-background-color, ); border-color: var(--_dso-button-tertiary-hover-border-color, ); color: var(--_dso-button-tertiary-hover-color, #275937); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary:active { background-color: var(--_dso-button-tertiary-active-background-color, ); border-color: var(--_dso-button-tertiary-active-border-color, ); color: var(--_dso-button-tertiary-active-color, #173521); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover { background-color: var(--_dso-button-tertiary-disabled-background-color, ); border-color: var(--_dso-button-tertiary-disabled-border-color, ); color: var(--_dso-button-tertiary-disabled-color, #afcf9d); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary.dso-small { line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { padding-block: 9px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dt-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; } .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { font-weight: 300; } :host(:not([print])) .overlay { inline-size: calc(100vw - 32px); } :host(:not([print])) .filter-panel, :host(:not([print])) .overlay { max-inline-size: 100vw; inset-block-start: 0; } :host(:not([print])) .filter-panel { margin-inline: 0; inset-inline-start: -100vw; inline-size: 100vw; } } @media screen and (min-width: 992px) { :host(:not([print])[filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } } :host([print]) { display: flex; flex-direction: column; block-size: auto; overflow: visible; } :host([print]) .viewer-grid-columns { display: flex; flex-direction: column; overflow: visible; } :host([print]) .map-area { display: flex; flex-direction: row; align-items: flex-start; block-size: auto; overflow: visible; flex-shrink: 0; order: -1; } :host([print]) .map { flex: 1; min-inline-size: 0; align-self: stretch; min-block-size: 400px; position: relative; inset: auto; } :host([print]) slot[name=legend] { position: relative; inset: auto; flex-shrink: 0; --_dso-legend-content-max-block-size: none; } :host([print]) .dso-main-panel { block-size: auto; box-shadow: none; inline-size: 100%; max-inline-size: none; min-inline-size: 0; position: relative; margin-inline-start: 0px; } :host([print]) .dso-main-panel .content { align-items: flex-start; block-size: auto; display: flex; flex-direction: row; gap: 32px; overflow-y: visible; } :host([print]) .dso-main-panel .content slot[name=main] { display: block; flex: 1; min-inline-size: 0; } :host([print]) .filter-panel { block-size: auto; box-shadow: none; flex-shrink: 0; inline-size: 380px; margin-inline: 0; max-inline-size: none; min-inline-size: 0; position: relative; transition: none; } :host([print]) .dso-document-panel { block-size: auto; box-shadow: none; inline-size: 100%; max-inline-size: none; min-inline-size: 0; position: static; } :host([print]) .dso-document-panel .content { block-size: auto; overflow-y: visible; }`;
|
|
59
59
|
|
|
60
60
|
const resizeObserver = new ResizeObserver(index$1.debounce(([entry]) => {
|
|
61
61
|
const shadowRoot = entry?.target.getRootNode();
|
|
@@ -92,6 +92,10 @@ const ViewerGrid = class {
|
|
|
92
92
|
* Set to true when document panel should show.
|
|
93
93
|
*/
|
|
94
94
|
this.documentPanelOpen = false;
|
|
95
|
+
/**
|
|
96
|
+
* Set to true to apply print layout programmatically, e.g. for print preview.
|
|
97
|
+
*/
|
|
98
|
+
this.print = false;
|
|
95
99
|
/**
|
|
96
100
|
* Size of the panel when component loads.
|
|
97
101
|
*
|
|
@@ -188,6 +192,9 @@ const ViewerGrid = class {
|
|
|
188
192
|
});
|
|
189
193
|
}
|
|
190
194
|
}
|
|
195
|
+
renderFilterPanel() {
|
|
196
|
+
return (index.h(FilterPanel, { open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) }));
|
|
197
|
+
}
|
|
191
198
|
connectedCallback() {
|
|
192
199
|
window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
|
|
193
200
|
}
|
|
@@ -209,7 +216,9 @@ const ViewerGrid = class {
|
|
|
209
216
|
}
|
|
210
217
|
}
|
|
211
218
|
render() {
|
|
212
|
-
return (index.h(index.Fragment, { key: '
|
|
219
|
+
return (index.h(index.Fragment, { key: '26216b09a538c9527b0fb3c58d23924823664819' }, index.h("slot", { key: 'afe7a843a065fc8ac415cf94da9e11ca92820f3a', name: "top-bar" }), index.h("div", { key: 'c9f2ac9868069fa3a90c5b4c9fa25959085d94b4', class: "viewer-grid-columns" }, this.tabView && (index.h("nav", { key: 'ac1389f48e0618fcc213ccb14371cc31ab53f8ab', class: "dso-navbar" }, index.h("ul", { key: '30af55082ca83de47cf5ffeec1bd4670594d8773', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (index.h("li", { key: tab, class: clsx.clsx({ "dso-active": this.activeTab === tab }) }, index.h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (index.h(MainPanel, { key: 'cba32eb46e34c894e303dd4fdf85c1079249d562', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd, printFilterPanel: !this.tabView && this.filterPanelOpen && this.print ? this.renderFilterPanel() : undefined })), (!this.tabView || (this.tabView && this.activeTab === "search")) && !this.print && this.renderFilterPanel(), (!this.tabView || (this.tabView && this.activeTab === "map") || this.print) && (index.h("div", { key: '44c4697c437a2ccf61a570c40f349f99bbd9baf5', class: "map-area" }, index.h("div", { key: 'e10b51a4a8e96b8b0417f2351134ec3de7a1641d', class: "map", ref: (element) => (this.mapElement = element) }, index.h("slot", { key: 'd240e2e04ccd05dbd1314ee4c04a8af1bc4076a3', name: "map" })), index.h("slot", { key: '6ae2b90c8d7fe7f68d4a4eb9bd01c6054659f8de', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
|
|
220
|
+
(this.tabView && this.activeTab === "document") ||
|
|
221
|
+
this.print) && (index.h(DocumentPanel, { key: 'fb9680a12c8a9d29627af0583bfc7f5157448619', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), index.h(Overlay, { key: 'e92e5a979b4529ae948c4c3d47af3fa40a0460f4', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
|
|
213
222
|
}
|
|
214
223
|
get host() { return index.getElement(this); }
|
|
215
224
|
static get watchers() { return {
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy(JSON.parse("[[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"showBesluitversie\":[4,\"show-besluitversie\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[{\"jsonFileWatcher\":0}],\"openDefault\":[{\"openDefaultWatcher\":0}]}]]],[\"dso-accordion-section.cjs\",[[257,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"activatable\":[516],\"active\":[516],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-list-button.cjs\",[[257,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-advanced-select.cjs\",[[17,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-legend-item.cjs\",[[257,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[513,\"disabled-message\"],\"activatable\":[516],\"active\":[516],\"_mode\":[513],\"showOptions\":[32]}]]],[\"dso-map-controls.cjs\",[[257,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[{\"watchOpen\":0}]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[262,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[{\"suggestionsWatcher\":0}]}]]],[\"dso-legend.cjs\",[[257,\"dso-legend\",{\"tabItems\":[16]}]]],[\"dso-project-item.cjs\",[[257,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-survey-rating.cjs\",[[1,\"dso-survey-rating\"]]],[\"dso-legend-group.cjs\",[[257,\"dso-legend-group\",{\"mode\":[513]},null,{\"mode\":[{\"handleModeChange\":0}]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-onboarding-tip.cjs\",[[257,\"dso-onboarding-tip\",{\"placement\":[1],\"ready\":[32],\"popoverOpen\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[257,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-banner.cjs\",[[257,\"dso-banner\",{\"status\":[513],\"compact\":[516],\"icon\":[516]}]]],[\"dso-card.cjs\",[[257,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-document-card.cjs\",[[257,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-header.cjs\",[[257,\"dso-header\",{\"mainMenu\":[16],\"compact\":[1],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"visibleMenuItemsCount\":[32],\"dropdownOptionsOffset\":[32],\"open\":[32]},null,{\"mainMenu\":[{\"mainMenuChanged\":0}]}]]],[\"dso-history-item.cjs\",[[257,\"dso-history-item\",{\"type\":[513],\"href\":[513],\"current\":[516]}]]],[\"dso-label_3.cjs\",[[1,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[257,\"dso-label\",{\"compact\":[516],\"removable\":[516],\"status\":[513],\"truncate\":[516],\"removeHover\":[32],\"removeFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[{\"watchRemovable\":0}],\"truncate\":[{\"watchTruncate\":0}]}],[262,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]],[\"dso-map-layer.cjs\",[[257,\"dso-map-layer\",{\"activatable\":[516],\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-layer-object.cjs\",[[257,\"dso-map-layer-object\",{\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-message.cjs\",[[257,\"dso-map-message\",{\"variant\":[513],\"hasActions\":[32]}]]],[\"dso-plekinfo-card.cjs\",[[257,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink.cjs\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-tijdreis-banner.cjs\",[[257,\"dso-tijdreis-banner\"]]],[\"dso-accordion.cjs\",[[257,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list.cjs\",[[257,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-card-container.cjs\",[[257,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information.cjs\",[[257,\"dso-contact-information\"]]],[\"dso-cursor-tooltip.cjs\",[[257,\"dso-cursor-tooltip\"]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-dropdown-menu.cjs\",[[257,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4]},[[8,\"click\",\"onClick\"]]]]],[\"dso-highlight-box.cjs\",[[257,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"green\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[514],\"max\":[514],\"value\":[514],\"step\":[514],\"label\":[513],\"unit\":[513],\"description\":[513]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-segmented-button.cjs\",[[1,\"dso-segmented-button\",{\"groupName\":[513,\"group-name\"],\"options\":[16],\"label\":[513],\"required\":[516],\"activeOption\":[16]}]]],[\"dso-tab.cjs\",[[257,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[257,\"dso-tabs\"]]],[\"dso-tooltip.cjs\",[[257,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[{\"watchPosition\":0}],\"strategy\":[{\"watchStrategy\":0}],\"active\":[{\"watchActive\":0}]}]]],[\"dso-viewer-grid.cjs\",[[257,\"dso-viewer-grid\",{\"filterPanelTitle\":[513,\"filter-panel-title\"],\"filterPanelOpen\":[516,\"filter-panel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[{\"documentPanelOpenWatcher\":0}],\"filterPanelOpen\":[{\"filterPanelOpenWatcher\":0}],\"overlayOpen\":[{\"overlayOpenWatcher\":0}]}]]],[\"dso-button-group.cjs\",[[257,\"dso-button-group\",{\"direction\":[513]}]]],[\"dso-icon_2.cjs\",[[1,\"dso-icon-button\",{\"icon\":[513],\"label\":[513],\"variant\":[513],\"tooltipPlacement\":[513,\"tooltip-placement\"],\"disabled\":[516],\"toggled\":[516],\"setFocus\":[64]}],[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dso-alert_7.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"urlResolver\":[16],\"begripResolver\":[16],\"annotated\":[516],\"state\":[32]},null,{\"content\":[{\"contentWatcher\":0}]}],[257,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[257,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[32],\"modalActive\":[32],\"placeholderHeight\":[32]}],[257,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[257,\"dso-ozon-content-toggletip\",{\"icon\":[513],\"active\":[32]},[[8,\"click\",\"handleWindowClick\"]]],[257,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[257,\"dso-badge\",{\"status\":[513],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32]}]]],[\"dso-annotation-locatie_2.cjs\",[[257,\"dso-document-component\",{\"heading\":[513],\"kop\":[6145],\"inhoud\":[6145],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"badge\":[513],\"badgeStatus\":[513,\"badge-status\"],\"badgeTooltip\":[513,\"badge-tooltip\"],\"label\":[513],\"labelStatus\":[513,\"label-status\"],\"annotated\":[516],\"gereserveerd\":[6145],\"vervallen\":[6145],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[513,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[514]}],[257,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[{\"toggleOpen\":0}]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element.cjs\",[[257,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-scrollable.cjs\",[[257,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-modal.cjs\",[[257,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"closable\":[4],\"ariaId\":[32]}]]],[\"dso-info_3.cjs\",[[262,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[{\"setIndeterminate\":0}]}],[257,\"dso-info\",{\"fixed\":[516],\"active\":[516]}],[257,\"dso-info-button\",{\"active\":[516],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32],\"setFocus\":[64]},[[6,\"focusin\",\"onDocumentFocusIn\"],[7,\"pointerdown\",\"onDocumentPointerDown\"]]]]]]"), options);
|
|
9
|
+
return index.bootstrapLazy(JSON.parse("[[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"showBesluitversie\":[4,\"show-besluitversie\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[{\"jsonFileWatcher\":0}],\"openDefault\":[{\"openDefaultWatcher\":0}]}]]],[\"dso-accordion-section.cjs\",[[257,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"activatable\":[516],\"active\":[516],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-list-button.cjs\",[[257,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-advanced-select.cjs\",[[17,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-legend-item.cjs\",[[257,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[513,\"disabled-message\"],\"activatable\":[516],\"active\":[516],\"_mode\":[513],\"showOptions\":[32]}]]],[\"dso-map-controls.cjs\",[[257,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},[[0,\"transitionend\",\"handleTransitionEnd\"]],{\"open\":[{\"watchOpen\":0}]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[262,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[{\"suggestionsWatcher\":0}]}]]],[\"dso-legend.cjs\",[[257,\"dso-legend\",{\"tabItems\":[16]}]]],[\"dso-project-item.cjs\",[[257,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-survey-rating.cjs\",[[1,\"dso-survey-rating\"]]],[\"dso-legend-group.cjs\",[[257,\"dso-legend-group\",{\"mode\":[513]},null,{\"mode\":[{\"handleModeChange\":0}]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-onboarding-tip.cjs\",[[257,\"dso-onboarding-tip\",{\"placement\":[1],\"ready\":[32],\"popoverOpen\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[257,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-banner.cjs\",[[257,\"dso-banner\",{\"status\":[513],\"compact\":[516],\"icon\":[516]}]]],[\"dso-card.cjs\",[[257,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-document-card.cjs\",[[257,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-header.cjs\",[[257,\"dso-header\",{\"mainMenu\":[16],\"compact\":[1],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"visibleMenuItemsCount\":[32],\"dropdownOptionsOffset\":[32],\"open\":[32]},null,{\"mainMenu\":[{\"mainMenuChanged\":0}]}]]],[\"dso-history-item.cjs\",[[257,\"dso-history-item\",{\"type\":[513],\"href\":[513],\"current\":[516]}]]],[\"dso-label_3.cjs\",[[1,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[257,\"dso-label\",{\"compact\":[516],\"removable\":[516],\"status\":[513],\"truncate\":[516],\"removeHover\":[32],\"removeFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[{\"watchRemovable\":0}],\"truncate\":[{\"watchTruncate\":0}]}],[262,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]],[\"dso-map-layer.cjs\",[[257,\"dso-map-layer\",{\"activatable\":[516],\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-layer-object.cjs\",[[257,\"dso-map-layer-object\",{\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-message.cjs\",[[257,\"dso-map-message\",{\"variant\":[513],\"hasActions\":[32]}]]],[\"dso-plekinfo-card.cjs\",[[257,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink.cjs\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-tijdreis-banner.cjs\",[[257,\"dso-tijdreis-banner\"]]],[\"dso-accordion.cjs\",[[257,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list.cjs\",[[257,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-card-container.cjs\",[[257,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information.cjs\",[[257,\"dso-contact-information\"]]],[\"dso-cursor-tooltip.cjs\",[[257,\"dso-cursor-tooltip\"]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-dropdown-menu.cjs\",[[257,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4]},[[8,\"click\",\"onClick\"]]]]],[\"dso-highlight-box.cjs\",[[257,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"green\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[514],\"max\":[514],\"value\":[514],\"step\":[514],\"label\":[513],\"unit\":[513],\"description\":[513]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-segmented-button.cjs\",[[1,\"dso-segmented-button\",{\"groupName\":[513,\"group-name\"],\"options\":[16],\"label\":[513],\"required\":[516],\"activeOption\":[16]}]]],[\"dso-tab.cjs\",[[257,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[257,\"dso-tabs\"]]],[\"dso-tooltip.cjs\",[[257,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[{\"watchPosition\":0}],\"strategy\":[{\"watchStrategy\":0}],\"active\":[{\"watchActive\":0}]}]]],[\"dso-viewer-grid.cjs\",[[257,\"dso-viewer-grid\",{\"filterPanelTitle\":[513,\"filter-panel-title\"],\"filterPanelOpen\":[516,\"filter-panel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"print\":[516],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[{\"documentPanelOpenWatcher\":0}],\"filterPanelOpen\":[{\"filterPanelOpenWatcher\":0}],\"overlayOpen\":[{\"overlayOpenWatcher\":0}]}]]],[\"dso-button-group.cjs\",[[257,\"dso-button-group\",{\"direction\":[513]}]]],[\"dso-icon_2.cjs\",[[1,\"dso-icon-button\",{\"icon\":[513],\"label\":[513],\"variant\":[513],\"tooltipPlacement\":[513,\"tooltip-placement\"],\"disabled\":[516],\"toggled\":[516],\"setFocus\":[64]}],[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dso-alert_7.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"urlResolver\":[16],\"begripResolver\":[16],\"annotated\":[516],\"state\":[32]},null,{\"content\":[{\"contentWatcher\":0}]}],[257,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[257,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[32],\"modalActive\":[32],\"placeholderHeight\":[32]}],[257,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[257,\"dso-ozon-content-toggletip\",{\"icon\":[513],\"active\":[32]},[[8,\"click\",\"handleWindowClick\"]]],[257,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[257,\"dso-badge\",{\"status\":[513],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32]}]]],[\"dso-annotation-locatie_2.cjs\",[[257,\"dso-document-component\",{\"heading\":[513],\"kop\":[6145],\"inhoud\":[6145],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"badge\":[513],\"badgeStatus\":[513,\"badge-status\"],\"badgeTooltip\":[513,\"badge-tooltip\"],\"label\":[513],\"labelStatus\":[513,\"label-status\"],\"annotated\":[516],\"gereserveerd\":[6145],\"vervallen\":[6145],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[513,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[514]}],[257,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[{\"toggleOpen\":0}]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element.cjs\",[[257,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-scrollable.cjs\",[[257,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-modal.cjs\",[[257,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"closable\":[4],\"ariaId\":[32]}]]],[\"dso-info_3.cjs\",[[262,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[{\"setIndeterminate\":0}]}],[257,\"dso-info\",{\"fixed\":[516],\"active\":[516]}],[257,\"dso-info-button\",{\"active\":[516],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32],\"setFocus\":[64]},[[6,\"focusin\",\"onDocumentFocusIn\"],[7,\"pointerdown\",\"onDocumentPointerDown\"]]]]]]"), options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -242,12 +242,12 @@
|
|
|
242
242
|
inline-size: 1152px;
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
|
-
@media
|
|
245
|
+
@media (min-width: 480px) {
|
|
246
246
|
.banner-inner.icon {
|
|
247
247
|
padding-inline-start: 48px;
|
|
248
248
|
}
|
|
249
249
|
}
|
|
250
|
-
@media
|
|
250
|
+
@media (max-width: 479.01px) {
|
|
251
251
|
.banner-inner.icon {
|
|
252
252
|
padding-block-start: 39px;
|
|
253
253
|
padding-inline: 16px;
|
|
@@ -183,16 +183,16 @@ export class DocumentComponent {
|
|
|
183
183
|
this.label ||
|
|
184
184
|
this.annotated);
|
|
185
185
|
return (h(Host, { key: '5eab063c132771eec2dcb232640e2908d490e6da', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'ca3331fbd327f7a66d409f2139f432a1278966fd', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '77a7286dd5456a2c26a16466db0fe7063a943de6', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '0a384451b0b54c8462c980bfb98c7e0f4e047152', class: "heading" }, h(Heading, { key: 'f71b9e3eeaea520babe074252c530b0f32cba6f6', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '966bcf383d1d85784afd39587d1c1a37d7575cba', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '73ee74f243f11f7872397cdd3a1610e4c510f02b' }, this.notApplicable && h("span", { key: 'c5eb7ada26378297959694f33d933b680d4fcd24', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
|
|
186
|
-
(this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: '980731a4dd7a6637c0b1aadbe75df91327e84614', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '
|
|
186
|
+
(this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: '980731a4dd7a6637c0b1aadbe75df91327e84614', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: 'd945ac5d0035b1b6fe927d256d1992d17fb2db0e', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: 'e2901369816bfec16d4c8452bdf80fdf0c216131' }, h("dso-badge", { key: '2875f2782d5a0cfb37545322f4bba0c30c5956d7', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: 'b1ee5241fe3a1eee69895d62eaabb3f984157e26', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: 'ecaecbb28a436913265dd87a2d70674e42dedfca', class: "addons" }, this.label && (h("dso-label", { key: '8e2e19e943a8151ba9a8f34ff7aadee191925cf0', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '7d9a3bc7700fe8ee95549cc5b21ca4f0d6712f44', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
|
|
187
187
|
current: this.openAnnotation,
|
|
188
188
|
next: !this.openAnnotation,
|
|
189
189
|
scrollRef: this.host,
|
|
190
190
|
originalEvent: e.detail.originalEvent,
|
|
191
|
-
}) }))))))), this.openAnnotation && (h("div", { key: '
|
|
191
|
+
}) }))))))), this.openAnnotation && (h("div", { key: 'b48f9db5cead7a6a1a07ff5eeb309c069715e83b', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'b3b48f67d2582a5340309b7dc3d4a59c69650a71', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
|
|
192
192
|
current: true,
|
|
193
193
|
next: false,
|
|
194
194
|
originalEvent: e,
|
|
195
|
-
}), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '
|
|
195
|
+
}), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '5e55da9ddb5f89a442f1fdbc2b0f4984e10cb837', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: 'c25784cefef8e8e77addc3ac1f234d3847d7c5a6', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: 'a6f4dd13cd73838ca8100180a27813aabddcce00', class: "content", part: "_content" }, h(AantekenAlert, { key: '08f7684931add5db67a8556f4a2153ac57d0aa98', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '029f6b22ee9f126f115f10fa87a5df08dfaf174c', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: '017474565b5b63f4245d1d431279eeec9677eb1c', class: "children-container", part: "_children-container" }, h("slot", { key: '99a7a7f00033526221ec1c8a2ce1f95048399101' }))));
|
|
196
196
|
}
|
|
197
197
|
static get is() { return "dso-document-component"; }
|
|
198
198
|
static get encapsulation() { return "shadow"; }
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
--_dt-scrollable-container-border-end-start-radius: 4px;
|
|
57
57
|
--_dt-scrollable-container-border-end-end-radius: 4px;
|
|
58
58
|
--_dt-scrollable-container-padding-inline: 16px;
|
|
59
|
-
max-block-size: 52vh;
|
|
59
|
+
max-block-size: var(--_dso-legend-content-max-block-size, 52vh);
|
|
60
60
|
border-end-start-radius: 4px;
|
|
61
61
|
border-end-end-radius: 4px;
|
|
62
62
|
}
|
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
2
|
-
if (kind === "a" && !f)
|
|
3
|
-
throw new TypeError("Private accessor was defined without a getter");
|
|
4
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
5
|
-
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
6
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
7
|
-
};
|
|
8
1
|
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
9
2
|
if (kind === "m")
|
|
10
3
|
throw new TypeError("Private method is not writable");
|
|
@@ -14,12 +7,20 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
14
7
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
15
8
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
16
9
|
};
|
|
17
|
-
var
|
|
10
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
11
|
+
if (kind === "a" && !f)
|
|
12
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
13
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
14
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
15
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
16
|
+
};
|
|
17
|
+
var _MapControls_toggleButtonElement, _MapControls_toggleIconButtonElement, _MapControls_closeIconButtonElement, _MapControls_postTransitionTimeout, _MapControls_returnFocusTarget, _MapControls_mapLayersPanelId, _MapControls_mapLayersTitleId;
|
|
18
18
|
import { Fragment, h, } from "@stencil/core";
|
|
19
19
|
import { i18n } from "../../utils/i18n";
|
|
20
20
|
import { translations } from "./map-controls.i18n";
|
|
21
21
|
// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts
|
|
22
22
|
const transitionDuration = 300;
|
|
23
|
+
const transitionFallbackDuration = transitionDuration + 50;
|
|
23
24
|
export class MapControls {
|
|
24
25
|
constructor() {
|
|
25
26
|
/**
|
|
@@ -30,24 +31,33 @@ export class MapControls {
|
|
|
30
31
|
this.text = i18n(() => this.host, translations);
|
|
31
32
|
_MapControls_toggleButtonElement.set(this, void 0);
|
|
32
33
|
_MapControls_toggleIconButtonElement.set(this, void 0);
|
|
34
|
+
_MapControls_closeIconButtonElement.set(this, void 0);
|
|
35
|
+
_MapControls_postTransitionTimeout.set(this, void 0);
|
|
36
|
+
_MapControls_returnFocusTarget.set(this, void 0);
|
|
33
37
|
_MapControls_mapLayersPanelId.set(this, "map-layers-panel");
|
|
34
38
|
_MapControls_mapLayersTitleId.set(this, "map-layers-title");
|
|
39
|
+
this.handlePanelKeyDown = (event) => {
|
|
40
|
+
if (event.key === "Escape" && this.open) {
|
|
41
|
+
event.stopPropagation();
|
|
42
|
+
void this.toggleVisibility(event);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
handleTransitionEnd(event) {
|
|
47
|
+
if (event.target !== this.host || event.propertyName !== "transform") {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
this.applyPostTransitionState();
|
|
35
51
|
}
|
|
36
52
|
watchOpen(open) {
|
|
53
|
+
this.clearPostTransitionTimeout();
|
|
37
54
|
if (open) {
|
|
38
55
|
this.hideContent = false;
|
|
39
56
|
}
|
|
40
57
|
else {
|
|
41
|
-
|
|
42
|
-
this.hideContent = true;
|
|
43
|
-
if (__classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")?.checkVisibility()) {
|
|
44
|
-
__classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")?.focus();
|
|
45
|
-
}
|
|
46
|
-
if (__classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")?.checkVisibility()) {
|
|
47
|
-
__classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f").focus();
|
|
48
|
-
}
|
|
49
|
-
}, transitionDuration);
|
|
58
|
+
this.hideContent = false;
|
|
50
59
|
}
|
|
60
|
+
__classPrivateFieldSet(this, _MapControls_postTransitionTimeout, window.setTimeout(() => this.applyPostTransitionState(), transitionFallbackDuration), "f");
|
|
51
61
|
}
|
|
52
62
|
/**
|
|
53
63
|
* Emitted when the visibility is toggled.
|
|
@@ -56,14 +66,43 @@ export class MapControls {
|
|
|
56
66
|
* @param e
|
|
57
67
|
*/
|
|
58
68
|
async toggleVisibility(e) {
|
|
69
|
+
this.toggleVisibilityInternal(e);
|
|
70
|
+
}
|
|
71
|
+
toggleVisibilityInternal(e, returnFocusTarget) {
|
|
72
|
+
if (!this.open && returnFocusTarget) {
|
|
73
|
+
__classPrivateFieldSet(this, _MapControls_returnFocusTarget, returnFocusTarget, "f");
|
|
74
|
+
}
|
|
59
75
|
this.open = !this.open;
|
|
60
76
|
this.dsoToggle.emit({
|
|
61
77
|
originalEvent: e,
|
|
62
78
|
open: this.open,
|
|
63
79
|
});
|
|
64
80
|
}
|
|
81
|
+
clearPostTransitionTimeout() {
|
|
82
|
+
if (__classPrivateFieldGet(this, _MapControls_postTransitionTimeout, "f")) {
|
|
83
|
+
clearTimeout(__classPrivateFieldGet(this, _MapControls_postTransitionTimeout, "f"));
|
|
84
|
+
__classPrivateFieldSet(this, _MapControls_postTransitionTimeout, undefined, "f");
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
applyPostTransitionState() {
|
|
88
|
+
this.clearPostTransitionTimeout();
|
|
89
|
+
if (this.open) {
|
|
90
|
+
__classPrivateFieldGet(this, _MapControls_closeIconButtonElement, "f")?.setFocus();
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
this.hideContent = true;
|
|
94
|
+
if (__classPrivateFieldGet(this, _MapControls_returnFocusTarget, "f") === __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")) {
|
|
95
|
+
__classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")?.setFocus();
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
__classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")?.focus();
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
disconnectedCallback() {
|
|
102
|
+
this.clearPostTransitionTimeout();
|
|
103
|
+
}
|
|
65
104
|
render() {
|
|
66
|
-
return (h(Fragment, { key: '
|
|
105
|
+
return (h(Fragment, { key: 'e5158da3b8ee95b2f986085602f05da493a4947f' }, h("dso-icon-button", { key: '65257dc5997914df1a5a785ca1887edd4a98fdd4', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '219cdeded2fa6bae9d623342be95450aaff5f853', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '2d1ebc2df35b1dcd9d53999ecc252c84c9927f4d', icon: "layers" }), h("span", { key: '14bb116f7ab4e0e6a1529cfa24bc6076edb086a0' }, this.text("layersButton"))), h("dso-button-group", { key: '5291467bd1b07e0dfa9030e5f3204bd6e65ff721', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '00e7da46844f221d7dab74dbe18961f862eb0aa6', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: '5ed2e25155b3ec21b6c7d178b34ea244b36fb68e', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: '5d78bf591aff9a9ec0f532052500fc2a0cfb7544', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '2424a154e64b66d13637332701c29e9dea59a24b' }, h("h2", { key: 'd4f456aca7404e12cef849749429525bc21a5b18', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'f6ad6c2198401afc897398ab9c5baf80061ec387', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '3d6d2cf40fdbd3a34f953bd79cf193488396487c' }, h("div", { key: 'f7d6fdd2b3f402e5e7b21c845adf018133455568', class: "content" }, h("slot", { key: 'fd8c1a9dab2f34be0d7290380db341bb0713d7dd' }))))));
|
|
67
106
|
}
|
|
68
107
|
static get is() { return "dso-map-controls"; }
|
|
69
108
|
static get encapsulation() { return "shadow"; }
|
|
@@ -233,5 +272,14 @@ export class MapControls {
|
|
|
233
272
|
"methodName": "watchOpen"
|
|
234
273
|
}];
|
|
235
274
|
}
|
|
275
|
+
static get listeners() {
|
|
276
|
+
return [{
|
|
277
|
+
"name": "transitionend",
|
|
278
|
+
"method": "handleTransitionEnd",
|
|
279
|
+
"target": undefined,
|
|
280
|
+
"capture": false,
|
|
281
|
+
"passive": false
|
|
282
|
+
}];
|
|
283
|
+
}
|
|
236
284
|
}
|
|
237
|
-
_MapControls_toggleButtonElement = new WeakMap(), _MapControls_toggleIconButtonElement = new WeakMap(), _MapControls_mapLayersPanelId = new WeakMap(), _MapControls_mapLayersTitleId = new WeakMap();
|
|
285
|
+
_MapControls_toggleButtonElement = new WeakMap(), _MapControls_toggleIconButtonElement = new WeakMap(), _MapControls_closeIconButtonElement = new WeakMap(), _MapControls_postTransitionTimeout = new WeakMap(), _MapControls_returnFocusTarget = new WeakMap(), _MapControls_mapLayersPanelId = new WeakMap(), _MapControls_mapLayersTitleId = new WeakMap();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { clsx } from "clsx";
|
|
3
|
-
export const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
|
|
3
|
+
export const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, printFilterPanel, }) => (h("div", { class: clsx("dso-main-panel", {
|
|
4
4
|
compact: !tabView && documentPanelOpen && !mainPanelExpanded,
|
|
5
5
|
contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,
|
|
6
6
|
expanded: !tabView && documentPanelOpen && mainPanelExpanded,
|
|
@@ -9,4 +9,4 @@ export const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpan
|
|
|
9
9
|
if (e.propertyName === "flex-basis") {
|
|
10
10
|
dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });
|
|
11
11
|
}
|
|
12
|
-
} }, !tabView && documentPanelOpen && (h("div", { class: "toggle-button" }, h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, h("slot", { name: "main" }))));
|
|
12
|
+
} }, !tabView && documentPanelOpen && (h("div", { class: "toggle-button" }, h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, printFilterPanel, h("slot", { name: "main" }))));
|