@dso-toolkit/core 56.1.0 → 58.0.0

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -4,55 +4,6 @@
   box-sizing: border-box;
 }
 
-:host {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-}
-
-:host([small]) .dso-map-panel {
-  flex-basis: 375px;
-  min-width: 0;
-  max-width: 375px;
-}
-@media screen and (max-width: 375px) {
-  :host([small]) .dso-map-panel {
-    flex-basis: 100vw;
-    max-width: 100vw;
-    min-width: 0;
-    transition: none;
-  }
-}
-
-:host([medium]) .dso-map-panel {
-  flex-basis: 624px;
-  min-width: 375px;
-  max-width: 624px;
-}
-@media screen and (max-width: 624px) {
-  :host([medium]) .dso-map-panel {
-    flex-basis: 100vw;
-    max-width: 100vw;
-    min-width: 375px;
-    transition: none;
-  }
-}
-
-:host([large]) .dso-map-panel {
-  flex-basis: 60%;
-  min-width: 768px;
-  max-width: 1024px;
-}
-@media screen and (max-width: 768px) {
-  :host([large]) .dso-map-panel {
-    flex-basis: 100vw;
-    max-width: 100vw;
-    min-width: 768px;
-    transition: none;
-  }
-}
-
 button {
   -webkit-appearance: button;
   color: inherit;
@@ -138,13 +89,21 @@ button::-moz-focus-inner {
 .overlay-close-button:not([disabled]):active {
   color: #173521;
 }
-.shrink.btn-align,
-.expand.btn-align,
-.overlay-close-button.btn-align {
+.shrink.dso-align,
+.expand.dso-align,
+.overlay-close-button.dso-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
+.shrink.dso-truncate,
+.expand.dso-truncate,
+.overlay-close-button.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .shrink.dso-spinner-left::before,
 .expand.dso-spinner-left::before,
 .overlay-close-button.dso-spinner-left::before {
@@ -251,23 +210,20 @@ button::-moz-focus-inner {
   right: 16px;
 }
 
-.dso-map-panel {
+.dso-main-panel {
   background-color: #fff;
-  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);
   flex-shrink: 0;
   flex-grow: 0;
-  padding-right: 8px;
   position: relative;
   transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;
   z-index: 100;
 }
-.dso-map-panel .dso-filterblok-address {
+.dso-main-panel .dso-filterblok-address {
   font-weight: bold;
   margin: 8px 0;
 }
-.dso-map-panel .main {
+.dso-main-panel .main {
   height: 100%;
-  overflow-y: scroll;
   padding: 0 16px 8px;
 }
 
@@ -332,19 +288,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.sizing-buttons button.btn-sm {
+.sizing-buttons button.dso-small {
   line-height: 1rem;
 }
-.sizing-buttons button.btn-sm dso-icon,
-.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {
+.sizing-buttons button.dso-small dso-icon,
+.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.sizing-buttons button.btn-sm.dso-spinner-left::before {
+.sizing-buttons button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.sizing-buttons button.btn-sm.dso-spinner-right::after {
+.sizing-buttons button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -383,7 +339,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -407,7 +363,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -425,23 +381,23 @@ button::-moz-focus-inner {
   height: 100%;
   width: 100%;
   overflow: hidden;
+  position: relative;
 }
 
 .filterpanel,
 .overlay {
   background-color: #fff;
+  border: 0;
   height: 100%;
+  margin-block: 0;
+  max-height: 100vh;
   overflow-y: auto;
-  position: absolute;
   z-index: 101;
 }
 
 .filterpanel {
-  box-shadow: 2px 0 5px #666;
   padding: 8px 16px;
   left: 0;
-  max-width: 896px;
-  width: calc(100vw - 40px);
 }
 @media screen and (max-width: 768px) {
   .filterpanel {
@@ -458,45 +414,21 @@ button::-moz-focus-inner {
   font-size: 2rem;
   font-weight: 700;
 }
-.filterpanel::before {
-  content: "";
-  display: block;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 896px;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-@media screen and (max-width: 936px) {
-  .filterpanel::before {
-    left: auto;
-    width: 40px;
-  }
-}
 
 .overlay {
-  box-shadow: -2px 0 5px #666;
   padding: 40px 16px 8px;
   right: 0;
   width: 624px;
 }
+.overlay::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
 @media screen and (max-width: 624px) {
   .overlay {
     width: 100vw;
   }
 }
 
-.dimscreen {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 624px;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 102;
-}
-
 .filterpanel-buttons {
   text-align: right;
 }
@@ -542,19 +474,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.filterpanel-buttons .cancel-button.btn-sm {
+.filterpanel-buttons .cancel-button.dso-small {
   line-height: 1rem;
 }
-.filterpanel-buttons .cancel-button.btn-sm dso-icon,
-.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {
+.filterpanel-buttons .cancel-button.dso-small dso-icon,
+.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {
+.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {
+.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -593,7 +525,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -617,7 +549,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -676,19 +608,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #fff;
 }
-.filterpanel-buttons .apply-button.btn-sm {
+.filterpanel-buttons .apply-button.dso-small {
   line-height: 1rem;
 }
-.filterpanel-buttons .apply-button.btn-sm dso-icon,
-.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {
+.filterpanel-buttons .apply-button.dso-small dso-icon,
+.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {
+.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {
+.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -742,4 +674,295 @@ button::-moz-focus-inner {
 }
 .filterpanel-buttons .cancel-button + .apply-button {
   margin-left: 16px;
+}
+
+@media screen and (min-width: 808px) {
+  :host {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+  }
+  :host([small]) .dso-main-panel {
+    flex-basis: 375px;
+    min-width: 0;
+    max-width: 375px;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 375px) {
+  :host([small]) .dso-main-panel {
+    flex-basis: 100vw;
+    max-width: 100vw;
+    min-width: 0;
+    transition: none;
+  }
+}
+@media screen and (min-width: 808px) {
+  :host([medium]) .dso-main-panel {
+    flex-basis: 624px;
+    min-width: 375px;
+    max-width: 624px;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 624px) {
+  :host([medium]) .dso-main-panel {
+    flex-basis: 100vw;
+    max-width: 100vw;
+    min-width: 375px;
+    transition: none;
+  }
+}
+@media screen and (min-width: 808px) {
+  :host([large]) .dso-main-panel {
+    flex-basis: 60%;
+    min-width: 768px;
+    max-width: 1024px;
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 768px) {
+  :host([large]) .dso-main-panel {
+    flex-basis: 100vw;
+    max-width: 100vw;
+    min-width: 768px;
+    transition: none;
+  }
+}
+@media screen and (min-width: 808px) {
+  .dso-main-panel {
+    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);
+    padding-right: 8px;
+  }
+  .dso-main-panel .main {
+    overflow-y: scroll;
+  }
+}
+@media screen and (min-width: 808px) {
+  .filterpanel {
+    box-shadow: 2px 0 5px #666;
+    margin-inline: 0 auto;
+    max-width: 896px;
+    width: calc(100vw - 40px);
+  }
+  .filterpanel::before {
+    content: "";
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 896px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+@media screen and (min-width: 808px) and (max-width: 936px) {
+  .filterpanel::before {
+    left: auto;
+    width: 40px;
+  }
+}
+@media screen and (min-width: 808px) {
+  .overlay {
+    box-shadow: -2px 0 5px #666;
+    margin-inline: auto 0;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-navbar {
+    min-height: 32px;
+  }
+  .dso-navbar .dso-navbar-header {
+    float: left;
+  }
+  .dso-navbar .dso-navbar-toggle {
+    border-radius: 4px;
+    min-width: auto;
+    padding: 5px 0;
+  }
+  .dso-navbar .dso-navbar-toggle dso-icon,
+  .dso-navbar .dso-navbar-toggle svg.di {
+    margin-left: 8px;
+    margin-right: 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-nav {
+    list-style: none;
+    margin-bottom: 0;
+    padding-left: 0;
+  }
+  .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-bottom: 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;
+    font-size: 1.25em;
+    line-height: 1;
+    margin-top: 8px;
+    padding: 8px 16px 7px;
+  }
+  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active,
+  .dso-nav.dso-nav-main > li > button:hover,
+  .dso-nav.dso-nav-main > li > button:focus,
+  .dso-nav.dso-nav-main > li > button:active {
+    text-decoration: underline;
+  }
+  .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;
+    font-size: 1rem;
+    margin-top: 4px;
+    padding: 4px 8px 3px;
+  }
+  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus, .dso-nav.dso-nav-sub > li > a:active,
+  .dso-nav.dso-nav-sub > li > button:hover,
+  .dso-nav.dso-nav-sub > li > button:focus,
+  .dso-nav.dso-nav-sub > li > button:active {
+    text-decoration: underline;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-navbar {
+    padding-inline: 16px;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-nav {
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    gap: 16px;
+    margin-block-start: 0;
+    width: calc(100vw - 32px);
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .dso-tertiary {
+    display: inline-block;
+    font-size: 1em;
+    font-weight: 500;
+    margin-bottom: 0;
+    text-decoration: none;
+    touch-action: manipulation;
+    text-align: left;
+    user-select: none;
+    vertical-align: middle;
+    border: 0;
+    color: #39870c;
+    line-height: 1;
+    padding: 0;
+    background-color: transparent;
+    font-weight: 300;
+  }
+  .dso-tertiary:focus, .dso-tertiary:focus-visible {
+    outline-offset: 2px;
+  }
+  .dso-tertiary:active {
+    outline: 0;
+  }
+  .dso-tertiary[disabled] {
+    color: #afcf9d;
+  }
+  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
+    color: #39870c;
+  }
+  .dso-tertiary:not([disabled]):hover {
+    color: #275937;
+    text-decoration: underline;
+    text-underline-position: under;
+  }
+  .dso-tertiary:not([disabled]):active {
+    color: #173521;
+  }
+  .dso-tertiary.dso-align {
+    line-height: calc(1.5em - 1px);
+    padding: 11px 0;
+    position: relative;
+  }
+  .dso-tertiary.dso-truncate {
+    max-width: 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 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    content: "";
+    display: inline-block;
+    height: 24px;
+    vertical-align: middle;
+    width: 24px;
+    margin-right: 8px;
+  }
+  .dso-tertiary.dso-spinner-right::after {
+    background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    content: "";
+    display: inline-block;
+    height: 24px;
+    vertical-align: middle;
+    width: 24px;
+    margin-left: 8px;
+  }
+  .dso-tertiary dso-icon + span:not(.sr-only),
+  .dso-tertiary svg.di + span:not(.sr-only),
+  .dso-tertiary span:not(.sr-only) + dso-icon,
+  .dso-tertiary span:not(.sr-only) + svg.di {
+    margin-left: 8px;
+  }
+  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
+  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
+  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
+  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
+    margin-left: 4px;
+  }
+  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
+  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
+  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
+  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
+  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
+    margin-left: 0;
+  }
+  .dso-tertiary dso-icon,
+  .dso-tertiary svg.di,
+  .dso-tertiary span {
+    vertical-align: middle;
+  }
+}
+@media screen and (max-width: 807.99px) {
+  .filterpanel,
+  .overlay {
+    margin-inline: 0;
+    max-width: 100vw;
+    top: 0;
+    width: 100vw;
+  }
 }

package/dist/collection/components/viewer-grid/viewer-grid.interfaces.js

@@ -1,2 +1,2 @@
-export {};
+export const tabs = ["main", "map"];
 //# sourceMappingURL=viewer-grid.interfaces.js.map

package/dist/collection/components/viewer-grid/viewer-grid.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewer-grid.interfaces.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  /**\r\n   * Indicates whether it's before or after the animation\r\n   */\r\n  stage: \"start\" | \"end\";\r\n  previousSize: MainSize;\r\n  currentSize: MainSize;\r\n}\r\n\r\nexport interface FilterpanelEvent {\r\n  originalEvent: MouseEvent;\r\n}\r\n\r\nexport type MainSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type LabelSizeMap = { [key in MainSize]: string };\r\n"]}
+{"version":3,"file":"viewer-grid.interfaces.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.interfaces.ts"],"names":[],"mappings":"AAyBA,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,KAAK,CAAU,CAAC","sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  /**\r\n   * Indicates whether it's before or after the animation\r\n   */\r\n  stage: \"start\" | \"end\";\r\n  previousSize: MainSize;\r\n  currentSize: MainSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport type MainSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type LabelSizeMap = { [key in MainSize]: string };\r\n\r\nexport const tabs = [\"main\", \"map\"] as const;\r\n\r\nexport type Tabs = (typeof tabs)[number];\r\n\r\nexport type TabLabelMap = { [key in Tabs]: string };\r\n"]}