@dso-toolkit/core 91.0.0 → 92.0.0

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

@@ -1 +0,0 @@
-import{r as e,d as t,h as s,a as o,g as a}from"./p-BIfnbekk.js";import{c as i}from"./p-ChV9xqsO.js";import{i as r}from"./p-ULwgxD7S.js";import{i as n}from"./p-Hgv-pDpy.js";const d={en:{"dso-legend":{closeLegend:"Close legend"}},nl:{"dso-legend":{closeLegend:"Sluit legenda"}}},l=class{constructor(s){e(this,s),this.dsoContentSwitch=t(this,"dsoContentSwitch",7),this.dsoClose=t(this,"dsoClose",7),this.tabItems=[],this.text=r((()=>this.host),d),this.keyUpHandler=e=>{if(e.target instanceof HTMLElement)switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}},this.clickHandler=e=>{const t=this.tabs.findIndex((t=>t===e.currentTarget)),s=this.tabItems[t];s&&!s.active&&this.dsoContentSwitch.emit({originalEvent:e,isModifiedEvent:n(e)})}}get tabs(){return Array.from(this.host.shadowRoot.querySelectorAll('[role="tab"]'))}get firstTab(){return this.tabs[0]}get lastTab(){return this.tabs[this.tabs.length-1]}moveFocusToTab(e){e?.focus()}moveFocusToPreviousTab(e){const t=this.tabs.findIndex((t=>t===e));this.moveFocusToTab(this.tabs[t-1]??this.lastTab)}moveFocusToNextTab(e){const t=this.tabs.findIndex((t=>t===e));this.moveFocusToTab(this.tabs[t+1]??this.firstTab)}render(){return s(o,{key:"812916657a261bed47b5388a6d84bfd5e6585cb1"},s("div",{key:"29d63344be6f0c336ec3e845014916a15ba6bbde",class:"topbar"},s("div",{key:"5874ac7dd039e5279d4f7ad3a754c9e6ecce3223",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},this.tabItems.map((e=>s("button",{class:i("tab",{active:e.active}),role:"tab","aria-selected":e.active?"true":"false",...e.active?{}:{tabIndex:-1},onClick:this.clickHandler},e.label)))),s("dso-icon-button",{key:"55209a7fc7e3601ba4c25d80bf5c1f0981b9bddc",icon:"cross",variant:"tertiary",label:this.text("closeLegend"),class:"close-button",onDsoClick:e=>this.dsoClose.emit({originalEvent:e.detail.originalEvent})})),s("dso-scrollable",{key:"aa0cd30073a0821eea95593f8ed1687c94892a62",class:"content"},s("div",{key:"fa9a12ddcbd2f71a970ca3889113356ac3ac1a33",role:"tabpanel",tabIndex:0},s("slot",{key:"31ce9fb96d1afa7527e1b92d4b6985e07107269f"}))))}get host(){return a(this)}};l.style="*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host ::slotted(dso-legend-group:last-child){margin-block-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dt-scrollable-container-border-end-start-radius:4px;--_dt-scrollable-container-border-end-end-radius:4px;--_dt-scrollable-container-padding-inline:16px;max-block-size:52vh;border-end-start-radius:4px;border-end-end-radius:4px}";export{l as dso_legend}

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

@@ -1 +0,0 @@
-import{r as o,d as e,f as r,h as i,F as t,a as n,g as a}from"./p-BIfnbekk.js";import{W as d}from"./p-CJ3poofC.js";import{i as s}from"./p-Hgv-pDpy.js";const c=class{constructor(r){o(this,r),this.dsoPlekinfoCardClick=e(this,"dsoPlekinfoCardClick",7),this.targetBlank=!1}connectedCallback(){this.mutationObserver=new MutationObserver((()=>r(this.host))),this.mutationObserver.observe(this.host,{attributes:!0,childList:!0})}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}clickEventHandler(o){if(o.target instanceof HTMLElement&&this.href)return this.dsoPlekinfoCardClick.emit({originalEvent:o,isModifiedEvent:s(o)})}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get metaSlottedElement(){return this.host.querySelector("[slot='meta']")}get interaction(){return this.host.querySelector("[slot='interaction']")}render(){const o=null!==this.symbolSlottedElement;return i(n,{key:"46ce81df38a0abe5509ee9507093100473e5384f","has-symbol":o},i(d,{key:"638cf0380b5bb037e02dcc561049a45240df9f7c",wijzigactie:this.wijzigactie,class:"dso-plekinfo-card-container"},i("div",{key:"ba6dfc3295480ced1f87c3d93369263b39677804",class:"dso-plekinfo-card-symbol",hidden:!o},i("slot",{key:"abdeb3c24f30c0c678d26e238e83fb8665b0bcc0",name:"symbol"})),i("div",{key:"83a82e657548c08b791e46a4b75ed19503e585d7",class:"dso-plekinfo-card-heading"},this.href?i("a",{href:this.href,target:this.targetBlank?"_blank":void 0,rel:this.targetBlank?"noopener noreferrer":void 0,class:"heading-anchor",onClick:o=>this.clickEventHandler(o)},i("span",{class:"icon-container"},this.targetBlank?i(t,null,i("dso-icon",{icon:"external-link"}),i("span",{class:"sr-only"},"(Opent andere website in nieuw tabblad)")):i("dso-icon",{icon:"chevron-right"}),i("slot",{name:"heading"}))):i("slot",{name:"heading"}),null!==this.metaSlottedElement&&i("slot",{key:"689c00a9182201b6b201a94f883e72a497d459f4",name:"meta"}),null!==this.interaction&&i("slot",{key:"f2326f690362c8c2100a22209f7e92a2db2b643c",name:"interaction"})),i("div",{key:"5c9715ea0fc38d1b7ec7d681b2c917cb0b0ace00",class:"dso-plekinfo-card-content"},i("slot",{key:"362a3db6b035957d61a1dbcb3dd8ed8e8e08c9da",name:"content"}))))}get host(){return a(this)}};c.style='ins{text-decoration:none;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}ins{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:#000}del{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}del{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:#000;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-plekinfo-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-plekinfo-card-container .dso-plekinfo-card-heading{display:flex;align-items:start;column-gap:8px}@media screen and (max-width: 480px){.dso-plekinfo-card-container .dso-plekinfo-card-heading{flex-wrap:wrap}}.dso-plekinfo-card-container .dso-plekinfo-card-heading+.dso-plekinfo-card-content{margin-block-start:8px}.dso-plekinfo-card-container .dso-plekinfo-card-symbol{grid-row:span 2;margin-inline-end:8px}.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}ins.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#d8e5c9}del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#e9cdd1}:host([active]:not([active=false])) .dso-plekinfo-card-container{background-color:#e5e5e5}:host([active]:not([active=false])) ins.dso-plekinfo-card-container{background-color:#ced9bf}:host([active]:not([active=false])) del.dso-plekinfo-card-container{background-color:#ddc3c6}:host([has-symbol]) .dso-plekinfo-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-heading,:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-content{grid-column:2/-1}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:8px !important}}::slotted([slot=heading]){display:inline !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interaction]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interaction]){flex-basis:100% !important;margin-block-start:16px !important}}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}';export{c as dso_plekinfo_card}

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

@@ -1 +0,0 @@
-import{r as d,h as a,F as e}from"./p-BIfnbekk.js";const s=class{constructor(a){d(this,a),this.mode="list"}render(){return a(e,null,"list"===this.mode&&a("ul",{key:"d593775800ecb1923ef9ad855255e7dd37ea591a",class:"dso-card-list"},a("slot",{key:"7ea9f4b7e848bf3afa2039f5ec4ab14ce2573243"})),"grid"===this.mode&&a("div",{key:"b4ce1e46af681b37be5e7d53ee56be82a286d9c7",class:"dso-card-grid"},a("slot",{key:"1d29ddba3f221ee0a507ba93a36869a24e4ad19f"})))}};s.style=":host .dso-card-list{padding-inline-start:0;list-style:none;border-block-end:1px solid #ccc;margin-block-start:-1px}:host .dso-card-grid{display:grid;gap:32px;grid-auto-rows:1fr}@media (max-width: 991px){:host .dso-card-grid{grid-template-columns:repeat(1, 1fr)}}@media (min-width: 992px) and (max-width: 1199px){:host .dso-card-grid{grid-template-columns:repeat(2, 1fr)}}@media (min-width: 1200px){:host .dso-card-grid{grid-template-columns:repeat(3, 1fr)}}";export{s as dso_card_container}

package/dist/esm/dso-info-button.entry.js

@@ -1,105 +0,0 @@
-import { r as registerInstance, d as createEvent, h, a as Host, g as getElement } from './index-BIfnbekk.js';
-import { p as positionTooltip } from './position-tooltip.function-Cf2lM20T.js';
-import { T as Tooltip } from './tooltip.functional-component-eBucNQlw.js';
-import './floating-ui.dom-zRaH89Qj.js';
-import './clsx-ChV9xqsO.js';
-
-const infoButtonCss = () => `:host{--_dt-scrollable-border-radius:4px;--_dt-scrollable-container-padding-inline:16px;--_dt-scrollable-container-padding-block:8px;display:inline-block}*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s;max-inline-size:640px}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:0;padding-inline:0;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}dso-icon-button{vertical-align:top;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px)}`;
-
-const InfoButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dsoToggle = createEvent(this, "dsoToggle", 7);
-        /**
-         * Whether the InfoButton is active.
-         */
-        this.active = false;
-        /**
-         * The label.
-         */
-        this.label = "Toelichting bij optie";
-        /**
-         * The placement of the Toggletip on click.
-         */
-        this.toggletipPlacement = "top";
-        this.toggletipActive = false;
-        this.hasToggletip = false;
-        this.keyDownHandler = (event) => {
-            if (!this.toggletipActive)
-                return;
-            if (event.key === "Escape") {
-                this.toggletipActive = false;
-            }
-        };
-        this.focusOutHandler = (event) => {
-            if (!this.host.contains(event.relatedTarget)) {
-                this.toggletipActive = false;
-                this.toggletipElRef?.hidePopover();
-            }
-        };
-    }
-    /**
-     * To set focus to the toggle button.
-     */
-    async setFocus() {
-        this.button?.setFocus?.();
-    }
-    handleToggle(originalEvent) {
-        if (this.hasToggletip) {
-            this.toggletipActive = !this.toggletipActive;
-        }
-        else {
-            this.dsoToggle.emit({ originalEvent, active: !this.active });
-        }
-    }
-    cleanupTooltip() {
-        this.cleanUp?.();
-        this.cleanUp = undefined;
-    }
-    componentDidRender() {
-        if (!this.hasToggletip) {
-            this.toggletipElRef?.hidePopover();
-            this.cleanupTooltip();
-            return;
-        }
-        if (!this.cleanUp && this.toggletipActive && this.button && this.toggletipElRef && this.toggletipArrowElRef) {
-            this.cleanUp = positionTooltip({
-                referenceElement: this.button,
-                tipRef: this.toggletipElRef,
-                tipArrowRef: this.toggletipArrowElRef,
-                placementTip: this.toggletipPlacement,
-                restrictContentElement: this.restrictContentElement,
-            });
-        }
-        if (this.cleanUp) {
-            if (this.toggletipActive) {
-                this.toggletipElRef?.showPopover();
-            }
-            else {
-                this.toggletipElRef?.hidePopover();
-                this.cleanupTooltip();
-            }
-        }
-    }
-    connectedCallback() {
-        this.mutationObserver = new MutationObserver(() => {
-            this.hasToggletip = !!this.host.querySelector("[slot='toggletip']");
-        });
-        this.mutationObserver.observe(this.host, {
-            childList: true,
-            attributes: true,
-        });
-    }
-    disconnectedCallback() {
-        this.cleanupTooltip();
-        this.mutationObserver?.disconnect();
-        delete this.mutationObserver;
-    }
-    render() {
-        return (h(Host, { key: '356a1719f7fb83726a476115502201192d21aaff', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("dso-icon-button", { key: '776b7f97504cc648d1501ceb02afb2a2fe5a6609', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element) }), this.hasToggletip && (h(Tooltip, { key: '76ec0ba354130e8c2b279fb0504aedd33e73f5df', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: 'bf5af80a8b6d4ba31f64b27babff03a8792d7c92', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'b344f9780ed70503716ef4dd009e431d05cbec90', name: "toggletip" }))))));
-    }
-    get host() { return getElement(this); }
-};
-InfoButton.style = infoButtonCss();
-
-export { InfoButton as dso_info_button };

package/dist/esm/dso-toggletip.entry.js

@@ -1,56 +0,0 @@
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-BIfnbekk.js';
-
-const toggletipCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;--tooltip-margin-block-start:0;--tooltip-margin-inline-start:3px;--tooltip-margin-inline-end:units.$u1 * -1 !important}:host(:focus){outline:none;z-index:410}`;
-
-const Toggletip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.active = false;
-        /**
-         * Toggletip label.
-         */
-        this.label = "Toelichting";
-        /**
-         * Toggletip position.
-         */
-        this.position = "right";
-        this.click = () => {
-            if (this.active) {
-                this.close();
-            }
-            else {
-                this.open();
-            }
-        };
-        this.open = () => {
-            this.active = true;
-            this.host.addEventListener("keydown", this.keyDownListener);
-            this.host.addEventListener("focusout", this.focusOutListener);
-        };
-        this.close = () => {
-            this.host.removeEventListener("focusout", this.focusOutListener);
-            this.host.removeEventListener("keydown", this.keyDownListener);
-            this.active = false;
-        };
-        this.focusOutListener = (event) => {
-            if (!this.host.contains(event.relatedTarget)) {
-                this.close();
-            }
-        };
-        this.keyDownListener = (event) => {
-            if (!event.defaultPrevented && event.key === "Escape") {
-                this.close();
-                this.infoButton?.setFocus();
-                event.preventDefault();
-            }
-            return;
-        };
-    }
-    render() {
-        return (h(Fragment, { key: '298a0e9bd310f496f3dd8983fc67d3b71bb1a0a4' }, h("dso-info-button", { key: 'd3e1e3e364bf43b0deef9bd29e5ad30951df9077', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '8477c00365c100ed94c724be6468941eba14b00b', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '211b1ec1950140bd080992dda22734d4c64f570d' }))));
-    }
-    get host() { return getElement(this); }
-};
-Toggletip.style = toggletipCss();
-
-export { Toggletip as dso_toggletip };

package/dist/types/components/toggletip/toggletip.d.ts

@@ -1,24 +0,0 @@
-import { Placement } from "@popperjs/core";
-export declare class Toggletip {
-    host: HTMLDsoToggletipElement;
-    active: boolean;
-    /**
-     * Toggletip label.
-     */
-    label: string;
-    /**
-     * Toggletip position.
-     */
-    position: Placement;
-    /**
-     * Set to true for small Toggletip.
-     */
-    small?: boolean;
-    private infoButton?;
-    private click;
-    private open;
-    private close;
-    private focusOutListener;
-    private keyDownListener;
-    render(): any;
-}