npm - @dso-toolkit/core - Versions diffs - 74.0.0 → 75.0.0 - Mend

@dso-toolkit/core 74.0.0 → 75.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 (794) hide show

package/dist/dso-toolkit/{p-7a3c51ad.entry.js.map → p-789aee43.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["highlightBoxCss","HighlightBox","render","hasCounter","this","step","element","querySelector","h","Host","key","class","_a","name"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n @include highlight-box.root();\r\n\r\n display: block;\r\n container-type: inline-size;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop({ reflect: true })\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop({ reflect: true })\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n return (\r\n <Host has-counter={hasCounter}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAkB,~~ouB~~,MCOXC,EAAY,M,yBAkCvB,MAAAC,G,MACE,MAAMC,EAAaC,KAAKC,QAAUD,KAAKE,QAAQC,cAAc,eAE7D,OACEC,EAACC,EAAI,CAAAC,IAAA,yDAAcP,GAChBA,GAAcK,EAAK,OAAAE,IAAA,2CAAAC,MAAM,qBAAoBC,EAAAR,KAAKC,QAAI,MAAAO,SAAA,EAAAA,EAAIJ,EAAM,QAAAE,IAAA,2CAAAG,KAAK,UACtEL,EAAa,QAAAE,IAAA,6C","ignoreList":[]}
1	+ {"version":3,"names":["highlightBoxCss","HighlightBox","render","hasCounter","this","step","element","querySelector","h","Host","key","class","_a","name"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n @include highlight-box.root();\r\n\r\n display: block;\r\n container-type: inline-size;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop({ reflect: true })\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop({ reflect: true })\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n return (\r\n <Host has-counter={hasCounter}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAkB,qvB,MCOXC,EAAY,M,yBAkCvB,MAAAC,G,MACE,MAAMC,EAAaC,KAAKC,QAAUD,KAAKE,QAAQC,cAAc,eAE7D,OACEC,EAACC,EAAI,CAAAC,IAAA,yDAAcP,GAChBA,GAAcK,EAAK,OAAAE,IAAA,2CAAAC,MAAM,qBAAoBC,EAAAR,KAAKC,QAAI,MAAAO,SAAA,EAAAA,EAAIJ,EAAM,QAAAE,IAAA,2CAAAG,KAAK,UACtEL,EAAa,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/dso-toolkit/p-7e09098c.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as n,h as t,H as i,g as o}from"./p-C-b4jsbt.js";import{c as s}from"./p-ChV9xqsO.js";const a="@charset \"UTF-8\";\n/* Genereert een `transition` met vaste easing en optionele duur en delay per property.\n\n @param {ArgList} $transitions...\n - \"property\": gebruikt standaard duur (260ms) en delay (0ms)\n - (\"property\", duur): eigen duur, geen delay\n - (\"property\", duur, delay): eigen duur én delay\n\n @example\n @include transition(opacity, (\"transform\", 300ms), (\"color\", 500ms, 200ms));\n\n @output\n transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];\n\n/\n:host {\n display: block;\n padding-block: 4px;\n padding-inline: 4px;\n}\n\n,\n::after,\n::before {\n box-sizing: border-box;\n}\n\n.legend-item {\n display: flex;\n position: relative;\n}\n.legend-item.legend-item-symbol + .body {\n margin-block-start: 8px;\n}\n\n.legend-item-right-content {\n margin-inline-start: auto;\n}\n.legend-item-right-content button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.legend-item-right-content button:focus, .legend-item-right-content button:focus-visible {\n outline-offset: 2px;\n}\n.legend-item-right-content button:active {\n outline: 0;\n}\n.legend-item-right-content button {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.legend-item-right-content button[disabled] {\n color: #afcf9d;\n}\n.legend-item-right-content button[disabled].dso-spinner-left, .legend-item-right-content button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.legend-item-right-content button:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.legend-item-right-content button:not([disabled]):active {\n color: #173521;\n}\n.legend-item-right-content button.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.legend-item-right-content button.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.legend-item-right-content button.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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.legend-item-right-content button.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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.legend-item-right-content button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.legend-item-right-content button {\n cursor: pointer;\n}\n.legend-item-right-content button.active {\n color: #173521;\n}\n.legend-item-right-content dso-slide-toggle {\n align-self: center;\n margin-inline-start: 8px;\n padding-block-start: 0 !important;\n}";const r=class{constructor(t){e(this,t);this.dsoActiveChange=n(this,"dsoActiveChange",7);this.dsoMouseEnter=n(this,"dsoMouseEnter",7);this.dsoMouseLeave=n(this,"dsoMouseLeave",7);this.disabled=false;this.showBody=false}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get bodySlottedElement(){return this.host.querySelector("[slot='body']")}render(){const e=this.symbolSlottedElement!==null;const n=this.bodySlottedElement!==null;return t(i,{key:"67814413c80d68a1b04cae35bbe937d31c949329",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},t("div",{key:"282c637320cfeb0b4a58579acaf5ad7124700654",class:s("legend-item",{"legend-item-symbol":e})},t("div",{key:"290b0c6a3b11d0c47ca7d226c4847743edd901a7",hidden:!e},t("slot",{key:"8dec6a89a72f546b34d1a2e47ad34e65ed50047e",name:"symbol"})),t("div",{key:"5161253e1df39357fc9dd68f8cf8e87167034d29"},t("slot",{key:"98139f7cc6b6884d1529f996e4679e7278e4f0df"})),this.disabled&&this.disabledMessage&&t("dso-toggletip",{key:"6673f0115a44d5d15b34f870aebf8fa4014d8785",position:"bottom"},this.disabledMessage),t("div",{key:"22ed1d4da22b0961e920eb5d38928d27d9e64eaa",class:"legend-item-right-content"},n&&!this.disabled&&t("button",{key:"e3e78dfb48a68378673fbaa23245cff7b8bbe589",id:"edit-button",type:"button",onClick:()=>this.showBody=!this.showBody,class:{active:this.showBody}},t("span",{key:"fe61e8c16730bca25956415f6fc9d557b6448637",class:"sr-only"},"Legenda item aanpassen"),t("dso-icon",{key:"8073e744e0c9810dcd42e8132b074a583b85c54f",icon:"more"})),t("dso-slide-toggle",{key:"5e752a57ae9c8be4561fa49b722b9307121674c0",accessibleLabel:"Maak actief",checked:this.active,disabled:this.disabled,onDsoActiveChange:e=>this.dsoActiveChange.emit({current:Boolean(this.active),next:!this.active,originalEvent:e})}))),t("div",{key:"5d7189d66641b58de83e9068037134b52ec28e8f",hidden:!n\|\|this.disabled\|\|!this.showBody,class:"body"},t("slot",{key:"ad3a9f9d77eaf06b4e9dd6fca086bb668071ba71",name:"body"})))}get host(){return o(this)}};r.style=a;export{r as dso_legend_item};
2	+ //# sourceMappingURL=p-7e09098c.entry.js.map

package/dist/dso-toolkit/p-7e09098c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["legendItemCss","LegendItem","constructor","hostRef","this","disabled","showBody","symbolSlottedElement","host","querySelector","bodySlottedElement","render","hasSymbol","hasBody","h","Host","key","onMouseEnter","dsoMouseEnter","emit","onMouseLeave","dsoMouseLeave","class","clsx","hidden","name","disabledMessage","position","id","type","onClick","active","icon","accessibleLabel","checked","onDsoActiveChange","e","dsoActiveChange","current","Boolean","next","originalEvent"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: units.$u1 * 0.5;\r\n padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol + .body {\r\n margin-block-start: units.$u1;\r\n }\r\n}\r\n\r\n.legend-item-right-content {\r\n margin-inline-start: auto;\r\n\r\n button {\r\n @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n\r\n &.active {\r\n color: colors.$bosgroen-140;\r\n }\r\n }\r\n\r\n dso-slide-toggle {\r\n align-self: center;\r\n margin-inline-start: 8px;\r\n padding-block-start: 0 !important;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n tag: \"dso-legend-item\",\r\n styleUrl: \"legend-item.scss\",\r\n shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoLegendItemElement;\r\n\r\n /**\r\n * To disable the Legend Item\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Message to be shown behind a toggletip when the Legend Item is disabled\r\n */\r\n @Prop()\r\n disabledMessage?: string;\r\n\r\n /**\r\n * Controls whether this Legend Item is active or not\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Emitted when user checks or unchecks the Slide Toggle.\r\n */\r\n @Event()\r\n dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n /**\r\n * Emitted when the mouse enters the Legend Item\r\n */\r\n @Event()\r\n dsoMouseEnter!: EventEmitter;\r\n\r\n /**\r\n * Emitted when the mouse leaves the Legend Item\r\n */\r\n @Event()\r\n dsoMouseLeave!: EventEmitter;\r\n\r\n @State()\r\n showBody = false;\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get bodySlottedElement() {\r\n return this.host.querySelector(\"[slot='body']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasBody = this.bodySlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n <div hidden={!hasSymbol}>\r\n <slot name=\"symbol\" />\r\n </div>\r\n <div>\r\n <slot />\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n\r\n <div class=\"legend-item-right-content\">\r\n {hasBody && !this.disabled && (\r\n <button\r\n id=\"edit-button\"\r\n type=\"button\"\r\n onClick={() => (this.showBody = !this.showBody)}\r\n class={{ active: this.showBody }}\r\n >\r\n <span class=\"sr-only\">Legenda item aanpassen</span>\r\n <dso-icon icon=\"more\" />\r\n </button>\r\n )}\r\n <dso-slide-toggle\r\n accessibleLabel=\"Maak actief\"\r\n checked={this.active}\r\n disabled={this.disabled}\r\n onDsoActiveChange={(e) =>\r\n this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n }\r\n />\r\n </div>\r\n </div>\r\n <div hidden={!hasBody || this.disabled || !this.showBody} class=\"body\">\r\n <slot name=\"body\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"oGAAA,MAAMA,EAAgB,spJ,MCeTC,EAAU,MALvB,WAAAC,CAAAC,G,qJAaEC,KAAQC,SAAG,MAiCXD,KAAQE,SAAG,KAuDZ,CArDC,wBAAIC,GACF,OAAOH,KAAKI,KAAKC,cAAc,kB,CAGjC,sBAAIC,GACF,OAAON,KAAKI,KAAKC,cAAc,gB,CAGjC,MAAAE,GACE,MAAMC,EAAYR,KAAKG,uBAAyB,KAChD,MAAMM,EAAUT,KAAKM,qBAAuB,KAE5C,OACEI,EAACC,EAAK,CAAAC,IAAA,2CAAAC,aAAc,IAAMb,KAAKc,cAAcC,OAAQC,aAAc,IAAMhB,KAAKiB,cAAcF,QAC1FL,EAAK,OAAAE,IAAA,2CAAAM,MAAOC,EAAK,cAAe,CAAE,qBAAsBX,KACtDE,EAAK,OAAAE,IAAA,2CAAAQ,QAASZ,GACZE,EAAA,QAAAE,IAAA,2CAAMS,KAAK,YAEbX,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8CAEDZ,KAAKC,UAAYD,KAAKsB,iBACrBZ,EAAe,iBAAAE,IAAA,2CAAAW,SAAS,UAAUvB,KAAKsB,iBAGzCZ,EAAK,OAAAE,IAAA,2CAAAM,MAAM,6BACRT,IAAYT,KAAKC,UAChBS,EACE,UAAAE,IAAA,2CAAAY,GAAG,cACHC,KAAK,SACLC,QAAS,IAAO1B,KAAKE,UAAYF,KAAKE,SACtCgB,MAAO,CAAES,OAAQ3B,KAAKE,WAEtBQ,EAAM,QAAAE,IAAA,2CAAAM,MAAM,WAAuC,0BACnDR,EAAA,YAAAE,IAAA,2CAAUgB,KAAK,UAGnBlB,EACE,oBAAAE,IAAA,2CAAAiB,gBAAgB,cAChBC,QAAS9B,KAAK2B,OACd1B,SAAUD,KAAKC,SACf8B,kBAAoBC,GAClBhC,KAAKiC,gBAAgBlB,KAAK,CAAEmB,QAASC,QAAQnC,KAAK2B,QAASS,MAAOpC,KAAK2B,OAAQU,cAAeL,QAKtGtB,EAAA,OAAAE,IAAA,2CAAKQ,QAASX,GAAWT,KAAKC,WAAaD,KAAKE,SAAUgB,MAAM,QAC9DR,EAAA,QAAAE,IAAA,2CAAMS,KAAK,U","ignoreList":[]}

package/dist/dso-toolkit/p-858970da.entry.js ADDED Viewed

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

package/dist/dso-toolkit/{p-90ead8a5.entry.js.map → p-858970da.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["paginationCss","Pagination","constructor","hostRef","this","sizePositionsMap","small","medium","large","formatHref","page","sizeChangeHandler","event","availablePositions","getAvailablePositions","detail","clickHandler","e","dsoSelectPage","emit","originalEvent","isModifiedEvent","componentDidLoad","_a","responsiveElement","getSize","then","size","render","totalPages","currentPage","undefined","h","ref","element","pages","getPages","class","href","onClick","icon","map","Fragment","showEllipsisBeforeLast","key","showEllipsisAfterFirst","showEllipsisLastWithoutTotal","sizePositions","Array","from","length","_value","i","getPageRange","getPageRangeWithoutTotalPages","range","positionRange","Math","floor","push","pagesBeforeOrAfter","min","max","filter","v","a","indexOf","Error","isFirstPage","hasManyPages","isPageTwoMissing","includes","hasEnoughPositions","isLastPage","isSecondLastPageMissing","at","start","result","_","unshift"],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\r\n}\r\n\r\n.sr-only.sr-only {\r\n // class daisy-chained to prevent overwrites by other more specific styling set on this element.\r\n @include utilities.sr-only();\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Prop,\r\n State,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\n\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-pagination\",\r\n styleUrl: \"pagination.scss\",\r\n shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n small: 7,\r\n medium: 9,\r\n large: 11,\r\n };\r\n\r\n private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n @Element()\r\n host!: HTMLDsoPaginationElement;\r\n\r\n @State()\r\n availablePositions?: number;\r\n /*\r\n Total pages\r\n /\r\n @Prop()\r\n totalPages?: number;\r\n\r\n /\r\n Current page\r\n /\r\n @Prop()\r\n currentPage?: number;\r\n\r\n /\r\n This function is called to format the href\r\n /\r\n @Prop()\r\n formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n /\r\n Emitted on page select\r\n /\r\n @Event()\r\n dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n /\r\n Listens to the dsoSizeChange event on Responsive Element\r\n */\r\n @Listen(\"dsoSizeChange\")\r\n sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n }\r\n\r\n private clickHandler(e: MouseEvent, page: number) {\r\n this.dsoSelectPage.emit({\r\n originalEvent: e,\r\n page,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.responsiveElement\r\n ?.getSize()\r\n .then(\r\n (size: ResponsiveElementSize) =>\r\n (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n );\r\n }\r\n\r\n render() {\r\n if (!this.totalPages && !this.currentPage) {\r\n return null;\r\n }\r\n\r\n if (this.availablePositions === undefined) {\r\n return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n }\r\n\r\n const availablePositions = this.availablePositions;\r\n\r\n const currentPage = this.currentPage ?? 0;\r\n\r\n const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n return (\r\n <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n <nav class=\"pagination\" aria-label=\"Paginering\">\r\n <ul>\r\n <li class={currentPage <= 1 \|\| !currentPage ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(currentPage - 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, currentPage - 1)}\r\n >\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </a>\r\n </li>\r\n {pages.map((page) => (\r\n <Fragment>\r\n {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n {currentPage === page ? (\r\n <span aria-current=\"page\">{page}</span>\r\n ) : (\r\n <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n {page}\r\n </a>\r\n )}\r\n {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n </li>\r\n\r\n {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n {this.showEllipsisLastWithoutTotal(pages, page, this.totalPages) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n </Fragment>\r\n ))}\r\n <li\r\n class={\r\n (this.totalPages && currentPage >= this.totalPages) \|\| !currentPage ? \"dso-page-hidden\" : undefined\r\n }\r\n >\r\n <a\r\n href={this.formatHref(currentPage + 1)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) => currentPage && this.clickHandler(e, currentPage + 1)}\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private getAvailablePositions(sizePositions: number) {\r\n if (sizePositions % 2 === 0) {\r\n // Even aantal posities zorgt voor een scheve pagination\r\n return sizePositions - 1;\r\n }\r\n if (sizePositions <= 3) {\r\n // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n return 3;\r\n }\r\n\r\n return sizePositions;\r\n }\r\n\r\n private getPages(currentPage: number, availablePositions: number, totalPages?: number): number[] {\r\n if (totalPages) {\r\n if (totalPages + 2 <= availablePositions) {\r\n // + 2 voor de vorige en volgende knop\r\n return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n }\r\n\r\n if (availablePositions === 3) {\r\n return [currentPage];\r\n }\r\n\r\n if (availablePositions === 5) {\r\n return [1, currentPage, totalPages];\r\n }\r\n\r\n return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n }\r\n return this.getPageRangeWithoutTotalPages(currentPage, availablePositions);\r\n }\r\n\r\n private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n const range: number[] = [];\r\n\r\n const positionRange = Math.floor(availablePositions / 2);\r\n\r\n if (currentPage <= positionRange) {\r\n for (let i = 2; i <= availablePositions - 4; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n if (positionRange === 1) {\r\n if (currentPage > totalPages - 2) {\r\n range.push(totalPages - 2);\r\n }\r\n\r\n range.push(currentPage);\r\n\r\n if (currentPage < 3) {\r\n range.push(3);\r\n }\r\n }\r\n\r\n if (positionRange > 1) {\r\n const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n for (\r\n let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n i++\r\n ) {\r\n if (i > 2 && i < totalPages - 1) {\r\n range.push(i);\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (currentPage > totalPages - positionRange) {\r\n for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n return range.filter((v, i, a) => a.indexOf(v) === i);\r\n }\r\n\r\n private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n const isFirstPage = pages.indexOf(page) === 0;\r\n const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n const isPageTwoMissing = !pages.includes(2);\r\n const hasEnoughPositions = availablePositions >= 7;\r\n\r\n return isFirstPage && hasManyPages && isPageTwoMissing && hasEnoughPositions;\r\n }\r\n\r\n private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n const isLastPage = pages.indexOf(page) === pages.length - 1;\r\n const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n const isSecondLastPageMissing = !pages.includes(totalPages - 1);\r\n const hasEnoughPositions = availablePositions >= 7;\r\n\r\n return isLastPage && hasManyPages && isSecondLastPageMissing && hasEnoughPositions;\r\n }\r\n\r\n private showEllipsisLastWithoutTotal(pages: number[], page: number, totalPages?: number) {\r\n return totalPages ? false : pages.at(-1) === page;\r\n }\r\n\r\n private getPageRangeWithoutTotalPages(currentPage: number, availablePositions: number): number[] {\r\n const positionRange = availablePositions >= 9 ? 2 : 0;\r\n const start = Math.max(1, currentPage - positionRange);\r\n\r\n // Creates an array of numbers from `start` to `currentPage + 1`\r\n const result = Array.from({ length: currentPage - start + 2 }, (_, i) => start + i);\r\n\r\n // Adds 1 to the start of the result array if `start` is >= 2\r\n if (start >= 2) result.unshift(1);\r\n\r\n return result;\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["paginationCss","Pagination","constructor","hostRef","this","sizePositionsMap","small","medium","large","formatHref","page","sizeChangeHandler","event","availablePositions","getAvailablePositions","detail","clickHandler","e","dsoSelectPage","emit","originalEvent","isModifiedEvent","componentDidLoad","_a","responsiveElement","getSize","then","size","render","totalPages","currentPage","undefined","h","ref","element","pages","getPages","class","href","onClick","icon","map","Fragment","showEllipsisBeforeLast","key","showEllipsisAfterFirst","showEllipsisLastWithoutTotal","sizePositions","Array","from","length","_value","i","getPageRange","getPageRangeWithoutTotalPages","range","positionRange","Math","floor","push","pagesBeforeOrAfter","min","max","filter","v","a","indexOf","Error","isFirstPage","hasManyPages","isPageTwoMissing","includes","hasEnoughPositions","isLastPage","isSecondLastPageMissing","at","start","result","_","unshift"],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\r\n}\r\n\r\n.sr-only.sr-only {\r\n // class daisy-chained to prevent overwrites by other more specific styling set on this element.\r\n @include utilities.sr-only();\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Listen,\r\n Prop,\r\n State,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\n\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-pagination\",\r\n styleUrl: \"pagination.scss\",\r\n shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n small: 7,\r\n medium: 9,\r\n large: 11,\r\n };\r\n\r\n private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n @Element()\r\n host!: HTMLDsoPaginationElement;\r\n\r\n @State()\r\n availablePositions?: number;\r\n /*\r\n Total pages\r\n /\r\n @Prop()\r\n totalPages?: number;\r\n\r\n /\r\n Current page\r\n /\r\n @Prop()\r\n currentPage?: number;\r\n\r\n /\r\n This function is called to format the href\r\n /\r\n @Prop()\r\n formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n /\r\n Emitted on page select\r\n /\r\n @Event()\r\n dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n /\r\n Listens to the dsoSizeChange event on Responsive Element\r\n */\r\n @Listen(\"dsoSizeChange\")\r\n sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n }\r\n\r\n private clickHandler(e: MouseEvent, page: number) {\r\n this.dsoSelectPage.emit({\r\n originalEvent: e,\r\n page,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.responsiveElement\r\n ?.getSize()\r\n .then(\r\n (size: ResponsiveElementSize) =>\r\n (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n );\r\n }\r\n\r\n render() {\r\n if (!this.totalPages && !this.currentPage) {\r\n return null;\r\n }\r\n\r\n if (this.availablePositions === undefined) {\r\n return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n }\r\n\r\n const availablePositions = this.availablePositions;\r\n\r\n const currentPage = this.currentPage ?? 0;\r\n\r\n const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n return (\r\n <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n <nav class=\"pagination\" aria-label=\"Paginering\">\r\n <ul>\r\n <li class={currentPage <= 1 \|\| !currentPage ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(currentPage - 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, currentPage - 1)}\r\n >\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </a>\r\n </li>\r\n {pages.map((page) => (\r\n <Fragment>\r\n {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n {currentPage === page ? (\r\n <span aria-current=\"page\">{page}</span>\r\n ) : (\r\n <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n {page}\r\n </a>\r\n )}\r\n {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n </li>\r\n\r\n {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n {this.showEllipsisLastWithoutTotal(pages, page, this.totalPages) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n </Fragment>\r\n ))}\r\n <li\r\n class={\r\n (this.totalPages && currentPage >= this.totalPages) \|\| !currentPage ? \"dso-page-hidden\" : undefined\r\n }\r\n >\r\n <a\r\n href={this.formatHref(currentPage + 1)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) => currentPage && this.clickHandler(e, currentPage + 1)}\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private getAvailablePositions(sizePositions: number) {\r\n if (sizePositions % 2 === 0) {\r\n // Even aantal posities zorgt voor een scheve pagination\r\n return sizePositions - 1;\r\n }\r\n if (sizePositions <= 3) {\r\n // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n return 3;\r\n }\r\n\r\n return sizePositions;\r\n }\r\n\r\n private getPages(currentPage: number, availablePositions: number, totalPages?: number): number[] {\r\n if (totalPages) {\r\n if (totalPages + 2 <= availablePositions) {\r\n // + 2 voor de vorige en volgende knop\r\n return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n }\r\n\r\n if (availablePositions === 3) {\r\n return [currentPage];\r\n }\r\n\r\n if (availablePositions === 5) {\r\n return [1, currentPage, totalPages];\r\n }\r\n\r\n return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n }\r\n return this.getPageRangeWithoutTotalPages(currentPage, availablePositions);\r\n }\r\n\r\n private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n const range: number[] = [];\r\n\r\n const positionRange = Math.floor(availablePositions / 2);\r\n\r\n if (currentPage <= positionRange) {\r\n for (let i = 2; i <= availablePositions - 4; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n if (positionRange === 1) {\r\n if (currentPage > totalPages - 2) {\r\n range.push(totalPages - 2);\r\n }\r\n\r\n range.push(currentPage);\r\n\r\n if (currentPage < 3) {\r\n range.push(3);\r\n }\r\n }\r\n\r\n if (positionRange > 1) {\r\n const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n for (\r\n let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n i++\r\n ) {\r\n if (i > 2 && i < totalPages - 1) {\r\n range.push(i);\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (currentPage > totalPages - positionRange) {\r\n for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n return range.filter((v, i, a) => a.indexOf(v) === i);\r\n }\r\n\r\n private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n const isFirstPage = pages.indexOf(page) === 0;\r\n const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n const isPageTwoMissing = !pages.includes(2);\r\n const hasEnoughPositions = availablePositions >= 7;\r\n\r\n return isFirstPage && hasManyPages && isPageTwoMissing && hasEnoughPositions;\r\n }\r\n\r\n private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n const isLastPage = pages.indexOf(page) === pages.length - 1;\r\n const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n const isSecondLastPageMissing = !pages.includes(totalPages - 1);\r\n const hasEnoughPositions = availablePositions >= 7;\r\n\r\n return isLastPage && hasManyPages && isSecondLastPageMissing && hasEnoughPositions;\r\n }\r\n\r\n private showEllipsisLastWithoutTotal(pages: number[], page: number, totalPages?: number) {\r\n return totalPages ? false : pages.at(-1) === page;\r\n }\r\n\r\n private getPageRangeWithoutTotalPages(currentPage: number, availablePositions: number): number[] {\r\n const positionRange = availablePositions >= 9 ? 2 : 0;\r\n const start = Math.max(1, currentPage - positionRange);\r\n\r\n // Creates an array of numbers from `start` to `currentPage + 1`\r\n const result = Array.from({ length: currentPage - start + 2 }, (_, i) => start + i);\r\n\r\n // Adds 1 to the start of the result array if `start` is >= 2\r\n if (start >= 2) result.unshift(1);\r\n\r\n return result;\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-8ec31264.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as n,h as e,H as o,g as r}from"./p-C-b4jsbt.js";const i=["top","right","bottom","left"];const s=Math.min;const c=Math.max;const a=Math.round;const l=Math.floor;const f=t=>({x:t,y:t});const u={left:"right",right:"left",bottom:"top",top:"bottom"};const d={start:"end",end:"start"};function p(t,n,e){return c(t,s(n,e))}function b(t,n){return typeof t==="function"?t(n):t}function m(t){return t.split("-")[0]}function h(t){return t.split("-")[1]}function y(t){return t==="x"?"y":"x"}function g(t){return t==="y"?"height":"width"}function x(t){return["top","bottom"].includes(m(t))?"y":"x"}function w(t){return y(x(t))}function v(t,n,e){if(e===void 0){e=false}const o=h(t);const r=w(t);const i=g(r);let s=r==="x"?o===(e?"end":"start")?"right":"left":o==="start"?"bottom":"top";if(n.reference[i]>n.floating[i]){s=O(s)}return[s,O(s)]}function k(t){const n=O(t);return[_(t),n,_(n)]}function _(t){return t.replace(/start\|end/g,(t=>d[t]))}function A(t,n,e){const o=["left","right"];const r=["right","left"];const i=["top","bottom"];const s=["bottom","top"];switch(t){case"top":case"bottom":if(e)return n?r:o;return n?o:r;case"left":case"right":return n?i:s;default:return[]}}function z(t,n,e,o){const r=h(t);let i=A(m(t),e==="start",o);if(r){i=i.map((t=>t+"-"+r));if(n){i=i.concat(i.map(_))}}return i}function O(t){return t.replace(/left\|right\|bottom\|top/g,(t=>u[t]))}function R(t){return{top:0,right:0,bottom:0,left:0,...t}}function S(t){return typeof t!=="number"?R(t):{top:t,right:t,bottom:t,left:t}}function T(t){const{x:n,y:e,width:o,height:r}=t;return{width:o,height:r,top:e,left:n,right:n+o,bottom:e+r,x:n,y:e}}function D(t,n,e){let{reference:o,floating:r}=t;const i=x(n);const s=w(n);const c=g(s);const a=m(n);const l=i==="y";const f=o.x+o.width/2-r.width/2;const u=o.y+o.height/2-r.height/2;const d=o[c]/2-r[c]/2;let p;switch(a){case"top":p={x:f,y:o.y-r.height};break;case"bottom":p={x:f,y:o.y+o.height};break;case"right":p={x:o.x+o.width,y:u};break;case"left":p={x:o.x-r.width,y:u};break;default:p={x:o.x,y:o.y}}switch(h(n)){case"start":p[s]-=d(e&&l?-1:1);break;case"end":p[s]+=d(e&&l?-1:1);break}return p}const F=async(t,n,e)=>{const{placement:o="bottom",strategy:r="absolute",middleware:i=[],platform:s}=e;const c=i.filter(Boolean);const a=await(s.isRTL==null?void 0:s.isRTL(n));let l=await s.getElementRects({reference:t,floating:n,strategy:r});let{x:f,y:u}=D(l,o,a);let d=o;let p={};let b=0;for(let e=0;e<c.length;e++){const{name:i,fn:m}=c[e];const{x:h,y,data:g,reset:x}=await m({x:f,y:u,initialPlacement:o,placement:d,strategy:r,middlewareData:p,rects:l,platform:s,elements:{reference:t,floating:n}});f=h!=null?h:f;u=y!=null?y:u;p={...p,[i]:{...p[i],...g}};if(x&&b<=50){b++;if(typeof x==="object"){if(x.placement){d=x.placement}if(x.rects){l=x.rects===true?await s.getElementRects({reference:t,floating:n,strategy:r}):x.rects}({x:f,y:u}=D(l,d,a))}e=-1}}return{x:f,y:u,placement:d,strategy:r,middlewareData:p}};async function C(t,n){var e;if(n===void 0){n={}}const{x:o,y:r,platform:i,rects:s,elements:c,strategy:a}=t;const{boundary:l="clippingAncestors",rootBoundary:f="viewport",elementContext:u="floating",altBoundary:d=false,padding:p=0}=b(n,t);const m=S(p);const h=u==="floating"?"reference":"floating";const y=c[d?h:u];const g=T(await i.getClippingRect({element:((e=await(i.isElement==null?void 0:i.isElement(y)))!=null?e:true)?y:y.contextElement\|\|await(i.getDocumentElement==null?void 0:i.getDocumentElement(c.floating)),boundary:l,rootBoundary:f,strategy:a}));const x=u==="floating"?{x:o,y:r,width:s.floating.width,height:s.floating.height}:s.reference;const w=await(i.getOffsetParent==null?void 0:i.getOffsetParent(c.floating));const v=await(i.isElement==null?void 0:i.isElement(w))?await(i.getScale==null?void 0:i.getScale(w))\|\|{x:1,y:1}:{x:1,y:1};const k=T(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:x,offsetParent:w,strategy:a}):x);return{top:(g.top-k.top+m.top)/v.y,bottom:(k.bottom-g.bottom+m.bottom)/v.y,left:(g.left-k.left+m.left)/v.x,right:(k.right-g.right+m.right)/v.x}}const $=t=>({name:"arrow",options:t,async fn(n){const{x:e,y:o,placement:r,rects:i,platform:c,elements:a,middlewareData:l}=n;const{element:f,padding:u=0}=b(t,n)\|\|{};if(f==null){return{}}const d=S(u);const m={x:e,y:o};const y=w(r);const x=g(y);const v=await c.getDimensions(f);const k=y==="y";const _=k?"top":"left";const A=k?"bottom":"right";const z=k?"clientHeight":"clientWidth";const O=i.reference[x]+i.reference[y]-m[y]-i.floating[x];const R=m[y]-i.reference[y];const T=await(c.getOffsetParent==null?void 0:c.getOffsetParent(f));let D=T?T[z]:0;if(!D\|\|!await(c.isElement==null?void 0:c.isElement(T))){D=a.floating[z]\|\|i.floating[x]}const F=O/2-R/2;const C=D/2-v[x]/2-1;const $=s(d[_],C);const M=s(d[A],C);const E=$;const H=D-v[x]-M;const P=D/2-v[x]/2+F;const j=p(E,P,H);const L=!l.arrow&&h(r)!=null&&P!==j&&i.reference[x]/2-(P<E?$:M)-v[x]/2<0;const B=L?P<E?P-E:P-H:0;return{[y]:m[y]+B,data:{[y]:j,centerOffset:P-j-B,...L&&{alignmentOffset:B}},reset:L}}});const M=function(t){if(t===void 0){t={}}return{name:"flip",options:t,async fn(n){var e,o;const{placement:r,middlewareData:i,rects:s,initialPlacement:c,platform:a,elements:l}=n;const{mainAxis:f=true,crossAxis:u=true,fallbackPlacements:d,fallbackStrategy:p="bestFit",fallbackAxisSideDirection:h="none",flipAlignment:y=true,...g}=b(t,n);if((e=i.arrow)!=null&&e.alignmentOffset){return{}}const w=m(r);const _=x(c);const A=m(c)===c;const R=await(a.isRTL==null?void 0:a.isRTL(l.floating));const S=d\|\|(A\|\|!y?[O(c)]:k(c));const T=h!=="none";if(!d&&T){S.push(...z(c,y,h,R))}const D=[c,...S];const F=await C(n,g);const $=[];let M=((o=i.flip)==null?void 0:o.overflows)\|\|[];if(f){$.push(F[w])}if(u){const t=v(r,s,R);$.push(F[t[0]],F[t[1]])}M=[...M,{placement:r,overflows:$}];if(!$.every((t=>t<=0))){var E,H;const t=(((E=i.flip)==null?void 0:E.index)\|\|0)+1;const n=D[t];if(n){var P;const e=u==="alignment"?_!==x(n):false;const o=((P=M[0])==null?void 0:P.overflows[0])>0;if(!e\|\|o){return{data:{index:t,overflows:M},reset:{placement:n}}}}let e=(H=M.filter((t=>t.overflows[0]<=0)).sort(((t,n)=>t.overflows[1]-n.overflows[1]))[0])==null?void 0:H.placement;if(!e){switch(p){case"bestFit":{var j;const t=(j=M.filter((t=>{if(T){const n=x(t.placement);return n===_\|\|n==="y"}return true})).map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,n)=>t+n),0)])).sort(((t,n)=>t[1]-n[1]))[0])==null?void 0:j[0];if(t){e=t}break}case"initialPlacement":e=c;break}}if(r!==e){return{reset:{placement:e}}}}return{}}}};function E(t,n){return{top:t.top-n.height,right:t.right-n.width,bottom:t.bottom-n.height,left:t.left-n.width}}function H(t){return i.some((n=>t[n]>=0))}const P=function(t){if(t===void 0){t={}}return{name:"hide",options:t,async fn(n){const{rects:e}=n;const{strategy:o="referenceHidden",...r}=b(t,n);switch(o){case"referenceHidden":{const t=await C(n,{...r,elementContext:"reference"});const o=E(t,e.reference);return{data:{referenceHiddenOffsets:o,referenceHidden:H(o)}}}case"escaped":{const t=await C(n,{...r,altBoundary:true});const o=E(t,e.floating);return{data:{escapedOffsets:o,escaped:H(o)}}}default:{return{}}}}}};async function j(t,n){const{placement:e,platform:o,elements:r}=t;const i=await(o.isRTL==null?void 0:o.isRTL(r.floating));const s=m(e);const c=h(e);const a=x(e)==="y";const l=["left","top"].includes(s)?-1:1;const f=i&&a?-1:1;const u=b(n,t);let{mainAxis:d,crossAxis:p,alignmentAxis:y}=typeof u==="number"?{mainAxis:u,crossAxis:0,alignmentAxis:null}:{mainAxis:u.mainAxis\|\|0,crossAxis:u.crossAxis\|\|0,alignmentAxis:u.alignmentAxis};if(c&&typeof y==="number"){p=c==="end"?y-1:y}return a?{x:pf,y:dl}:{x:dl,y:pf}}const L=function(t){if(t===void 0){t=0}return{name:"offset",options:t,async fn(n){var e,o;const{x:r,y:i,placement:s,middlewareData:c}=n;const a=await j(n,t);if(s===((e=c.offset)==null?void 0:e.placement)&&(o=c.arrow)!=null&&o.alignmentOffset){return{}}return{x:r+a.x,y:i+a.y,data:{...a,placement:s}}}}};const B=function(t){if(t===void 0){t={}}return{name:"shift",options:t,async fn(n){const{x:e,y:o,placement:r}=n;const{mainAxis:i=true,crossAxis:s=false,limiter:c={fn:t=>{let{x:n,y:e}=t;return{x:n,y:e}}},...a}=b(t,n);const l={x:e,y:o};const f=await C(n,a);const u=x(m(r));const d=y(u);let h=l[d];let g=l[u];if(i){const t=d==="y"?"top":"left";const n=d==="y"?"bottom":"right";const e=h+f[t];const o=h-f[n];h=p(e,h,o)}if(s){const t=u==="y"?"top":"left";const n=u==="y"?"bottom":"right";const e=g+f[t];const o=g-f[n];g=p(e,g,o)}const w=c.fn({...n,[d]:h,[u]:g});return{...w,data:{x:w.x-e,y:w.y-o,enabled:{[d]:i,[u]:s}}}}}};function I(){return typeof window!=="undefined"}function N(t){if(V(t)){return(t.nodeName\|\|"").toLowerCase()}return"#document"}function U(t){var n;return(t==null\|\|(n=t.ownerDocument)==null?void 0:n.defaultView)\|\|window}function q(t){var n;return(n=(V(t)?t.ownerDocument:t.document)\|\|window.document)==null?void 0:n.documentElement}function V(t){if(!I()){return false}return t instanceof Node\|\|t instanceof U(t).Node}function W(t){if(!I()){return false}return t instanceof Element\|\|t instanceof U(t).Element}function X(t){if(!I()){return false}return t instanceof HTMLElement\|\|t instanceof U(t).HTMLElement}function Y(t){if(!I()\|\|typeof ShadowRoot==="undefined"){return false}return t instanceof ShadowRoot\|\|t instanceof U(t).ShadowRoot}function G(t){const{overflow:n,overflowX:e,overflowY:o,display:r}=et(t);return/auto\|scroll\|overlay\|hidden\|clip/.test(n+o+e)&&!["inline","contents"].includes(r)}function J(t){return["table","td","th"].includes(N(t))}function K(t){return[":popover-open",":modal"].some((n=>{try{return t.matches(n)}catch(t){return false}}))}function Q(t){const n=tt();const e=W(t)?et(t):t;return["transform","translate","scale","rotate","perspective"].some((t=>e[t]?e[t]!=="none":false))\|\|(e.containerType?e.containerType!=="normal":false)\|\|!n&&(e.backdropFilter?e.backdropFilter!=="none":false)\|\|!n&&(e.filter?e.filter!=="none":false)\|\|["transform","translate","scale","rotate","perspective","filter"].some((t=>(e.willChange\|\|"").includes(t)))\|\|["paint","layout","strict","content"].some((t=>(e.contain\|\|"").includes(t)))}function Z(t){let n=rt(t);while(X(n)&&!nt(n)){if(Q(n)){return n}else if(K(n)){return null}n=rt(n)}return null}function tt(){if(typeof CSS==="undefined"\|\|!CSS.supports)return false;return CSS.supports("-webkit-backdrop-filter","none")}function nt(t){return["html","body","#document"].includes(N(t))}function et(t){return U(t).getComputedStyle(t)}function ot(t){if(W(t)){return{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}return{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function rt(t){if(N(t)==="html"){return t}const n=t.assignedSlot\|\|t.parentNode\|\|Y(t)&&t.host\|\|q(t);return Y(n)?n.host:n}function it(t){const n=rt(t);if(nt(n)){return t.ownerDocument?t.ownerDocument.body:t.body}if(X(n)&&G(n)){return n}return it(n)}function st(t,n,e){var o;if(n===void 0){n=[]}if(e===void 0){e=true}const r=it(t);const i=r===((o=t.ownerDocument)==null?void 0:o.body);const s=U(r);if(i){const t=ct(s);return n.concat(s,s.visualViewport\|\|[],G(r)?r:[],t&&e?st(t):[])}return n.concat(r,st(r,[],e))}function ct(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function at(t){const n=et(t);let e=parseFloat(n.width)\|\|0;let o=parseFloat(n.height)\|\|0;const r=X(t);const i=r?t.offsetWidth:e;const s=r?t.offsetHeight:o;const c=a(e)!==i\|\|a(o)!==s;if(c){e=i;o=s}return{width:e,height:o,$:c}}function lt(t){return!W(t)?t.contextElement:t}function ft(t){const n=lt(t);if(!X(n)){return f(1)}const e=n.getBoundingClientRect();const{width:o,height:r,$:i}=at(n);let s=(i?a(e.width):e.width)/o;let c=(i?a(e.height):e.height)/r;if(!s\|\|!Number.isFinite(s)){s=1}if(!c\|\|!Number.isFinite(c)){c=1}return{x:s,y:c}}const ut=f(0);function dt(t){const n=U(t);if(!tt()\|\|!n.visualViewport){return ut}return{x:n.visualViewport.offsetLeft,y:n.visualViewport.offsetTop}}function pt(t,n,e){if(n===void 0){n=false}if(!e\|\|n&&e!==U(t)){return false}return n}function bt(t,n,e,o){if(n===void 0){n=false}if(e===void 0){e=false}const r=t.getBoundingClientRect();const i=lt(t);let s=f(1);if(n){if(o){if(W(o)){s=ft(o)}}else{s=ft(t)}}const c=pt(i,e,o)?dt(i):f(0);let a=(r.left+c.x)/s.x;let l=(r.top+c.y)/s.y;let u=r.width/s.x;let d=r.height/s.y;if(i){const t=U(i);const n=o&&W(o)?U(o):o;let e=t;let r=ct(e);while(r&&o&&n!==e){const t=ft(r);const n=r.getBoundingClientRect();const o=et(r);const i=n.left+(r.clientLeft+parseFloat(o.paddingLeft))t.x;const s=n.top+(r.clientTop+parseFloat(o.paddingTop))t.y;a=t.x;l=t.y;u=t.x;d=t.y;a+=i;l+=s;e=U(r);r=ct(e)}}return T({width:u,height:d,x:a,y:l})}function mt(t,n){const e=ot(t).scrollLeft;if(!n){return bt(q(t)).left+e}return n.left+e}function ht(t,n,e){if(e===void 0){e=false}const o=t.getBoundingClientRect();const r=o.left+n.scrollLeft-(e?0:mt(t,o));const i=o.top+n.scrollTop;return{x:r,y:i}}function yt(t){let{elements:n,rect:e,offsetParent:o,strategy:r}=t;const i=r==="fixed";const s=q(o);const c=n?K(n.floating):false;if(o===s\|\|c&&i){return e}let a={scrollLeft:0,scrollTop:0};let l=f(1);const u=f(0);const d=X(o);if(d\|\|!d&&!i){if(N(o)!=="body"\|\|G(s)){a=ot(o)}if(X(o)){const t=bt(o);l=ft(o);u.x=t.x+o.clientLeft;u.y=t.y+o.clientTop}}const p=s&&!d&&!i?ht(s,a,true):f(0);return{width:e.widthl.x,height:e.heightl.y,x:e.xl.x-a.scrollLeftl.x+u.x+p.x,y:e.yl.y-a.scrollTopl.y+u.y+p.y}}function gt(t){return Array.from(t.getClientRects())}function xt(t){const n=q(t);const e=ot(t);const o=t.ownerDocument.body;const r=c(n.scrollWidth,n.clientWidth,o.scrollWidth,o.clientWidth);const i=c(n.scrollHeight,n.clientHeight,o.scrollHeight,o.clientHeight);let s=-e.scrollLeft+mt(t);const a=-e.scrollTop;if(et(o).direction==="rtl"){s+=c(n.clientWidth,o.clientWidth)-r}return{width:r,height:i,x:s,y:a}}function wt(t,n){const e=U(t);const o=q(t);const r=e.visualViewport;let i=o.clientWidth;let s=o.clientHeight;let c=0;let a=0;if(r){i=r.width;s=r.height;const t=tt();if(!t\|\|t&&n==="fixed"){c=r.offsetLeft;a=r.offsetTop}}return{width:i,height:s,x:c,y:a}}function vt(t,n){const e=bt(t,true,n==="fixed");const o=e.top+t.clientTop;const r=e.left+t.clientLeft;const i=X(t)?ft(t):f(1);const s=t.clientWidthi.x;const c=t.clientHeighti.y;const a=ri.x;const l=oi.y;return{width:s,height:c,x:a,y:l}}function kt(t,n,e){let o;if(n==="viewport"){o=wt(t,e)}else if(n==="document"){o=xt(q(t))}else if(W(n)){o=vt(n,e)}else{const e=dt(t);o={x:n.x-e.x,y:n.y-e.y,width:n.width,height:n.height}}return T(o)}function _t(t,n){const e=rt(t);if(e===n\|\|!W(e)\|\|nt(e)){return false}return et(e).position==="fixed"\|\|_t(e,n)}function At(t,n){const e=n.get(t);if(e){return e}let o=st(t,[],false).filter((t=>W(t)&&N(t)!=="body"));let r=null;const i=et(t).position==="fixed";let s=i?rt(t):t;while(W(s)&&!nt(s)){const n=et(s);const e=Q(s);if(!e&&n.position==="fixed"){r=null}const c=i?!e&&!r:!e&&n.position==="static"&&!!r&&["absolute","fixed"].includes(r.position)\|\|G(s)&&!e&&_t(t,s);if(c){o=o.filter((t=>t!==s))}else{r=n}s=rt(s)}n.set(t,o);return o}function zt(t){let{element:n,boundary:e,rootBoundary:o,strategy:r}=t;const i=e==="clippingAncestors"?K(n)?[]:At(n,this._c):[].concat(e);const a=[...i,o];const l=a[0];const f=a.reduce(((t,e)=>{const o=kt(n,e,r);t.top=c(o.top,t.top);t.right=s(o.right,t.right);t.bottom=s(o.bottom,t.bottom);t.left=c(o.left,t.left);return t}),kt(n,l,r));return{width:f.right-f.left,height:f.bottom-f.top,x:f.left,y:f.top}}function Ot(t){const{width:n,height:e}=at(t);return{width:n,height:e}}function Rt(t,n,e){const o=X(n);const r=q(n);const i=e==="fixed";const s=bt(t,true,i,n);let c={scrollLeft:0,scrollTop:0};const a=f(0);function l(){a.x=mt(r)}if(o\|\|!o&&!i){if(N(n)!=="body"\|\|G(r)){c=ot(n)}if(o){const t=bt(n,true,i,n);a.x=t.x+n.clientLeft;a.y=t.y+n.clientTop}else if(r){l()}}if(i&&!o&&r){l()}const u=r&&!o&&!i?ht(r,c):f(0);const d=s.left+c.scrollLeft-a.x-u.x;const p=s.top+c.scrollTop-a.y-u.y;return{x:d,y:p,width:s.width,height:s.height}}function St(t){return et(t).position==="static"}function Tt(t,n){if(!X(t)\|\|et(t).position==="fixed"){return null}if(n){return n(t)}let e=t.offsetParent;if(q(t)===e){e=e.ownerDocument.body}return e}function Dt(t,n){const e=U(t);if(K(t)){return e}if(!X(t)){let n=rt(t);while(n&&!nt(n)){if(W(n)&&!St(n)){return n}n=rt(n)}return e}let o=Tt(t,n);while(o&&J(o)&&St(o)){o=Tt(o,n)}if(o&&nt(o)&&St(o)&&!Q(o)){return e}return o\|\|Z(t)\|\|e}const Ft=async function(t){const n=this.getOffsetParent\|\|Dt;const e=this.getDimensions;const o=await e(t.floating);return{reference:Rt(t.reference,await n(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}};function Ct(t){return et(t).direction==="rtl"}const $t={convertOffsetParentRelativeRectToViewportRelativeRect:yt,getDocumentElement:q,getClippingRect:zt,getOffsetParent:Dt,getElementRects:Ft,getClientRects:gt,getDimensions:Ot,getScale:ft,isElement:W,isRTL:Ct};function Mt(t,n){return t.x===n.x&&t.y===n.y&&t.width===n.width&&t.height===n.height}function Et(t,n){let e=null;let o;const r=q(t);function i(){var t;clearTimeout(o);(t=e)==null\|\|t.disconnect();e=null}function a(f,u){if(f===void 0){f=false}if(u===void 0){u=1}i();const d=t.getBoundingClientRect();const{left:p,top:b,width:m,height:h}=d;if(!f){n()}if(!m\|\|!h){return}const y=l(b);const g=l(r.clientWidth-(p+m));const x=l(r.clientHeight-(b+h));const w=l(p);const v=-y+"px "+-g+"px "+-x+"px "+-w+"px";const k={rootMargin:v,threshold:c(0,s(1,u))\|\|1};let _=true;function A(n){const e=n[0].intersectionRatio;if(e!==u){if(!_){return a()}if(!e){o=setTimeout((()=>{a(false,1e-7)}),1e3)}else{a(false,e)}}if(e===1&&!Mt(d,t.getBoundingClientRect())){a()}_=false}try{e=new IntersectionObserver(A,{...k,root:r.ownerDocument})}catch(t){e=new IntersectionObserver(A,k)}e.observe(t)}a(true);return i}function Ht(t,n,e,o){if(o===void 0){o={}}const{ancestorScroll:r=true,ancestorResize:i=true,elementResize:s=typeof ResizeObserver==="function",layoutShift:c=typeof IntersectionObserver==="function",animationFrame:a=false}=o;const l=lt(t);const f=r\|\|i?[...l?st(l):[],...st(n)]:[];f.forEach((t=>{r&&t.addEventListener("scroll",e,{passive:true});i&&t.addEventListener("resize",e)}));const u=l&&c?Et(l,e):null;let d=-1;let p=null;if(s){p=new ResizeObserver((t=>{let[o]=t;if(o&&o.target===l&&p){p.unobserve(n);cancelAnimationFrame(d);d=requestAnimationFrame((()=>{var t;(t=p)==null\|\|t.observe(n)}))}e()}));if(l&&!a){p.observe(l)}p.observe(n)}let b;let m=a?bt(t):null;if(a){h()}function h(){const n=bt(t);if(m&&!Mt(m,n)){e()}m=n;b=requestAnimationFrame(h)}e();return()=>{var t;f.forEach((t=>{r&&t.removeEventListener("scroll",e);i&&t.removeEventListener("resize",e)}));u==null\|\|u();(t=p)==null\|\|t.disconnect();p=null;if(a){cancelAnimationFrame(b)}}}const Pt=L;const jt=B;const Lt=M;const Bt=P;const It=$;const Nt=(t,n,e)=>{const o=new Map;const r={platform:$t,...e};const i={...r.platform,_c:o};return F(t,n,{...r,platform:i})};const Ut='@charset "UTF-8";,::after,::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));transition:visibility 400ms, opacity 400ms}:host(:not([ready])){opacity:1;animation:400ms ease-in 1 normal both fadeInOpacity}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none;position:absolute;inset-block-start:0;inset-inline-end:0;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-close[disabled]{cursor:default}.dso-close::-moz-focus-inner{border:0;padding:0}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:calc(100vh - 10px);overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2}.onboarding-tip-inner{background-color:#2b5780;border-color:#2b5780;color:#fff}@media screen and (max-width: 991px){.onboarding-tip-inner{max-block-size:unset}}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}';const qt=class{constructor(e){t(this,e);this.dsoClose=n(this,"dsoClose",7);this.placement="right";this.ready=false}componentDidRender(){if(!this.host.matches(":popover-open")){this.host.showPopover()}if(!this.cleanUp&&this.referenceElement&&this.tipArrowRef instanceof HTMLElement){this.cleanUp=qt.positionTip(this.referenceElement,this.host,this.tipArrowRef,this.placement)}}disconnectedCallback(){var t;if(this.host.matches(":popover-open")){this.host.hidePopover()}(t=this.cleanUp)===null\|\|t===void 0?void 0:t.call(this);this.cleanUp=undefined}static positionTip(t,n,e,o){const r=5;return Ht(t,n,(()=>{const i=e.offsetWidth;const s=Math.sqrt(2i2)/2;const c=iMath.sqrt(2)*1.5;const a=document.body.clientWidth<992;const l=a?"top":`${o}-start`;Nt(t,n,{strategy:"fixed",middleware:[Pt({mainAxis:s,alignmentAxis:-c}),Lt({padding:r}),jt({padding:r}),It({padding:c,element:e}),Bt({padding:c+i+r})],placement:l}).then((({x:t,y:o,middlewareData:r,placement:s})=>{if(r.hide){const t=!a&&r.hide.referenceHidden;Object.assign(n.style,{visibility:t?"hidden":"visible",opacity:t?0:1})}Object.assign(n.style,{left:`${t}px`,top:`${o}px`});const c=s.split("-")[0];const l=c?{top:"bottom",right:"left",bottom:"top",left:"right"}[c]:"top";let f;switch(l){default:case"top":f=45;break;case"right":f=135;break;case"bottom":f=225;break;case"left":f=315;break}if(r.arrow&&l){const{x:t,y:n}=r.arrow;Object.assign(e.style,{right:"",bottom:"",left:t?`${t}px`:"",top:n?`${n}px`:"",[l]:`${-i/2}px`,transform:`rotate(${f}deg)`})}}))}))}render(){return e(o,{key:"b77a88b622c4449698f911155e0454278d28aae2",popover:"manual",ready:this.ready,onAnimationend:()=>this.ready=true},e("div",{key:"904f17d3e1cdf1c74a50e6089b1a5507c98c5570",class:"onboarding-tip",role:"tooltip"},e("div",{key:"60027d656f407b80f1bc62b1d8b394675d8a4c29",class:"onboarding-tip-inner"},e("div",{key:"b87378ba4b6e9ce851d0b565b052c53ea54c86e3",class:"onboarding-tip-content-wrapper"},this.headingSlottedElement!==null&&e("div",{key:"6c9326b09ce2e823c381554c97229909e4754829",class:"onboarding-tip-content-heading"},e("dso-icon",{key:"fb6e5837b5ac53c06df7ce28f03282b9fe584ce6",icon:"light-bulb"}),e("slot",{key:"4eee646004474e2b79eb17a5957b791926234ba9",name:"heading"})),e("button",{key:"3dd74214ac6e1c91d37ebd33064615868f10c566",type:"button",class:"dso-close",onClick:t=>this.dsoClose.emit({originalEvent:t})},e("dso-icon",{key:"b297506aa8e5a8796ab9452f4e4ebc63d753452a",icon:"times"}),e("span",{key:"50a9aface85ef552e4ac7493c7231f2d47b0a1da",class:"sr-only"},"Sluiten")),e("slot",{key:"826a6d61dbd82d06ade187d5e4e1f2f1b823bea8"}))),e("div",{key:"8914f8ec556c28b0df6f783c93e86a70234311b3",class:"onboarding-tip-arrow",ref:t=>this.tipArrowRef=t})))}get headingSlottedElement(){return this.host.querySelector("[slot='heading']")}get referenceElement(){const t=this.host.id;if(!t){console.warn("Unable to find reference. Onboarding Tip has no [id] attribute.");return}const n=this.host.getRootNode();if(!(n instanceof Document\|\|n instanceof ShadowRoot)){console.warn(`rootNode is not instance of Document or ShadowRoot`);return}const e=n.querySelector(`[aria-describedby="${t}`);if(!e){console.warn(`Unable to find reference element with aria-describedby ${t}`);return}return e}get host(){return r(this)}};qt.style=Ut;export{qt as dso_onboarding_tip};
2	+ //# sourceMappingURL=p-8ec31264.entry.js.map