@dso-toolkit/core 95.0.0 → 95.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/bundle/dso-document-component.js +1 -1
  2. package/dist/bundle/dso-list-button.js +1 -1
  3. package/dist/bundle/dso-map-controls.js +1 -1
  4. package/dist/bundle/dso-modal.js +1 -1
  5. package/dist/bundle/dso-ozon-content.js +1 -1
  6. package/dist/bundle/dso-table.js +1 -1
  7. package/dist/bundle/dso-viewer-grid.js +2 -2
  8. package/dist/bundle/dsot-document-component-demo.js +4 -4
  9. package/dist/bundle/{p-BcejAJTk.js → p-B-VMnSMl.js} +10 -2
  10. package/dist/bundle/{p-CR-rxxZR.js → p-B5uIYOPn.js} +4 -4
  11. package/dist/bundle/{p-pAprbk-K.js → p-ClIxAe6b.js} +2 -2
  12. package/dist/bundle/{p-Drg4jBmd.js → p-DInlGNus.js} +3 -3
  13. package/dist/cjs/dso-alert_7.cjs.entry.js +2 -2
  14. package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js +1 -1
  15. package/dist/cjs/dso-list-button.cjs.entry.js +1 -1
  16. package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
  17. package/dist/cjs/dso-modal.cjs.entry.js +10 -2
  18. package/dist/cjs/dso-viewer-grid.cjs.entry.js +2 -2
  19. package/dist/collection/components/document-component/document-component.css +0 -16
  20. package/dist/collection/components/list-button/list-button.css +0 -10
  21. package/dist/collection/components/map-controls/map-controls.css +0 -16
  22. package/dist/collection/components/modal/modal.js +10 -2
  23. package/dist/collection/components/ozon-content/ozon-content.css +0 -16
  24. package/dist/collection/components/table/table.css +0 -16
  25. package/dist/collection/components/viewer-grid/viewer-grid.css +11 -21
  26. package/dist/collection/components/viewer-grid/viewer-grid.js +1 -1
  27. package/dist/components/document-component.js +1 -1
  28. package/dist/components/dso-list-button.js +1 -1
  29. package/dist/components/dso-map-controls.js +1 -1
  30. package/dist/components/dso-viewer-grid.js +1 -1
  31. package/dist/components/modal.js +1 -1
  32. package/dist/components/ozon-content.js +1 -1
  33. package/dist/components/table.js +1 -1
  34. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  35. package/dist/dso-toolkit/{p-015bdc99.entry.js → p-2df078b0.entry.js} +1 -1
  36. package/dist/dso-toolkit/{p-8a6862d9.entry.js → p-3a3e6ad1.entry.js} +1 -1
  37. package/dist/dso-toolkit/p-432f4b4b.entry.js +1 -0
  38. package/dist/dso-toolkit/p-825dad32.entry.js +1 -0
  39. package/dist/dso-toolkit/{p-2b05f2ab.entry.js → p-846794a5.entry.js} +1 -1
  40. package/dist/dso-toolkit/p-c59bc8c0.entry.js +1 -0
  41. package/dist/esm/dso-alert_7.entry.js +2 -2
  42. package/dist/esm/dso-annotation-locatie_2.entry.js +1 -1
  43. package/dist/esm/dso-list-button.entry.js +1 -1
  44. package/dist/esm/dso-map-controls.entry.js +1 -1
  45. package/dist/esm/dso-modal.entry.js +10 -2
  46. package/dist/esm/dso-viewer-grid.entry.js +2 -2
  47. package/dist/types/components/modal/modal.d.ts +4 -0
  48. package/package.json +3 -3
  49. package/dist/dso-toolkit/p-978b1c1c.entry.js +0 -1
  50. package/dist/dso-toolkit/p-9c2cebf3.entry.js +0 -1
  51. package/dist/dso-toolkit/p-a85bbabe.entry.js +0 -1
package/dist/esm/dso-modal.entry.js CHANGED
@@ -24,6 +24,8 @@ const Modal = class {
24
24
  constructor(hostRef) {
25
25
  registerInstance(this, hostRef);
26
26
  this.dsoClose = createEvent(this, "dsoClose", 7);
27
+ this.startedMouseDownOutsideDialog = false;
28
+ this.endedMouseUpOutsideDialog = false;
27
29
  this.ariaId = v4();
28
30
  /**
29
31
  * the role for the modal `dialog` | `alert` | `alertdialog`.
@@ -72,16 +74,22 @@ const Modal = class {
72
74
  }
73
75
  (this.returnFocus ?? this.returnFocusElement)?.focus();
74
76
  }
77
+ handleDialogMouseDown(e) {
78
+ this.startedMouseDownOutsideDialog = e.target === this.htmlDialogElement;
79
+ }
80
+ handleDialogMouseUp(e) {
81
+ this.endedMouseUpOutsideDialog = e.target === this.htmlDialogElement;
82
+ }
75
83
  handleDialogClick(e) {
76
84
  if (!this.closable) {
77
85
  return;
78
86
  }
79
- if (e.target === this.htmlDialogElement) {
87
+ if (this.startedMouseDownOutsideDialog && this.endedMouseUpOutsideDialog && e.target === this.htmlDialogElement) {
80
88
  this.dsoClose.emit({ originalEvent: e });
81
89
  }
82
90
  }
83
91
  render() {
84
- return (h("dialog", { key: 'badbdadcb6dcd1411ba171f7283b590ad9c6de79', class: "dso-modal", role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '81de7f17f65cf5a3287fa8a3b724cb54567246d5', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'f624e137d4d3cfa27f65cda4bf061b239d5c3a77' }, h("div", { key: '532fb2db408afd57e0fa85a73837932fe9137a16', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'c2fbd08f27c4b21f3d9ed2689371ec9971745bfe', name: "body" }))), this.hasFooter && (h("div", { key: '437260e61d2bd50645c22ceec8043a045236f41c', class: "dso-footer" }, h("slot", { key: 'c0943718816ced146499c1a4a20de93dc54cbb34', name: "footer" }))))));
92
+ return (h("dialog", { key: '53c5986c4c19ff57cd1a13728917036ac1a54e8e', class: "dso-modal", role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '63e935e42a8f5758ac5f256a31880f3ec8c7cc6a', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'a3ea045bdb7c79855e3b0b122e19d47d57755771' }, h("div", { key: '9bc6194e0372c8d380791ddfa44405ec8ee4a370', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'e8190b5d437edbb809662a52939021010f3fa325', name: "body" }))), this.hasFooter && (h("div", { key: 'e69106fb11d4cb24174a64917757cadd13b98402', class: "dso-footer" }, h("slot", { key: 'dc97f37c34719c850520d9c3155e793ba7eba8dd', name: "footer" }))))));
85
93
  }
86
94
  get host() { return getElement(this); }
87
95
  };
package/dist/esm/dso-viewer-grid.entry.js CHANGED
@@ -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 { block-size: 100%; inline-size: 100%; overflow: hidden; position: relative; } .filter-panel, .overlay { background-color: #fff; border: 0; block-size: 100%; margin-block: 0; max-block-size: 100vh; overflow-y: auto; z-index: 101; } .filter-panel { display: block; position: absolute; padding-block: 8px; padding-inline: 16px; inset-block-start: 0; block-size: 100%; inset-inline-start: -380px; inline-size: 100%; transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media screen and (min-width: 992px) { .filter-panel { max-inline-size: 380px; } } .filter-panel[open] { inset-inline-start: 0; box-shadow: none; border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 { color: #275937; } .filter-panel .dso-close { --_dso-icon-button-tertiary-color: #191919; position: absolute; inset-block-start: 20px; inset-inline-end: 20px; } .overlay { padding-block: 40px 8px; padding-inline: 16px; inset-inline-end: 0; inline-size: 624px; } .overlay::backdrop { background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) { .overlay { inline-size: 100vw; } } @media screen and (min-width: 808px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 375px; min-inline-size: 0; max-inline-size: 375px; } } @media screen and (min-width: 808px) and (max-width: 375px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 0; transition: none; } } @media screen and (min-width: 808px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 624px; min-inline-size: 375px; max-inline-size: 624px; } } @media screen and (min-width: 808px) and (max-width: 624px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 375px; transition: none; } } @media screen and (min-width: 808px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1024px; } } @media screen and (min-width: 808px) and (max-width: 768px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 768px; transition: none; } } @media screen and (min-width: 808px) { :host { display: flex; flex-direction: column; block-size: 100vh; overflow: clip; position: relative; } :host .dso-main-panel.compact, :host .dso-main-panel.expanded { flex-basis: unset; min-inline-size: unset; max-inline-size: unset; inline-size: 440px; } :host .viewer-grid-columns { display: flex; overflow: hidden; flex-grow: 1; } .dso-main-panel, .dso-document-panel { box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4); } .dso-main-panel .content, .dso-document-panel .content { overflow-y: auto; } .filter-panel { margin-inline: 0 auto; inline-size: calc(100vw - 40px); } .filter-panel[open] { border-inline-end: 1px solid #e5e5e5; } .overlay { box-shadow: -2px 0 5px #666; margin-inline: auto 0; } } @media screen and (min-width: 808px) and (max-width: 1031.99px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; max-inline-size: calc(100vw - 380px); } .filter-panel { inline-size: 380px; inset-inline-start: -380px; } } @media screen and (max-width: 807.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: 807.99px) and (min-width: 992px) { .dso-navbar .dso-navbar-toggle { display: none; } } @media screen and (max-width: 807.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 dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } .dso-tertiary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dt-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; } .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { font-weight: 300; } .overlay { inline-size: calc(100vw - 32px); } .filter-panel, .overlay { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media screen and (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } }`;
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 { block-size: 100%; inline-size: 100%; overflow: hidden; position: relative; } .filter-panel, .overlay { background-color: #fff; border: 0; block-size: 100%; margin-block: 0; max-block-size: 100vh; overflow-y: auto; z-index: 101; } .filter-panel { display: block; position: absolute; padding-block: 8px; padding-inline: 16px; inset-block-start: 0; block-size: 100%; inset-inline-start: -380px; inline-size: 100%; transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media screen and (min-width: 992px) { .filter-panel { max-inline-size: 380px; } } .filter-panel[open] { inset-inline-start: 0; box-shadow: none; border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 { color: #275937; } .filter-panel .dso-close { --_dso-icon-button-tertiary-color: #191919; position: absolute; inset-block-start: 20px; inset-inline-end: 20px; } .overlay { padding-block: 40px 8px; padding-inline: 16px; inset-inline-end: 0; inline-size: 624px; } .overlay::backdrop { background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) { .overlay { inline-size: 100vw; } } @media screen and (min-width: 1032px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 375px; min-inline-size: 0; max-inline-size: 375px; } } @media screen and (min-width: 1032px) and (max-width: 375px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 0; transition: none; } } @media screen and (min-width: 1032px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 624px; min-inline-size: 375px; max-inline-size: 624px; } } @media screen and (min-width: 1032px) and (max-width: 624px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 375px; transition: none; } } @media screen and (min-width: 1032px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1024px; } } @media screen and (min-width: 1032px) and (max-width: 768px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 768px; transition: none; } } @media screen and (min-width: 1032px) { :host { display: flex; flex-direction: column; block-size: 100vh; overflow: clip; position: relative; } :host .dso-main-panel.compact, :host .dso-main-panel.expanded { flex-basis: unset; min-inline-size: unset; max-inline-size: unset; inline-size: 440px; } :host .viewer-grid-columns { display: flex; overflow: hidden; flex-grow: 1; } .dso-main-panel, .dso-document-panel { box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4); } .dso-main-panel .content, .dso-document-panel .content { overflow-y: auto; } .filter-panel { margin-inline: 0 auto; inline-size: calc(100vw - 40px); } .filter-panel[open] { border-inline-end: 1px solid #e5e5e5; } .overlay { box-shadow: -2px 0 5px #666; margin-inline: auto 0; } } @media screen and (min-width: 1032px) and (max-width: 1031.99px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; max-inline-size: calc(100vw - 380px); } .filter-panel { inline-size: 380px; inset-inline-start: -380px; } } @media screen and (max-width: 1031.99px) { .dso-navbar { min-block-size: 32px; } .dso-navbar .dso-navbar-header { float: inline-start; } .dso-navbar .dso-navbar-toggle { border-radius: 4px; min-inline-size: auto; padding-block: 5px; padding-inline: 0; } .dso-navbar .dso-navbar-toggle dso-icon { margin-inline-start: 8px; margin-inline-end: 8px; } } @media screen and (max-width: 1031.99px) and (min-width: 992px) { .dso-navbar .dso-navbar-toggle { display: none; } } @media screen and (max-width: 1031.99px) { .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child { margin-inline-end: 8rem; } .dso-nav { list-style: none; margin-block-end: 0; padding-inline-start: 0; } .dso-nav > li > button { border: 0; background-color: transparent; } .dso-nav > li > a, .dso-nav > li > button { display: block; } .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited, .dso-nav > li > button, .dso-nav > li > button:hover, .dso-nav > li > button:focus, .dso-nav > li > button:visited { color: #275937; } .dso-nav > li.dso-active > a, .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a, .dso-nav > li.is-active > button { border-block-end: 4px solid #8b4a6a; font-weight: bold; } .dso-nav.dso-nav-main > li { display: inline-block; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { text-decoration: none; } .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active, .dso-nav.dso-nav-main > li > button:hover, .dso-nav.dso-nav-main > li > button:focus-visible, .dso-nav.dso-nav-main > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { font-size: 1.25em; line-height: 1; margin-block-start: 8px; padding-block: 8px 7px; padding-inline: 16px; } .dso-nav.dso-nav-sub > li { display: inline-block; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { text-decoration: none; } .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active, .dso-nav.dso-nav-sub > li > button:hover, .dso-nav.dso-nav-sub > li > button:focus-visible, .dso-nav.dso-nav-sub > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { font-size: 1rem; margin-block-start: 4px; padding-block: 4px 3px; padding-inline: 8px; } .dso-navbar { padding-inline: 16px; } .dso-nav { border-block-end: 1px solid #ccc; display: flex; gap: 16px; margin-block-start: 0; inline-size: calc(100vw - 32px); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); float: var(--_dt-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dt-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-tertiary:hover { background-color: var(--_dso-button-tertiary-hover-background-color, ); border-color: var(--_dso-button-tertiary-hover-border-color, ); color: var(--_dso-button-tertiary-hover-color, #275937); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary:active { background-color: var(--_dso-button-tertiary-active-background-color, ); border-color: var(--_dso-button-tertiary-active-border-color, ); color: var(--_dso-button-tertiary-active-color, #173521); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover { background-color: var(--_dso-button-tertiary-disabled-background-color, ); border-color: var(--_dso-button-tertiary-disabled-border-color, ); color: var(--_dso-button-tertiary-disabled-color, #afcf9d); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary.dso-small { line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { padding-block: 9px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dt-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; } .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { font-weight: 300; } .overlay { inline-size: calc(100vw - 32px); } .filter-panel, .overlay { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media screen and (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } }`;
57
57
 
58
58
  const resizeObserver = new ResizeObserver(debounce(([entry]) => {
59
59
  const shadowRoot = entry?.target.getRootNode();
@@ -65,7 +65,7 @@ function isDsoViewerGridComponent(element) {
65
65
  return element.tagName === "DSO-VIEWER-GRID";
66
66
  }
67
67
  const buttonWidth = 40;
68
- const tabViewBreakpoint = 768 + buttonWidth;
68
+ const tabViewBreakpoint = 992 + buttonWidth;
69
69
  const minMapElementWidth = 440;
70
70
  const ViewerGrid = class {
71
71
  constructor(hostRef) {
package/dist/types/components/modal/modal.d.ts CHANGED
@@ -2,6 +2,8 @@ import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
2
2
  import { ModalCloseEvent } from "./modal.interfaces";
3
3
  export declare class Modal implements ComponentInterface {
4
4
  private htmlDialogElement?;
5
+ private startedMouseDownOutsideDialog;
6
+ private endedMouseUpOutsideDialog;
5
7
  host: HTMLDsoModalElement;
6
8
  ariaId: string;
7
9
  /**
@@ -42,6 +44,8 @@ export declare class Modal implements ComponentInterface {
42
44
  private text;
43
45
  componentDidLoad(): void;
44
46
  disconnectedCallback(): void;
47
+ private handleDialogMouseDown;
48
+ private handleDialogMouseUp;
45
49
  private handleDialogClick;
46
50
  private blockEscapeKey;
47
51
  render(): any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dso-toolkit/core",
3
- "version": "95.0.0",
3
+ "version": "95.1.0",
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": "95.0.0"
29
+ "dso-toolkit": "95.1.0"
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": "95.0.0"
56
+ "dso-toolkit": "95.1.0"
57
57
  },
58
58
  "nx": {
59
59
  "includedScripts": []
package/dist/dso-toolkit/p-978b1c1c.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as o,d,h as s,g as i}from"./p-uGZacrki.js";import{g as l}from"./p-BWkWD1Z2.js";import{i as a}from"./p-DwBHVuoZ.js";import{v as e}from"./p-CK3_k8jD.js";const n={en:{"dso-modal":{close:"Close",dialog:"Dialog"}},nl:{"dso-modal":{close:"Sluiten",dialog:"Dialoog"}}},t=class{constructor(s){o(this,s),this.dsoClose=d(this,"dsoClose",7),this.ariaId=e(),this.dialogRole="dialog",this.returnFocus=void 0,this.closable=!1,this.text=a((()=>this.host),n),this.blockEscapeKey=o=>{"Escape"===o.key&&(o.preventDefault(),this.closable&&this.dsoClose.emit({originalEvent:o}))}}get hasFooter(){return null!==this.host.querySelector("[slot='footer']")}componentDidLoad(){if(this.htmlDialogElement?.isConnected){const o=l();o instanceof HTMLElement&&(this.returnFocusElement=o),this.htmlDialogElement.showModal()}}disconnectedCallback(){this.htmlDialogElement?.close(),!1!==this.returnFocus&&(this.returnFocus??this.returnFocusElement)?.focus()}handleDialogClick(o){this.closable&&o.target===this.htmlDialogElement&&this.dsoClose.emit({originalEvent:o})}render(){return s("dialog",{key:"badbdadcb6dcd1411ba171f7283b590ad9c6de79",class:"dso-modal",role:this.dialogRole??void 0,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onClick:o=>this.handleDialogClick(o),onKeyDown:o=>this.blockEscapeKey(o)},s("div",{key:"81de7f17f65cf5a3287fa8a3b724cb54567246d5",class:"dso-dialog",role:"document"},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.closable&&s("dso-icon-button",{id:"close-modal",icon:"cross",variant:"tertiary",label:this.text("close"),onDsoClick:o=>this.dsoClose.emit({originalEvent:o})})):s("span",{class:"sr-only",id:this.ariaId},this.text("dialog")),s("dso-scrollable",{key:"f624e137d4d3cfa27f65cda4bf061b239d5c3a77"},s("div",{key:"532fb2db408afd57e0fa85a73837932fe9137a16",class:"dso-body",tabIndex:0},s("slot",{key:"c2fbd08f27c4b21f3d9ed2689371ec9971745bfe",name:"body"}))),this.hasFooter&&s("div",{key:"437260e61d2bd50645c22ceec8043a045236f41c",class:"dso-footer"},s("slot",{key:"c0943718816ced146499c1a4a20de93dc54cbb34",name:"footer"}))))}get host(){return i(this)}};t.style="@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink: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)}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}.dso-modal{--_dt-button-float-tertiary:inline-start;--_dt-button-padding-block-tertiary:14px;overflow:visible;padding:0;border:0;inline-size:var(--_dt-modal-inline-size, auto);margin:var(--_dt-modal-margin, auto)}@media screen and (max-width: 767px){.dso-modal{--_dt-button-inline-size:100%;--_dt-button-after-button-margin-inline-start:0;--_dt-button-after-button-margin-block-start:8px;--_dt-button-text-align:center;inline-size:100%}}@media screen and (max-height: 380px){.dso-modal{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:var(--_dt-modal-dialog-inline-size, 640px);margin-block-start:var(--_dt-modal-dialog-margin-block-start, 0);margin-inline-start:var(--_dt-modal-dialog-margin-inline-start, auto);margin-inline-end:var(--_dt-modal-dialog-margin-inline-end, auto);background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header dso-icon-button{position:absolute;inset-block-start:var(--_dt-modal-header-close-btn, 22px);inset-inline-end:17px}@media screen and (max-height: 380px){.dso-modal .dso-header{padding-block:8px;padding-inline:16px}}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:var(--_dt-modal-body-max-block-size, calc(70vh - 144px - 1.5em));min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:var(--_dt-modal-body-max-block-size, calc(70vh - 144px - 1.5em));min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}@media screen and (max-height: 380px){.dso-modal .dso-body{padding-block:16px;padding-inline:24px}}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-height: 380px){.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}";export{t as dso_modal}
package/dist/dso-toolkit/p-9c2cebf3.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as t,d as o,f as e,h as r,F as i,g as s}from"./p-uGZacrki.js";import{c as n}from"./p-ChV9xqsO.js";const a=class{constructor(e){t(this,e),this.dsoCountChange=o(this,"dsoCountChange",7),this.dsoSelectedChange=o(this,"dsoSelectedChange",7),this.checked=!1,this.disabled=!1}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>e(this.host))),this.mutationObserver.observe(this.host,{characterData:!0,childList:!0,subtree:!0,attributes:!0})}componentDidRender(){this.subcontentSlot?.hasAttribute("aria-hidden")||this.subcontentSlot?.setAttribute("aria-hidden","true")}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}stepValue(t,o){if("number"==typeof this.count){const e="increment"===o?this.count+1:this.count-1;if(!this.isNewCountValid(e))return;this.dsoCountChange.emit({originalEvent:t,count:e})}}handleSelectClick(t){t.preventDefault(),void 0===this.count?this.dsoSelectedChange.emit({originalEvent:t,checked:!this.checked}):this.dsoCountChange.emit({originalEvent:t,count:this.count>0?0:1})}isNewCountValid(t){return!(void 0!==this.min&&void 0!==this.max&&(t<Number(this.min)||t>Number(this.max)))}render(){const t=this.checked||void 0!==this.count&&this.count>0;return r("div",{key:"b40ad36bcae88fd3a24af536577c54f719dd726c",class:n(["dso-button-group",{"dso-disabled":this.disabled}])},r("div",{key:"40dcae84cc39892cc622d5ff6cd11eab081bcc1d",class:n(["dso-list-button",{"dso-selected":t,"dso-single-count":1===this.count}]),onClick:t=>this.handleSelectClick(t)},r("dso-selectable",{key:"cffca295491fb902d476d78184ae81ee76e16180",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled},r("span",{key:"4ec09a173e8392e526acbead245fbcb7603885ff"},this.label,this.sublabel&&r("span",{key:"2aae89b6b5f4ae0cb3a36bb0a200bf7f90832bb8",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&r("span",{key:"f6eb83bbfa910e0efb83444308718e0d9d69b130",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",r("span",{key:"2668759703c2673b759e56270a0fdd4ae33b7af6",innerHTML:this.subcontentSlot.innerHTML})))),this.sublabel&&r("span",{key:"73e322f19f7c95b10c8436c346b4cdabff331941",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&r("div",{key:"dabdc528ecceb84b133f8f2e7ad49d92ebe50957",class:"subcontent"},r("slot",{key:"db2307e499b084f766c6e59530654895856f7087",name:"subcontent"}))),void 0!==this.count&&this.count>0&&r("div",{key:"67af4d0d0e30c0683501ab7dead8e6e6445dac8d",class:"dso-input-number"},this.count>1&&r(i,{key:"e7c26bd345a1fb6ec1202d317f07c42ebc1c1e4c"},r("dso-icon-button",{key:"c3143d4ee0586a589be2110ac6d41989e77f10e6",label:"Aantal verlagen",variant:"tertiary",icon:"minus-circle-outline",disabled:this.count===Number(this.min)||this.disabled,onDsoClick:t=>this.stepValue(t,"decrement")}),r("span",{key:"6258f043e6715023fb95efd5812c153bfcf60810",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),r("dso-icon-button",{key:"b308ddab2232669159dd46cea1a5b157c92c399b",label:"Aantal verhogen",variant:"tertiary",icon:"plus-circle-outline",disabled:this.count===Number(this.max)||this.disabled,onDsoClick:t=>this.stepValue(t,"increment")})))}get host(){return s(this)}};a.style="*, *::after, *::before { box-sizing: border-box; } :host { display: block; } .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); } .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 dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } .dso-tertiary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } .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 { cursor: pointer; } .dso-input-number { align-items: center; display: flex; } .dso-input-number .dso-input-step-counter { text-align: center; inline-size: 1.5rem; font-size: 14px; } .dso-button-group { display: flex; flex-direction: row; } .dso-button-group.dso-disabled > * { background-color: #fff; border-color: #e5e5e5; color: #666; pointer-events: none; } .dso-button-group > * { border-radius: 0; } .dso-button-group > *:first-child { border-radius: 4px 0 0 4px; } .dso-button-group > *:not(:first-child) { border-inline-start-style: none !important; } .dso-button-group > *:last-child { border-radius: 0 4px 4px 0; } .dso-button-group > *:only-child { border-radius: 4px; } .dso-button-group > .dso-input-number { border-style: solid; border-width: 1px; flex-wrap: nowrap; padding-block: 0; padding-inline: 16px; background-color: #fff; border-color: #ccc; color: #191919; } @media screen and (max-width: 767px) { .dso-button-group > .dso-input-number { justify-content: center; } } .dso-button-group > *:hover + .dso-input-number, .dso-button-group > *:focus + .dso-input-number { background-color: #fff; border-color: #d7e7ce; color: #191919; } .dso-button-group > *.dso-selected + .dso-input-number { box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c; background-color: #fff; border-color: #39870c; color: #191919; } .dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover, .dso-button-group > *.active + .dso-input-number, .dso-button-group > *.active + .dso-input-number:hover { background-color: #fff; border-color: #d7e7ce; color: #191919; } .dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover, .dso-button-group > *[disabled] + .dso-input-number, .dso-button-group > *[disabled] + .dso-input-number:hover { opacity: 1; background-color: #fff; border-color: #ccc; color: #666; } .dso-button-group .dso-list-button { padding-inline-end: 15px; } .dso-list-button { 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-list-button:focus, .dso-list-button:focus-visible { outline-offset: 2px; } .dso-list-button:active { outline: 0; } .dso-list-button { background-color: #fff; border-color: #ccc; color: #191919; border-radius: 4px; border-width: 1px; border-style: solid; font-weight: 600; padding-block: 15px; padding-inline: 15px 47px; position: relative; text-align: start; white-space: normal; inline-size: 100%; cursor: pointer; } .dso-list-button:hover, .dso-list-button:focus { background-color: #fff; border-color: #39870c; color: #191919; } .dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover { background-color: #fff; border-color: #d7e7ce; color: #191919; } .dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover { background-color: #fff; border-color: #ccc; color: #666; opacity: 1; } .dso-list-button dso-selectable:not(:last-child) { margin-block-end: 0; } .dso-list-button .dso-selectable-container label { font-weight: 700; } .dso-list-button.dso-selected { border-color: #39870c; border-width: 1px; box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c; } @media screen and (min-width: 768px) { .dso-list-button.dso-selected.dso-single-count { border-inline-end: 0; box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset; } } .dso-list-button label { cursor: inherit; } .dso-list-button > span { display: block; } .dso-list-button .dso-sublabel, .dso-list-button .subcontent { font-weight: 400; inline-size: 100%; padding-inline-start: 32px; } .dso-list-button dso-icon { block-size: 24px; color: #39870c; inset-block-start: 15px; inset-inline-end: 15px; inline-size: 24px; break-before: page; position: absolute; } @media screen and (max-width: 767px) { .dso-list-button.dso-selected.dso-single-count::after { inline-size: 0; } }";export{a as dso_list_button}
package/dist/dso-toolkit/p-a85bbabe.entry.js DELETED
@@ -1 +0,0 @@
1
- import{h as e,F as n,r as i,d as t,g as a}from"./p-uGZacrki.js";import{c as o}from"./p-ChV9xqsO.js";import{d as s}from"./p-baWVwd8J.js";const r=["search","map","document"],l={map:"Kaart",document:"Document",search:"Zoeken"},d={small:"smal",medium:"middel",large:"breed"},c=({className:n,onClick:i,label:t,icon:a})=>e("dso-icon-button",{variant:"map",class:n,onDsoClick:i,icon:a,label:t}),p=({shrink:n,expand:i,size:t,panelLabel:a,placement:o})=>{const s=[];return"small"!==t&&s.push(e(c,{onClick:n,label:`${a} smaller maken`,icon:"right"===o?"chevron-right":"chevron-left",className:"shrink"})),"large"!==t&&s.push(e(c,{onClick:i,label:`${a} breder maken`,icon:"right"===o?"chevron-left":"chevron-right",className:"expand"})),e("div",{class:"sizing-buttons"},e("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",a.toLocaleLowerCase(),": ",d[t]),s)},m=({tabView:n,panelSize:i,shrinkDocumentPanel:t,expandDocumentPanel:a,dsoDocumentPanelSizeChangeAnimationEnd:o})=>e("div",{class:"dso-document-panel",onTransitionEnd:e=>{"flex-basis"===e.propertyName&&o.emit({currentSize:i})}},!n&&e(p,{panelLabel:"Documentpaneel",size:i,expand:a,shrink:t,placement:"right"}),e("div",{class:"content"},e("slot",{name:"document-panel"}))),b=({open:i,title:t,ref:a,dsoCloseFilterPanel:o})=>{const s=t||"Filterpaneel";return e("dialog",{class:"filter-panel",ref:a,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:o}),e("slot",{name:"filter-panel"})))},h=({tabView:n,mainSize:i,documentPanelOpen:t,mainPanelExpanded:a,mainPanelHidden:s,toggleMainPanel:r,dsoMainSizeChangeAnimationEnd:l})=>e("div",{class:o("dso-main-panel",{compact:!n&&t&&!a,contracted:!n&&!t&&!a,expanded:!n&&t&&a,collapsed:s}),onTransitionEnd:e=>{"flex-basis"===e.propertyName&&l.emit({currentSize:i})}},!n&&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:r})),e("div",{class:o("content",{invisible:s})},e("slot",{name:"main"}))),v=({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"})),x=new ResizeObserver(s((([e])=>{const n=e?.target.getRootNode();n instanceof ShadowRoot&&"DSO-VIEWER-GRID"===n.host.tagName&&n.host._checkMainPanelVisibility()}),50)),u=class{constructor(e){i(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: 808px)",this.filterPanelOpen=!1,this.overlayOpen=!1,this.documentPanelOpen=!1,this.mainSize="large",this.documentPanelSize="large",this.mainPanelExpanded=!1,this.mainPanelHidden=!1,this.tabView=window.innerWidth<808,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(n,{key:"107327f469c7793fd1fc1c90b0367936ded7c88a"},e("slot",{key:"a6139fd224901aefc82e551f30f38f237168a29d",name:"top-bar"}),e("div",{key:"5c92640e25e5ef42f86bcef3e00b1b521cbd4293",class:"viewer-grid-columns"},this.tabView&&e("nav",{key:"9172291d20e7e758fb4e53b054617169602c36e0",class:"dso-navbar"},e("ul",{key:"40f1a4bdee9491b38799d010053482bd7b48ab99",class:"dso-nav dso-nav-sub"},r.map((n=>e("li",{key:n,class:o({"dso-active":this.activeTab===n})},e("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(n)},l[n])))))),(!this.tabView||this.tabView&&"search"===this.activeTab)&&e(h,{key:"306084b98dc9ed3e4400cfd9f6ab30b7cef2a374",tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:this.mainPanelHidden,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd}),(!this.tabView||this.tabView&&"search"===this.activeTab)&&e(b,{key:"425c35dd78e48924d9f61308ac10744d206a9074",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)&&e("div",{key:"c9a9d4d612b592bfe5d8d3aa8266a89771a1b4cc",class:"map",ref:e=>this.mapElement=e},e("slot",{key:"162a97b0413668dfe6020a427c0523f8fae87fd6",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&"document"===this.activeTab)&&e(m,{key:"678ac7f6c01a58c157c8e9337d2740e00590f0b8",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),e(v,{key:"c7adca136159a2810210f51c7a09381b38452b29",ref:e=>this.overlay=e,dsoCloseOverlay:e=>this.dsoCloseOverlay.emit({originalEvent:e})})))}get host(){return a(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 { block-size: 100%; inline-size: 100%; overflow: hidden; position: relative; } .filter-panel, .overlay { background-color: #fff; border: 0; block-size: 100%; margin-block: 0; max-block-size: 100vh; overflow-y: auto; z-index: 101; } .filter-panel { display: block; position: absolute; padding-block: 8px; padding-inline: 16px; inset-block-start: 0; block-size: 100%; inset-inline-start: -380px; inline-size: 100%; transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media screen and (min-width: 992px) { .filter-panel { max-inline-size: 380px; } } .filter-panel[open] { inset-inline-start: 0; box-shadow: none; border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 { color: #275937; } .filter-panel .dso-close { --_dso-icon-button-tertiary-color: #191919; position: absolute; inset-block-start: 20px; inset-inline-end: 20px; } .overlay { padding-block: 40px 8px; padding-inline: 16px; inset-inline-end: 0; inline-size: 624px; } .overlay::backdrop { background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) { .overlay { inline-size: 100vw; } } @media screen and (min-width: 808px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 375px; min-inline-size: 0; max-inline-size: 375px; } } @media screen and (min-width: 808px) and (max-width: 375px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 0; transition: none; } } @media screen and (min-width: 808px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 624px; min-inline-size: 375px; max-inline-size: 624px; } } @media screen and (min-width: 808px) and (max-width: 624px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 375px; transition: none; } } @media screen and (min-width: 808px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1024px; } } @media screen and (min-width: 808px) and (max-width: 768px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 768px; transition: none; } } @media screen and (min-width: 808px) { :host { display: flex; flex-direction: column; block-size: 100vh; overflow: clip; position: relative; } :host .dso-main-panel.compact, :host .dso-main-panel.expanded { flex-basis: unset; min-inline-size: unset; max-inline-size: unset; inline-size: 440px; } :host .viewer-grid-columns { display: flex; overflow: hidden; flex-grow: 1; } .dso-main-panel, .dso-document-panel { box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4); } .dso-main-panel .content, .dso-document-panel .content { overflow-y: auto; } .filter-panel { margin-inline: 0 auto; inline-size: calc(100vw - 40px); } .filter-panel[open] { border-inline-end: 1px solid #e5e5e5; } .overlay { box-shadow: -2px 0 5px #666; margin-inline: auto 0; } } @media screen and (min-width: 808px) and (max-width: 1031.99px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; max-inline-size: calc(100vw - 380px); } .filter-panel { inline-size: 380px; inset-inline-start: -380px; } } @media screen and (max-width: 807.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: 807.99px) and (min-width: 992px) { .dso-navbar .dso-navbar-toggle { display: none; } } @media screen and (max-width: 807.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 dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } .dso-tertiary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dt-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; } .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { font-weight: 300; } .overlay { inline-size: calc(100vw - 32px); } .filter-panel, .overlay { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media screen and (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } }";export{u as dso_viewer_grid}