@dso-toolkit/core 73.3.0 → 74.0.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 (169) hide show
  1. package/dist/bundle/dso-accordion-section.js +1 -1
  2. package/dist/bundle/dso-advanced-select.js +4 -4
  3. package/dist/bundle/dso-advanced-select.js.map +1 -1
  4. package/dist/bundle/dso-alert.js +1 -1
  5. package/dist/bundle/dso-annotation-activiteit.js +1 -1
  6. package/dist/bundle/dso-annotation-gebiedsaanwijzing.js +1 -1
  7. package/dist/bundle/dso-annotation-locatie.js +1 -1
  8. package/dist/bundle/dso-annotation-omgevingsnormwaarde.js +1 -1
  9. package/dist/bundle/dso-badge.js +1 -1
  10. package/dist/bundle/dso-banner.js +2 -2
  11. package/dist/bundle/dso-banner.js.map +1 -1
  12. package/dist/bundle/dso-document-component.js +1 -1
  13. package/dist/bundle/dso-label.js +1 -1
  14. package/dist/bundle/dso-modal.js +20 -7
  15. package/dist/bundle/dso-modal.js.map +1 -1
  16. package/dist/bundle/dso-project-item.js +2 -2
  17. package/dist/bundle/dso-project-item.js.map +1 -1
  18. package/dist/bundle/dso-viewer-grid.js +41 -105
  19. package/dist/bundle/dso-viewer-grid.js.map +1 -1
  20. package/dist/bundle/dsot-document-component-demo.js +5 -5
  21. package/dist/bundle/{p-DWTXTDbr.js → p-BJv2m9ZZ.js} +5 -5
  22. package/dist/bundle/{p-DWTXTDbr.js.map → p-BJv2m9ZZ.js.map} +1 -1
  23. package/dist/bundle/{p-BPLPqKUj.js → p-C_CoF0aB.js} +3 -3
  24. package/dist/bundle/{p-BPLPqKUj.js.map → p-C_CoF0aB.js.map} +1 -1
  25. package/dist/bundle/{p-ChrHXjXh.js → p-CkBk3gL8.js} +3 -3
  26. package/dist/bundle/{p-ChrHXjXh.js.map → p-CkBk3gL8.js.map} +1 -1
  27. package/dist/bundle/{p-Cbba2ZRN.js → p-CwXjPr2h.js} +3 -3
  28. package/dist/bundle/{p-Cbba2ZRN.js.map → p-CwXjPr2h.js.map} +1 -1
  29. package/dist/bundle/p-PMqbDJmA.js +78 -0
  30. package/dist/bundle/p-PMqbDJmA.js.map +1 -0
  31. package/dist/cjs/dso-advanced-select.cjs.entry.js +2 -2
  32. package/dist/cjs/dso-advanced-select.cjs.entry.js.map +1 -1
  33. package/dist/cjs/dso-advanced-select.entry.cjs.js.map +1 -1
  34. package/dist/cjs/dso-alert.dso-badge.dso-image-overlay.dso-ozon-content.dso-panel.dso-table.entry.cjs.js.map +1 -1
  35. package/dist/cjs/dso-alert_6.cjs.entry.js +2 -2
  36. package/dist/cjs/dso-alert_6.cjs.entry.js.map +1 -1
  37. package/dist/cjs/dso-banner.cjs.entry.js +2 -2
  38. package/dist/cjs/dso-banner.cjs.entry.js.map +1 -1
  39. package/dist/cjs/dso-banner.entry.cjs.js.map +1 -1
  40. package/dist/cjs/dso-label.dso-renvooi.dso-slide-toggle.entry.cjs.js.map +1 -1
  41. package/dist/cjs/dso-label_3.cjs.entry.js +1 -1
  42. package/dist/cjs/dso-label_3.cjs.entry.js.map +1 -1
  43. package/dist/cjs/dso-modal.cjs.entry.js +19 -6
  44. package/dist/cjs/dso-modal.cjs.entry.js.map +1 -1
  45. package/dist/cjs/dso-modal.entry.cjs.js.map +1 -1
  46. package/dist/cjs/dso-project-item.cjs.entry.js +1 -1
  47. package/dist/cjs/dso-project-item.cjs.entry.js.map +1 -1
  48. package/dist/cjs/dso-project-item.entry.cjs.js.map +1 -1
  49. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  50. package/dist/cjs/dso-viewer-grid.cjs.entry.js +37 -100
  51. package/dist/cjs/dso-viewer-grid.cjs.entry.js.map +1 -1
  52. package/dist/cjs/dso-viewer-grid.entry.cjs.js.map +1 -1
  53. package/dist/cjs/loader.cjs.js +1 -1
  54. package/dist/collection/components/accordion/components/accordion-section.js +1 -1
  55. package/dist/collection/components/advanced-select/advanced-select.css +0 -6
  56. package/dist/collection/components/advanced-select/advanced-select.interfaces.js.map +1 -1
  57. package/dist/collection/components/advanced-select/advanced-select.js +1 -1
  58. package/dist/collection/components/advanced-select/advanced-select.js.map +1 -1
  59. package/dist/collection/components/alert/alert.css +0 -117
  60. package/dist/collection/components/badge/badge.css +3 -8
  61. package/dist/collection/components/badge/badge.interfaces.js.map +1 -1
  62. package/dist/collection/components/badge/badge.js +1 -1
  63. package/dist/collection/components/banner/banner.js +4 -4
  64. package/dist/collection/components/banner/banner.js.map +1 -1
  65. package/dist/collection/components/label/label.css +8 -5
  66. package/dist/collection/components/label/label.interfaces.js.map +1 -1
  67. package/dist/collection/components/label/label.js +1 -1
  68. package/dist/collection/components/modal/modal.js +24 -11
  69. package/dist/collection/components/modal/modal.js.map +1 -1
  70. package/dist/collection/components/project-item/project-item.js +1 -1
  71. package/dist/collection/components/project-item/project-item.js.map +1 -1
  72. package/dist/collection/components/viewer-grid/components/filter-panel.js +3 -0
  73. package/dist/collection/components/viewer-grid/components/filter-panel.js.map +1 -0
  74. package/dist/collection/components/viewer-grid/components/index.js +1 -1
  75. package/dist/collection/components/viewer-grid/components/index.js.map +1 -1
  76. package/dist/collection/components/viewer-grid/components/main-panel.js +3 -6
  77. package/dist/collection/components/viewer-grid/components/main-panel.js.map +1 -1
  78. package/dist/collection/components/viewer-grid/viewer-grid.css +28 -343
  79. package/dist/collection/components/viewer-grid/viewer-grid.interfaces.js +1 -3
  80. package/dist/collection/components/viewer-grid/viewer-grid.interfaces.js.map +1 -1
  81. package/dist/collection/components/viewer-grid/viewer-grid.js +54 -185
  82. package/dist/collection/components/viewer-grid/viewer-grid.js.map +1 -1
  83. package/dist/components/alert.js +1 -1
  84. package/dist/components/alert.js.map +1 -1
  85. package/dist/components/badge.js +1 -1
  86. package/dist/components/badge.js.map +1 -1
  87. package/dist/components/dso-advanced-select.js +2 -2
  88. package/dist/components/dso-advanced-select.js.map +1 -1
  89. package/dist/components/dso-banner.js +2 -2
  90. package/dist/components/dso-banner.js.map +1 -1
  91. package/dist/components/dso-modal.js +20 -7
  92. package/dist/components/dso-modal.js.map +1 -1
  93. package/dist/components/dso-project-item.js +1 -1
  94. package/dist/components/dso-project-item.js.map +1 -1
  95. package/dist/components/dso-viewer-grid.js +41 -105
  96. package/dist/components/dso-viewer-grid.js.map +1 -1
  97. package/dist/components/label.js +1 -1
  98. package/dist/components/label.js.map +1 -1
  99. package/dist/dso-toolkit/dso-advanced-select.entry.esm.js.map +1 -1
  100. package/dist/dso-toolkit/dso-alert.dso-badge.dso-image-overlay.dso-ozon-content.dso-panel.dso-table.entry.esm.js.map +1 -1
  101. package/dist/dso-toolkit/dso-banner.entry.esm.js.map +1 -1
  102. package/dist/dso-toolkit/dso-label.dso-renvooi.dso-slide-toggle.entry.esm.js.map +1 -1
  103. package/dist/dso-toolkit/dso-modal.entry.esm.js.map +1 -1
  104. package/dist/dso-toolkit/dso-project-item.entry.esm.js.map +1 -1
  105. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  106. package/dist/dso-toolkit/dso-viewer-grid.entry.esm.js.map +1 -1
  107. package/dist/dso-toolkit/p-159be9e6.entry.js +2 -0
  108. package/dist/dso-toolkit/{p-e9053e12.entry.js.map → p-159be9e6.entry.js.map} +1 -1
  109. package/dist/dso-toolkit/p-8897189c.entry.js +2 -0
  110. package/dist/dso-toolkit/p-8897189c.entry.js.map +1 -0
  111. package/dist/dso-toolkit/p-8f4a2401.entry.js +2 -0
  112. package/dist/dso-toolkit/p-8f4a2401.entry.js.map +1 -0
  113. package/dist/dso-toolkit/p-9abdf5aa.entry.js +2 -0
  114. package/dist/dso-toolkit/p-9abdf5aa.entry.js.map +1 -0
  115. package/dist/dso-toolkit/{p-7020a1ec.entry.js → p-b6f5ca5e.entry.js} +2 -2
  116. package/dist/dso-toolkit/{p-7020a1ec.entry.js.map → p-b6f5ca5e.entry.js.map} +1 -1
  117. package/dist/dso-toolkit/p-d926863a.entry.js +2 -0
  118. package/dist/dso-toolkit/p-d926863a.entry.js.map +1 -0
  119. package/dist/dso-toolkit/p-e85e3e06.entry.js +2 -0
  120. package/dist/dso-toolkit/p-e85e3e06.entry.js.map +1 -0
  121. package/dist/esm/dso-advanced-select.entry.js +2 -2
  122. package/dist/esm/dso-advanced-select.entry.js.map +1 -1
  123. package/dist/esm/dso-alert.dso-badge.dso-image-overlay.dso-ozon-content.dso-panel.dso-table.entry.js.map +1 -1
  124. package/dist/esm/dso-alert_6.entry.js +2 -2
  125. package/dist/esm/dso-alert_6.entry.js.map +1 -1
  126. package/dist/esm/dso-banner.entry.js +2 -2
  127. package/dist/esm/dso-banner.entry.js.map +1 -1
  128. package/dist/esm/dso-label.dso-renvooi.dso-slide-toggle.entry.js.map +1 -1
  129. package/dist/esm/dso-label_3.entry.js +1 -1
  130. package/dist/esm/dso-label_3.entry.js.map +1 -1
  131. package/dist/esm/dso-modal.entry.js +19 -6
  132. package/dist/esm/dso-modal.entry.js.map +1 -1
  133. package/dist/esm/dso-project-item.entry.js +1 -1
  134. package/dist/esm/dso-project-item.entry.js.map +1 -1
  135. package/dist/esm/dso-toolkit.js +1 -1
  136. package/dist/esm/dso-viewer-grid.entry.js +38 -101
  137. package/dist/esm/dso-viewer-grid.entry.js.map +1 -1
  138. package/dist/esm/loader.js +1 -1
  139. package/dist/types/components/advanced-select/advanced-select.interfaces.d.ts +1 -1
  140. package/dist/types/components/badge/badge.interfaces.d.ts +1 -1
  141. package/dist/types/components/banner/banner.d.ts +1 -1
  142. package/dist/types/components/label/label.interfaces.d.ts +1 -1
  143. package/dist/types/components/modal/modal.d.ts +8 -3
  144. package/dist/types/components/viewer-grid/components/filter-panel.d.ts +7 -0
  145. package/dist/types/components/viewer-grid/components/index.d.ts +1 -1
  146. package/dist/types/components/viewer-grid/components/main-panel.d.ts +1 -4
  147. package/dist/types/components/viewer-grid/viewer-grid.d.ts +22 -43
  148. package/dist/types/components/viewer-grid/viewer-grid.interfaces.d.ts +3 -13
  149. package/dist/types/components.d.ts +39 -62
  150. package/package.json +3 -3
  151. package/dist/bundle/p-DacnxEpv.js +0 -78
  152. package/dist/bundle/p-DacnxEpv.js.map +0 -1
  153. package/dist/collection/components/viewer-grid/components/filterpanel.js +0 -13
  154. package/dist/collection/components/viewer-grid/components/filterpanel.js.map +0 -1
  155. package/dist/collection/components/viewer-grid/components/viewer-grid-filterpanel-buttons.js +0 -3
  156. package/dist/collection/components/viewer-grid/components/viewer-grid-filterpanel-buttons.js.map +0 -1
  157. package/dist/dso-toolkit/p-0c742a6a.entry.js +0 -2
  158. package/dist/dso-toolkit/p-0c742a6a.entry.js.map +0 -1
  159. package/dist/dso-toolkit/p-1107be6c.entry.js +0 -2
  160. package/dist/dso-toolkit/p-1107be6c.entry.js.map +0 -1
  161. package/dist/dso-toolkit/p-2b5f70a0.entry.js +0 -2
  162. package/dist/dso-toolkit/p-2b5f70a0.entry.js.map +0 -1
  163. package/dist/dso-toolkit/p-5fa008c6.entry.js +0 -2
  164. package/dist/dso-toolkit/p-5fa008c6.entry.js.map +0 -1
  165. package/dist/dso-toolkit/p-7d142b40.entry.js +0 -2
  166. package/dist/dso-toolkit/p-7d142b40.entry.js.map +0 -1
  167. package/dist/dso-toolkit/p-e9053e12.entry.js +0 -2
  168. package/dist/types/components/viewer-grid/components/filterpanel.d.ts +0 -11
  169. package/dist/types/components/viewer-grid/components/viewer-grid-filterpanel-buttons.d.ts +0 -6
@@ -4,11 +4,14 @@
4
4
  box-sizing: border-box;
5
5
  }
6
6
 
7
- :host([mode=vdk]) .overlay {
7
+ :host .overlay {
8
8
  block-size: calc(100% - 32px);
9
9
  margin-block: 16px;
10
10
  margin-inline: auto 16px;
11
11
  }
12
+ :host .dso-main-panel {
13
+ transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;
14
+ }
12
15
 
13
16
  button {
14
17
  -webkit-appearance: button;
@@ -252,11 +255,6 @@ button::-moz-focus-inner {
252
255
  position: absolute;
253
256
  block-size: 100%;
254
257
  }
255
- .dso-main-panel .dso-filterblok-address {
256
- font-weight: bold;
257
- margin-block: 8px;
258
- margin-inline: 0;
259
- }
260
258
  .dso-main-panel .sizing-buttons,
261
259
  .dso-main-panel .toggle-button {
262
260
  inset-inline-start: calc(100% + 1px);
@@ -270,10 +268,6 @@ button::-moz-focus-inner {
270
268
  border-start-end-radius: 4px;
271
269
  }
272
270
 
273
- :host[mode=vdk] .dso-main-panel {
274
- transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;
275
- }
276
-
277
271
  .dso-document-panel {
278
272
  background-color: #fff;
279
273
  flex-shrink: 0;
@@ -482,7 +476,7 @@ button::-moz-focus-inner {
482
476
  position: relative;
483
477
  }
484
478
 
485
- .filterpanel,
479
+ .filter-panel,
486
480
  .overlay {
487
481
  background-color: #fff;
488
482
  border: 0;
@@ -493,55 +487,39 @@ button::-moz-focus-inner {
493
487
  z-index: 101;
494
488
  }
495
489
 
496
- .filterpanel {
490
+ .filter-panel {
491
+ display: block;
492
+ position: absolute;
497
493
  padding-block: 8px;
498
494
  padding-inline: 16px;
499
- inset-inline-start: 0;
495
+ inset-block-start: 0;
496
+ block-size: 100%;
497
+ inset-inline-start: -380px;
498
+ inline-size: 100%;
499
+ transition: inset-inline-start 200ms ease-in;
500
500
  }
501
501
  @media screen and (max-width: 768px) {
502
- .filterpanel {
502
+ .filter-panel {
503
503
  inline-size: 100vw;
504
504
  }
505
- .filterpanel::before {
505
+ .filter-panel::before {
506
506
  display: none !important;
507
507
  }
508
508
  }
509
- .filterpanel h1 {
510
- color: #275937;
511
- margin-block-end: 16px;
512
- margin-block-start: 24px;
513
- font-size: 1.5rem;
514
- font-weight: 700;
515
- }
516
- @media screen and (min-width: 480px) {
517
- .filterpanel h1 {
518
- font-size: 2rem;
519
- }
520
- }
521
-
522
- .filterpanel-vdk {
523
- display: block;
524
- position: absolute;
525
- inset-block-start: 0;
526
- inset-inline-start: -380px;
527
- block-size: 100%;
528
- inline-size: 100%;
529
- transition: inset-inline-start 200ms ease-in;
530
- }
531
509
  @media screen and (min-width: 992px) {
532
- .filterpanel-vdk {
510
+ .filter-panel {
533
511
  max-inline-size: 380px;
534
512
  }
535
513
  }
536
- .filterpanel-vdk[open] {
514
+ .filter-panel[open] {
537
515
  inset-inline-start: 0;
538
516
  box-shadow: none;
539
517
  border-inline-end: 1px solid #e5e5e5;
540
518
  }
541
- .filterpanel-vdk h3 {
519
+ .filter-panel h3 {
542
520
  color: #275937;
543
521
  }
544
- .filterpanel-vdk .dso-close {
522
+ .filter-panel .dso-close {
545
523
  -webkit-appearance: button;
546
524
  color: inherit;
547
525
  cursor: pointer;
@@ -562,10 +540,10 @@ button::-moz-focus-inner {
562
540
  border: 0;
563
541
  text-align: center;
564
542
  }
565
- .filterpanel-vdk .dso-close[disabled] {
543
+ .filter-panel .dso-close[disabled] {
566
544
  cursor: default;
567
545
  }
568
- .filterpanel-vdk .dso-close::-moz-focus-inner {
546
+ .filter-panel .dso-close::-moz-focus-inner {
569
547
  border: 0;
570
548
  padding: 0;
571
549
  }
@@ -585,273 +563,6 @@ button::-moz-focus-inner {
585
563
  }
586
564
  }
587
565
 
588
- .filterpanel-buttons {
589
- text-align: end;
590
- }
591
- .filterpanel-buttons .cancel-button {
592
- display: inline-block;
593
- font-size: 1em;
594
- font-weight: 500;
595
- margin-block-end: 0;
596
- text-decoration: none;
597
- touch-action: manipulation;
598
- text-align: start;
599
- user-select: none;
600
- vertical-align: middle;
601
- }
602
- .filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {
603
- outline-offset: 2px;
604
- }
605
- .filterpanel-buttons .cancel-button:active {
606
- outline: 0;
607
- }
608
- .filterpanel-buttons .cancel-button {
609
- background-color: var(--_dso-button-secondary-background-color, #fff);
610
- border-color: var(--_dso-button-secondary-border-color, #39870c);
611
- color: var(--_dso-button-secondary-color, #39870c);
612
- }
613
- .filterpanel-buttons .cancel-button {
614
- border-width: 1px;
615
- border-style: solid;
616
- border-radius: 4px;
617
- line-height: 1.5;
618
- min-inline-size: 56px;
619
- padding-block: 11px;
620
- padding-inline: 15px;
621
- }
622
- .filterpanel-buttons .cancel-button:hover {
623
- background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
624
- border-color: var(--_dso-button-secondary-hover-border-color, #39870c);
625
- color: var(--_dso-button-secondary-hover-color, #39870c);
626
- }
627
- .filterpanel-buttons .cancel-button:active {
628
- background-color: var(--_dso-button-secondary-active-background-color, #39870c);
629
- border-color: var(--_dso-button-secondary-active-border-color, #39870c);
630
- color: var(--_dso-button-secondary-active-color, #fff);
631
- }
632
- .filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {
633
- background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
634
- border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
635
- color: var(--_dso-button-secondary-disabled-color, #afcf9d);
636
- }
637
- .filterpanel-buttons .cancel-button.dso-small {
638
- line-height: 1rem;
639
- }
640
- .filterpanel-buttons .cancel-button.dso-small dso-icon,
641
- .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 {
642
- margin-block-end: -4px;
643
- margin-block-start: -4px;
644
- }
645
- .filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {
646
- block-size: 16px;
647
- inline-size: 16px;
648
- }
649
- .filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {
650
- block-size: 16px;
651
- inline-size: 16px;
652
- }
653
- .filterpanel-buttons .cancel-button dso-icon:has(+ span:not(.sr-only)),
654
- .filterpanel-buttons .cancel-button svg.di:has(+ span:not(.sr-only)) {
655
- margin-inline-start: -8px;
656
- }
657
- .filterpanel-buttons .cancel-button span:not(.sr-only) + dso-icon,
658
- .filterpanel-buttons .cancel-button span:not(.sr-only) + svg.di {
659
- margin-inline-start: 8px;
660
- margin-inline-end: -8px;
661
- }
662
- .filterpanel-buttons .cancel-button dso-icon + span:not(.sr-only),
663
- .filterpanel-buttons .cancel-button svg.di + span:not(.sr-only) {
664
- margin-inline-start: 8px;
665
- }
666
- .filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {
667
- background-color: #fff;
668
- border-color: #39870c;
669
- color: #39870c;
670
- }
671
- .filterpanel-buttons .cancel-button.dso-spinner-left::before {
672
- 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");
673
- background-repeat: no-repeat;
674
- content: "";
675
- display: inline-block;
676
- block-size: 24px;
677
- vertical-align: top;
678
- inline-size: 24px;
679
- margin-inline-end: 8px;
680
- }
681
- .filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {
682
- 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: %23fff; 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");
683
- background-repeat: no-repeat;
684
- content: "";
685
- display: inline-block;
686
- block-size: 24px;
687
- vertical-align: top;
688
- inline-size: 24px;
689
- margin-inline-end: 8px;
690
- }
691
- .filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {
692
- block-size: 16px;
693
- inline-size: 16px;
694
- }
695
- .filterpanel-buttons .cancel-button.dso-spinner-right::after {
696
- 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");
697
- background-repeat: no-repeat;
698
- content: "";
699
- display: inline-block;
700
- block-size: 24px;
701
- vertical-align: top;
702
- inline-size: 24px;
703
- margin-inline-start: 8px;
704
- }
705
- .filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {
706
- 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: %23fff; 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");
707
- background-repeat: no-repeat;
708
- content: "";
709
- display: inline-block;
710
- block-size: 24px;
711
- vertical-align: top;
712
- inline-size: 24px;
713
- margin-inline-start: 8px;
714
- }
715
- .filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {
716
- block-size: 16px;
717
- inline-size: 16px;
718
- }
719
- .filterpanel-buttons .cancel-button {
720
- line-height: 1rem;
721
- }
722
- .filterpanel-buttons .cancel-button dso-icon,
723
- .filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {
724
- margin-block-end: -4px;
725
- margin-block-start: -4px;
726
- }
727
- .filterpanel-buttons .cancel-button.dso-spinner-left::before {
728
- block-size: 16px;
729
- inline-size: 16px;
730
- }
731
- .filterpanel-buttons .cancel-button.dso-spinner-right::after {
732
- block-size: 16px;
733
- inline-size: 16px;
734
- }
735
- .filterpanel-buttons .apply-button {
736
- display: inline-block;
737
- font-size: 1em;
738
- font-weight: 500;
739
- margin-block-end: 0;
740
- text-decoration: none;
741
- touch-action: manipulation;
742
- text-align: start;
743
- user-select: none;
744
- vertical-align: middle;
745
- }
746
- .filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {
747
- outline-offset: 2px;
748
- }
749
- .filterpanel-buttons .apply-button:active {
750
- outline: 0;
751
- }
752
- .filterpanel-buttons .apply-button {
753
- background-color: var(--_dso-button-primary-background-color, #39870c);
754
- border-color: var(--_dso-button-primary-border-color, #39870c);
755
- color: var(--_dso-button-primary-color, #fff);
756
- }
757
- .filterpanel-buttons .apply-button {
758
- border-width: 1px;
759
- border-style: solid;
760
- border-radius: 4px;
761
- line-height: 1.5;
762
- min-inline-size: 56px;
763
- padding-block: 11px;
764
- padding-inline: 15px;
765
- }
766
- .filterpanel-buttons .apply-button:hover {
767
- background-color: var(--_dso-button-primary-hover-background-color, #275937);
768
- border-color: var(--_dso-button-primary-hover-border-color, #275937);
769
- color: var(--_dso-button-primary-hover-color, #fff);
770
- }
771
- .filterpanel-buttons .apply-button:active {
772
- background-color: var(--_dso-button-primary-active-background-color, #173521);
773
- border-color: var(--_dso-button-primary-active-border-color, #173521);
774
- color: var(--_dso-button-primary-active-color, #fff);
775
- }
776
- .filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {
777
- background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
778
- border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
779
- color: var(--_dso-button-primary-disabled-color, #fff);
780
- }
781
- .filterpanel-buttons .apply-button.dso-small {
782
- line-height: 1rem;
783
- }
784
- .filterpanel-buttons .apply-button.dso-small dso-icon,
785
- .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 {
786
- margin-block-end: -4px;
787
- margin-block-start: -4px;
788
- }
789
- .filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {
790
- block-size: 16px;
791
- inline-size: 16px;
792
- }
793
- .filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {
794
- block-size: 16px;
795
- inline-size: 16px;
796
- }
797
- .filterpanel-buttons .apply-button dso-icon:has(+ span:not(.sr-only)),
798
- .filterpanel-buttons .apply-button svg.di:has(+ span:not(.sr-only)) {
799
- margin-inline-start: -8px;
800
- }
801
- .filterpanel-buttons .apply-button span:not(.sr-only) + dso-icon,
802
- .filterpanel-buttons .apply-button span:not(.sr-only) + svg.di {
803
- margin-inline-start: 8px;
804
- margin-inline-end: -8px;
805
- }
806
- .filterpanel-buttons .apply-button dso-icon + span:not(.sr-only),
807
- .filterpanel-buttons .apply-button svg.di + span:not(.sr-only) {
808
- margin-inline-start: 8px;
809
- }
810
- .filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {
811
- background-color: #39870c;
812
- border-color: #39870c;
813
- color: #fff;
814
- }
815
- .filterpanel-buttons .apply-button.dso-spinner-left::before {
816
- 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: %23fff; 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");
817
- background-repeat: no-repeat;
818
- content: "";
819
- display: inline-block;
820
- block-size: 24px;
821
- vertical-align: top;
822
- inline-size: 24px;
823
- margin-inline-end: 8px;
824
- }
825
- .filterpanel-buttons .apply-button.dso-spinner-right::after {
826
- 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: %23fff; 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");
827
- background-repeat: no-repeat;
828
- content: "";
829
- display: inline-block;
830
- block-size: 24px;
831
- vertical-align: top;
832
- inline-size: 24px;
833
- margin-inline-start: 8px;
834
- }
835
- .filterpanel-buttons .apply-button {
836
- line-height: 1rem;
837
- }
838
- .filterpanel-buttons .apply-button dso-icon,
839
- .filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {
840
- margin-block-end: -4px;
841
- margin-block-start: -4px;
842
- }
843
- .filterpanel-buttons .apply-button.dso-spinner-left::before {
844
- block-size: 16px;
845
- inline-size: 16px;
846
- }
847
- .filterpanel-buttons .apply-button.dso-spinner-right::after {
848
- block-size: 16px;
849
- inline-size: 16px;
850
- }
851
- .filterpanel-buttons .cancel-button + .apply-button {
852
- margin-inline-start: 16px;
853
- }
854
-
855
566
  @media screen and (min-width: 808px) {
856
567
  :host([main-size=small]) .dso-main-panel,
857
568
  :host([document-panel-size=small]) .dso-document-panel {
@@ -931,36 +642,11 @@ button::-moz-focus-inner {
931
642
  .dso-document-panel .content {
932
643
  overflow-y: auto;
933
644
  }
934
- .filterpanel {
645
+ .filter-panel {
935
646
  margin-inline: 0 auto;
936
647
  inline-size: calc(100vw - 40px);
937
648
  }
938
- .filterpanel[open] {
939
- box-shadow: 2px 0 5px #666;
940
- }
941
- .filterpanel.filterpanel-vrk {
942
- max-inline-size: 896px;
943
- }
944
- .filterpanel.filterpanel-vrk::before {
945
- content: "";
946
- display: block;
947
- position: fixed;
948
- inset-block-start: 0;
949
- inset-block-end: 0;
950
- inset-inline-end: 0;
951
- inset-inline-start: 896px;
952
- background-color: rgba(0, 0, 0, 0.5);
953
- }
954
- }
955
- @media screen and (min-width: 808px) and (max-width: 936px) {
956
- .filterpanel.filterpanel-vrk::before {
957
- inset-inline-start: auto;
958
- inline-size: 40px;
959
- }
960
- }
961
- @media screen and (min-width: 808px) {
962
- .filterpanel-vdk[open] {
963
- box-shadow: none;
649
+ .filter-panel[open] {
964
650
  border-inline-end: 1px solid #e5e5e5;
965
651
  }
966
652
  .overlay {
@@ -969,11 +655,11 @@ button::-moz-focus-inner {
969
655
  }
970
656
  }
971
657
  @media screen and (min-width: 808px) and (max-width: 1031.99px) {
972
- :host([filterpanel-open][mode=vdk]) .dso-main-panel {
658
+ :host([filter-panel-open]) .dso-main-panel {
973
659
  margin-inline-start: 380px;
974
660
  max-inline-size: calc(100vw - 380px);
975
661
  }
976
- .filterpanel-vdk {
662
+ .filter-panel {
977
663
  inline-size: 380px;
978
664
  inset-inline-start: -380px;
979
665
  }
@@ -1183,20 +869,19 @@ button::-moz-focus-inner {
1183
869
  .dso-tertiary {
1184
870
  font-weight: 300;
1185
871
  }
1186
- .filterpanel,
872
+ .filter-panel,
1187
873
  .overlay {
1188
874
  margin-inline: 0;
1189
875
  max-inline-size: 100vw;
1190
876
  inset-block-start: 0;
1191
877
  inline-size: 100vw;
1192
878
  }
1193
- .filterpanel-vdk {
1194
- inline-size: 100vw;
879
+ .filter-panel {
1195
880
  inset-inline-start: -100vw;
1196
881
  }
1197
882
  }
1198
883
  @media screen and (min-width: 992px) {
1199
- :host([filterpanel-open][mode=vdk]) .dso-main-panel {
884
+ :host([filter-panel-open]) .dso-main-panel {
1200
885
  margin-inline-start: 380px;
1201
886
  }
1202
887
  }
@@ -1,7 +1,5 @@
1
- export const viewerGridVrkTabs = ["main", "map"];
2
- export const viewerGridVdkTabs = ["search", "map", "document"];
1
+ export const viewerGridTabs = ["search", "map", "document"];
3
2
  export const viewerGridTabLabelMap = {
4
- main: "Hoofdpaneel",
5
3
  map: "Kaart",
6
4
  document: "Document",
7
5
  search: "Zoeken",
@@ -1 +1 @@
1
- {"version":3,"file":"viewer-grid.interfaces.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/viewer-grid.interfaces.ts"],"names":[],"mappings":"AA2CA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,KAAK,CAAU,CAAC;AAG1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAU,CAAC;AAOxE,MAAM,CAAC,MAAM,qBAAqB,GAA0B;IAC1D,IAAI,EAAE,aAAa;IACnB,GAAG,EAAE,OAAO;IACZ,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAA2B;IAC5D,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n currentSize: ViewerGridPanelSize;\r\n nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridCloseFilterpanelEvent {\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 interface ViewerGridActiveTabSwitchEvent {\r\n tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" | \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n main: \"Hoofdpaneel\",\r\n map: \"Kaart\",\r\n document: \"Document\",\r\n search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n};\r\n"]}
1
+ {"version":3,"file":"viewer-grid.interfaces.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/viewer-grid.interfaces.ts"],"names":[],"mappings":"AAiCA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAU,CAAC;AAKrE,MAAM,CAAC,MAAM,qBAAqB,GAA0B;IAC1D,GAAG,EAAE,OAAO;IACZ,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAA2B;IAC5D,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n currentSize: ViewerGridPanelSize;\r\n nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridCloseFilterPanelEvent {\r\n originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n hide: boolean;\r\n}\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridTab = (typeof viewerGridTabs)[number];\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n map: \"Kaart\",\r\n document: \"Document\",\r\n search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n};\r\n"]}