@dso-toolkit/core 97.0.0-ghi-3769.0 → 97.0.0-ghi-3769.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/dist/bundle/dso-viewer-grid.js +6 -3
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +6 -3
- package/dist/collection/components/viewer-grid/viewer-grid.css +45 -41
- package/dist/collection/components/viewer-grid/viewer-grid.js +6 -3
- package/dist/components/dso-viewer-grid.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/p-d287c9fa.entry.js +1 -0
- package/dist/esm/dso-viewer-grid.entry.js +6 -3
- package/dist/types/components/viewer-grid/components/main-panel.d.ts +1 -1
- package/dist/types/components/viewer-grid/viewer-grid.d.ts +2 -1
- package/package.json +3 -3
- package/dist/dso-toolkit/p-cda1adce.entry.js +0 -1
|
@@ -53,7 +53,7 @@ const Overlay = ({ ref, dsoCloseOverlay }) => (h("dialog", { class: "overlay", r
|
|
|
53
53
|
dsoCloseOverlay(e);
|
|
54
54
|
} }, h("dso-icon-button", { class: "overlay-close-button", icon: "cross", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseOverlay }), h("slot", { name: "overlay" })));
|
|
55
55
|
|
|
56
|
-
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; } .legend { 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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } } :host([print]) { block-size: auto; overflow: visible; } :host([print]) .viewer-grid-columns { 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]) .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% !important; max-inline-size: none !important; min-inline-size: 0 !important; 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 !important; margin-inline: 0; max-inline-size: none !important; min-inline-size: 0 !important; position: relative; transition: none; } :host([print]) .dso-document-panel { block-size: auto; box-shadow: none; inline-size: 100% !important; max-inline-size: none !important; min-inline-size: 0 !important; position: static; } :host([print]) .dso-document-panel .content { block-size: auto; overflow-y: visible; }`;
|
|
56
|
+
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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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; margin-inline: auto 0; } } @media (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 (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 (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 { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } :host(:not([print])) .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media (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; }`;
|
|
57
57
|
|
|
58
58
|
const resizeObserver = new ResizeObserver(debounce(([entry]) => {
|
|
59
59
|
const shadowRoot = entry?.target.getRootNode();
|
|
@@ -194,6 +194,9 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
|
|
|
194
194
|
});
|
|
195
195
|
}
|
|
196
196
|
}
|
|
197
|
+
renderFilterPanel() {
|
|
198
|
+
return (h(FilterPanel, { open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) }));
|
|
199
|
+
}
|
|
197
200
|
connectedCallback() {
|
|
198
201
|
window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
|
|
199
202
|
}
|
|
@@ -215,9 +218,9 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
|
|
|
215
218
|
}
|
|
216
219
|
}
|
|
217
220
|
render() {
|
|
218
|
-
return (h(Fragment, { key: '
|
|
221
|
+
return (h(Fragment, { key: '26216b09a538c9527b0fb3c58d23924823664819' }, h("slot", { key: 'afe7a843a065fc8ac415cf94da9e11ca92820f3a', name: "top-bar" }), h("div", { key: 'c9f2ac9868069fa3a90c5b4c9fa25959085d94b4', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'ac1389f48e0618fcc213ccb14371cc31ab53f8ab', class: "dso-navbar" }, h("ul", { key: '30af55082ca83de47cf5ffeec1bd4670594d8773', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (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) && (h("div", { key: '44c4697c437a2ccf61a570c40f349f99bbd9baf5', class: "map-area" }, h("div", { key: 'e10b51a4a8e96b8b0417f2351134ec3de7a1641d', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'd240e2e04ccd05dbd1314ee4c04a8af1bc4076a3', name: "map" })), h("slot", { key: '6ae2b90c8d7fe7f68d4a4eb9bd01c6054659f8de', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
|
|
219
222
|
(this.tabView && this.activeTab === "document") ||
|
|
220
|
-
this.print) && (h(DocumentPanel, { key: '
|
|
223
|
+
this.print) && (h(DocumentPanel, { key: 'fb9680a12c8a9d29627af0583bfc7f5157448619', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'e92e5a979b4529ae948c4c3d47af3fa40a0460f4', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
|
|
221
224
|
}
|
|
222
225
|
get host() { return this; }
|
|
223
226
|
static get watchers() { return {
|
|
@@ -55,7 +55,7 @@ const Overlay = ({ ref, dsoCloseOverlay }) => (index.h("dialog", { class: "overl
|
|
|
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-area { block-size: 100%; inline-size: 100%; overflow: hidden; position: relative; } .map { position: absolute; inset: 0; overflow: hidden; } .legend { 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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } } :host([print]) { block-size: auto; overflow: visible; } :host([print]) .viewer-grid-columns { 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]) .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% !important; max-inline-size: none !important; min-inline-size: 0 !important; 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 !important; margin-inline: 0; max-inline-size: none !important; min-inline-size: 0 !important; position: relative; transition: none; } :host([print]) .dso-document-panel { block-size: auto; box-shadow: none; inline-size: 100% !important; max-inline-size: none !important; min-inline-size: 0 !important; position: static; } :host([print]) .dso-document-panel .content { block-size: auto; overflow-y: visible; }`;
|
|
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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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; margin-inline: auto 0; } } @media (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 (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 (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 { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } :host(:not([print])) .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media (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();
|
|
@@ -192,6 +192,9 @@ const ViewerGrid = class {
|
|
|
192
192
|
});
|
|
193
193
|
}
|
|
194
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
|
+
}
|
|
195
198
|
connectedCallback() {
|
|
196
199
|
window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
|
|
197
200
|
}
|
|
@@ -213,9 +216,9 @@ const ViewerGrid = class {
|
|
|
213
216
|
}
|
|
214
217
|
}
|
|
215
218
|
render() {
|
|
216
|
-
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) ||
|
|
217
220
|
(this.tabView && this.activeTab === "document") ||
|
|
218
|
-
this.print) && (index.h(DocumentPanel, { key: '
|
|
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 }) }))));
|
|
219
222
|
}
|
|
220
223
|
get host() { return index.getElement(this); }
|
|
221
224
|
static get watchers() { return {
|
|
@@ -144,7 +144,8 @@ button::-moz-focus-inner {
|
|
|
144
144
|
overflow: hidden;
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
-
|
|
147
|
+
slot[name=legend] {
|
|
148
|
+
display: block;
|
|
148
149
|
position: absolute;
|
|
149
150
|
inset-block-end: 16px;
|
|
150
151
|
inset-inline-start: 16px;
|
|
@@ -217,16 +218,16 @@ button::-moz-focus-inner {
|
|
|
217
218
|
}
|
|
218
219
|
|
|
219
220
|
@media (min-width: 1032px) {
|
|
220
|
-
:host([main-size=small]) .dso-main-panel,
|
|
221
|
-
:host([document-panel-size=small]) .dso-document-panel {
|
|
221
|
+
:host(:not([print])[main-size=small]) .dso-main-panel,
|
|
222
|
+
:host(:not([print])[document-panel-size=small]) .dso-document-panel {
|
|
222
223
|
flex-basis: 375px;
|
|
223
224
|
min-inline-size: 0;
|
|
224
225
|
max-inline-size: 375px;
|
|
225
226
|
}
|
|
226
227
|
}
|
|
227
228
|
@media (min-width: 1032px) and (max-width: 375px) {
|
|
228
|
-
:host([main-size=small]) .dso-main-panel,
|
|
229
|
-
:host([document-panel-size=small]) .dso-document-panel {
|
|
229
|
+
:host(:not([print])[main-size=small]) .dso-main-panel,
|
|
230
|
+
:host(:not([print])[document-panel-size=small]) .dso-document-panel {
|
|
230
231
|
flex-basis: 100vw;
|
|
231
232
|
max-inline-size: 100vw;
|
|
232
233
|
min-inline-size: 0;
|
|
@@ -234,16 +235,16 @@ button::-moz-focus-inner {
|
|
|
234
235
|
}
|
|
235
236
|
}
|
|
236
237
|
@media (min-width: 1032px) {
|
|
237
|
-
:host([main-size=medium]) .dso-main-panel,
|
|
238
|
-
:host([document-panel-size=medium]) .dso-document-panel {
|
|
238
|
+
:host(:not([print])[main-size=medium]) .dso-main-panel,
|
|
239
|
+
:host(:not([print])[document-panel-size=medium]) .dso-document-panel {
|
|
239
240
|
flex-basis: 624px;
|
|
240
241
|
min-inline-size: 375px;
|
|
241
242
|
max-inline-size: 624px;
|
|
242
243
|
}
|
|
243
244
|
}
|
|
244
245
|
@media (min-width: 1032px) and (max-width: 624px) {
|
|
245
|
-
:host([main-size=medium]) .dso-main-panel,
|
|
246
|
-
:host([document-panel-size=medium]) .dso-document-panel {
|
|
246
|
+
:host(:not([print])[main-size=medium]) .dso-main-panel,
|
|
247
|
+
:host(:not([print])[document-panel-size=medium]) .dso-document-panel {
|
|
247
248
|
flex-basis: 100vw;
|
|
248
249
|
max-inline-size: 100vw;
|
|
249
250
|
min-inline-size: 375px;
|
|
@@ -251,16 +252,16 @@ button::-moz-focus-inner {
|
|
|
251
252
|
}
|
|
252
253
|
}
|
|
253
254
|
@media (min-width: 1032px) {
|
|
254
|
-
:host([main-size=large]) .dso-main-panel,
|
|
255
|
-
:host([document-panel-size=large]) .dso-document-panel {
|
|
255
|
+
:host(:not([print])[main-size=large]) .dso-main-panel,
|
|
256
|
+
:host(:not([print])[document-panel-size=large]) .dso-document-panel {
|
|
256
257
|
flex-basis: 60%;
|
|
257
258
|
min-inline-size: 768px;
|
|
258
259
|
max-inline-size: 1024px;
|
|
259
260
|
}
|
|
260
261
|
}
|
|
261
262
|
@media (min-width: 1032px) and (max-width: 768px) {
|
|
262
|
-
:host([main-size=large]) .dso-main-panel,
|
|
263
|
-
:host([document-panel-size=large]) .dso-document-panel {
|
|
263
|
+
:host(:not([print])[main-size=large]) .dso-main-panel,
|
|
264
|
+
:host(:not([print])[document-panel-size=large]) .dso-document-panel {
|
|
264
265
|
flex-basis: 100vw;
|
|
265
266
|
max-inline-size: 100vw;
|
|
266
267
|
min-inline-size: 768px;
|
|
@@ -268,51 +269,51 @@ button::-moz-focus-inner {
|
|
|
268
269
|
}
|
|
269
270
|
}
|
|
270
271
|
@media (min-width: 1032px) {
|
|
271
|
-
:host {
|
|
272
|
+
:host(:not([print])) {
|
|
272
273
|
display: flex;
|
|
273
274
|
flex-direction: column;
|
|
274
275
|
block-size: 100vh;
|
|
275
276
|
overflow: clip;
|
|
276
277
|
position: relative;
|
|
277
278
|
}
|
|
278
|
-
:host .dso-main-panel.compact,
|
|
279
|
-
:host .dso-main-panel.expanded {
|
|
279
|
+
:host(:not([print])) .dso-main-panel.compact,
|
|
280
|
+
:host(:not([print])) .dso-main-panel.expanded {
|
|
280
281
|
flex-basis: unset;
|
|
281
282
|
min-inline-size: unset;
|
|
282
283
|
max-inline-size: unset;
|
|
283
284
|
inline-size: 440px;
|
|
284
285
|
}
|
|
285
|
-
:host .viewer-grid-columns {
|
|
286
|
+
:host(:not([print])) .viewer-grid-columns {
|
|
286
287
|
display: flex;
|
|
287
288
|
overflow: hidden;
|
|
288
289
|
flex-grow: 1;
|
|
289
290
|
}
|
|
290
|
-
.dso-main-panel,
|
|
291
|
-
.dso-document-panel {
|
|
291
|
+
:host(:not([print])) .dso-main-panel,
|
|
292
|
+
:host(:not([print])) .dso-document-panel {
|
|
292
293
|
box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);
|
|
293
294
|
}
|
|
294
|
-
.dso-main-panel .content,
|
|
295
|
-
.dso-document-panel .content {
|
|
295
|
+
:host(:not([print])) .dso-main-panel .content,
|
|
296
|
+
:host(:not([print])) .dso-document-panel .content {
|
|
296
297
|
overflow-y: auto;
|
|
297
298
|
}
|
|
298
|
-
.filter-panel {
|
|
299
|
+
:host(:not([print])) .filter-panel {
|
|
299
300
|
margin-inline: 0 auto;
|
|
300
301
|
inline-size: calc(100vw - 40px);
|
|
301
302
|
}
|
|
302
|
-
.filter-panel[open] {
|
|
303
|
+
:host(:not([print])) .filter-panel[open] {
|
|
303
304
|
border-inline-end: 1px solid #e5e5e5;
|
|
304
305
|
}
|
|
305
|
-
.overlay {
|
|
306
|
+
:host(:not([print])) .overlay {
|
|
306
307
|
box-shadow: -2px 0 5px #666;
|
|
307
308
|
margin-inline: auto 0;
|
|
308
309
|
}
|
|
309
310
|
}
|
|
310
311
|
@media (min-width: 1032px) and (max-width: 1031.99px) {
|
|
311
|
-
:host([filter-panel-open]) .dso-main-panel {
|
|
312
|
+
:host(:not([print])[filter-panel-open]) .dso-main-panel {
|
|
312
313
|
margin-inline-start: 380px;
|
|
313
314
|
max-inline-size: calc(100vw - 380px);
|
|
314
315
|
}
|
|
315
|
-
.filter-panel {
|
|
316
|
+
:host(:not([print])) .filter-panel {
|
|
316
317
|
inline-size: 380px;
|
|
317
318
|
inset-inline-start: -380px;
|
|
318
319
|
}
|
|
@@ -585,30 +586,33 @@ button::-moz-focus-inner {
|
|
|
585
586
|
.dso-tertiary {
|
|
586
587
|
font-weight: 300;
|
|
587
588
|
}
|
|
588
|
-
.overlay {
|
|
589
|
+
:host(:not([print])) .overlay {
|
|
589
590
|
inline-size: calc(100vw - 32px);
|
|
590
591
|
}
|
|
591
|
-
.filter-panel,
|
|
592
|
-
.overlay {
|
|
592
|
+
:host(:not([print])) .filter-panel,
|
|
593
|
+
:host(:not([print])) .overlay {
|
|
593
594
|
margin-inline: 0;
|
|
594
595
|
max-inline-size: 100vw;
|
|
595
596
|
inset-block-start: 0;
|
|
596
597
|
}
|
|
597
|
-
.filter-panel {
|
|
598
|
+
:host(:not([print])) .filter-panel {
|
|
598
599
|
inset-inline-start: -100vw;
|
|
599
600
|
inline-size: 100vw;
|
|
600
601
|
}
|
|
601
602
|
}
|
|
602
603
|
@media (min-width: 992px) {
|
|
603
|
-
:host([filter-panel-open]) .dso-main-panel {
|
|
604
|
+
:host(:not([print])[filter-panel-open]) .dso-main-panel {
|
|
604
605
|
margin-inline-start: 380px;
|
|
605
606
|
}
|
|
606
607
|
}
|
|
607
608
|
:host([print]) {
|
|
609
|
+
display: flex;
|
|
610
|
+
flex-direction: column;
|
|
608
611
|
block-size: auto;
|
|
609
612
|
overflow: visible;
|
|
610
613
|
}
|
|
611
614
|
:host([print]) .viewer-grid-columns {
|
|
615
|
+
display: flex;
|
|
612
616
|
flex-direction: column;
|
|
613
617
|
overflow: visible;
|
|
614
618
|
}
|
|
@@ -629,7 +633,7 @@ button::-moz-focus-inner {
|
|
|
629
633
|
position: relative;
|
|
630
634
|
inset: auto;
|
|
631
635
|
}
|
|
632
|
-
:host([print])
|
|
636
|
+
:host([print]) slot[name=legend] {
|
|
633
637
|
position: relative;
|
|
634
638
|
inset: auto;
|
|
635
639
|
flex-shrink: 0;
|
|
@@ -638,9 +642,9 @@ button::-moz-focus-inner {
|
|
|
638
642
|
:host([print]) .dso-main-panel {
|
|
639
643
|
block-size: auto;
|
|
640
644
|
box-shadow: none;
|
|
641
|
-
inline-size: 100
|
|
642
|
-
max-inline-size: none
|
|
643
|
-
min-inline-size: 0
|
|
645
|
+
inline-size: 100%;
|
|
646
|
+
max-inline-size: none;
|
|
647
|
+
min-inline-size: 0;
|
|
644
648
|
position: relative;
|
|
645
649
|
margin-inline-start: 0px;
|
|
646
650
|
}
|
|
@@ -661,19 +665,19 @@ button::-moz-focus-inner {
|
|
|
661
665
|
block-size: auto;
|
|
662
666
|
box-shadow: none;
|
|
663
667
|
flex-shrink: 0;
|
|
664
|
-
inline-size: 380px
|
|
668
|
+
inline-size: 380px;
|
|
665
669
|
margin-inline: 0;
|
|
666
|
-
max-inline-size: none
|
|
667
|
-
min-inline-size: 0
|
|
670
|
+
max-inline-size: none;
|
|
671
|
+
min-inline-size: 0;
|
|
668
672
|
position: relative;
|
|
669
673
|
transition: none;
|
|
670
674
|
}
|
|
671
675
|
:host([print]) .dso-document-panel {
|
|
672
676
|
block-size: auto;
|
|
673
677
|
box-shadow: none;
|
|
674
|
-
inline-size: 100
|
|
675
|
-
max-inline-size: none
|
|
676
|
-
min-inline-size: 0
|
|
678
|
+
inline-size: 100%;
|
|
679
|
+
max-inline-size: none;
|
|
680
|
+
min-inline-size: 0;
|
|
677
681
|
position: static;
|
|
678
682
|
}
|
|
679
683
|
:host([print]) .dso-document-panel .content {
|
|
@@ -19,7 +19,7 @@ const minMapElementWidth = 440;
|
|
|
19
19
|
* @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.
|
|
20
20
|
* @slot main
|
|
21
21
|
* @slot map
|
|
22
|
-
* @slot legend
|
|
22
|
+
* @slot legend - Een slot die kan worden gevuld met een legend component.
|
|
23
23
|
* @slot filter-panel
|
|
24
24
|
* @slot overlay
|
|
25
25
|
* @slot document-panel
|
|
@@ -139,6 +139,9 @@ export class ViewerGrid {
|
|
|
139
139
|
});
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
+
renderFilterPanel() {
|
|
143
|
+
return (h(FilterPanel, { open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) }));
|
|
144
|
+
}
|
|
142
145
|
connectedCallback() {
|
|
143
146
|
window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
|
|
144
147
|
}
|
|
@@ -160,9 +163,9 @@ export class ViewerGrid {
|
|
|
160
163
|
}
|
|
161
164
|
}
|
|
162
165
|
render() {
|
|
163
|
-
return (h(Fragment, { key: '
|
|
166
|
+
return (h(Fragment, { key: '26216b09a538c9527b0fb3c58d23924823664819' }, h("slot", { key: 'afe7a843a065fc8ac415cf94da9e11ca92820f3a', name: "top-bar" }), h("div", { key: 'c9f2ac9868069fa3a90c5b4c9fa25959085d94b4', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'ac1389f48e0618fcc213ccb14371cc31ab53f8ab', class: "dso-navbar" }, h("ul", { key: '30af55082ca83de47cf5ffeec1bd4670594d8773', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (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) && (h("div", { key: '44c4697c437a2ccf61a570c40f349f99bbd9baf5', class: "map-area" }, h("div", { key: 'e10b51a4a8e96b8b0417f2351134ec3de7a1641d', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'd240e2e04ccd05dbd1314ee4c04a8af1bc4076a3', name: "map" })), h("slot", { key: '6ae2b90c8d7fe7f68d4a4eb9bd01c6054659f8de', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
|
|
164
167
|
(this.tabView && this.activeTab === "document") ||
|
|
165
|
-
this.print) && (h(DocumentPanel, { key: '
|
|
168
|
+
this.print) && (h(DocumentPanel, { key: 'fb9680a12c8a9d29627af0583bfc7f5157448619', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'e92e5a979b4529ae948c4c3d47af3fa40a0460f4', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
|
|
166
169
|
}
|
|
167
170
|
static get is() { return "dso-viewer-grid"; }
|
|
168
171
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{h as e,Fragment as i,proxyCustomElement as n,HTMLElement as t,createEvent as o,transformTag as a}from"@stencil/core/internal/client";import{c as s}from"./clsx.js";import{d as l}from"./index2.js";const r=["search","map","document"],d={map:"Kaart",document:"Document",search:"Zoeken"},c={small:"smal",medium:"middel",large:"breed"},p=({className:i,onClick:n,label:t,icon:o})=>e("dso-icon-button",{variant:"map",class:i,onDsoClick:n,icon:o,label:t}),m=({shrink:i,expand:n,size:t,panelLabel:o,placement:a})=>{const s=[];return"small"!==t&&s.push(e(p,{onClick:i,label:o+" smaller maken",icon:"right"===a?"chevron-right":"chevron-left",className:"shrink"})),"large"!==t&&s.push(e(p,{onClick:n,label:o+" breder maken",icon:"right"===a?"chevron-left":"chevron-right",className:"expand"})),e("div",{class:"sizing-buttons"},e("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",o.toLocaleLowerCase(),": ",c[t]),s)},b=({tabView:i,panelSize:n,shrinkDocumentPanel:t,expandDocumentPanel:o,dsoDocumentPanelSizeChangeAnimationEnd:a})=>e("div",{class:"dso-document-panel",onTransitionEnd:e=>{"flex-basis"===e.propertyName&&a.emit({currentSize:n})}},!i&&e(m,{panelLabel:"Documentpaneel",size:n,expand:o,shrink:t,placement:"right"}),e("div",{class:"content"},e("slot",{name:"document-panel"}))),h=({open:n,title:t,ref:o,dsoCloseFilterPanel:a})=>{const s=t||"Filterpaneel";return e("dialog",{class:"filter-panel",ref:o,inert:!n,"aria-label":s},n&&e(i,null,e("h3",{class:{"sr-only":!t}},s),e("dso-icon-button",{class:"dso-close",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:a}),e("slot",{name:"filter-panel"})))},v=({tabView:i,mainSize:n,documentPanelOpen:t,mainPanelExpanded:o,mainPanelHidden:a,toggleMainPanel:l,dsoMainSizeChangeAnimationEnd:r,printFilterPanel:d})=>e("div",{class:s("dso-main-panel",{compact:!i&&t&&!o,contracted:!i&&!t&&!o,expanded:!i&&t&&o,collapsed:a}),onTransitionEnd:e=>{"flex-basis"===e.propertyName&&r.emit({currentSize:n})}},!i&&t&&e("div",{class:"toggle-button"},e("dso-icon-button",{variant:"map",label:"Zoeken paneel "+(a?"tonen":"verbergen"),icon:a?"chevron-right":"chevron-left",onDsoClick:l})),e("div",{class:s("content",{invisible:a})},d,e("slot",{name:"main"}))),x=({ref:i,dsoCloseOverlay:n})=>e("dialog",{class:"overlay",ref:i,onCancel:e=>{e.preventDefault(),n(e)}},e("dso-icon-button",{class:"overlay-close-button",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:n}),e("slot",{name:"overlay"})),u=new ResizeObserver(l((([e])=>{const i=e?.target.getRootNode();i instanceof ShadowRoot&&function(e){return"DSO-VIEWER-GRID"===e.tagName}(i.host)&&i.host._checkMainPanelVisibility()}),50)),f=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7),this.dsoCloseFilterPanel=o(this,"dsoCloseFilterPanel",7),this.dsoActiveTabSwitch=o(this,"dsoActiveTabSwitch",7),this.dsoMainSizeChangeAnimationEnd=o(this,"dsoMainSizeChangeAnimationEnd",7),this.dsoDocumentPanelSizeChange=o(this,"dsoDocumentPanelSizeChange",7),this.dsoDocumentPanelSizeChangeAnimationEnd=o(this,"dsoDocumentPanelSizeChangeAnimationEnd",7),this.dsoMainPanelToggle=o(this,"dsoMainPanelToggle",7),this.mediaCondition="(min-width: 1032px)",this.filterPanelOpen=!1,this.overlayOpen=!1,this.documentPanelOpen=!1,this.print=!1,this.mainSize="large",this.documentPanelSize="large",this.mainPanelExpanded=!1,this.mainPanelHidden=!1,this.tabView=window.innerWidth<1032,this.switchActiveTab=e=>{this.dsoActiveTabSwitch.emit({tab:e})},this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"large"===this.documentPanelSize?"medium":"small"})},this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"small"===this.documentPanelSize?"medium":"large"})},this.toggleMainPanel=()=>{this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=520&&(this.mainSize="small"),this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})},this.changeListener=e=>this.tabView=!e.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(e){e&&this._checkMainPanelVisibility()}filterPanelOpenWatcher(e){this.filterPanelSlot||console.warn("slot 'filter-panel' has not been set"),e?this.filterPanel?.show():this.filterPanel?.close()}overlayOpenWatcher(e){this.overlaySlot||console.warn("slot 'overlay' has not been set"),e?this.overlay?.showModal():this.overlay?.close()}async _checkMainPanelVisibility(){this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=520&&!this.mainPanelExpanded||this.mapElement.clientWidth<=80&&this.mainPanelExpanded)&&this.dsoMainPanelToggle.emit({hide:!0})}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){this.filterPanelOpen&&this.filterPanelSlot&&this.filterPanel?.show(),this.overlayOpen&&this.overlaySlot&&this.overlay?.showModal(),this.mapElement instanceof HTMLDivElement&&u.observe(this.mapElement)}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener),this.mapElement&&u.unobserve(this.mapElement)}render(){return e(i,{key:"f291587822e81c2106ab5e36089ce42d0f9833f5"},e("slot",{key:"00e527296e700f9ce46f8429e5f2426461c4d83a",name:"top-bar"}),e("div",{key:"5e56932a8ad0ef86dc783a866f9c1d70ffafb386",class:"viewer-grid-columns"},this.tabView&&e("nav",{key:"0aa6869170bd5fbea948f986f0684869a5bb9319",class:"dso-navbar"},e("ul",{key:"c43b64696dc610265dc1d9a14d331a516a0b733e",class:"dso-nav dso-nav-sub"},r.map((i=>e("li",{key:i,class:s({"dso-active":this.activeTab===i})},e("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(i)},d[i])))))),(!this.tabView||this.tabView&&"search"===this.activeTab||this.print)&&e(v,{key:"059d82c2c2f7c285644d2a03e3dfbe090a0f3033",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?e(h,{open:this.filterPanelOpen,title:this.filterPanelTitle,ref:e=>this.filterPanel=e,dsoCloseFilterPanel:e=>this.dsoCloseFilterPanel.emit({originalEvent:e})}):void 0}),(!this.tabView||this.tabView&&"search"===this.activeTab)&&!this.print&&e(h,{key:"4f2dd3da03203f0d5640ad21731478fa01f2a547",open:this.filterPanelOpen,title:this.filterPanelTitle,ref:e=>this.filterPanel=e,dsoCloseFilterPanel:e=>this.dsoCloseFilterPanel.emit({originalEvent:e})}),(!this.tabView||this.tabView&&"map"===this.activeTab||this.print)&&e("div",{key:"c1ded5defe7683febd8612b9eaf0bec4b3b054e3",class:"map-area"},e("div",{key:"119acd44416483f19a2153c151f39086c6ebd365",class:"map",ref:e=>this.mapElement=e},e("slot",{key:"94df8c9c9de2a7367c246ee88609af366a745865",name:"map"})),e("div",{key:"ac15769c7a405059399885ab852074c3f912b536",class:"legend"},e("slot",{key:"ae24218f8a14e8fb93b53ae22635ddeaa2f18e90",name:"legend"}))),(!this.tabView&&this.documentPanelOpen||this.tabView&&"document"===this.activeTab||this.print)&&e(b,{key:"f5e6beaab079ff790e3248267797abc1659f38bc",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),e(x,{key:"bf93377744c7855707d8f0fea887eeceeaacc187",ref:e=>this.overlay=e,dsoCloseOverlay:e=>this.dsoCloseOverlay.emit({originalEvent:e})})))}get host(){return this}static get watchers(){return{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}}static get style(){return"*, *::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; } .legend { 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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } } :host([print]) { block-size: auto; overflow: visible; } :host([print]) .viewer-grid-columns { 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]) .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% !important; max-inline-size: none !important; min-inline-size: 0 !important; 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 !important; margin-inline: 0; max-inline-size: none !important; min-inline-size: 0 !important; position: relative; transition: none; } :host([print]) .dso-document-panel { block-size: auto; box-shadow: none; inline-size: 100% !important; max-inline-size: none !important; min-inline-size: 0 !important; position: static; } :host([print]) .dso-document-panel .content { block-size: auto; overflow-y: visible; }"}},[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]},void 0,{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}]),g=f,y=function(){"undefined"!=typeof customElements&&["dso-viewer-grid"].forEach((e=>{"dso-viewer-grid"===e&&(customElements.get(a(e))||customElements.define(a(e),f))}))};export{g as DsoViewerGrid,y as defineCustomElement}
|
|
1
|
+
import{h as e,Fragment as n,proxyCustomElement as i,HTMLElement as t,createEvent as o,transformTag as a}from"@stencil/core/internal/client";import{c as s}from"./clsx.js";import{d as l}from"./index2.js";const r=["search","map","document"],d={map:"Kaart",document:"Document",search:"Zoeken"},c={small:"smal",medium:"middel",large:"breed"},p=({className:n,onClick:i,label:t,icon:o})=>e("dso-icon-button",{variant:"map",class:n,onDsoClick:i,icon:o,label:t}),m=({shrink:n,expand:i,size:t,panelLabel:o,placement:a})=>{const s=[];return"small"!==t&&s.push(e(p,{onClick:n,label:o+" smaller maken",icon:"right"===a?"chevron-right":"chevron-left",className:"shrink"})),"large"!==t&&s.push(e(p,{onClick:i,label:o+" breder maken",icon:"right"===a?"chevron-left":"chevron-right",className:"expand"})),e("div",{class:"sizing-buttons"},e("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",o.toLocaleLowerCase(),": ",c[t]),s)},h=({tabView:n,panelSize:i,shrinkDocumentPanel:t,expandDocumentPanel:o,dsoDocumentPanelSizeChangeAnimationEnd:a})=>e("div",{class:"dso-document-panel",onTransitionEnd:e=>{"flex-basis"===e.propertyName&&a.emit({currentSize:i})}},!n&&e(m,{panelLabel:"Documentpaneel",size:i,expand:o,shrink:t,placement:"right"}),e("div",{class:"content"},e("slot",{name:"document-panel"}))),b=({open:i,title:t,ref:o,dsoCloseFilterPanel:a})=>{const s=t||"Filterpaneel";return e("dialog",{class:"filter-panel",ref:o,inert:!i,"aria-label":s},i&&e(n,null,e("h3",{class:{"sr-only":!t}},s),e("dso-icon-button",{class:"dso-close",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:a}),e("slot",{name:"filter-panel"})))},v=({tabView:n,mainSize:i,documentPanelOpen:t,mainPanelExpanded:o,mainPanelHidden:a,toggleMainPanel:l,dsoMainSizeChangeAnimationEnd:r,printFilterPanel:d})=>e("div",{class:s("dso-main-panel",{compact:!n&&t&&!o,contracted:!n&&!t&&!o,expanded:!n&&t&&o,collapsed:a}),onTransitionEnd:e=>{"flex-basis"===e.propertyName&&r.emit({currentSize:i})}},!n&&t&&e("div",{class:"toggle-button"},e("dso-icon-button",{variant:"map",label:"Zoeken paneel "+(a?"tonen":"verbergen"),icon:a?"chevron-right":"chevron-left",onDsoClick:l})),e("div",{class:s("content",{invisible:a})},d,e("slot",{name:"main"}))),x=({ref:n,dsoCloseOverlay:i})=>e("dialog",{class:"overlay",ref:n,onCancel:e=>{e.preventDefault(),i(e)}},e("dso-icon-button",{class:"overlay-close-button",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:i}),e("slot",{name:"overlay"})),u=new ResizeObserver(l((([e])=>{const n=e?.target.getRootNode();n instanceof ShadowRoot&&function(e){return"DSO-VIEWER-GRID"===e.tagName}(n.host)&&n.host._checkMainPanelVisibility()}),50)),f=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7),this.dsoCloseFilterPanel=o(this,"dsoCloseFilterPanel",7),this.dsoActiveTabSwitch=o(this,"dsoActiveTabSwitch",7),this.dsoMainSizeChangeAnimationEnd=o(this,"dsoMainSizeChangeAnimationEnd",7),this.dsoDocumentPanelSizeChange=o(this,"dsoDocumentPanelSizeChange",7),this.dsoDocumentPanelSizeChangeAnimationEnd=o(this,"dsoDocumentPanelSizeChangeAnimationEnd",7),this.dsoMainPanelToggle=o(this,"dsoMainPanelToggle",7),this.mediaCondition="(min-width: 1032px)",this.filterPanelOpen=!1,this.overlayOpen=!1,this.documentPanelOpen=!1,this.print=!1,this.mainSize="large",this.documentPanelSize="large",this.mainPanelExpanded=!1,this.mainPanelHidden=!1,this.tabView=window.innerWidth<1032,this.switchActiveTab=e=>{this.dsoActiveTabSwitch.emit({tab:e})},this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"large"===this.documentPanelSize?"medium":"small"})},this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"small"===this.documentPanelSize?"medium":"large"})},this.toggleMainPanel=()=>{this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=520&&(this.mainSize="small"),this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})},this.changeListener=e=>this.tabView=!e.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(e){e&&this._checkMainPanelVisibility()}filterPanelOpenWatcher(e){this.filterPanelSlot||console.warn("slot 'filter-panel' has not been set"),e?this.filterPanel?.show():this.filterPanel?.close()}overlayOpenWatcher(e){this.overlaySlot||console.warn("slot 'overlay' has not been set"),e?this.overlay?.showModal():this.overlay?.close()}async _checkMainPanelVisibility(){this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=520&&!this.mainPanelExpanded||this.mapElement.clientWidth<=80&&this.mainPanelExpanded)&&this.dsoMainPanelToggle.emit({hide:!0})}renderFilterPanel(){return e(b,{open:this.filterPanelOpen,title:this.filterPanelTitle,ref:e=>this.filterPanel=e,dsoCloseFilterPanel:e=>this.dsoCloseFilterPanel.emit({originalEvent:e})})}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){this.filterPanelOpen&&this.filterPanelSlot&&this.filterPanel?.show(),this.overlayOpen&&this.overlaySlot&&this.overlay?.showModal(),this.mapElement instanceof HTMLDivElement&&u.observe(this.mapElement)}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener),this.mapElement&&u.unobserve(this.mapElement)}render(){return e(n,{key:"26216b09a538c9527b0fb3c58d23924823664819"},e("slot",{key:"afe7a843a065fc8ac415cf94da9e11ca92820f3a",name:"top-bar"}),e("div",{key:"c9f2ac9868069fa3a90c5b4c9fa25959085d94b4",class:"viewer-grid-columns"},this.tabView&&e("nav",{key:"ac1389f48e0618fcc213ccb14371cc31ab53f8ab",class:"dso-navbar"},e("ul",{key:"30af55082ca83de47cf5ffeec1bd4670594d8773",class:"dso-nav dso-nav-sub"},r.map((n=>e("li",{key:n,class:s({"dso-active":this.activeTab===n})},e("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(n)},d[n])))))),(!this.tabView||this.tabView&&"search"===this.activeTab||this.print)&&e(v,{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():void 0}),(!this.tabView||this.tabView&&"search"===this.activeTab)&&!this.print&&this.renderFilterPanel(),(!this.tabView||this.tabView&&"map"===this.activeTab||this.print)&&e("div",{key:"44c4697c437a2ccf61a570c40f349f99bbd9baf5",class:"map-area"},e("div",{key:"e10b51a4a8e96b8b0417f2351134ec3de7a1641d",class:"map",ref:e=>this.mapElement=e},e("slot",{key:"d240e2e04ccd05dbd1314ee4c04a8af1bc4076a3",name:"map"})),e("slot",{key:"6ae2b90c8d7fe7f68d4a4eb9bd01c6054659f8de",name:"legend"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&"document"===this.activeTab||this.print)&&e(h,{key:"fb9680a12c8a9d29627af0583bfc7f5157448619",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),e(x,{key:"e92e5a979b4529ae948c4c3d47af3fa40a0460f4",ref:e=>this.overlay=e,dsoCloseOverlay:e=>this.dsoCloseOverlay.emit({originalEvent:e})})))}get host(){return this}static get watchers(){return{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}}static get style(){return"*, *::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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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; margin-inline: auto 0; } } @media (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 (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 (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 { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } :host(:not([print])) .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media (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; }"}},[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]},void 0,{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}]),g=f,y=function(){"undefined"!=typeof customElements&&["dso-viewer-grid"].forEach((e=>{"dso-viewer-grid"===e&&(customElements.get(a(e))||customElements.define(a(e),f))}))};export{g as DsoViewerGrid,y as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,B as o,c as t,w as a,N as i,H as n,b as l}from"./p-DrQGiJP8.js";export{s as setNonce}from"./p-DrQGiJP8.js";import{g as d}from"./p-DQuL1Twl.js";var c=e=>{const o=e.cloneNode;e.cloneNode=function(e){if("TEMPLATE"===this.nodeName)return o.call(this,e);const t=o.call(this,!1),a=this.childNodes;if(e)for(let e=0;e<a.length;e++)2!==a[e].nodeType&&t.appendChild(a[e].cloneNode(!0));return t}};(()=>{o.isDev&&!o.isTesting&&t("Running in development mode."),o.cloneNodeFix&&c(n.prototype);const l=o.scriptDataOpts?a.document&&Array.from(a.document.querySelectorAll("script")).find((e=>new RegExp(`/${i}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===i)):null,s=import.meta.url,d=o.scriptDataOpts&&(l||{})["data-opts"]||{};return""!==s&&(d.resourcesUrl=new URL(".",s).href),e(d)})().then((async e=>(await d(),l(JSON.parse('[["p-7a809a49",[[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}]}]]],["p-db32a77a",[[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]}]]],["p-a8184705",[[257,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"]}]]],["p-e311d101",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-ea1f5082",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-1bb92456",[[17,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-a14ee5bd",[[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"]}]]],["p-4020bb89",[[1,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-b270f26b",[[1,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-3fe44227",[[257,"dso-legend-item",{"disabled":[516],"disabledMessage":[513,"disabled-message"],"activatable":[516],"active":[516],"_mode":[513],"showOptions":[32]}]]],["p-483af9df",[[257,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":[{"watchOpen":0}]}]]],["p-2edbfaae",[[1,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-0146f231",[[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}]}]]],["p-dabed551",[[257,"dso-legend",{"tabItems":[16]}]]],["p-b2d0319d",[[257,"dso-project-item",{"label":[1]}]]],["p-84f647aa",[[1,"dso-survey-rating"]]],["p-626ae90b",[[257,"dso-legend-group",{"mode":[513]},null,{"mode":[{"handleModeChange":0}]}]]],["p-875b414d",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-be7adaac",[[257,"dso-onboarding-tip",{"placement":[1],"ready":[32],"popoverOpen":[32]}]]],["p-44549e9c",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-cce55fbb",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-75e5057e",[[257,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-d87dd7c8",[[257,"dso-banner",{"status":[513],"compact":[516],"icon":[516]}]]],["p-d9800183",[[257,"dso-card",{"href":[513],"mode":[513],"active":[516]}]]],["p-e08e43be",[[257,"dso-document-card",{"href":[513],"active":[516]}]]],["p-bf803e4f",[[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}]}]]],["p-85c2c887",[[257,"dso-history-item",{"type":[513],"href":[513],"current":[516]}]]],["p-040f3f53",[[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]}]]],["p-61fd983a",[[257,"dso-map-layer",{"activatable":[516],"active":[516],"wijzigactie":[513]}]]],["p-d4539b83",[[257,"dso-map-layer-object",{"active":[516],"wijzigactie":[513]}]]],["p-d877c432",[[257,"dso-map-message",{"variant":[513],"hasActions":[32]}]]],["p-1ea5fb0d",[[257,"dso-plekinfo-card",{"wijzigactie":[513],"href":[513],"targetBlank":[4,"target-blank"],"active":[516]}]]],["p-b2202cd6",[[1,"dso-skiplink",{"to":[513],"label":[513]}]]],["p-c9768843",[[257,"dso-tijdreis-banner"]]],["p-5a25d8d9",[[257,"dso-accordion",{"variant":[6145],"reverseAlign":[6148,"reverse-align"],"_getState":[64]}]]],["p-f066244e",[[257,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-181cb6f7",[[257,"dso-card-container",{"mode":[513]}]]],["p-c3d5ccc6",[[257,"dso-contact-information"]]],["p-798eeae6",[[257,"dso-cursor-tooltip"]]],["p-2d1eb113",[[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]}]]],["p-9ce75fcd",[[257,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4]},[[8,"click","onClick"]]]]],["p-e03ff53f",[[257,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"green":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-e1f30dbb",[[1,"dso-input-range",{"min":[514],"max":[514],"value":[514],"step":[514],"label":[513],"unit":[513],"description":[513]}]]],["p-b4747ac0",[[1,"dso-logo",{"name":[513],"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-bb7ac6f7",[[1,"dso-segmented-button",{"groupName":[513,"group-name"],"options":[16],"label":[513],"required":[516],"activeOption":[16]}]]],["p-8e206e7e",[[257,"dso-tab",{"active":[516],"disabled":[516],"href":[1],"_dsoFocus":[64]}]]],["p-540a8027",[[257,"dso-tabs"]]],["p-6ebe1b0e",[[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}]}]]],["p-cda1adce",[[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}]}]]],["p-a286ac17",[[257,"dso-button-group",{"direction":[513]}]]],["p-8b9194ca",[[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]}]]],["p-0cc62094",[[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]}]]],["p-49b2bbb1",[[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"]}]]],["p-3047432c",[[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}]}]]],["p-fc8f252a",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[516]}]]],["p-c0111a70",[[257,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-9b0716d8",[[257,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-4a493df9",[[257,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"dialogRole":[1,"dialog-role"],"returnFocus":[4,"return-focus"],"closable":[4],"ariaId":[32]}]]],["p-ab33a108",[[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"]]]]]]'),e))));
|
|
1
|
+
import{p as e,B as o,c as t,w as a,N as i,H as n,b as l}from"./p-DrQGiJP8.js";export{s as setNonce}from"./p-DrQGiJP8.js";import{g as d}from"./p-DQuL1Twl.js";var c=e=>{const o=e.cloneNode;e.cloneNode=function(e){if("TEMPLATE"===this.nodeName)return o.call(this,e);const t=o.call(this,!1),a=this.childNodes;if(e)for(let e=0;e<a.length;e++)2!==a[e].nodeType&&t.appendChild(a[e].cloneNode(!0));return t}};(()=>{o.isDev&&!o.isTesting&&t("Running in development mode."),o.cloneNodeFix&&c(n.prototype);const l=o.scriptDataOpts?a.document&&Array.from(a.document.querySelectorAll("script")).find((e=>new RegExp(`/${i}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===i)):null,s=import.meta.url,d=o.scriptDataOpts&&(l||{})["data-opts"]||{};return""!==s&&(d.resourcesUrl=new URL(".",s).href),e(d)})().then((async e=>(await d(),l(JSON.parse('[["p-7a809a49",[[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}]}]]],["p-db32a77a",[[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]}]]],["p-a8184705",[[257,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"]}]]],["p-e311d101",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-ea1f5082",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-1bb92456",[[17,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-a14ee5bd",[[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"]}]]],["p-4020bb89",[[1,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-b270f26b",[[1,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-3fe44227",[[257,"dso-legend-item",{"disabled":[516],"disabledMessage":[513,"disabled-message"],"activatable":[516],"active":[516],"_mode":[513],"showOptions":[32]}]]],["p-483af9df",[[257,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":[{"watchOpen":0}]}]]],["p-2edbfaae",[[1,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-0146f231",[[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}]}]]],["p-dabed551",[[257,"dso-legend",{"tabItems":[16]}]]],["p-b2d0319d",[[257,"dso-project-item",{"label":[1]}]]],["p-84f647aa",[[1,"dso-survey-rating"]]],["p-626ae90b",[[257,"dso-legend-group",{"mode":[513]},null,{"mode":[{"handleModeChange":0}]}]]],["p-875b414d",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-be7adaac",[[257,"dso-onboarding-tip",{"placement":[1],"ready":[32],"popoverOpen":[32]}]]],["p-44549e9c",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-cce55fbb",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-75e5057e",[[257,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-d87dd7c8",[[257,"dso-banner",{"status":[513],"compact":[516],"icon":[516]}]]],["p-d9800183",[[257,"dso-card",{"href":[513],"mode":[513],"active":[516]}]]],["p-e08e43be",[[257,"dso-document-card",{"href":[513],"active":[516]}]]],["p-bf803e4f",[[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}]}]]],["p-85c2c887",[[257,"dso-history-item",{"type":[513],"href":[513],"current":[516]}]]],["p-040f3f53",[[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]}]]],["p-61fd983a",[[257,"dso-map-layer",{"activatable":[516],"active":[516],"wijzigactie":[513]}]]],["p-d4539b83",[[257,"dso-map-layer-object",{"active":[516],"wijzigactie":[513]}]]],["p-d877c432",[[257,"dso-map-message",{"variant":[513],"hasActions":[32]}]]],["p-1ea5fb0d",[[257,"dso-plekinfo-card",{"wijzigactie":[513],"href":[513],"targetBlank":[4,"target-blank"],"active":[516]}]]],["p-b2202cd6",[[1,"dso-skiplink",{"to":[513],"label":[513]}]]],["p-c9768843",[[257,"dso-tijdreis-banner"]]],["p-5a25d8d9",[[257,"dso-accordion",{"variant":[6145],"reverseAlign":[6148,"reverse-align"],"_getState":[64]}]]],["p-f066244e",[[257,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-181cb6f7",[[257,"dso-card-container",{"mode":[513]}]]],["p-c3d5ccc6",[[257,"dso-contact-information"]]],["p-798eeae6",[[257,"dso-cursor-tooltip"]]],["p-2d1eb113",[[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]}]]],["p-9ce75fcd",[[257,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4]},[[8,"click","onClick"]]]]],["p-e03ff53f",[[257,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"green":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-e1f30dbb",[[1,"dso-input-range",{"min":[514],"max":[514],"value":[514],"step":[514],"label":[513],"unit":[513],"description":[513]}]]],["p-b4747ac0",[[1,"dso-logo",{"name":[513],"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-bb7ac6f7",[[1,"dso-segmented-button",{"groupName":[513,"group-name"],"options":[16],"label":[513],"required":[516],"activeOption":[16]}]]],["p-8e206e7e",[[257,"dso-tab",{"active":[516],"disabled":[516],"href":[1],"_dsoFocus":[64]}]]],["p-540a8027",[[257,"dso-tabs"]]],["p-6ebe1b0e",[[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}]}]]],["p-d287c9fa",[[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}]}]]],["p-a286ac17",[[257,"dso-button-group",{"direction":[513]}]]],["p-8b9194ca",[[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]}]]],["p-0cc62094",[[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]}]]],["p-49b2bbb1",[[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"]}]]],["p-3047432c",[[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}]}]]],["p-fc8f252a",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[516]}]]],["p-c0111a70",[[257,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-9b0716d8",[[257,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-4a493df9",[[257,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"dialogRole":[1,"dialog-role"],"returnFocus":[4,"return-focus"],"closable":[4],"ariaId":[32]}]]],["p-ab33a108",[[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"]]]]]]'),e))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{h as i,F as n,r as e,d as t,g as o}from"./p-DrQGiJP8.js";import{c as a}from"./p-ChV9xqsO.js";import{d as s}from"./p-baWVwd8J.js";const l=["search","map","document"],r={map:"Kaart",document:"Document",search:"Zoeken"},d={small:"smal",medium:"middel",large:"breed"},c=({className:n,onClick:e,label:t,icon:o})=>i("dso-icon-button",{variant:"map",class:n,onDsoClick:e,icon:o,label:t}),p=({shrink:n,expand:e,size:t,panelLabel:o,placement:a})=>{const s=[];return"small"!==t&&s.push(i(c,{onClick:n,label:`${o} smaller maken`,icon:"right"===a?"chevron-right":"chevron-left",className:"shrink"})),"large"!==t&&s.push(i(c,{onClick:e,label:`${o} breder maken`,icon:"right"===a?"chevron-left":"chevron-right",className:"expand"})),i("div",{class:"sizing-buttons"},i("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",o.toLocaleLowerCase(),": ",d[t]),s)},m=({tabView:n,panelSize:e,shrinkDocumentPanel:t,expandDocumentPanel:o,dsoDocumentPanelSizeChangeAnimationEnd:a})=>i("div",{class:"dso-document-panel",onTransitionEnd:i=>{"flex-basis"===i.propertyName&&a.emit({currentSize:e})}},!n&&i(p,{panelLabel:"Documentpaneel",size:e,expand:o,shrink:t,placement:"right"}),i("div",{class:"content"},i("slot",{name:"document-panel"}))),h=({open:e,title:t,ref:o,dsoCloseFilterPanel:a})=>{const s=t||"Filterpaneel";return i("dialog",{class:"filter-panel",ref:o,inert:!e,"aria-label":s},e&&i(n,null,i("h3",{class:{"sr-only":!t}},s),i("dso-icon-button",{class:"dso-close",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:a}),i("slot",{name:"filter-panel"})))},b=({tabView:n,mainSize:e,documentPanelOpen:t,mainPanelExpanded:o,mainPanelHidden:s,toggleMainPanel:l,dsoMainSizeChangeAnimationEnd:r,printFilterPanel:d})=>i("div",{class:a("dso-main-panel",{compact:!n&&t&&!o,contracted:!n&&!t&&!o,expanded:!n&&t&&o,collapsed:s}),onTransitionEnd:i=>{"flex-basis"===i.propertyName&&r.emit({currentSize:e})}},!n&&t&&i("div",{class:"toggle-button"},i("dso-icon-button",{variant:"map",label:"Zoeken paneel "+(s?"tonen":"verbergen"),icon:s?"chevron-right":"chevron-left",onDsoClick:l})),i("div",{class:a("content",{invisible:s})},d,i("slot",{name:"main"}))),v=({ref:n,dsoCloseOverlay:e})=>i("dialog",{class:"overlay",ref:n,onCancel:i=>{i.preventDefault(),e(i)}},i("dso-icon-button",{class:"overlay-close-button",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:e}),i("slot",{name:"overlay"})),x=new ResizeObserver(s((([i])=>{const n=i?.target.getRootNode();n instanceof ShadowRoot&&"DSO-VIEWER-GRID"===n.host.tagName&&n.host._checkMainPanelVisibility()}),50)),u=class{constructor(i){e(this,i),this.dsoCloseOverlay=t(this,"dsoCloseOverlay",7),this.dsoCloseFilterPanel=t(this,"dsoCloseFilterPanel",7),this.dsoActiveTabSwitch=t(this,"dsoActiveTabSwitch",7),this.dsoMainSizeChangeAnimationEnd=t(this,"dsoMainSizeChangeAnimationEnd",7),this.dsoDocumentPanelSizeChange=t(this,"dsoDocumentPanelSizeChange",7),this.dsoDocumentPanelSizeChangeAnimationEnd=t(this,"dsoDocumentPanelSizeChangeAnimationEnd",7),this.dsoMainPanelToggle=t(this,"dsoMainPanelToggle",7),this.mediaCondition="(min-width: 1032px)",this.filterPanelOpen=!1,this.overlayOpen=!1,this.documentPanelOpen=!1,this.print=!1,this.mainSize="large",this.documentPanelSize="large",this.mainPanelExpanded=!1,this.mainPanelHidden=!1,this.tabView=window.innerWidth<1032,this.switchActiveTab=i=>{this.dsoActiveTabSwitch.emit({tab:i})},this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"large"===this.documentPanelSize?"medium":"small"})},this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"small"===this.documentPanelSize?"medium":"large"})},this.toggleMainPanel=()=>{this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=520&&(this.mainSize="small"),this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})},this.changeListener=i=>this.tabView=!i.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(i){i&&this._checkMainPanelVisibility()}filterPanelOpenWatcher(i){this.filterPanelSlot||console.warn("slot 'filter-panel' has not been set"),i?this.filterPanel?.show():this.filterPanel?.close()}overlayOpenWatcher(i){this.overlaySlot||console.warn("slot 'overlay' has not been set"),i?this.overlay?.showModal():this.overlay?.close()}async _checkMainPanelVisibility(){this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=520&&!this.mainPanelExpanded||this.mapElement.clientWidth<=80&&this.mainPanelExpanded)&&this.dsoMainPanelToggle.emit({hide:!0})}renderFilterPanel(){return i(h,{open:this.filterPanelOpen,title:this.filterPanelTitle,ref:i=>this.filterPanel=i,dsoCloseFilterPanel:i=>this.dsoCloseFilterPanel.emit({originalEvent:i})})}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){this.filterPanelOpen&&this.filterPanelSlot&&this.filterPanel?.show(),this.overlayOpen&&this.overlaySlot&&this.overlay?.showModal(),this.mapElement instanceof HTMLDivElement&&x.observe(this.mapElement)}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener),this.mapElement&&x.unobserve(this.mapElement)}render(){return i(n,{key:"26216b09a538c9527b0fb3c58d23924823664819"},i("slot",{key:"afe7a843a065fc8ac415cf94da9e11ca92820f3a",name:"top-bar"}),i("div",{key:"c9f2ac9868069fa3a90c5b4c9fa25959085d94b4",class:"viewer-grid-columns"},this.tabView&&i("nav",{key:"ac1389f48e0618fcc213ccb14371cc31ab53f8ab",class:"dso-navbar"},i("ul",{key:"30af55082ca83de47cf5ffeec1bd4670594d8773",class:"dso-nav dso-nav-sub"},l.map((n=>i("li",{key:n,class:a({"dso-active":this.activeTab===n})},i("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(n)},r[n])))))),(!this.tabView||this.tabView&&"search"===this.activeTab||this.print)&&i(b,{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():void 0}),(!this.tabView||this.tabView&&"search"===this.activeTab)&&!this.print&&this.renderFilterPanel(),(!this.tabView||this.tabView&&"map"===this.activeTab||this.print)&&i("div",{key:"44c4697c437a2ccf61a570c40f349f99bbd9baf5",class:"map-area"},i("div",{key:"e10b51a4a8e96b8b0417f2351134ec3de7a1641d",class:"map",ref:i=>this.mapElement=i},i("slot",{key:"d240e2e04ccd05dbd1314ee4c04a8af1bc4076a3",name:"map"})),i("slot",{key:"6ae2b90c8d7fe7f68d4a4eb9bd01c6054659f8de",name:"legend"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&"document"===this.activeTab||this.print)&&i(m,{key:"fb9680a12c8a9d29627af0583bfc7f5157448619",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),i(v,{key:"e92e5a979b4529ae948c4c3d47af3fa40a0460f4",ref:i=>this.overlay=i,dsoCloseOverlay:i=>this.dsoCloseOverlay.emit({originalEvent:i})})))}get host(){return o(this)}static get watchers(){return{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}}};u.style="*, *::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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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; margin-inline: auto 0; } } @media (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 (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 (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 { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } :host(:not([print])) .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media (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; }";export{u as dso_viewer_grid}
|
|
@@ -53,7 +53,7 @@ const Overlay = ({ ref, dsoCloseOverlay }) => (h("dialog", { class: "overlay", r
|
|
|
53
53
|
dsoCloseOverlay(e);
|
|
54
54
|
} }, h("dso-icon-button", { class: "overlay-close-button", icon: "cross", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseOverlay }), h("slot", { name: "overlay" })));
|
|
55
55
|
|
|
56
|
-
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; } .legend { 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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } } :host([print]) { block-size: auto; overflow: visible; } :host([print]) .viewer-grid-columns { 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]) .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% !important; max-inline-size: none !important; min-inline-size: 0 !important; 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 !important; margin-inline: 0; max-inline-size: none !important; min-inline-size: 0 !important; position: relative; transition: none; } :host([print]) .dso-document-panel { block-size: auto; box-shadow: none; inline-size: 100% !important; max-inline-size: none !important; min-inline-size: 0 !important; position: static; } :host([print]) .dso-document-panel .content { block-size: auto; overflow-y: visible; }`;
|
|
56
|
+
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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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; margin-inline: auto 0; } } @media (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 (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 (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 { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } :host(:not([print])) .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media (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; }`;
|
|
57
57
|
|
|
58
58
|
const resizeObserver = new ResizeObserver(debounce(([entry]) => {
|
|
59
59
|
const shadowRoot = entry?.target.getRootNode();
|
|
@@ -190,6 +190,9 @@ const ViewerGrid = class {
|
|
|
190
190
|
});
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
|
+
renderFilterPanel() {
|
|
194
|
+
return (h(FilterPanel, { open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) }));
|
|
195
|
+
}
|
|
193
196
|
connectedCallback() {
|
|
194
197
|
window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
|
|
195
198
|
}
|
|
@@ -211,9 +214,9 @@ const ViewerGrid = class {
|
|
|
211
214
|
}
|
|
212
215
|
}
|
|
213
216
|
render() {
|
|
214
|
-
return (h(Fragment, { key: '
|
|
217
|
+
return (h(Fragment, { key: '26216b09a538c9527b0fb3c58d23924823664819' }, h("slot", { key: 'afe7a843a065fc8ac415cf94da9e11ca92820f3a', name: "top-bar" }), h("div", { key: 'c9f2ac9868069fa3a90c5b4c9fa25959085d94b4', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'ac1389f48e0618fcc213ccb14371cc31ab53f8ab', class: "dso-navbar" }, h("ul", { key: '30af55082ca83de47cf5ffeec1bd4670594d8773', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (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) && (h("div", { key: '44c4697c437a2ccf61a570c40f349f99bbd9baf5', class: "map-area" }, h("div", { key: 'e10b51a4a8e96b8b0417f2351134ec3de7a1641d', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'd240e2e04ccd05dbd1314ee4c04a8af1bc4076a3', name: "map" })), h("slot", { key: '6ae2b90c8d7fe7f68d4a4eb9bd01c6054659f8de', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
|
|
215
218
|
(this.tabView && this.activeTab === "document") ||
|
|
216
|
-
this.print) && (h(DocumentPanel, { key: '
|
|
219
|
+
this.print) && (h(DocumentPanel, { key: 'fb9680a12c8a9d29627af0583bfc7f5157448619', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'e92e5a979b4529ae948c4c3d47af3fa40a0460f4', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
|
|
217
220
|
}
|
|
218
221
|
get host() { return getElement(this); }
|
|
219
222
|
static get watchers() { return {
|
|
@@ -8,6 +8,6 @@ export interface ViewerGridMainPanelProps {
|
|
|
8
8
|
mainPanelHidden: boolean;
|
|
9
9
|
toggleMainPanel: () => void;
|
|
10
10
|
dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;
|
|
11
|
-
printFilterPanel
|
|
11
|
+
printFilterPanel: VNode | undefined;
|
|
12
12
|
}
|
|
13
13
|
export declare const MainPanel: FunctionalComponent<ViewerGridMainPanelProps>;
|
|
@@ -4,7 +4,7 @@ import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent,
|
|
|
4
4
|
* @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.
|
|
5
5
|
* @slot main
|
|
6
6
|
* @slot map
|
|
7
|
-
* @slot legend
|
|
7
|
+
* @slot legend - Een slot die kan worden gevuld met een legend component.
|
|
8
8
|
* @slot filter-panel
|
|
9
9
|
* @slot overlay
|
|
10
10
|
* @slot document-panel
|
|
@@ -104,6 +104,7 @@ export declare class ViewerGrid {
|
|
|
104
104
|
private expandDocumentPanel;
|
|
105
105
|
private toggleMainPanel;
|
|
106
106
|
private changeListener;
|
|
107
|
+
private renderFilterPanel;
|
|
107
108
|
connectedCallback(): void;
|
|
108
109
|
componentDidLoad(): void;
|
|
109
110
|
disconnectedCallback(): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dso-toolkit/core",
|
|
3
|
-
"version": "97.0.0-ghi-3769.
|
|
3
|
+
"version": "97.0.0-ghi-3769.1",
|
|
4
4
|
"description": "DSO Toolkit Web Components",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/components/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"popper-max-size-modifier": "^0.2.0",
|
|
27
27
|
"tabbable": "^6.4.0",
|
|
28
28
|
"uuid": "^14.0.0",
|
|
29
|
-
"dso-toolkit": "97.0.0-ghi-3769.
|
|
29
|
+
"dso-toolkit": "97.0.0-ghi-3769.1"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@stencil/angular-output-target": "^1.3.0",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"typescript": "~5.9.3"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
|
-
"dso-toolkit": "97.0.0-ghi-3769.
|
|
56
|
+
"dso-toolkit": "97.0.0-ghi-3769.1"
|
|
57
57
|
},
|
|
58
58
|
"nx": {
|
|
59
59
|
"includedScripts": []
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{h as e,F as i,r as n,d as t,g as o}from"./p-DrQGiJP8.js";import{c as a}from"./p-ChV9xqsO.js";import{d as s}from"./p-baWVwd8J.js";const l=["search","map","document"],r={map:"Kaart",document:"Document",search:"Zoeken"},d={small:"smal",medium:"middel",large:"breed"},c=({className:i,onClick:n,label:t,icon:o})=>e("dso-icon-button",{variant:"map",class:i,onDsoClick:n,icon:o,label:t}),p=({shrink:i,expand:n,size:t,panelLabel:o,placement:a})=>{const s=[];return"small"!==t&&s.push(e(c,{onClick:i,label:`${o} smaller maken`,icon:"right"===a?"chevron-right":"chevron-left",className:"shrink"})),"large"!==t&&s.push(e(c,{onClick:n,label:`${o} breder maken`,icon:"right"===a?"chevron-left":"chevron-right",className:"expand"})),e("div",{class:"sizing-buttons"},e("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",o.toLocaleLowerCase(),": ",d[t]),s)},m=({tabView:i,panelSize:n,shrinkDocumentPanel:t,expandDocumentPanel:o,dsoDocumentPanelSizeChangeAnimationEnd:a})=>e("div",{class:"dso-document-panel",onTransitionEnd:e=>{"flex-basis"===e.propertyName&&a.emit({currentSize:n})}},!i&&e(p,{panelLabel:"Documentpaneel",size:n,expand:o,shrink:t,placement:"right"}),e("div",{class:"content"},e("slot",{name:"document-panel"}))),b=({open:n,title:t,ref:o,dsoCloseFilterPanel:a})=>{const s=t||"Filterpaneel";return e("dialog",{class:"filter-panel",ref:o,inert:!n,"aria-label":s},n&&e(i,null,e("h3",{class:{"sr-only":!t}},s),e("dso-icon-button",{class:"dso-close",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:a}),e("slot",{name:"filter-panel"})))},h=({tabView:i,mainSize:n,documentPanelOpen:t,mainPanelExpanded:o,mainPanelHidden:s,toggleMainPanel:l,dsoMainSizeChangeAnimationEnd:r,printFilterPanel:d})=>e("div",{class:a("dso-main-panel",{compact:!i&&t&&!o,contracted:!i&&!t&&!o,expanded:!i&&t&&o,collapsed:s}),onTransitionEnd:e=>{"flex-basis"===e.propertyName&&r.emit({currentSize:n})}},!i&&t&&e("div",{class:"toggle-button"},e("dso-icon-button",{variant:"map",label:"Zoeken paneel "+(s?"tonen":"verbergen"),icon:s?"chevron-right":"chevron-left",onDsoClick:l})),e("div",{class:a("content",{invisible:s})},d,e("slot",{name:"main"}))),v=({ref:i,dsoCloseOverlay:n})=>e("dialog",{class:"overlay",ref:i,onCancel:e=>{e.preventDefault(),n(e)}},e("dso-icon-button",{class:"overlay-close-button",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:n}),e("slot",{name:"overlay"})),x=new ResizeObserver(s((([e])=>{const i=e?.target.getRootNode();i instanceof ShadowRoot&&"DSO-VIEWER-GRID"===i.host.tagName&&i.host._checkMainPanelVisibility()}),50)),u=class{constructor(e){n(this,e),this.dsoCloseOverlay=t(this,"dsoCloseOverlay",7),this.dsoCloseFilterPanel=t(this,"dsoCloseFilterPanel",7),this.dsoActiveTabSwitch=t(this,"dsoActiveTabSwitch",7),this.dsoMainSizeChangeAnimationEnd=t(this,"dsoMainSizeChangeAnimationEnd",7),this.dsoDocumentPanelSizeChange=t(this,"dsoDocumentPanelSizeChange",7),this.dsoDocumentPanelSizeChangeAnimationEnd=t(this,"dsoDocumentPanelSizeChangeAnimationEnd",7),this.dsoMainPanelToggle=t(this,"dsoMainPanelToggle",7),this.mediaCondition="(min-width: 1032px)",this.filterPanelOpen=!1,this.overlayOpen=!1,this.documentPanelOpen=!1,this.print=!1,this.mainSize="large",this.documentPanelSize="large",this.mainPanelExpanded=!1,this.mainPanelHidden=!1,this.tabView=window.innerWidth<1032,this.switchActiveTab=e=>{this.dsoActiveTabSwitch.emit({tab:e})},this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"large"===this.documentPanelSize?"medium":"small"})},this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"small"===this.documentPanelSize?"medium":"large"})},this.toggleMainPanel=()=>{this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=520&&(this.mainSize="small"),this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})},this.changeListener=e=>this.tabView=!e.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(e){e&&this._checkMainPanelVisibility()}filterPanelOpenWatcher(e){this.filterPanelSlot||console.warn("slot 'filter-panel' has not been set"),e?this.filterPanel?.show():this.filterPanel?.close()}overlayOpenWatcher(e){this.overlaySlot||console.warn("slot 'overlay' has not been set"),e?this.overlay?.showModal():this.overlay?.close()}async _checkMainPanelVisibility(){this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=520&&!this.mainPanelExpanded||this.mapElement.clientWidth<=80&&this.mainPanelExpanded)&&this.dsoMainPanelToggle.emit({hide:!0})}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){this.filterPanelOpen&&this.filterPanelSlot&&this.filterPanel?.show(),this.overlayOpen&&this.overlaySlot&&this.overlay?.showModal(),this.mapElement instanceof HTMLDivElement&&x.observe(this.mapElement)}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener),this.mapElement&&x.unobserve(this.mapElement)}render(){return e(i,{key:"f291587822e81c2106ab5e36089ce42d0f9833f5"},e("slot",{key:"00e527296e700f9ce46f8429e5f2426461c4d83a",name:"top-bar"}),e("div",{key:"5e56932a8ad0ef86dc783a866f9c1d70ffafb386",class:"viewer-grid-columns"},this.tabView&&e("nav",{key:"0aa6869170bd5fbea948f986f0684869a5bb9319",class:"dso-navbar"},e("ul",{key:"c43b64696dc610265dc1d9a14d331a516a0b733e",class:"dso-nav dso-nav-sub"},l.map((i=>e("li",{key:i,class:a({"dso-active":this.activeTab===i})},e("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(i)},r[i])))))),(!this.tabView||this.tabView&&"search"===this.activeTab||this.print)&&e(h,{key:"059d82c2c2f7c285644d2a03e3dfbe090a0f3033",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?e(b,{open:this.filterPanelOpen,title:this.filterPanelTitle,ref:e=>this.filterPanel=e,dsoCloseFilterPanel:e=>this.dsoCloseFilterPanel.emit({originalEvent:e})}):void 0}),(!this.tabView||this.tabView&&"search"===this.activeTab)&&!this.print&&e(b,{key:"4f2dd3da03203f0d5640ad21731478fa01f2a547",open:this.filterPanelOpen,title:this.filterPanelTitle,ref:e=>this.filterPanel=e,dsoCloseFilterPanel:e=>this.dsoCloseFilterPanel.emit({originalEvent:e})}),(!this.tabView||this.tabView&&"map"===this.activeTab||this.print)&&e("div",{key:"c1ded5defe7683febd8612b9eaf0bec4b3b054e3",class:"map-area"},e("div",{key:"119acd44416483f19a2153c151f39086c6ebd365",class:"map",ref:e=>this.mapElement=e},e("slot",{key:"94df8c9c9de2a7367c246ee88609af366a745865",name:"map"})),e("div",{key:"ac15769c7a405059399885ab852074c3f912b536",class:"legend"},e("slot",{key:"ae24218f8a14e8fb93b53ae22635ddeaa2f18e90",name:"legend"}))),(!this.tabView&&this.documentPanelOpen||this.tabView&&"document"===this.activeTab||this.print)&&e(m,{key:"f5e6beaab079ff790e3248267797abc1659f38bc",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),e(v,{key:"bf93377744c7855707d8f0fea887eeceeaacc187",ref:e=>this.overlay=e,dsoCloseOverlay:e=>this.dsoCloseOverlay.emit({originalEvent:e})})))}get host(){return o(this)}static get watchers(){return{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}}};u.style="*, *::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; } .legend { 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 (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media (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 (max-width: 624px) { .overlay { inline-size: 100vw; } } @media (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 (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 (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 (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 (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 (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 (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 (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 (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 (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 (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } } :host([print]) { block-size: auto; overflow: visible; } :host([print]) .viewer-grid-columns { 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]) .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% !important; max-inline-size: none !important; min-inline-size: 0 !important; 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 !important; margin-inline: 0; max-inline-size: none !important; min-inline-size: 0 !important; position: relative; transition: none; } :host([print]) .dso-document-panel { block-size: auto; box-shadow: none; inline-size: 100% !important; max-inline-size: none !important; min-inline-size: 0 !important; position: static; } :host([print]) .dso-document-panel .content { block-size: auto; overflow-y: visible; }";export{u as dso_viewer_grid}
|