@dso-toolkit/core 51.2.1 → 51.3.0

package/dist/types/components.d.ts

@@ -7,10 +7,12 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionInternalState, AccordionSectionToggleAnimationEndEvent, AccordionSectionToggleEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
 import { AccordionHeading, AccordionSectionState } from "./components/accordion/components/accordion-section.interfaces";
+import { AnnotationToggleEvent } from "./components/annotation-output/annotation-output.interfaces";
 import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
 import { DsoCardClickedEvent } from "./components/card/card.interfaces";
 import { CardContainerMode } from "./components/card-container/card-container.interfaces";
 import { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
+import { ExpandableHeadingToggleEvent, HeadingTags } from "./components/expandable-heading/expandable-heading.interfaces";
 import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 import { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
 import { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/list-button/list-button.interfaces";
@@ -85,6 +87,20 @@ export namespace Components {
          */
         "status": "success" | "info" | "warning" | "error";
     }
+    interface DsoAnnotationButton {
+        "identifier": string;
+    }
+    interface DsoAnnotationOutput {
+        /**
+          * This text will be displayed above the annotation-output when opened
+         */
+        "annotationPrefix"?: string;
+        /**
+          * The annotation-button that toggles this component should have the same identifier.
+         */
+        "identifier": string;
+        "toggleAnnotation": (e: MouseEvent | KeyboardEvent, identifier: string) => Promise<void>;
+    }
     interface DsoAttachmentsCounter {
         "count": number;
     }
@@ -115,12 +131,13 @@ export namespace Components {
         "suggestions": Suggestion[] | null;
     }
     interface DsoBadge {
-        "status"?: "primary" | "success" | "info" | "warning" | "danger" | "error" | "outline";
+        "status"?: "primary" | "success" | "info" | "warning" | "danger" | "error" | "outline" | "attention";
     }
     interface DsoBanner {
         "status": "warning" | "danger" | "error";
     }
     interface DsoCard {
+        "clickable": boolean;
         "hasImage": boolean;
         "isSelectable": boolean;
     }
@@ -195,6 +212,14 @@ export namespace Components {
          */
         "open": boolean;
     }
+    interface DsoExpandable {
+        "open"?: boolean;
+    }
+    interface DsoExpandableHeading {
+        "color": "default" | "black";
+        "heading": HeadingTags;
+        "open"?: boolean;
+    }
     interface DsoHeader {
         /**
           * Used to show the login/logout option. 'none' renders nothing.
@@ -240,7 +265,7 @@ export namespace Components {
     interface DsoLabel {
         "compact"?: boolean;
         "removable"?: boolean;
-        "status"?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright";
+        "status"?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright" | "attention";
         "truncate"?: boolean;
     }
     interface DsoListButton {
@@ -437,6 +462,10 @@ export interface DsoAccordionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoAccordionElement;
 }
+export interface DsoAnnotationOutputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoAnnotationOutputElement;
+}
 export interface DsoAutosuggestCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoAutosuggestElement;
@@ -449,6 +478,10 @@ export interface DsoDatePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoDatePickerElement;
 }
+export interface DsoExpandableHeadingCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoExpandableHeadingElement;
+}
 export interface DsoHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoHeaderElement;
@@ -532,6 +565,18 @@ declare global {
         prototype: HTMLDsoAlertElement;
         new (): HTMLDsoAlertElement;
     };
+    interface HTMLDsoAnnotationButtonElement extends Components.DsoAnnotationButton, HTMLStencilElement {
+    }
+    var HTMLDsoAnnotationButtonElement: {
+        prototype: HTMLDsoAnnotationButtonElement;
+        new (): HTMLDsoAnnotationButtonElement;
+    };
+    interface HTMLDsoAnnotationOutputElement extends Components.DsoAnnotationOutput, HTMLStencilElement {
+    }
+    var HTMLDsoAnnotationOutputElement: {
+        prototype: HTMLDsoAnnotationOutputElement;
+        new (): HTMLDsoAnnotationOutputElement;
+    };
     interface HTMLDsoAttachmentsCounterElement extends Components.DsoAttachmentsCounter, HTMLStencilElement {
     }
     var HTMLDsoAttachmentsCounterElement: {
@@ -580,6 +625,18 @@ declare global {
         prototype: HTMLDsoDropdownMenuElement;
         new (): HTMLDsoDropdownMenuElement;
     };
+    interface HTMLDsoExpandableElement extends Components.DsoExpandable, HTMLStencilElement {
+    }
+    var HTMLDsoExpandableElement: {
+        prototype: HTMLDsoExpandableElement;
+        new (): HTMLDsoExpandableElement;
+    };
+    interface HTMLDsoExpandableHeadingElement extends Components.DsoExpandableHeading, HTMLStencilElement {
+    }
+    var HTMLDsoExpandableHeadingElement: {
+        prototype: HTMLDsoExpandableHeadingElement;
+        new (): HTMLDsoExpandableHeadingElement;
+    };
     interface HTMLDsoHeaderElement extends Components.DsoHeader, HTMLStencilElement {
     }
     var HTMLDsoHeaderElement: {
@@ -734,6 +791,8 @@ declare global {
         "dso-accordion": HTMLDsoAccordionElement;
         "dso-accordion-section": HTMLDsoAccordionSectionElement;
         "dso-alert": HTMLDsoAlertElement;
+        "dso-annotation-button": HTMLDsoAnnotationButtonElement;
+        "dso-annotation-output": HTMLDsoAnnotationOutputElement;
         "dso-attachments-counter": HTMLDsoAttachmentsCounterElement;
         "dso-autosuggest": HTMLDsoAutosuggestElement;
         "dso-badge": HTMLDsoBadgeElement;
@@ -742,6 +801,8 @@ declare global {
         "dso-card-container": HTMLDsoCardContainerElement;
         "dso-date-picker": HTMLDsoDatePickerElement;
         "dso-dropdown-menu": HTMLDsoDropdownMenuElement;
+        "dso-expandable": HTMLDsoExpandableElement;
+        "dso-expandable-heading": HTMLDsoExpandableHeadingElement;
         "dso-header": HTMLDsoHeaderElement;
         "dso-helpcenter-panel": HTMLDsoHelpcenterPanelElement;
         "dso-highlight-box": HTMLDsoHighlightBoxElement;
@@ -818,6 +879,20 @@ declare namespace LocalJSX {
          */
         "status": "success" | "info" | "warning" | "error";
     }
+    interface DsoAnnotationButton {
+        "identifier": string;
+    }
+    interface DsoAnnotationOutput {
+        /**
+          * This text will be displayed above the annotation-output when opened
+         */
+        "annotationPrefix"?: string;
+        /**
+          * The annotation-button that toggles this component should have the same identifier.
+         */
+        "identifier": string;
+        "onDsoToggle"?: (event: DsoAnnotationOutputCustomEvent<AnnotationToggleEvent>) => void;
+    }
     interface DsoAttachmentsCounter {
         "count": number;
     }
@@ -860,12 +935,13 @@ declare namespace LocalJSX {
         "suggestions"?: Suggestion[] | null;
     }
     interface DsoBadge {
-        "status"?: "primary" | "success" | "info" | "warning" | "danger" | "error" | "outline";
+        "status"?: "primary" | "success" | "info" | "warning" | "danger" | "error" | "outline" | "attention";
     }
     interface DsoBanner {
         "status": "warning" | "danger" | "error";
     }
     interface DsoCard {
+        "clickable"?: boolean;
         "hasImage"?: boolean;
         "isSelectable"?: boolean;
         "onDsoCardClicked"?: (event: DsoCardCustomEvent<DsoCardClickedEvent>) => void;
@@ -949,6 +1025,15 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    interface DsoExpandable {
+        "open"?: boolean;
+    }
+    interface DsoExpandableHeading {
+        "color"?: "default" | "black";
+        "heading"?: HeadingTags;
+        "onDsoToggle"?: (event: DsoExpandableHeadingCustomEvent<ExpandableHeadingToggleEvent>) => void;
+        "open"?: boolean;
+    }
     interface DsoHeader {
         /**
           * Used to show the login/logout option. 'none' renders nothing.
@@ -1000,7 +1085,7 @@ declare namespace LocalJSX {
         "compact"?: boolean;
         "onDsoRemoveClick"?: (event: DsoLabelCustomEvent<MouseEvent>) => void;
         "removable"?: boolean;
-        "status"?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright";
+        "status"?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright" | "attention";
         "truncate"?: boolean;
     }
     interface DsoListButton {
@@ -1215,6 +1300,8 @@ declare namespace LocalJSX {
         "dso-accordion": DsoAccordion;
         "dso-accordion-section": DsoAccordionSection;
         "dso-alert": DsoAlert;
+        "dso-annotation-button": DsoAnnotationButton;
+        "dso-annotation-output": DsoAnnotationOutput;
         "dso-attachments-counter": DsoAttachmentsCounter;
         "dso-autosuggest": DsoAutosuggest;
         "dso-badge": DsoBadge;
@@ -1223,6 +1310,8 @@ declare namespace LocalJSX {
         "dso-card-container": DsoCardContainer;
         "dso-date-picker": DsoDatePicker;
         "dso-dropdown-menu": DsoDropdownMenu;
+        "dso-expandable": DsoExpandable;
+        "dso-expandable-heading": DsoExpandableHeading;
         "dso-header": DsoHeader;
         "dso-helpcenter-panel": DsoHelpcenterPanel;
         "dso-highlight-box": DsoHighlightBox;
@@ -1257,6 +1346,8 @@ declare module "@stencil/core" {
             "dso-accordion": LocalJSX.DsoAccordion & JSXBase.HTMLAttributes<HTMLDsoAccordionElement>;
             "dso-accordion-section": LocalJSX.DsoAccordionSection & JSXBase.HTMLAttributes<HTMLDsoAccordionSectionElement>;
             "dso-alert": LocalJSX.DsoAlert & JSXBase.HTMLAttributes<HTMLDsoAlertElement>;
+            "dso-annotation-button": LocalJSX.DsoAnnotationButton & JSXBase.HTMLAttributes<HTMLDsoAnnotationButtonElement>;
+            "dso-annotation-output": LocalJSX.DsoAnnotationOutput & JSXBase.HTMLAttributes<HTMLDsoAnnotationOutputElement>;
             "dso-attachments-counter": LocalJSX.DsoAttachmentsCounter & JSXBase.HTMLAttributes<HTMLDsoAttachmentsCounterElement>;
             "dso-autosuggest": LocalJSX.DsoAutosuggest & JSXBase.HTMLAttributes<HTMLDsoAutosuggestElement>;
             "dso-badge": LocalJSX.DsoBadge & JSXBase.HTMLAttributes<HTMLDsoBadgeElement>;
@@ -1265,6 +1356,8 @@ declare module "@stencil/core" {
             "dso-card-container": LocalJSX.DsoCardContainer & JSXBase.HTMLAttributes<HTMLDsoCardContainerElement>;
             "dso-date-picker": LocalJSX.DsoDatePicker & JSXBase.HTMLAttributes<HTMLDsoDatePickerElement>;
             "dso-dropdown-menu": LocalJSX.DsoDropdownMenu & JSXBase.HTMLAttributes<HTMLDsoDropdownMenuElement>;
+            "dso-expandable": LocalJSX.DsoExpandable & JSXBase.HTMLAttributes<HTMLDsoExpandableElement>;
+            "dso-expandable-heading": LocalJSX.DsoExpandableHeading & JSXBase.HTMLAttributes<HTMLDsoExpandableHeadingElement>;
             "dso-header": LocalJSX.DsoHeader & JSXBase.HTMLAttributes<HTMLDsoHeaderElement>;
             "dso-helpcenter-panel": LocalJSX.DsoHelpcenterPanel & JSXBase.HTMLAttributes<HTMLDsoHelpcenterPanelElement>;
             "dso-highlight-box": LocalJSX.DsoHighlightBox & JSXBase.HTMLAttributes<HTMLDsoHighlightBoxElement>;

package/dist/types/index.d.ts

@@ -1,8 +1,10 @@
 export { Components, JSX } from "./components";
 export * from "./components/accordion/accordion.interfaces";
+export * from "./components/annotation-output/annotation-output.interfaces";
 export * from "./components/autosuggest/autosuggest.interfaces";
 export * from "./components/card/card.interfaces";
 export * from "./components/date-picker/date-picker.interfaces";
+export * from "./components/expandable-heading/expandable-heading.interfaces";
 export * from "./components/header/header.interfaces";
 export * from "./components/info-button/info-button.interfaces";
 export * from "./components/list-button/list-button.interfaces";

package/dist/types/services/annotation.service.d.ts

@@ -0,0 +1,10 @@
+interface AnnotationState {
+  [key: string]: boolean;
+}
+export declare abstract class AnnotationService {
+  private static _state;
+  static get state(): AnnotationState;
+  static toggle(id: string): void;
+  private static initializeStore;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "51.2.1",
+  "version": "51.3.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -24,7 +24,7 @@
     "@stencil/store": "^2.0.1",
     "animejs": "3.2.1",
     "clsx": "1.2.1",
-    "dso-toolkit": "51.2.1",
+    "dso-toolkit": "51.3.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.1.0",
     "popper-max-size-modifier": "^0.2.0",

package/dist/dso-toolkit/p-36cd87c4.entry.js

@@ -1 +0,0 @@
-import{g as t,f as e,r as s,c as n,h as i,H as o,a as r}from"./p-8f35c8f8.js";const a=t=>!("isConnected"in t)||t.isConnected,c=(()=>{let t;return(...e)=>{t&&clearTimeout(t),t=setTimeout((()=>{t=0,(t=>{for(let e of t.keys())t.set(e,t.get(e).filter(a))})(...e)}),2e3)}})(),l=t=>"function"==typeof t?t():t,h=class{constructor(i){s(this,i),this.dsoToggleSection=n(this,"dsoToggleSection",7),this.dsoToggleSectionAnimationEnd=n(this,"dsoToggleSectionAnimationEnd",7),this.variant="default",this.reverseAlign=!1,this.allowMultipleOpen=!1;const{state:o}=((s,n)=>{const i=((t,e=((t,e)=>t!==e))=>{const s=l(t);let n=new Map(Object.entries(null!=s?s:{}));const i={dispose:[],get:[],set:[],reset:[]},o=()=>{var e;n=new Map(Object.entries(null!==(e=l(t))&&void 0!==e?e:{})),i.reset.forEach((t=>t()))},r=t=>(i.get.forEach((e=>e(t))),n.get(t)),a=(t,s)=>{const o=n.get(t);e(s,o,t)&&(n.set(t,s),i.set.forEach((e=>e(t,s,o))))},c="undefined"==typeof Proxy?{}:new Proxy(s,{get:(t,e)=>r(e),ownKeys:()=>Array.from(n.keys()),getOwnPropertyDescriptor:()=>({enumerable:!0,configurable:!0}),has:(t,e)=>n.has(e),set:(t,e,s)=>(a(e,s),!0)}),h=(t,e)=>(i[t].push(e),()=>{((t,e)=>{const s=t.indexOf(e);s>=0&&(t[s]=t[t.length-1],t.length--)})(i[t],e)});return{state:c,get:r,set:a,on:h,onChange:(e,s)=>{const n=h("set",((t,n)=>{t===e&&s(n)})),i=h("reset",(()=>s(l(t)[e])));return()=>{n(),i()}},use:(...t)=>{const e=t.reduce(((t,e)=>(e.set&&t.push(h("set",e.set)),e.get&&t.push(h("get",e.get)),e.reset&&t.push(h("reset",e.reset)),e.dispose&&t.push(h("dispose",e.dispose)),t)),[]);return()=>e.forEach((t=>t()))},dispose:()=>{i.dispose.forEach((t=>t())),o()},reset:o,forceUpdate:t=>{const e=n.get(t);i.set.forEach((s=>s(t,e,e)))}}})(s,n);return i.use((()=>{if("function"!=typeof t)return{};const s=new Map;return{dispose:()=>s.clear(),get:e=>{const n=t();n&&((t,e,s)=>{const n=t.get(e);n?n.includes(s)||n.push(s):t.set(e,[s])})(s,e,n)},set:t=>{const n=s.get(t);n&&s.set(t,n.filter(e)),c(s)},reset:()=>{s.forEach((t=>t.forEach(e))),c(s)}}})()),i})({variant:this.variant||"default",reverseAlign:this.reverseAlign,allowMultipleOpen:this.allowMultipleOpen});this.accordionState=o}updateVariant(t="default"){this.accordionState.variant=t||"default"}updateReverseAlign(t){this.accordionState.reverseAlign=t}updateAllowMultipleOpen(t){if(this.accordionState.allowMultipleOpen=t,!t){const t=Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));t.shift(),t.forEach((t=>this.controlOpenAttribute(t,!1)))}}async getState(){return this.accordionState}async toggleSection(t,e){const s=Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));if("number"==typeof t&&(t=s[t]),!(t instanceof HTMLElement&&s.includes(t)))return;const n=this.isSectionOpen(t);return this.allowMultipleOpen?(this.controlOpenAttribute(t,!n),this.emitToggleEvent(t,s,e),!n):n?(this.controlOpenAttribute(t,!1),this.emitToggleEvent(t,s,e),!1):(await this.closeOpenSections(),this.controlOpenAttribute(t,!0),this.emitToggleEvent(t,s,e),!0)}async animationEnd(t){this.dsoToggleSectionAnimationEnd.emit({section:{element:t,open:this.isSectionOpen(t)}})}async closeOpenSections(){Array.from(this.host.querySelectorAll(":scope > dso-accordion-section")).filter((t=>this.isSectionOpen(t))).forEach((t=>this.controlOpenAttribute(t,!1)))}componentWillLoad(){this.accordionState.variant!==this.variant&&(this.accordionState.variant=this.variant||"default"),this.accordionState.reverseAlign!==this.reverseAlign&&(this.accordionState.reverseAlign=this.reverseAlign),this.accordionState.allowMultipleOpen!==this.allowMultipleOpen&&(this.accordionState.allowMultipleOpen=this.allowMultipleOpen)}render(){return i(o,{class:{"dso-accordion":!0}},i("slot",null))}emitToggleEvent(t,e,s){this.dsoToggleSection.emit({originalEvent:s,section:{element:t,open:this.isSectionOpen(t)},sections:e})}isSectionOpen(t){return"string"==typeof t.getAttribute("open")}controlOpenAttribute(t,e){e?t.setAttribute("open",""):t.removeAttribute("open")}get host(){return r(this)}static get watchers(){return{variant:["updateVariant"],reverseAlign:["updateReverseAlign"],allowMultipleOpen:["updateAllowMultipleOpen"]}}};h.style=":host{display:block}*,*::after,*::before{box-sizing:border-box}";export{h as dso_accordion}

package/dist/dso-toolkit/p-46acc09f.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,h as n,F as e,a}from"./p-8f35c8f8.js";import{i as o}from"./p-33df9903.js";const s=class{constructor(n){i(this,n),this.dsoSelectPage=t(this,"dsoSelectPage",7),this.sizePositionsMap={small:7,medium:9,large:11},this.availablePositions=void 0,this.totalPages=void 0,this.currentPage=void 0,this.formatHref=i=>"#"+i}sizeChangeHandler(i){this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i.detail])}clickHandler(i,t){this.dsoSelectPage.emit({originalEvent:i,page:t,isModifiedEvent:o(i)})}componentDidLoad(){var i;null===(i=this.responsiveElement)||void 0===i||i.getSize().then((i=>this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i])))}render(){var i,t,a;if(!this.totalPages)return null;if(void 0===this.availablePositions)return n("dso-responsive-element",{ref:i=>this.responsiveElement=i});const o=this.availablePositions,s=null!==(i=this.currentPage)&&void 0!==i?i:0,l=this.getPages(s,this.availablePositions,this.totalPages);return n("dso-responsive-element",{ref:i=>this.responsiveElement=i},n("ul",{class:"pagination"},n("li",{class:s<=1||s>this.totalPages?"dso-page-hidden":void 0},n("a",{href:this.formatHref(null!==(t=l[l.indexOf(s)-1])&&void 0!==t?t:1),"aria-label":"Vorige",onClick:i=>{var t;return s&&this.clickHandler(i,null!==(t=l[l.indexOf(s)-1])&&void 0!==t?t:1)}},n("dso-icon",{icon:"chevron-left"}))),l.map((i=>n(e,null,this.showEllipsisBeforeLast(l,i,o,l[l.length-1])&&n("li",null,n("span",null,"...")),n("li",{key:i,class:s===i?"active":void 0},s===i?n("span",{"aria-current":"page"},i):n("a",{href:this.formatHref(i),onClick:t=>this.clickHandler(t,i)},i)),this.showEllipsisAfterFirst(l,i,o)&&n("li",null,n("span",null,"..."))))),n("li",{class:s<1||s>=this.totalPages?"dso-page-hidden":void 0},n("a",{href:this.formatHref(null!==(a=l[l.indexOf(s)+1])&&void 0!==a?a:this.totalPages),"aria-label":"Volgende",onClick:i=>{var t;return s&&this.clickHandler(i,null!==(t=l[l.indexOf(s)+1])&&void 0!==t?t:this.totalPages)}},n("dso-icon",{icon:"chevron-right"})))))}getAvailablePositions(i){return i%2==0?i-1:i<=3?3:i}getPages(i,t,n){return n+2<=t?Array.from({length:n},((i,t)=>t+1)):3===t?[i]:5===t?[1,i,n]:[1,...this.getPageRange(i,t,n),n]}getPageRange(i,t,n){const e=[],a=Math.floor(t/2);if(i<=a)for(let i=2;i<=t-4;i++)e.push(i);if(i>=a&&i<=n-a&&(1===a&&(i>n-2&&e.push(n-2),e.push(i),i<3&&e.push(3)),a>1)){const t=a-3;for(let o=Math.min(i-t,n-a);o<=Math.max(i+t,a);o++)o>2&&o<n-1&&e.push(o)}if(i>n-a)for(let i=n-(t-5);i<=n-1;i++)e.push(i);return e.filter(((i,t,n)=>n.indexOf(i)===t))}showEllipsisAfterFirst(i,t,n){return 0===i.indexOf(t)&&i[i.length-1]>n-2&&!i.some((i=>2===i))&&n>=7}showEllipsisBeforeLast(i,t,n,e){return i.indexOf(t)===i.length-1&&i[i.length-1]>n-2&&!i.some((i=>i===e-1))&&n>=7}get host(){return a(this)}};s.style=':host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:"";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}';export{s as dso_pagination}

package/dist/dso-toolkit/p-6bd8515a.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as s,H as n,a}from"./p-8f35c8f8.js";import{i}from"./p-33df9903.js";const o=t=>t instanceof HTMLButtonElement||t instanceof HTMLAnchorElement||t instanceof HTMLInputElement||t.tagName.startsWith("DSO-TOGGLETIP"),d=class{constructor(s){t(this,s),this.dsoCardClicked=e(this,"dsoCardClicked",7),this.isSelectable=!1,this.hasImage=!1}clickEventHandler(t){if(!(t.target instanceof HTMLElement))return;let e=t.target;for(;e!==this.host&&null!==e;){if(o(e)||null===e)return;e=e.parentNode instanceof ShadowRoot&&e.parentNode.host instanceof HTMLElement?e.parentNode.host:e.parentElement}return this.dsoCardClicked.emit({originalEvent:t,isModifiedEvent:i(t)})}componentWillLoad(){this.isSelectable=null!==this.host.querySelector("*[slot = 'selectable']"),this.hasImage=null!==this.host.querySelector("*[slot = 'image']")}render(){return s(n,{onClick:t=>this.clickEventHandler(t)},s("div",{class:"dso-card-selectable",hidden:!this.isSelectable},s("slot",{name:"selectable"})),s("div",{class:"dso-card-image",hidden:!this.hasImage},s("slot",{name:"image"})),s("div",{class:"dso-card-heading"},s("slot",{name:"heading"}),s("slot",{name:"interactions"})),s("div",{class:"dso-card-content"},s("slot",{name:"content"})))}get host(){return a(this)}};d.style=":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}";export{d as dso_card}

package/dist/dso-toolkit/p-78ee23c5.entry.js

@@ -1 +0,0 @@
-import{r as s,c as o,h as d,F as e,a}from"./p-8f35c8f8.js";import{c as i}from"./p-6a1980b4.js";import{d as r}from"./p-1805f5b0.js";import{i as t}from"./p-33df9903.js";const n=class{constructor(e){s(this,e),this.dsoHeaderClick=o(this,"dsoHeaderClick",7),this.onWindowResize=r((()=>{this.setDropDownMenu(),this.setOverflowMenu()}),100),this.MenuItem=s=>d("li",{class:s.active?"dso-active":void 0},d("a",{href:s.url,"aria-current":s.active?"page":void 0,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:s})},s.label)),this.mainMenu=[],this.useDropDownMenu="auto",this.authStatus="none",this.loginUrl=void 0,this.logoutUrl=void 0,this.userProfileName=void 0,this.userProfileUrl=void 0,this.userHomeUrl=void 0,this.showDropDown=void 0,this.hasSubLogo=!1,this.overflowMenuItems=0}clickHandler(s,o,d){var e,a;this.dsoHeaderClick.emit({originalEvent:s,isModifiedEvent:t(s),type:o,menuItem:null==d?void 0:d.menuItem,url:null!==(e=null==d?void 0:d.url)&&void 0!==e?e:null===(a=null==d?void 0:d.menuItem)||void 0===a?void 0:a.url})}setShowDropDown(s){"auto"!==s?this.showDropDown="always"===s:this.setDropDownMenu()}componentWillLoad(){this.hasSubLogo=null!==this.host.querySelector("*[slot = 'sub-logo']")}shrinkMenuToFit(){this.wrapper&&this.nav&&(this.wrapper.clientWidth>=this.nav.clientWidth||this.mainMenu&&this.overflowMenuItems>=this.mainMenu.length||this.overflowMenuItems++)}componentDidRender(){this.showDropDown||window.setTimeout((()=>this.shrinkMenuToFit()),0)}componentDidLoad(){this.setShowDropDown(this.useDropDownMenu)}setOverflowMenu(){this.showDropDown||(0===this.overflowMenuItems?this.shrinkMenuToFit():this.overflowMenuItems=0)}setDropDownMenu(){"auto"===this.useDropDownMenu&&(this.showDropDown=window.innerWidth<992)}connectedCallback(){window.addEventListener("resize",this.onWindowResize)}disconnectedCallback(){window.removeEventListener("resize",this.onWindowResize)}render(){if(void 0!==this.showDropDown)return d(e,null,d("div",{class:i("dso-header",{"use-drop-down":this.showDropDown,"has-sub-logo":this.hasSubLogo}),ref:s=>this.wrapper=s},d("div",{class:"logo-container"},d("div",{class:"logo"},d("slot",{name:"logo"})),d("div",{class:"sub-logo"},d("slot",{name:"sub-logo"}))),this.showDropDown&&this.mainMenu&&this.mainMenu.length>0&&d("div",{class:"dropdown"},d("dso-dropdown-menu",{"dropdown-align":"right"},d("button",{type:"button",slot:"toggle"},d("span",null,"Menu")),d("div",{class:"dso-dropdown-options"},d("ul",null,this.mainMenu.map(this.MenuItem),this.userHomeUrl&&d("li",null,d("a",{href:this.userHomeUrl,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},"Mijn Omgevingsloket")),this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&d("li",null,d("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName,d("span",{class:"profile-label"}," - Mijn profiel"))),"loggedOut"===this.authStatus&&d("li",null,this.loginUrl?d("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):d("button",{type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),"loggedIn"===this.authStatus&&d("li",null,this.logoutUrl?d("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):d("button",{type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen")))))),!this.showDropDown&&d(e,null,d("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&d("div",{class:"profile"},d("span",{class:"profile-label"},"Welkom:"),d("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName)),"loggedOut"===this.authStatus&&d("div",{class:"login"},this.loginUrl?d("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):d("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),"loggedIn"===this.authStatus&&d("div",{class:"logout"},this.logoutUrl?d("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):d("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen"))),(this.mainMenu&&this.mainMenu.length>0||this.userHomeUrl)&&d("nav",{class:"dso-navbar"},d("ul",{class:"dso-nav dso-nav-main",ref:s=>this.nav=s},this.mainMenu&&this.mainMenu.filter(((s,o)=>this.mainMenu&&o<this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem),this.overflowMenuItems>0&&d("li",null,d("dso-dropdown-menu",{"dropdown-align":"left"},d("button",{type:"button",slot:"toggle"},d("span",null,"Meer")),d("div",{class:"dso-dropdown-options"},d("ul",null,this.mainMenu&&this.mainMenu.filter(((s,o)=>this.mainMenu&&o>=this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem))))),this.userHomeUrl&&d("li",{class:"menu-user-home"},d("a",{href:this.userHomeUrl,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},d("dso-icon",{icon:"user-line"}),"Mijn Omgevingsloket")))))))}get host(){return a(this)}static get watchers(){return{useDropDownMenu:["setShowDropDown"]}}};n.style=".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;gap:0 24px;padding-bottom:16px;padding-top:16px}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem;top:calc(100% + 3px)}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";export{n as dso_header}

package/dist/dso-toolkit/p-9287b2f2.entry.js

@@ -1 +0,0 @@
-import{r as o,c as t,h as s,H as i,a as e}from"./p-8f35c8f8.js";import{c as a}from"./p-6a1980b4.js";const l=class{constructor(s){o(this,s),this.dsoRemoveClick=t(this,"dsoRemoveClick",7),this.mutationObserver=new MutationObserver((()=>{this.labelText=this.host.innerText,this.truncate&&this.truncateLabel()})),this.resizeObserver=new ResizeObserver((()=>this.truncateLabel())),this.keydownListenerActive=!1,this.keyDownListener=o=>{"Escape"===o.key&&(this.textHover=!1,this.textFocus=!1)},this.compact=void 0,this.removable=void 0,this.status=void 0,this.removeHover=void 0,this.removeFocus=void 0,this.truncate=void 0,this.textHover=void 0,this.textFocus=void 0,this.truncatedContent=void 0,this.labelText=void 0}watchTruncate(o){o?this.startTruncate():this.stopTruncate()}watchTooltipActive(){this.keydownListenerActive||!this.textHover&&!this.textFocus||(document.addEventListener("keydown",this.keyDownListener),this.keydownListenerActive=!0),this.textHover||this.textFocus||(document.removeEventListener("keydown",this.keyDownListener),this.keydownListenerActive=!1)}truncateLabel(){setTimeout((()=>{var o;this.labelContent&&(this.truncatedContent=(o=this.labelContent).scrollWidth>o.clientWidth?this.host.innerText:void 0)}))}componentDidLoad(){this.labelText=this.host.innerText,this.mutationObserver.observe(this.host,{attributes:!0,subtree:!0}),this.truncate&&this.startTruncate()}disconnectedCallback(){var o;null===(o=this.mutationObserver)||void 0===o||o.disconnect(),this.stopTruncate()}startTruncate(){this.resizeObserver.observe(this.host),this.truncateLabel()}stopTruncate(){document.removeEventListener("keydown",this.keyDownListener),this.resizeObserver.unobserve(this.host),this.truncatedContent=void 0,this.keydownListenerActive=!1}render(){const o=this.status&&l.statusMap.get(this.status);return s(i,{"aria-roledescription":this.truncate&&this.truncatedContent?"Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus.":void 0},s("span",{"aria-describedby":"toggle-anchor",class:a("dso-label",{[`dso-label-${this.status}`]:this.status,"dso-compact":this.compact&&!this.removable,"dso-hover":this.removeHover||this.removeFocus})},s("slot",{name:"symbol"}),o&&s("span",{class:"sr-only"},o,": "),s("span",{class:a("dso-label-content",{"dso-truncate":!!this.truncate}),ref:o=>this.labelContent=o,tabindex:this.truncate&&this.truncatedContent?0:-1,onMouseEnter:()=>this.textHover=!0,onMouseLeave:()=>this.textHover=!1,onFocus:()=>this.textFocus=!0,onBlur:()=>this.textFocus=!1},s("slot",null)),this.removable&&s("button",{type:"button",onClick:o=>this.dsoRemoveClick.emit(o),onMouseEnter:()=>this.removeHover=!0,onMouseLeave:()=>this.removeHover=!1,onFocus:()=>this.removeFocus=!0,onBlur:()=>this.removeFocus=!1},s("span",{class:"sr-only"},"Verwijder: ",this.labelText),s("dso-icon",{icon:"times"}))),s("dso-tooltip",{stateless:!0,id:"toggle-anchor",active:!!this.truncatedContent&&(this.textHover||this.textFocus),position:"top",strategy:"absolute"},this.truncatedContent))}get host(){return e(this)}static get watchers(){return{truncate:["watchTruncate"],textHover:["watchTooltipActive"],textFocus:["watchTooltipActive"]}}};l.statusMap=new Map([["info","Opmerking"],["success","Gelukt"],["warning","Waarschuwing"],["danger","Fout"]]),l.style=":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";export{l as dso_label}

package/dist/dso-toolkit/p-d7b2adc3.entry.js

@@ -1 +0,0 @@
-import{r as n,f as t,h as e,H as o,a as r}from"./p-8f35c8f8.js";import{d as s}from"./p-1805f5b0.js";import{c as i}from"./p-57ceabab.js";import"./p-3635427a.js";const a=class{constructor(t){n(this,t),this.titelSlot=null,this.bijschriftSlot=null,this.active=!1,this.focused=!1,this.zoomable=!1}loadListener(n){n.target instanceof HTMLImageElement&&this.setZoomable(n.target)}connectedCallback(){this.titelSlot=this.host.querySelector("div[slot='titel']"),this.bijschriftSlot=this.host.querySelector("div[slot='bijschrift']")}componentDidLoad(){this.resizeObserver=new ResizeObserver(s((()=>{const n=this.host.querySelector("img");n instanceof HTMLImageElement&&this.setZoomable(n)}),200)),this.mutationObserver=new MutationObserver((n=>{var e,o;t(this.host),"childList"===(null===(e=n[0])||void 0===e?void 0:e.type)&&(null===(o=this.resizeObserver)||void 0===o||o.disconnect(),this.initZoomableImage())})),this.mutationObserver.observe(this.host,{attributes:!0,subtree:!0,attributeFilter:["src","alt"],childList:!0}),this.initZoomableImage()}disconnectedCallback(){var n,t,e;null===(n=this.trap)||void 0===n||n.deactivate(),null===(t=this.mutationObserver)||void 0===t||t.disconnect(),null===(e=this.resizeObserver)||void 0===e||e.disconnect()}initZoomableImage(){var n;const t=this.host.querySelector("img");t instanceof HTMLImageElement&&(t.complete&&this.setZoomable(t),null===(n=this.resizeObserver)||void 0===n||n.observe(t))}setZoomable(n){const{width:t,naturalWidth:e,height:o,naturalHeight:r}=n;this.zoomable=t<e||o<r}render(){var n;const{src:t,alt:r}=null!==(n=this.host.querySelector("img"))&&void 0!==n?n:{};return e(o,{tabindex:this.focused||!this.zoomable?-1:0,onFocus:()=>{var n;return null===(n=this.buttonElement)||void 0===n?void 0:n.focus()}},this.active&&t&&r&&e("div",{class:"dimmer"},e("div",{class:"wrapper",ref:n=>this.wrapperElement=n},e("div",{class:"titel",hidden:!this.titelSlot},e("slot",{name:"titel"})),e("img",{src:t,alt:r}),e("button",{type:"button",class:"close",onClick:()=>this.active=!1},e("dso-icon",{icon:"times"}),e("span",null,"Sluiten")),e("div",{class:"figuur-bijschrift",hidden:!this.bijschriftSlot},e("slot",{name:"bijschrift"})))),e("slot",null),this.zoomable&&e("button",{type:"button",class:"open",ref:n=>this.buttonElement=n,onClick:()=>this.active=!0,onFocus:()=>this.focused=!0,onBlur:()=>this.focused=!1},e("dso-icon",{icon:"external-link"}),e("span",null,"Afbeelding vergroot weergeven")))}componentDidRender(){var n,t;this.active&&this.wrapperElement&&!this.trap?this.trap=i(this.wrapperElement,{escapeDeactivates:!0,clickOutsideDeactivates:n=>!(n instanceof MouseEvent&&n.composedPath()[0]===this.wrapperElement&&(this.active=!1,1)),setReturnFocus:null!==(n=this.buttonElement)&&void 0!==n&&n,onDeactivate:()=>this.active=!1}).activate():!this.active&&this.trap&&(null===(t=this.trap)||void 0===t||t.deactivate(),delete this.trap)}get host(){return r(this)}};a.style=":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host(:hover) .open,\n.open:focus {\n  opacity: 1;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.open {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-width: auto;\n  padding: 8px;\n  opacity: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.open:focus, .open:focus-visible {\n  outline-offset: 2px;\n}\n.open:active {\n  outline: 0;\n}\n.open:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open[disabled], .open[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.open.btn-sm {\n  line-height: 1rem;\n}\n.open.btn-sm dso-icon,\n.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after, .open.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.open.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.open.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.open > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.open.dso-spinner-left::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]):hover::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.open.dso-spinner-right::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]):hover::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n\n.dimmer {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 19;\n  display: flex;\n  padding: 32px;\n  background-color: rgba(255, 255, 255, 0.8);\n  justify-content: center;\n}\n\n.wrapper {\n  align-self: center;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n  line-height: 0;\n  outline: 4px solid #fff;\n  position: relative;\n  z-index: 20;\n}\n.wrapper .titel:not([hidden]) {\n  background-color: #fff;\n  font-weight: 700;\n  line-height: initial;\n  padding: 8px;\n  position: absolute;\n}\n.wrapper img {\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: calc(100vh - 64px);\n}\n.wrapper .figuur-bijschrift:not([hidden]) {\n  display: block;\n  font-size: 0.75rem;\n  font-style: italic;\n  padding-bottom: 12px;\n  padding-top: 16px;\n}\n\n.close {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-width: auto;\n  padding: 8px;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n}\n.close:focus, .close:focus-visible {\n  outline-offset: 2px;\n}\n.close:active {\n  outline: 0;\n}\n.close:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.close[disabled], .close[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close.btn-sm {\n  line-height: 1rem;\n}\n.close.btn-sm dso-icon,\n.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after, .close.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.close.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.close.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.close > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.close.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close.dso-spinner-left::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]):hover::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.close.dso-spinner-right::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]):hover::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}";export{a as dso_image_overlay}