@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.
- package/dist/bundle/dso-document-component.js +1 -1
- package/dist/bundle/dso-list-button.js +1 -1
- package/dist/bundle/dso-map-controls.js +1 -1
- package/dist/bundle/dso-modal.js +1 -1
- package/dist/bundle/dso-ozon-content.js +1 -1
- package/dist/bundle/dso-table.js +1 -1
- package/dist/bundle/dso-viewer-grid.js +2 -2
- package/dist/bundle/dsot-document-component-demo.js +4 -4
- package/dist/bundle/{p-BcejAJTk.js → p-B-VMnSMl.js} +10 -2
- package/dist/bundle/{p-CR-rxxZR.js → p-B5uIYOPn.js} +4 -4
- package/dist/bundle/{p-pAprbk-K.js → p-ClIxAe6b.js} +2 -2
- package/dist/bundle/{p-Drg4jBmd.js → p-DInlGNus.js} +3 -3
- package/dist/cjs/dso-alert_7.cjs.entry.js +2 -2
- package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js +1 -1
- package/dist/cjs/dso-list-button.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
- package/dist/cjs/dso-modal.cjs.entry.js +10 -2
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +2 -2
- package/dist/collection/components/document-component/document-component.css +0 -16
- package/dist/collection/components/list-button/list-button.css +0 -10
- package/dist/collection/components/map-controls/map-controls.css +0 -16
- package/dist/collection/components/modal/modal.js +10 -2
- package/dist/collection/components/ozon-content/ozon-content.css +0 -16
- package/dist/collection/components/table/table.css +0 -16
- package/dist/collection/components/viewer-grid/viewer-grid.css +11 -21
- package/dist/collection/components/viewer-grid/viewer-grid.js +1 -1
- package/dist/components/document-component.js +1 -1
- package/dist/components/dso-list-button.js +1 -1
- package/dist/components/dso-map-controls.js +1 -1
- package/dist/components/dso-viewer-grid.js +1 -1
- package/dist/components/modal.js +1 -1
- package/dist/components/ozon-content.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/{p-015bdc99.entry.js → p-2df078b0.entry.js} +1 -1
- package/dist/dso-toolkit/{p-8a6862d9.entry.js → p-3a3e6ad1.entry.js} +1 -1
- package/dist/dso-toolkit/p-432f4b4b.entry.js +1 -0
- package/dist/dso-toolkit/p-825dad32.entry.js +1 -0
- package/dist/dso-toolkit/{p-2b05f2ab.entry.js → p-846794a5.entry.js} +1 -1
- package/dist/dso-toolkit/p-c59bc8c0.entry.js +1 -0
- package/dist/esm/dso-alert_7.entry.js +2 -2
- package/dist/esm/dso-annotation-locatie_2.entry.js +1 -1
- package/dist/esm/dso-list-button.entry.js +1 -1
- package/dist/esm/dso-map-controls.entry.js +1 -1
- package/dist/esm/dso-modal.entry.js +10 -2
- package/dist/esm/dso-viewer-grid.entry.js +2 -2
- package/dist/types/components/modal/modal.d.ts +4 -0
- package/package.json +3 -3
- package/dist/dso-toolkit/p-978b1c1c.entry.js +0 -1
- package/dist/dso-toolkit/p-9c2cebf3.entry.js +0 -1
- package/dist/dso-toolkit/p-a85bbabe.entry.js +0 -1
|
@@ -26,6 +26,8 @@ const Modal = class {
|
|
|
26
26
|
constructor(hostRef) {
|
|
27
27
|
index.registerInstance(this, hostRef);
|
|
28
28
|
this.dsoClose = index.createEvent(this, "dsoClose", 7);
|
|
29
|
+
this.startedMouseDownOutsideDialog = false;
|
|
30
|
+
this.endedMouseUpOutsideDialog = false;
|
|
29
31
|
this.ariaId = v4.v4();
|
|
30
32
|
/**
|
|
31
33
|
* the role for the modal `dialog` | `alert` | `alertdialog`.
|
|
@@ -74,16 +76,22 @@ const Modal = class {
|
|
|
74
76
|
}
|
|
75
77
|
(this.returnFocus ?? this.returnFocusElement)?.focus();
|
|
76
78
|
}
|
|
79
|
+
handleDialogMouseDown(e) {
|
|
80
|
+
this.startedMouseDownOutsideDialog = e.target === this.htmlDialogElement;
|
|
81
|
+
}
|
|
82
|
+
handleDialogMouseUp(e) {
|
|
83
|
+
this.endedMouseUpOutsideDialog = e.target === this.htmlDialogElement;
|
|
84
|
+
}
|
|
77
85
|
handleDialogClick(e) {
|
|
78
86
|
if (!this.closable) {
|
|
79
87
|
return;
|
|
80
88
|
}
|
|
81
|
-
if (e.target === this.htmlDialogElement) {
|
|
89
|
+
if (this.startedMouseDownOutsideDialog && this.endedMouseUpOutsideDialog && e.target === this.htmlDialogElement) {
|
|
82
90
|
this.dsoClose.emit({ originalEvent: e });
|
|
83
91
|
}
|
|
84
92
|
}
|
|
85
93
|
render() {
|
|
86
|
-
return (index.h("dialog", { key: '
|
|
94
|
+
return (index.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) }, index.h("div", { key: '63e935e42a8f5758ac5f256a31880f3ec8c7cc6a', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (index.h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (index.h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), index.h("dso-scrollable", { key: 'a3ea045bdb7c79855e3b0b122e19d47d57755771' }, index.h("div", { key: '9bc6194e0372c8d380791ddfa44405ec8ee4a370', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: 'e8190b5d437edbb809662a52939021010f3fa325', name: "body" }))), this.hasFooter && (index.h("div", { key: 'e69106fb11d4cb24174a64917757cadd13b98402', class: "dso-footer" }, index.h("slot", { key: 'dc97f37c34719c850520d9c3155e793ba7eba8dd', name: "footer" }))))));
|
|
87
95
|
}
|
|
88
96
|
get host() { return index.getElement(this); }
|
|
89
97
|
};
|
|
@@ -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 { 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; } }`;
|
|
58
|
+
const viewerGridCss = () => `*, *::after, *::before { box-sizing: border-box; } :host .overlay { block-size: calc(100% - 32px); margin-block: 16px; margin-inline: auto 16px; } :host .dso-main-panel { transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in; } button { -webkit-appearance: button; color: inherit; cursor: pointer; font: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; overflow: visible; text-transform: none; } button[disabled] { cursor: default; } button::-moz-focus-inner { border: 0; padding: 0; } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: rect(0 0 0 0); } .overlay-close-button { position: absolute; line-height: 1; inset-block-start: 8px; inset-inline-end: 16px; } .content.invisible { visibility: hidden; } .viewer-grid-columns { position: relative; } .dso-main-panel .content, .dso-document-panel .content { block-size: 100%; padding-block: 0; padding-inline: 16px; } .dso-main-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed { inset-inline-start: -432px; } .dso-main-panel.compact, .dso-main-panel.contracted { flex-shrink: unset; flex-grow: unset; position: absolute; transition: none; } .dso-main-panel.expanded.collapsed { position: absolute; block-size: 100%; } .dso-main-panel .sizing-buttons, .dso-main-panel .toggle-button { inset-inline-start: calc(100% + 1px); transition: inset-inline-start 200ms ease-in; padding-block: 0 8px; padding-inline: 0 4px; } .dso-main-panel .toggle-button { --_dt-icon-button-border-start-start-radius: 0; --_dt-icon-button-border-end-start-radius: 0; } .dso-document-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-document-panel .sizing-buttons { inset-block-start: auto; inset-block-end: 16px; inset-inline-end: calc(100% + 1px); transition: inset-inline-end 200ms ease-in; padding-block: 0 8px; padding-inline: 4px 0; } .dso-document-panel .sizing-buttons .shrink, .dso-document-panel .sizing-buttons .expand { --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px; --_dt-icon-button-border-start-end-radius: 0; --_dt-icon-button-border-end-end-radius: 0; } .sizing-buttons, .toggle-button { overflow-x: hidden; position: absolute; inset-block-start: 16px; inline-size: 44px; z-index: -1; } .map { block-size: 100%; inline-size: 100%; overflow: hidden; position: relative; } .filter-panel, .overlay { background-color: #fff; border: 0; block-size: 100%; margin-block: 0; max-block-size: 100vh; overflow-y: auto; z-index: 101; } .filter-panel { display: block; position: absolute; padding-block: 8px; padding-inline: 16px; inset-block-start: 0; block-size: 100%; inset-inline-start: -380px; inline-size: 100%; transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media screen and (min-width: 992px) { .filter-panel { max-inline-size: 380px; } } .filter-panel[open] { inset-inline-start: 0; box-shadow: none; border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 { color: #275937; } .filter-panel .dso-close { --_dso-icon-button-tertiary-color: #191919; position: absolute; inset-block-start: 20px; inset-inline-end: 20px; } .overlay { padding-block: 40px 8px; padding-inline: 16px; inset-inline-end: 0; inline-size: 624px; } .overlay::backdrop { background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) { .overlay { inline-size: 100vw; } } @media screen and (min-width: 1032px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 375px; min-inline-size: 0; max-inline-size: 375px; } } @media screen and (min-width: 1032px) and (max-width: 375px) { :host([main-size=small]) .dso-main-panel, :host([document-panel-size=small]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 0; transition: none; } } @media screen and (min-width: 1032px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 624px; min-inline-size: 375px; max-inline-size: 624px; } } @media screen and (min-width: 1032px) and (max-width: 624px) { :host([main-size=medium]) .dso-main-panel, :host([document-panel-size=medium]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 375px; transition: none; } } @media screen and (min-width: 1032px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1024px; } } @media screen and (min-width: 1032px) and (max-width: 768px) { :host([main-size=large]) .dso-main-panel, :host([document-panel-size=large]) .dso-document-panel { flex-basis: 100vw; max-inline-size: 100vw; min-inline-size: 768px; transition: none; } } @media screen and (min-width: 1032px) { :host { display: flex; flex-direction: column; block-size: 100vh; overflow: clip; position: relative; } :host .dso-main-panel.compact, :host .dso-main-panel.expanded { flex-basis: unset; min-inline-size: unset; max-inline-size: unset; inline-size: 440px; } :host .viewer-grid-columns { display: flex; overflow: hidden; flex-grow: 1; } .dso-main-panel, .dso-document-panel { box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4); } .dso-main-panel .content, .dso-document-panel .content { overflow-y: auto; } .filter-panel { margin-inline: 0 auto; inline-size: calc(100vw - 40px); } .filter-panel[open] { border-inline-end: 1px solid #e5e5e5; } .overlay { box-shadow: -2px 0 5px #666; margin-inline: auto 0; } } @media screen and (min-width: 1032px) and (max-width: 1031.99px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; max-inline-size: calc(100vw - 380px); } .filter-panel { inline-size: 380px; inset-inline-start: -380px; } } @media screen and (max-width: 1031.99px) { .dso-navbar { min-block-size: 32px; } .dso-navbar .dso-navbar-header { float: inline-start; } .dso-navbar .dso-navbar-toggle { border-radius: 4px; min-inline-size: auto; padding-block: 5px; padding-inline: 0; } .dso-navbar .dso-navbar-toggle dso-icon { margin-inline-start: 8px; margin-inline-end: 8px; } } @media screen and (max-width: 1031.99px) and (min-width: 992px) { .dso-navbar .dso-navbar-toggle { display: none; } } @media screen and (max-width: 1031.99px) { .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child { margin-inline-end: 8rem; } .dso-nav { list-style: none; margin-block-end: 0; padding-inline-start: 0; } .dso-nav > li > button { border: 0; background-color: transparent; } .dso-nav > li > a, .dso-nav > li > button { display: block; } .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited, .dso-nav > li > button, .dso-nav > li > button:hover, .dso-nav > li > button:focus, .dso-nav > li > button:visited { color: #275937; } .dso-nav > li.dso-active > a, .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a, .dso-nav > li.is-active > button { border-block-end: 4px solid #8b4a6a; font-weight: bold; } .dso-nav.dso-nav-main > li { display: inline-block; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { text-decoration: none; } .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active, .dso-nav.dso-nav-main > li > button:hover, .dso-nav.dso-nav-main > li > button:focus-visible, .dso-nav.dso-nav-main > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { font-size: 1.25em; line-height: 1; margin-block-start: 8px; padding-block: 8px 7px; padding-inline: 16px; } .dso-nav.dso-nav-sub > li { display: inline-block; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { text-decoration: none; } .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active, .dso-nav.dso-nav-sub > li > button:hover, .dso-nav.dso-nav-sub > li > button:focus-visible, .dso-nav.dso-nav-sub > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { font-size: 1rem; margin-block-start: 4px; padding-block: 4px 3px; padding-inline: 8px; } .dso-navbar { padding-inline: 16px; } .dso-nav { border-block-end: 1px solid #ccc; display: flex; gap: 16px; margin-block-start: 0; inline-size: calc(100vw - 32px); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dt-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); float: var(--_dt-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dt-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-tertiary:hover { background-color: var(--_dso-button-tertiary-hover-background-color, ); border-color: var(--_dso-button-tertiary-hover-border-color, ); color: var(--_dso-button-tertiary-hover-color, #275937); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary:active { background-color: var(--_dso-button-tertiary-active-background-color, ); border-color: var(--_dso-button-tertiary-active-border-color, ); color: var(--_dso-button-tertiary-active-color, #173521); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover { background-color: var(--_dso-button-tertiary-disabled-background-color, ); border-color: var(--_dso-button-tertiary-disabled-border-color, ); color: var(--_dso-button-tertiary-disabled-color, #afcf9d); float: var(--_dt-button-float-tertiary, none); } .dso-tertiary.dso-small { line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { padding-block: 9px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dt-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E"); background-repeat: no-repeat; content: ""; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; } .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] { margin-inline-start: 0; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { font-weight: 300; } .overlay { inline-size: calc(100vw - 32px); } .filter-panel, .overlay { margin-inline: 0; max-inline-size: 100vw; inset-block-start: 0; } .filter-panel { inset-inline-start: -100vw; inline-size: 100vw; } } @media screen and (min-width: 992px) { :host([filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } }`;
|
|
59
59
|
|
|
60
60
|
const resizeObserver = new ResizeObserver(index$1.debounce(([entry]) => {
|
|
61
61
|
const shadowRoot = entry?.target.getRootNode();
|
|
@@ -67,7 +67,7 @@ function isDsoViewerGridComponent(element) {
|
|
|
67
67
|
return element.tagName === "DSO-VIEWER-GRID";
|
|
68
68
|
}
|
|
69
69
|
const buttonWidth = 40;
|
|
70
|
-
const tabViewBreakpoint =
|
|
70
|
+
const tabViewBreakpoint = 992 + buttonWidth;
|
|
71
71
|
const minMapElementWidth = 440;
|
|
72
72
|
const ViewerGrid = class {
|
|
73
73
|
constructor(hostRef) {
|
|
@@ -659,22 +659,6 @@ button.dso-tertiary.dso-extra-small,
|
|
|
659
659
|
label.dso-tertiary.dso-extra-small {
|
|
660
660
|
padding-block: 9px;
|
|
661
661
|
}
|
|
662
|
-
a.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
|
|
663
|
-
button.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
|
|
664
|
-
label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
|
|
665
|
-
margin-inline-start: -8px;
|
|
666
|
-
}
|
|
667
|
-
a.dso-tertiary span:not(.sr-only) + dso-icon,
|
|
668
|
-
button.dso-tertiary span:not(.sr-only) + dso-icon,
|
|
669
|
-
label.dso-tertiary span:not(.sr-only) + dso-icon {
|
|
670
|
-
margin-inline-start: 8px;
|
|
671
|
-
margin-inline-end: -8px;
|
|
672
|
-
}
|
|
673
|
-
a.dso-tertiary dso-icon + span:not(.sr-only),
|
|
674
|
-
button.dso-tertiary dso-icon + span:not(.sr-only),
|
|
675
|
-
label.dso-tertiary dso-icon + span:not(.sr-only) {
|
|
676
|
-
margin-inline-start: 8px;
|
|
677
|
-
}
|
|
678
662
|
a.dso-tertiary,
|
|
679
663
|
button.dso-tertiary,
|
|
680
664
|
label.dso-tertiary {
|
|
@@ -120,16 +120,6 @@
|
|
|
120
120
|
.dso-tertiary.dso-extra-small {
|
|
121
121
|
padding-block: 9px;
|
|
122
122
|
}
|
|
123
|
-
.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
|
|
124
|
-
margin-inline-start: -8px;
|
|
125
|
-
}
|
|
126
|
-
.dso-tertiary span:not(.sr-only) + dso-icon {
|
|
127
|
-
margin-inline-start: 8px;
|
|
128
|
-
margin-inline-end: -8px;
|
|
129
|
-
}
|
|
130
|
-
.dso-tertiary dso-icon + span:not(.sr-only) {
|
|
131
|
-
margin-inline-start: 8px;
|
|
132
|
-
}
|
|
133
123
|
.dso-tertiary {
|
|
134
124
|
border: 0;
|
|
135
125
|
line-height: 1;
|
|
@@ -659,22 +659,6 @@ button.dso-tertiary.dso-extra-small,
|
|
|
659
659
|
label.dso-tertiary.dso-extra-small {
|
|
660
660
|
padding-block: 9px;
|
|
661
661
|
}
|
|
662
|
-
a.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
|
|
663
|
-
button.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
|
|
664
|
-
label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
|
|
665
|
-
margin-inline-start: -8px;
|
|
666
|
-
}
|
|
667
|
-
a.dso-tertiary span:not(.sr-only) + dso-icon,
|
|
668
|
-
button.dso-tertiary span:not(.sr-only) + dso-icon,
|
|
669
|
-
label.dso-tertiary span:not(.sr-only) + dso-icon {
|
|
670
|
-
margin-inline-start: 8px;
|
|
671
|
-
margin-inline-end: -8px;
|
|
672
|
-
}
|
|
673
|
-
a.dso-tertiary dso-icon + span:not(.sr-only),
|
|
674
|
-
button.dso-tertiary dso-icon + span:not(.sr-only),
|
|
675
|
-
label.dso-tertiary dso-icon + span:not(.sr-only) {
|
|
676
|
-
margin-inline-start: 8px;
|
|
677
|
-
}
|
|
678
662
|
a.dso-tertiary,
|
|
679
663
|
button.dso-tertiary,
|
|
680
664
|
label.dso-tertiary {
|
|
@@ -5,6 +5,8 @@ import { i18n } from "../../utils/i18n";
|
|
|
5
5
|
import { translations } from "./modal.i18n";
|
|
6
6
|
export class Modal {
|
|
7
7
|
constructor() {
|
|
8
|
+
this.startedMouseDownOutsideDialog = false;
|
|
9
|
+
this.endedMouseUpOutsideDialog = false;
|
|
8
10
|
this.ariaId = v4();
|
|
9
11
|
/**
|
|
10
12
|
* the role for the modal `dialog` | `alert` | `alertdialog`.
|
|
@@ -53,16 +55,22 @@ export class Modal {
|
|
|
53
55
|
}
|
|
54
56
|
(this.returnFocus ?? this.returnFocusElement)?.focus();
|
|
55
57
|
}
|
|
58
|
+
handleDialogMouseDown(e) {
|
|
59
|
+
this.startedMouseDownOutsideDialog = e.target === this.htmlDialogElement;
|
|
60
|
+
}
|
|
61
|
+
handleDialogMouseUp(e) {
|
|
62
|
+
this.endedMouseUpOutsideDialog = e.target === this.htmlDialogElement;
|
|
63
|
+
}
|
|
56
64
|
handleDialogClick(e) {
|
|
57
65
|
if (!this.closable) {
|
|
58
66
|
return;
|
|
59
67
|
}
|
|
60
|
-
if (e.target === this.htmlDialogElement) {
|
|
68
|
+
if (this.startedMouseDownOutsideDialog && this.endedMouseUpOutsideDialog && e.target === this.htmlDialogElement) {
|
|
61
69
|
this.dsoClose.emit({ originalEvent: e });
|
|
62
70
|
}
|
|
63
71
|
}
|
|
64
72
|
render() {
|
|
65
|
-
return (h("dialog", { key: '
|
|
73
|
+
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" }))))));
|
|
66
74
|
}
|
|
67
75
|
static get is() { return "dso-modal"; }
|
|
68
76
|
static get encapsulation() { return "shadow"; }
|
|
@@ -659,22 +659,6 @@ button.dso-tertiary.dso-extra-small,
|
|
|
659
659
|
label.dso-tertiary.dso-extra-small {
|
|
660
660
|
padding-block: 9px;
|
|
661
661
|
}
|
|
662
|
-
a.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
|
|
663
|
-
button.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
|
|
664
|
-
label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
|
|
665
|
-
margin-inline-start: -8px;
|
|
666
|
-
}
|
|
667
|
-
a.dso-tertiary span:not(.sr-only) + dso-icon,
|
|
668
|
-
button.dso-tertiary span:not(.sr-only) + dso-icon,
|
|
669
|
-
label.dso-tertiary span:not(.sr-only) + dso-icon {
|
|
670
|
-
margin-inline-start: 8px;
|
|
671
|
-
margin-inline-end: -8px;
|
|
672
|
-
}
|
|
673
|
-
a.dso-tertiary dso-icon + span:not(.sr-only),
|
|
674
|
-
button.dso-tertiary dso-icon + span:not(.sr-only),
|
|
675
|
-
label.dso-tertiary dso-icon + span:not(.sr-only) {
|
|
676
|
-
margin-inline-start: 8px;
|
|
677
|
-
}
|
|
678
662
|
a.dso-tertiary,
|
|
679
663
|
button.dso-tertiary,
|
|
680
664
|
label.dso-tertiary {
|
|
@@ -659,22 +659,6 @@ button.dso-tertiary.dso-extra-small,
|
|
|
659
659
|
label.dso-tertiary.dso-extra-small {
|
|
660
660
|
padding-block: 9px;
|
|
661
661
|
}
|
|
662
|
-
a.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
|
|
663
|
-
button.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
|
|
664
|
-
label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
|
|
665
|
-
margin-inline-start: -8px;
|
|
666
|
-
}
|
|
667
|
-
a.dso-tertiary span:not(.sr-only) + dso-icon,
|
|
668
|
-
button.dso-tertiary span:not(.sr-only) + dso-icon,
|
|
669
|
-
label.dso-tertiary span:not(.sr-only) + dso-icon {
|
|
670
|
-
margin-inline-start: 8px;
|
|
671
|
-
margin-inline-end: -8px;
|
|
672
|
-
}
|
|
673
|
-
a.dso-tertiary dso-icon + span:not(.sr-only),
|
|
674
|
-
button.dso-tertiary dso-icon + span:not(.sr-only),
|
|
675
|
-
label.dso-tertiary dso-icon + span:not(.sr-only) {
|
|
676
|
-
margin-inline-start: 8px;
|
|
677
|
-
}
|
|
678
662
|
a.dso-tertiary,
|
|
679
663
|
button.dso-tertiary,
|
|
680
664
|
label.dso-tertiary {
|
|
@@ -203,7 +203,7 @@ button::-moz-focus-inner {
|
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
@media screen and (min-width:
|
|
206
|
+
@media screen and (min-width: 1032px) {
|
|
207
207
|
:host([main-size=small]) .dso-main-panel,
|
|
208
208
|
:host([document-panel-size=small]) .dso-document-panel {
|
|
209
209
|
flex-basis: 375px;
|
|
@@ -211,7 +211,7 @@ button::-moz-focus-inner {
|
|
|
211
211
|
max-inline-size: 375px;
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
|
-
@media screen and (min-width:
|
|
214
|
+
@media screen and (min-width: 1032px) and (max-width: 375px) {
|
|
215
215
|
:host([main-size=small]) .dso-main-panel,
|
|
216
216
|
:host([document-panel-size=small]) .dso-document-panel {
|
|
217
217
|
flex-basis: 100vw;
|
|
@@ -220,7 +220,7 @@ button::-moz-focus-inner {
|
|
|
220
220
|
transition: none;
|
|
221
221
|
}
|
|
222
222
|
}
|
|
223
|
-
@media screen and (min-width:
|
|
223
|
+
@media screen and (min-width: 1032px) {
|
|
224
224
|
:host([main-size=medium]) .dso-main-panel,
|
|
225
225
|
:host([document-panel-size=medium]) .dso-document-panel {
|
|
226
226
|
flex-basis: 624px;
|
|
@@ -228,7 +228,7 @@ button::-moz-focus-inner {
|
|
|
228
228
|
max-inline-size: 624px;
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
|
-
@media screen and (min-width:
|
|
231
|
+
@media screen and (min-width: 1032px) and (max-width: 624px) {
|
|
232
232
|
:host([main-size=medium]) .dso-main-panel,
|
|
233
233
|
:host([document-panel-size=medium]) .dso-document-panel {
|
|
234
234
|
flex-basis: 100vw;
|
|
@@ -237,7 +237,7 @@ button::-moz-focus-inner {
|
|
|
237
237
|
transition: none;
|
|
238
238
|
}
|
|
239
239
|
}
|
|
240
|
-
@media screen and (min-width:
|
|
240
|
+
@media screen and (min-width: 1032px) {
|
|
241
241
|
:host([main-size=large]) .dso-main-panel,
|
|
242
242
|
:host([document-panel-size=large]) .dso-document-panel {
|
|
243
243
|
flex-basis: 60%;
|
|
@@ -245,7 +245,7 @@ button::-moz-focus-inner {
|
|
|
245
245
|
max-inline-size: 1024px;
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
|
-
@media screen and (min-width:
|
|
248
|
+
@media screen and (min-width: 1032px) and (max-width: 768px) {
|
|
249
249
|
:host([main-size=large]) .dso-main-panel,
|
|
250
250
|
:host([document-panel-size=large]) .dso-document-panel {
|
|
251
251
|
flex-basis: 100vw;
|
|
@@ -254,7 +254,7 @@ button::-moz-focus-inner {
|
|
|
254
254
|
transition: none;
|
|
255
255
|
}
|
|
256
256
|
}
|
|
257
|
-
@media screen and (min-width:
|
|
257
|
+
@media screen and (min-width: 1032px) {
|
|
258
258
|
:host {
|
|
259
259
|
display: flex;
|
|
260
260
|
flex-direction: column;
|
|
@@ -294,7 +294,7 @@ button::-moz-focus-inner {
|
|
|
294
294
|
margin-inline: auto 0;
|
|
295
295
|
}
|
|
296
296
|
}
|
|
297
|
-
@media screen and (min-width:
|
|
297
|
+
@media screen and (min-width: 1032px) and (max-width: 1031.99px) {
|
|
298
298
|
:host([filter-panel-open]) .dso-main-panel {
|
|
299
299
|
margin-inline-start: 380px;
|
|
300
300
|
max-inline-size: calc(100vw - 380px);
|
|
@@ -304,7 +304,7 @@ button::-moz-focus-inner {
|
|
|
304
304
|
inset-inline-start: -380px;
|
|
305
305
|
}
|
|
306
306
|
}
|
|
307
|
-
@media screen and (max-width:
|
|
307
|
+
@media screen and (max-width: 1031.99px) {
|
|
308
308
|
.dso-navbar {
|
|
309
309
|
min-block-size: 32px;
|
|
310
310
|
}
|
|
@@ -322,12 +322,12 @@ button::-moz-focus-inner {
|
|
|
322
322
|
margin-inline-end: 8px;
|
|
323
323
|
}
|
|
324
324
|
}
|
|
325
|
-
@media screen and (max-width:
|
|
325
|
+
@media screen and (max-width: 1031.99px) and (min-width: 992px) {
|
|
326
326
|
.dso-navbar .dso-navbar-toggle {
|
|
327
327
|
display: none;
|
|
328
328
|
}
|
|
329
329
|
}
|
|
330
|
-
@media screen and (max-width:
|
|
330
|
+
@media screen and (max-width: 1031.99px) {
|
|
331
331
|
.dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {
|
|
332
332
|
margin-inline-end: 8rem;
|
|
333
333
|
}
|
|
@@ -509,16 +509,6 @@ button::-moz-focus-inner {
|
|
|
509
509
|
.dso-tertiary.dso-extra-small {
|
|
510
510
|
padding-block: 9px;
|
|
511
511
|
}
|
|
512
|
-
.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
|
|
513
|
-
margin-inline-start: -8px;
|
|
514
|
-
}
|
|
515
|
-
.dso-tertiary span:not(.sr-only) + dso-icon {
|
|
516
|
-
margin-inline-start: 8px;
|
|
517
|
-
margin-inline-end: -8px;
|
|
518
|
-
}
|
|
519
|
-
.dso-tertiary dso-icon + span:not(.sr-only) {
|
|
520
|
-
margin-inline-start: 8px;
|
|
521
|
-
}
|
|
522
512
|
.dso-tertiary {
|
|
523
513
|
border: 0;
|
|
524
514
|
line-height: 1;
|
|
@@ -13,7 +13,7 @@ function isDsoViewerGridComponent(element) {
|
|
|
13
13
|
return element.tagName === "DSO-VIEWER-GRID";
|
|
14
14
|
}
|
|
15
15
|
const buttonWidth = 40;
|
|
16
|
-
const tabViewBreakpoint =
|
|
16
|
+
const tabViewBreakpoint = 992 + buttonWidth;
|
|
17
17
|
const minMapElementWidth = 440;
|
|
18
18
|
/**
|
|
19
19
|
* @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.
|