@dso-toolkit/core 60.0.0 → 61.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "60.0.0",
+  "version": "61.0.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -25,7 +25,7 @@
     "@types/animejs": "^3.1.7",
     "animejs": "3.2.1",
     "clsx": "^2.0.0",
-    "dso-toolkit": "^60.0.0",
+    "dso-toolkit": "^61.0.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.5.2",
     "popper-max-size-modifier": "^0.2.0",

package/dist/dso-toolkit/p-51cfeed4.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as o,h as e,F as d,a as r}from"./p-3ca5b6f4.js";import{c as i}from"./p-c87b4d11.js";import{d as a}from"./p-1805f5b0.js";import{i as t}from"./p-9747c291.js";const n=".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}.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:focus{color:#fff}.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,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.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,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.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,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.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 !important;top:3px !important}.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}";const h=992;const c=class{constructor(d){s(this,d);this.dsoHeaderClick=o(this,"dsoHeaderClick",7);this.onWindowResize=a((()=>{var s,o;(s=this.dropdownElement)===null||s===void 0?void 0:s.removeAttribute("open");(o=this.dropdownElement)===null||o===void 0?void 0:o.removeAttribute("tabindex");this.setDropDownMenu();this.setOverflowMenu();if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}),100);this.MenuItem=s=>e("li",{class:s.active?"dso-active":undefined},e("a",{href:s.url,"aria-current":s.active?"page":undefined,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:s})},s.label));this.mainMenu=[];this.useDropDownMenu="auto";this.authStatus="none";this.loginUrl=undefined;this.logoutUrl=undefined;this.userProfileName=undefined;this.userProfileUrl=undefined;this.userHomeUrl=undefined;this.userHomeActive=undefined;this.showDropDown=undefined;this.hasSubLogo=false;this.overflowMenuItems=0;this.dropdownOptionsOffset=0}clickHandler(s,o,e){var d,r;this.dsoHeaderClick.emit({originalEvent:s,isModifiedEvent:t(s),type:o,menuItem:e===null||e===void 0?void 0:e.menuItem,url:(d=e===null||e===void 0?void 0:e.url)!==null&&d!==void 0?d:(r=e===null||e===void 0?void 0:e.menuItem)===null||r===void 0?void 0:r.url})}setShowDropDown(s){if(s==="auto"){this.setDropDownMenu();return}this.showDropDown=s==="always"}componentWillLoad(){this.hasSubLogo=this.host.querySelector("*[slot = 'sub-logo']")!==null}shrinkMenuToFit(){if(!this.wrapper||!this.nav){return}if(this.wrapper.clientWidth>=this.nav.clientWidth){return}if(this.mainMenu&&this.overflowMenuItems>=this.mainMenu.length){return}this.overflowMenuItems++}componentDidRender(){if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset();return}window.setTimeout((()=>this.shrinkMenuToFit()),0)}componentDidLoad(){this.setShowDropDown(this.useDropDownMenu);if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}setOverflowMenu(){if(this.showDropDown){return}if(this.overflowMenuItems!==0){this.overflowMenuItems=0;return}this.shrinkMenuToFit()}setDropDownMenu(){if(this.useDropDownMenu!=="auto"){return}this.showDropDown=window.innerWidth<h}calculateDropdownOptionsOffset(){var s;if(!this.dropdownElement){return 0}return this.host.clientHeight-(((s=this.dropdownElement)===null||s===void 0?void 0:s.getBoundingClientRect().bottom)-this.host.getBoundingClientRect().top)}connectedCallback(){window.addEventListener("resize",this.onWindowResize)}disconnectedCallback(){window.removeEventListener("resize",this.onWindowResize)}render(){if(this.showDropDown===undefined){return}return e(d,null,e("div",{class:i("dso-header",{["use-drop-down"]:this.showDropDown,["has-sub-logo"]:this.hasSubLogo}),ref:s=>this.wrapper=s},e("div",{class:"logo-container"},e("div",{class:"logo"},e("slot",{name:"logo"})),e("div",{class:"sub-logo"},e("slot",{name:"sub-logo"}))),this.showDropDown&&this.mainMenu&&(this.mainMenu.length>0||this.userHomeUrl||this.authStatus!=="none")&&e("div",{class:"dropdown"},e("dso-dropdown-menu",{"dropdown-align":"right",strategy:"absolute",dropdownOptionsOffset:this.dropdownOptionsOffset,ref:s=>this.dropdownElement=s},e("button",{type:"button",slot:"toggle"},e("span",null,"Menu")),e("div",{class:"dso-dropdown-options"},e("ul",null,this.mainMenu.map(this.MenuItem),this.userHomeUrl&&e("li",null,e("a",{href:this.userHomeUrl,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},"Mijn Omgevingsloket")),this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&e("li",null,e("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName,e("span",{class:"profile-label"}," - Mijn profiel"))),this.authStatus==="loggedOut"&&e("li",null,this.loginUrl?e("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):e("button",{type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),this.authStatus==="loggedIn"&&e("li",null,this.logoutUrl?e("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):e("button",{type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen")))))),!this.showDropDown&&e(d,null,e("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&e("div",{class:"profile"},e("span",{class:"profile-label"},"Welkom:"),e("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName)),this.authStatus==="loggedOut"&&e("div",{class:"login"},this.loginUrl?e("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):e("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),this.authStatus==="loggedIn"&&e("div",{class:"logout"},this.logoutUrl?e("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):e("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen"))),(this.mainMenu&&this.mainMenu.length>0||this.userHomeUrl)&&e("nav",{class:"dso-navbar"},e("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&&e("li",null,e("dso-dropdown-menu",{placement:"bottom"},e("button",{type:"button",slot:"toggle"},e("span",null,"Meer")),e("div",{class:"dso-dropdown-options"},e("ul",null,this.mainMenu&&this.mainMenu.filter(((s,o)=>this.mainMenu&&o>=this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem))))),this.userHomeUrl&&e("li",{class:i("menu-user-home",{"dso-active":this.userHomeActive})},e("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":undefined,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},e("dso-icon",{icon:"user-line"}),"Mijn Omgevingsloket")))))))}get host(){return r(this)}static get watchers(){return{useDropDownMenu:["setShowDropDown"]}}};c.style=n;export{c as dso_header};
-//# sourceMappingURL=p-51cfeed4.entry.js.map

package/dist/dso-toolkit/p-51cfeed4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["headerCss","minDesktopViewportWidth","Header","this","onWindowResize","debounce","_a","dropdownElement","removeAttribute","_b","setDropDownMenu","setOverflowMenu","showDropDown","dropdownOptionsOffset","calculateDropdownOptionsOffset","MenuItem","item","h","class","active","undefined","href","url","onClick","e","clickHandler","menuItem","label","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","setShowDropDown","value","componentWillLoad","hasSubLogo","host","querySelector","shrinkMenuToFit","wrapper","nav","clientWidth","mainMenu","overflowMenuItems","length","componentDidRender","window","setTimeout","componentDidLoad","useDropDownMenu","innerWidth","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","authStatus","strategy","slot","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","filter","_","index","placement","userHomeActive","icon"],"sources":["src/components/header/header.scss?tag=dso-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@mixin nav-item-border($color) {\r\n  border-bottom: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n  font-size: 1.25em;\r\n  line-height: 1;\r\n  margin-top: units.$u1;\r\n  padding: units.$u2 0;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-header {\r\n  border-bottom: 1px solid colors.$grijs-20;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n    &.use-drop-down {\r\n      flex-wrap: nowrap;\r\n    }\r\n  }\r\n\r\n  .dso-nav {\r\n    border: 0;\r\n  }\r\n}\r\n\r\n.logo-container {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 0 units.$u3;\r\n  padding-bottom: units.$u2;\r\n  padding-top: units.$u2;\r\n}\r\n\r\n.login,\r\n.logout {\r\n  .dso-tertiary {\r\n    cursor: pointer;\r\n    font-family: typography.$font-family-base;\r\n    font-weight: 600;\r\n    vertical-align: text-bottom;\r\n  }\r\n}\r\n\r\n.profile,\r\n.logout,\r\n.login {\r\n  a {\r\n    @include anchor.clean();\r\n\r\n    color: colors.$grasgroen;\r\n    font-weight: 600;\r\n\r\n    &:focus {\r\n      color: colors.$wit;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-header-session {\r\n  display: flex;\r\n  margin-left: auto;\r\n\r\n  .profile {\r\n    a {\r\n      margin-left: units.$u1;\r\n    }\r\n\r\n    + .logout {\r\n      border-left: 3px solid colors.$grijs-20;\r\n      margin-left: units.$u2;\r\n      padding-left: units.$u2;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-navbar {\r\n  flex-basis: 100%;\r\n\r\n  .dso-dropdown-options {\r\n    border-top: 1px solid colors.$grijs-20;\r\n  }\r\n}\r\n\r\ndso-dropdown-menu {\r\n  button {\r\n    align-items: flex-end;\r\n    background-color: transparent;\r\n    border: 0;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    padding-right: units.$u4;\r\n  }\r\n\r\n  .dso-dropdown-options {\r\n    border: 0;\r\n    border-radius: 0;\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      width: 375px;\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      width: 100%;\r\n    }\r\n\r\n    ul li {\r\n      a,\r\n      button {\r\n        color: colors.$bosgroen;\r\n        font-size: 1.25rem;\r\n        padding: units.$u2;\r\n        white-space: pre-wrap;\r\n\r\n        &:focus {\r\n          color: colors.$wit;\r\n        }\r\n\r\n        &:hover {\r\n          background-color: colors.$wit;\r\n          color: colors.$bosgroen;\r\n          text-decoration: underline;\r\n        }\r\n      }\r\n\r\n      &.dso-active {\r\n        a {\r\n          font-weight: 600;\r\n        }\r\n      }\r\n\r\n      + li {\r\n        border-top: 1px solid colors.$grijs-20;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dropdown {\r\n  margin-left: auto;\r\n\r\n  dso-dropdown-menu {\r\n    position: static;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      margin-top: units.$u1 * 3.5;\r\n    }\r\n\r\n    .dso-dropdown-options {\r\n      right: 0;\r\n      top: 100%;\r\n    }\r\n\r\n    > button {\r\n      color: colors.$grasgroen;\r\n      font-size: typography.$font-size-base;\r\n      font-weight: 600;\r\n      line-height: normal;\r\n      position: relative;\r\n\r\n      &::after {\r\n        margin-left: units.$u1;\r\n        position: absolute;\r\n        right: 0px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n\r\n      &:hover,\r\n      &:active {\r\n        cursor: pointer;\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-nav {\r\n  align-items: end;\r\n  column-gap: units.$u4;\r\n  display: flex;\r\n  list-style: none;\r\n  margin-bottom: 0;\r\n  margin-top: 0;\r\n  padding-left: 0;\r\n\r\n  > li {\r\n    margin-bottom: 4px;\r\n\r\n    > a {\r\n      display: block;\r\n\r\n      &,\r\n      &:hover,\r\n      &:focus,\r\n      &:visited {\r\n        color: colors.$bosgroen;\r\n      }\r\n    }\r\n\r\n    &.dso-active,\r\n    &.is-active {\r\n      margin-bottom: 0;\r\n\r\n      > a {\r\n        @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n        font-weight: bold;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-nav-main {\r\n    display: flex !important;\r\n\r\n    > li {\r\n      > a {\r\n        @include anchor.reverse();\r\n        @include nav-item-main();\r\n\r\n        // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n        white-space: nowrap;\r\n      }\r\n    }\r\n\r\n    dso-dropdown-menu {\r\n      .dso-dropdown-options {\r\n        left: units.$ru2 * -1 !important;\r\n        top: 3px !important;\r\n      }\r\n\r\n      button {\r\n        @include nav-item-main();\r\n\r\n        align-items: center;\r\n        color: colors.$bosgroen;\r\n        padding-right: units.$u4;\r\n\r\n        &:hover,\r\n        &:active {\r\n          cursor: pointer;\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &::after {\r\n          margin-left: units.$u1;\r\n          position: absolute;\r\n          right: 0px;\r\n          top: auto;\r\n          transform: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .menu-user-home {\r\n    margin-left: auto;\r\n\r\n    dso-icon {\r\n      height: 1em;\r\n      margin-right: units.$u1;\r\n      position: relative;\r\n      top: -2px;\r\n      width: 1.2em;\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderMenuItem, HeaderNavigationType, HeaderEvent } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n  tag: \"dso-header\",\r\n  styleUrl: \"header.scss\",\r\n  scoped: true,\r\n})\r\nexport class Header {\r\n  private clickHandler(\r\n    e: MouseEvent,\r\n    type: HeaderNavigationType,\r\n    options?: { menuItem?: HeaderMenuItem; url?: string }\r\n  ) {\r\n    this.dsoHeaderClick.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n      type,\r\n      menuItem: options?.menuItem,\r\n      url: options?.url ?? options?.menuItem?.url,\r\n    });\r\n  }\r\n\r\n  private dropdownElement?: HTMLElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoHeaderElement;\r\n\r\n  /**\r\n   * The main menu items.\r\n   */\r\n  @Prop()\r\n  mainMenu?: HeaderMenuItem[] = [];\r\n\r\n  /**\r\n   * Either have the dropdown menu appear automatically or always.\r\n   */\r\n  @Prop()\r\n  useDropDownMenu: \"always\" | \"auto\" = \"auto\";\r\n\r\n  /**\r\n   * Used to show the login/logout option. 'none' renders nothing.\r\n   */\r\n  @Prop()\r\n  authStatus: \"none\" | \"loggedIn\" | \"loggedOut\" = \"none\";\r\n\r\n  /**\r\n   * When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.\r\n   */\r\n  @Prop()\r\n  loginUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"logout\".\r\n   */\r\n  @Prop()\r\n  logoutUrl?: string;\r\n\r\n  /**\r\n   * The name to show when the user is logged in.\r\n   */\r\n  @Prop()\r\n  userProfileName?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates the profile url.\r\n   */\r\n  @Prop()\r\n  userProfileUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeUrl?: string;\r\n\r\n  /**\r\n   * Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeActive?: boolean;\r\n\r\n  @State()\r\n  showDropDown?: boolean;\r\n\r\n  @State()\r\n  hasSubLogo = false;\r\n\r\n  @State()\r\n  overflowMenuItems = 0;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  /**\r\n   * Emitted when something in the header is selected.\r\n   *\r\n   * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n   */\r\n  @Event()\r\n  dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n  @Watch(\"useDropDownMenu\")\r\n  setShowDropDown(value: \"always\" | \"auto\") {\r\n    if (value === \"auto\") {\r\n      this.setDropDownMenu();\r\n\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = value === \"always\";\r\n  }\r\n\r\n  private wrapper: HTMLDivElement | undefined;\r\n\r\n  private nav: HTMLUListElement | undefined;\r\n\r\n  componentWillLoad() {\r\n    this.hasSubLogo = this.host.querySelector(\"*[slot = 'sub-logo']\") !== null;\r\n  }\r\n\r\n  private shrinkMenuToFit() {\r\n    if (!this.wrapper || !this.nav) {\r\n      return;\r\n    }\r\n\r\n    if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n      return;\r\n    }\r\n\r\n    if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n      return;\r\n    }\r\n\r\n    this.overflowMenuItems++;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n      return;\r\n    }\r\n\r\n    window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.setShowDropDown(this.useDropDownMenu);\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }\r\n\r\n  private setOverflowMenu() {\r\n    if (this.showDropDown) {\r\n      return;\r\n    }\r\n\r\n    if (this.overflowMenuItems !== 0) {\r\n      this.overflowMenuItems = 0;\r\n      return;\r\n    }\r\n\r\n    this.shrinkMenuToFit();\r\n  }\r\n\r\n  private setDropDownMenu() {\r\n    if (this.useDropDownMenu !== \"auto\") {\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private calculateDropdownOptionsOffset() {\r\n    if (!this.dropdownElement) {\r\n      return 0;\r\n    }\r\n\r\n    return (\r\n      this.host.clientHeight -\r\n      (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n    );\r\n  }\r\n\r\n  private onWindowResize = debounce(() => {\r\n    this.dropdownElement?.removeAttribute(\"open\");\r\n    this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n    this.setDropDownMenu();\r\n    this.setOverflowMenu();\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }, 100);\r\n\r\n  connectedCallback() {\r\n    window.addEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  private MenuItem = (item: HeaderMenuItem) => {\r\n    return (\r\n      <li class={item.active ? \"dso-active\" : undefined}>\r\n        <a\r\n          href={item.url}\r\n          aria-current={item.active ? \"page\" : undefined}\r\n          onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n        >\r\n          {item.label}\r\n        </a>\r\n      </li>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    // Prevent 'flickering' when useDropDownMenu = 'always'\r\n    if (this.showDropDown === undefined) {\r\n      return;\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <div\r\n          class={clsx(\"dso-header\", {\r\n            [\"use-drop-down\"]: this.showDropDown,\r\n            [\"has-sub-logo\"]: this.hasSubLogo,\r\n          })}\r\n          ref={(element) => (this.wrapper = element)}\r\n        >\r\n          <div class=\"logo-container\">\r\n            <div class=\"logo\">\r\n              <slot name=\"logo\" />\r\n            </div>\r\n            <div class=\"sub-logo\">\r\n              <slot name=\"sub-logo\" />\r\n            </div>\r\n          </div>\r\n          {this.showDropDown &&\r\n            this.mainMenu &&\r\n            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== \"none\") && (\r\n              <div class=\"dropdown\">\r\n                <dso-dropdown-menu\r\n                  dropdown-align=\"right\"\r\n                  strategy=\"absolute\"\r\n                  dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n                  ref={(element) => (this.dropdownElement = element)}\r\n                >\r\n                  <button type=\"button\" slot=\"toggle\">\r\n                    <span>Menu</span>\r\n                  </button>\r\n                  <div class=\"dso-dropdown-options\">\r\n                    <ul>\r\n                      {this.mainMenu.map(this.MenuItem)}\r\n                      {this.userHomeUrl && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userHomeUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                          >\r\n                            Mijn Omgevingsloket\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userProfileUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                          >\r\n                            {this.userProfileName}\r\n                            <span class=\"profile-label\"> - Mijn profiel</span>\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedOut\" && (\r\n                        <li>\r\n                          {this.loginUrl ? (\r\n                            <a\r\n                              href={this.loginUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                            >\r\n                              Inloggen\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                              Inloggen\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          {this.logoutUrl ? (\r\n                            <a\r\n                              href={this.logoutUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                            >\r\n                              Uitloggen\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                              Uitloggen\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                    </ul>\r\n                  </div>\r\n                </dso-dropdown-menu>\r\n              </div>\r\n            )}\r\n          {!this.showDropDown && (\r\n            <>\r\n              <div class=\"dso-header-session\">\r\n                {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"profile\">\r\n                    <span class=\"profile-label\">Welkom:</span>\r\n                    <a\r\n                      href={this.userProfileUrl}\r\n                      onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                    >\r\n                      {this.userProfileName}\r\n                    </a>\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedOut\" && (\r\n                  <div class=\"login\">\r\n                    {this.loginUrl ? (\r\n                      <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n                        Inloggen\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        Inloggen\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"logout\">\r\n                    {this.logoutUrl ? (\r\n                      <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n                        Uitloggen\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        Uitloggen\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              {((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (\r\n                <nav class=\"dso-navbar\">\r\n                  <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n                    {this.mainMenu &&\r\n                      this.mainMenu\r\n                        .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n                        .map(this.MenuItem)}\r\n                    {this.overflowMenuItems > 0 && (\r\n                      <li>\r\n                        <dso-dropdown-menu placement=\"bottom\">\r\n                          <button type=\"button\" slot=\"toggle\">\r\n                            <span>Meer</span>\r\n                          </button>\r\n                          <div class=\"dso-dropdown-options\">\r\n                            <ul>\r\n                              {this.mainMenu &&\r\n                                this.mainMenu\r\n                                  .filter(\r\n                                    (_, index) =>\r\n                                      this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems\r\n                                  )\r\n                                  .map(this.MenuItem)}\r\n                            </ul>\r\n                          </div>\r\n                        </dso-dropdown-menu>\r\n                      </li>\r\n                    )}\r\n                    {this.userHomeUrl && (\r\n                      <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n                        <a\r\n                          href={this.userHomeUrl}\r\n                          aria-current={this.userHomeActive ? \"page\" : undefined}\r\n                          onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                        >\r\n                          <dso-icon icon=\"user-line\"></dso-icon>\r\n                          Mijn Omgevingsloket\r\n                        </a>\r\n                      </li>\r\n                    )}\r\n                  </ul>\r\n                </nav>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{h as o,r as n,c as s,f as t,F as d,H as c,a as e}from"./p-3ca5b6f4.js";const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i=({handleUrl:n,onClick:s,open:t},d)=>{if(n){return o("a",{href:n,onClick:s,"aria-expanded":t?"true":"false"},d)}return o("button",{type:"button",onClick:s,"aria-expanded":t?"true":"false"},d)};const r=({heading:n,ref:s},t)=>{switch(n){default:case"h2":return o("h2",{ref:s,class:"dso-section-handle"},t);case"h3":return o("h3",{ref:s,class:"dso-section-handle"},t);case"h4":return o("h4",{ref:s,class:"dso-section-handle"},t);case"h5":return o("h5",{ref:s,class:"dso-section-handle"},t)}};const l=({state:n})=>{if(n==="error"){return o("dso-icon",{icon:"status-error"})}if(n==="danger"){return o("dso-icon",{icon:"status-danger"})}if(n==="success"){return o("dso-icon",{icon:"status-success"})}if(n==="info"){return o("dso-icon",{icon:"status-info"})}if(n==="warning"){return o("dso-icon",{icon:"status-warning"})}};const h=({state:n,icon:s,attachmentCount:t})=>{if(n){return o(l,{state:n})}if(t){return o("dso-attachments-counter",{count:t})}if(s){return o("dso-icon",{icon:s})}};const p="*,*::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}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;text-align:start;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px}.dso-section-body .dso-section-body-content{padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-body{border-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button{color:#000;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact-black) .dso-section-handle a:hover,:host(.dso-accordion-compact-black) .dso-section-handle a:active,:host(.dso-accordion-compact-black) .dso-section-handle a.active,:host(.dso-accordion-compact-black) .dso-section-handle button:hover,:host(.dso-accordion-compact-black) .dso-section-handle button:active,:host(.dso-accordion-compact-black) .dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a.active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-body{border-top:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=false])){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding:5px 16px 5px 0}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-handle dso-icon,:host(.dso-accordion-neutral) .dso-section-handle svg.di{vertical-align:top}:host(.dso-accordion-neutral) .dso-section-body{background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:0}:host(.dso-accordion-neutral) .dso-section-body.dso-animate-ready{transition:margin-block 260ms cubic-bezier(0.4, 0, 0.2, 1)}:host(.dso-accordion-neutral) .dso-section-body .dso-section-body-content{padding:16px 32px 24px 32px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]:not([open=false])) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}";const u=class{constructor(o){n(this,o);this.dsoToggleClick=s(this,"dsoToggleClick",3);this.dsoAnimationEnd=s(this,"dsoAnimationEnd",3);this.handleClick=o=>{this.dsoToggleClick.emit({originalEvent:o,open:!this.open})};this.handleExpandableAnimationEnd=o=>{this.dsoAnimationEnd.emit({open:this.open,scrollIntoView:()=>this.scrollIntoView(o.detail.bodyHeight)})};this.handleTitle=undefined;this.heading="h2";this.handleUrl=undefined;this.status=undefined;this.attachmentCount=undefined;this.icon=undefined;this.statusDescription=undefined;this.open=false;this.hasNestedAccordion=false;this.hover=false}componentWillLoad(){var o;this.hasNestedAccordion=this.host.querySelector("dso-accordion")!==null;(o=this.accordion)===null||o===void 0?void 0:o._getState().then((o=>{this.accordionState=o;t(this.host)}))}get isNeutral(){var o;return((o=this.accordionState)===null||o===void 0?void 0:o.variant)==="neutral"}async scrollIntoView(o){var n,s;const t=(n=this.sectionBody)===null||n===void 0?void 0:n.getBoundingClientRect();const d=(s=this.sectionHeading)===null||s===void 0?void 0:s.getBoundingClientRect();if(!t||!d||!this.accordionState){return}const c=d.top+d.height+(this.open?o!==null&&o!==void 0?o:0:0);if(c>window.innerHeight){const o=c-d.top;const n=o>window.innerHeight;window.scrollTo({top:n?this.host.offsetTop:this.host.offsetTop-(window.innerHeight-o),behavior:"smooth"})}else if(d.top<0){window.scrollTo({top:this.host.offsetTop,behavior:"smooth"})}}get accordion(){return this.host.closest("dso-accordion")}render(){var n;const{variant:s,reverseAlign:t}=(n=this.accordionState)!==null&&n!==void 0?n:{};const e=!!this.statusDescription||!!this.status||!!this.icon||!!this.attachmentCount;return o(c,{class:{"dso-accordion-section":true,["dso-accordion-"+s]:true,"dso-nested-accordion":this.hasNestedAccordion,"dso-accordion-reverse-align":t!==null&&t!==void 0?t:false},hidden:!s,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},o(r,{heading:this.heading,ref:o=>this.sectionHeading=o},o(i,{handleUrl:this.handleUrl,onClick:this.handleClick,open:this.open},t?o(d,null,e&&o("div",{class:"dso-section-handle-addons"},o(h,{icon:this.icon})),o("span",null,this.handleTitle),o("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"})):o(d,null,o("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.status&&o("span",{class:"sr-only"},a[this.status]),o("span",null,this.handleTitle,this.isNeutral&&o("dso-icon",{class:"info-icon",icon:this.open||this.hover?"info-active":"info"})),e&&o("div",{class:"dso-section-handle-addons"},this.statusDescription&&o("span",{class:"dso-status"},this.statusDescription),o(h,{state:this.status,icon:this.icon,attachmentCount:this.attachmentCount}))))),o("dso-expandable",{class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,onDsoExpandableAnimationEnd:this.handleExpandableAnimationEnd},o("div",{class:"dso-section-body-content",ref:o=>this.sectionBody=o},o("slot",null))))}get host(){return e(this)}};u.style=p;export{u as dso_accordion_section};
-//# sourceMappingURL=p-a3dc08f4.entry.js.map

package/dist/dso-toolkit/p-a3dc08f4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stateMap","success","info","warning","danger","error","HandleElement","handleUrl","onClick","open","children","h","href","type","Handle","heading","ref","class","HandleStateIcon","state","icon","HandleIcon","attachmentCount","count","accordionSectionCss","AccordionSection","this","handleClick","event","dsoToggleClick","emit","originalEvent","handleExpandableAnimationEnd","e","dsoAnimationEnd","scrollIntoView","detail","bodyHeight","componentWillLoad","hasNestedAccordion","host","querySelector","_a","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","bodyClientRect","sectionBody","getBoundingClientRect","headingClientRect","_b","sectionHeading","sectionBottomY","top","height","window","innerHeight","expandedAccordionHeight","shouldScrollToTopOfSection","scrollTo","offsetTop","behavior","closest","render","reverseAlign","hasAddons","statusDescription","status","Host","hidden","onMouseenter","hover","onMouseleave","element","Fragment","handleTitle","enableAnimation","minimumHeight","onDsoExpandableAnimationEnd"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/handles/element.handle.tsx","src/components/accordion/components/handles/heading.handle.tsx","src/components/accordion/components/handles/state-icon.handle.tsx","src/components/accordion/components/handles/icon.handle.tsx","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n  success: \"succes:\",\r\n  info: \"info:\",\r\n  warning: \"waarschuwing:\",\r\n  danger: \"fout:\",\r\n  error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n  /**\r\n   * The original MouseEvent that triggered the click.\r\n   *\r\n   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n   */\r\n  originalEvent?: MouseEvent;\r\n\r\n  /**\r\n   * The requested state. If the Accordion Section is closed, `open = true`.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(): void;\r\n\r\n  /**\r\n   * The state of the Accordion Section after animation.\r\n   */\r\n  open: boolean;\r\n}\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport const HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"}>\r\n        {children}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"}>\r\n      {children}\r\n    </button>\r\n  );\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionHeading } from \"../accordion-section.interfaces\";\r\n\r\nexport const Handle: FunctionalComponent<{\r\n  heading: AccordionHeading;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return (\r\n        <h2 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h2>\r\n      );\r\n    case \"h3\":\r\n      return (\r\n        <h3 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h3>\r\n      );\r\n    case \"h4\":\r\n      return (\r\n        <h4 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h4>\r\n      );\r\n    case \"h5\":\r\n      return (\r\n        <h5 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h5>\r\n      );\r\n  }\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionSectionState } from \"../accordion-section.interfaces\";\r\n\r\nexport const HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n  if (state === \"error\") {\r\n    return <dso-icon icon=\"status-error\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"danger\") {\r\n    return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"success\") {\r\n    return <dso-icon icon=\"status-success\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"info\") {\r\n    return <dso-icon icon=\"status-info\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"warning\") {\r\n    return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n  }\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionSectionState } from \"../accordion-section.interfaces\";\r\nimport { HandleStateIcon } from \"./state-icon.handle\";\r\n\r\nexport const HandleIcon: FunctionalComponent<{\r\n  state?: AccordionSectionState;\r\n  icon?: string;\r\n  attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n  if (state) {\r\n    return <HandleStateIcon state={state} />;\r\n  }\r\n\r\n  if (attachmentCount) {\r\n    return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n  }\r\n\r\n  if (icon) {\r\n    return <dso-icon icon={icon}></dso-icon>;\r\n  }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n  display: block;\r\n\r\n  .dso-section-handle {\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion.$handle-line-height;\r\n    margin: 0;\r\n    position: relative;\r\n\r\n    > a:active {\r\n      text-decoration: none;\r\n    }\r\n\r\n    a {\r\n      @include anchor.clean();\r\n    }\r\n\r\n    .dso-status {\r\n      font-weight: 400;\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  .dso-section-handle > button,\r\n  .dso-section-handle > a {\r\n    align-items: center;\r\n    background-color: transparent;\r\n    border: 0;\r\n    cursor: pointer;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion.$handle-line-height;\r\n    margin: 0;\r\n    padding: accordion.$vertical-padding accordion.$horizontal-padding accordion.$vertical-padding;\r\n    text-align: start;\r\n    width: 100%;\r\n    word-break: break-word;\r\n\r\n    dso-icon {\r\n      flex-shrink: 0;\r\n\r\n      &.dso-section-handle-chevron {\r\n        @include utilities.transition(transform);\r\n\r\n        transform: rotate(0);\r\n      }\r\n    }\r\n\r\n    > .dso-section-handle-addons:first-child,\r\n    > dso-icon:first-child {\r\n      margin-right: units.$u1;\r\n    }\r\n\r\n    > dso-icon:last-child {\r\n      margin-left: auto;\r\n    }\r\n\r\n    > .dso-section-handle-addons:last-child {\r\n      margin-left: auto;\r\n\r\n      dso-attachments-counter,\r\n      dso-icon {\r\n        margin-left: 16px;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n  .dso-section-handle {\r\n    > button,\r\n    > a {\r\n      .dso-section-handle-chevron {\r\n        &:first-child {\r\n          transform: rotate(90deg);\r\n        }\r\n\r\n        &:last-child {\r\n          transform: rotate(-180deg);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-section-body {\r\n  background-color: colors.$wit;\r\n  border-top: 0;\r\n  margin-top: accordion.$border-radius * -1;\r\n\r\n  .dso-section-body-content {\r\n    padding: units.$u2 + accordion.$border-radius units.$u2 units.$u2;\r\n  }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  forceUpdate,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  EventEmitter,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { Handle, HandleElement, HandleIcon } from \"./handles\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion-section\",\r\n  styleUrl: \"accordion-section.scss\",\r\n  shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n  private accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionSectionElement;\r\n\r\n  /**\r\n   * The title of the handle\r\n   */\r\n  @Prop()\r\n  handleTitle?: string;\r\n\r\n  /**\r\n   * Which heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: AccordionHeading = \"h2\";\r\n\r\n  /**\r\n   * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n   */\r\n  @Prop()\r\n  handleUrl?: string;\r\n\r\n  /**\r\n   * `state` takes precedence over `attachmentCount` and `icon`\r\n   */\r\n  @Prop()\r\n  status?: AccordionSectionState;\r\n\r\n  /**\r\n   * `attachmentCount` takes precedence over `icon`\r\n   */\r\n  @Prop()\r\n  attachmentCount?: number;\r\n\r\n  /**\r\n   * To set an icon in the heading handle.\r\n   */\r\n  @Prop()\r\n  icon?: string;\r\n\r\n  /**\r\n   * The status of the section.\r\n   */\r\n  @Prop()\r\n  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  @State()\r\n  hasNestedAccordion = false;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  componentWillLoad() {\r\n    this.hasNestedAccordion = this.host.querySelector(\"dso-accordion\") !== null;\r\n\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined): Promise<void> {\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      return;\r\n    }\r\n\r\n    // this y is relative to the top of the viewport.\r\n    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight ?? 0 : 0);\r\n    if (sectionBottomY > window.innerHeight) {\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection\r\n          ? this.host.offsetTop\r\n          : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),\r\n        behavior: \"smooth\",\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      window.scrollTo({\r\n        top: this.host.offsetTop,\r\n        behavior: \"smooth\",\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: () => this.scrollIntoView(e.detail.bodyHeight),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: true,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n        }}\r\n        hidden={!variant}\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n      >\r\n        <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n          <HandleElement handleUrl={this.handleUrl} onClick={this.handleClick} open={this.open}>\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n\r\n                <span>{this.handleTitle}</span>\r\n\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n                <span>\r\n                  {this.handleTitle}\r\n                  {this.isNeutral && (\r\n                    <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n                  )}\r\n                </span>\r\n\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n                  </div>\r\n                )}\r\n              </Fragment>\r\n            )}\r\n          </HandleElement>\r\n        </Handle>\r\n        <dso-expandable\r\n          class=\"dso-section-body\"\r\n          open={this.open}\r\n          enableAnimation\r\n          minimumHeight={this.isNeutral ? 0 : 4}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"8EAIO,MAAMA,EAAkD,CAC7DC,QAAS,UACTC,KAAM,QACNC,QAAS,gBACTC,OAAQ,QACRC,MAAO,SCPF,MAAMC,EAIR,EAAGC,YAAWC,UAASC,QAAQC,KAClC,GAAIH,EAAW,CACb,OACEI,EAAA,KAAGC,KAAML,EAAWC,QAASA,EAAO,gBAAiBC,EAAO,OAAS,SAClEC,E,CAKP,OACEC,EAAA,UAAQE,KAAK,SAASL,QAASA,EAAO,gBAAiBC,EAAO,OAAS,SACpEC,EACM,ECdN,MAAMI,EAGR,EAAGC,UAASC,OAAON,KACtB,OAAQK,GACN,QACA,IAAK,KACH,OACEJ,EAAA,MAAIK,IAAKA,EAAKC,MAAM,sBACjBP,GAGP,IAAK,KACH,OACEC,EAAA,MAAIK,IAAKA,EAAKC,MAAM,sBACjBP,GAGP,IAAK,KACH,OACEC,EAAA,MAAIK,IAAKA,EAAKC,MAAM,sBACjBP,GAGP,IAAK,KACH,OACEC,EAAA,MAAIK,IAAKA,EAAKC,MAAM,sBACjBP,G,EC3BJ,MAAMQ,EAAyE,EAAGC,YACvF,GAAIA,IAAU,QAAS,CACrB,OAAOR,EAAA,YAAUS,KAAK,gB,CAGxB,GAAID,IAAU,SAAU,CACtB,OAAOR,EAAA,YAAUS,KAAK,iB,CAGxB,GAAID,IAAU,UAAW,CACvB,OAAOR,EAAA,YAAUS,KAAK,kB,CAGxB,GAAID,IAAU,OAAQ,CACpB,OAAOR,EAAA,YAAUS,KAAK,e,CAGxB,GAAID,IAAU,UAAW,CACvB,OAAOR,EAAA,YAAUS,KAAK,kB,GCjBnB,MAAMC,EAIR,EAAGF,QAAOC,OAAME,sBACnB,GAAIH,EAAO,CACT,OAAOR,EAACO,EAAe,CAACC,MAAOA,G,CAGjC,GAAIG,EAAiB,CACnB,OAAOX,EAAA,2BAAyBY,MAAOD,G,CAGzC,GAAIF,EAAM,CACR,OAAOT,EAAA,YAAUS,KAAMA,G,GCnB3B,MAAMI,EAAsB,6uZ,MC8BfC,EAAgB,M,yHA8GnBC,KAAAC,YAAeC,IACrBF,KAAKG,eAAeC,KAAK,CACvBC,cAAeH,EACfnB,MAAOiB,KAAKjB,MACZ,EAGIiB,KAAAM,6BAAgCC,IACtCP,KAAKQ,gBAAgBJ,KAAK,CACxBrB,KAAMiB,KAAKjB,KACX0B,eAAgB,IAAMT,KAAKS,eAAeF,EAAEG,OAAOC,aACnD,E,wCArGwB,K,6IAoCrB,M,wBAGc,M,WAGb,K,CAER,iBAAAC,G,MACEZ,KAAKa,mBAAqBb,KAAKc,KAAKC,cAAc,mBAAqB,MAEvEC,EAAAhB,KAAKiB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,YAAYC,MAAM1B,IAChCO,KAAKoB,eAAiB3B,EAEtB4B,EAAYrB,KAAKc,KAAK,G,CAI1B,aAAIQ,G,MACF,QAAON,EAAAhB,KAAKoB,kBAAc,MAAAJ,SAAA,SAAAA,EAAEO,WAAY,S,CAGlC,oBAAMd,CAAeE,G,QAC3B,MAAMa,GAAiBR,EAAAhB,KAAKyB,eAAW,MAAAT,SAAA,SAAAA,EAAEU,wBACzC,MAAMC,GAAoBC,EAAA5B,KAAK6B,kBAAc,MAAAD,SAAA,SAAAA,EAAEF,wBAE/C,IAAKF,IAAmBG,IAAsB3B,KAAKoB,eAAgB,CACjE,M,CAIF,MAAMU,EAAiBH,EAAkBI,IAAMJ,EAAkBK,QAAUhC,KAAKjB,KAAO4B,IAAU,MAAVA,SAAU,EAAVA,EAAc,EAAI,GACzG,GAAImB,EAAiBG,OAAOC,YAAa,CACvC,MAAMC,EAA0BL,EAAiBH,EAAkBI,IACnE,MAAMK,EAA6BD,EAA0BF,OAAOC,YAEpED,OAAOI,SAAS,CACdN,IAAKK,EACDpC,KAAKc,KAAKwB,UACVtC,KAAKc,KAAKwB,WAAaL,OAAOC,YAAcC,GAChDI,SAAU,U,MAEP,GAAIZ,EAAkBI,IAAM,EAAG,CACpCE,OAAOI,SAAS,CACdN,IAAK/B,KAAKc,KAAKwB,UACfC,SAAU,U,EAKhB,aAAYtB,GACV,OAAOjB,KAAKc,KAAK0B,QAAQ,gB,CA6B3B,MAAAC,G,MACE,MAAMlB,QAAEA,EAAOmB,aAAEA,IAAiB1B,EAAAhB,KAAKoB,kBAAc,MAAAJ,SAAA,EAAAA,EAAI,GACzD,MAAM2B,IAAc3C,KAAK4C,qBAAuB5C,KAAK6C,UAAY7C,KAAKN,QAAUM,KAAKJ,gBAErF,OACEX,EAAC6D,EAAI,CACHvD,MAAO,CACL,wBAAyB,KACzB,CAAC,iBAAmBgC,GAAU,KAC9B,uBAAwBvB,KAAKa,mBAC7B,8BAA+B6B,IAAY,MAAZA,SAAY,EAAZA,EAAgB,OAEjDK,QAASxB,EACTyB,aAAc,IAAOhD,KAAKiD,MAAQ,KAClCC,aAAc,IAAOlD,KAAKiD,MAAQ,OAElChE,EAACG,EAAM,CAACC,QAASW,KAAKX,QAASC,IAAM6D,GAAanD,KAAK6B,eAAiBsB,GACtElE,EAACL,EAAa,CAACC,UAAWmB,KAAKnB,UAAWC,QAASkB,KAAKC,YAAalB,KAAMiB,KAAKjB,MAC7E2D,EACCzD,EAACmE,EAAQ,KACNT,GACC1D,EAAA,OAAKM,MAAM,6BACTN,EAACU,EAAU,CAACD,KAAMM,KAAKN,QAI3BT,EAAA,YAAOe,KAAKqD,aAEZpE,EAAA,YAAUM,MAAM,6BAA6BG,KAAK,kBAGpDT,EAACmE,EAAQ,KACPnE,EAAA,YAAUM,MAAM,6BAA6BG,KAAK,kBAEjDM,KAAK6C,QAAU5D,EAAA,QAAMM,MAAM,WAAWjB,EAAS0B,KAAK6C,SAErD5D,EAAA,YACGe,KAAKqD,YACLrD,KAAKsB,WACJrC,EAAA,YAAUM,MAAM,YAAYG,KAAMM,KAAKjB,MAAQiB,KAAKiD,MAAQ,cAAgB,UAI/EN,GACC1D,EAAA,OAAKM,MAAM,6BACRS,KAAK4C,mBAAqB3D,EAAA,QAAMM,MAAM,cAAcS,KAAK4C,mBAC1D3D,EAACU,EAAU,CAACF,MAAOO,KAAK6C,OAAQnD,KAAMM,KAAKN,KAAME,gBAAiBI,KAAKJ,sBAOnFX,EAAA,kBACEM,MAAM,mBACNR,KAAMiB,KAAKjB,KACXuE,gBAAe,KACfC,cAAevD,KAAKsB,UAAY,EAAI,EACpCkC,4BAA6BxD,KAAKM,8BAElCrB,EAAA,OAAKM,MAAM,2BAA2BD,IAAM6D,GAAanD,KAAKyB,YAAc0B,GAC1ElE,EAAA,e"}

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

@@ -1,2 +0,0 @@
-import{r as n,c as t,h as o}from"./p-3ca5b6f4.js";import{c as e}from"./p-1521d319.js";import{c as s}from"./p-c87b4d11.js";import"./p-86133aa5.js";const i="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\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\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\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  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.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: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.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: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\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: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";const r=class{constructor(o){n(this,o);this.dsoCountChange=t(this,"dsoCountChange",7);this.dsoSelectedChange=t(this,"dsoSelectedChange",7);this.manualInputWrapperElement=undefined;this.manualCount=undefined;this.label=undefined;this.sublabel=undefined;this.count=undefined;this.min=undefined;this.max=undefined;this.checked=false;this.disabled=false;this.manual=true}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}componentDidRender(){var n;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=e(this.manualInputWrapperElement,{escapeDeactivates:true,setReturnFocus:false,clickOutsideDeactivates:n=>{this.setCount(n);return true},onDeactivate:()=>this.stopManualCountInput(),onPostDeactivate:()=>{var n;return(n=this.manualInputButtonElement)===null||n===void 0?void 0:n.focus()}}).activate()}else if(this.manualCount===undefined&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}disconnectedCallback(){var n;(n=this.trap)===null||n===void 0?void 0:n.deactivate()}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,t){if(typeof this.count==="number"){const o=t==="increment"?this.count+1:this.count-1;if(this.isNewCountValid(o)===false){return}this.dsoCountChange.emit({originalEvent:n,count:o})}}setCount(n){n.preventDefault();if(typeof this.manualCount==="number"&&this.isNewCountValid(this.manualCount)){this.dsoCountChange.emit({originalEvent:n,count:this.manualCount});this.stopManualCountInput()}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}startManualCountInput(){this.manualCount=this.count}stopManualCountInput(){this.manualCount=undefined}isNewCountValid(n){if(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max))){return false}return true}render(){const n=this.manualCount===undefined;const t=this.checked||this.count!==undefined&&this.count>0;return o("div",{class:s(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{class:s(["dso-list-button",{"dso-selected":t,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{class:"dso-selectable"},o("input",{id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled,"aria-label":this.label}),o("label",{htmlFor:"dso-list-button-checkbox"},this.label)),this.sublabel&&o("span",{class:"dso-sublabel"},this.sublabel),o("slot",{name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{icon:"minus-circle"}),o("span",{class:"sr-only"},"Aantal verlagen")),o("div",{class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&o("input",{class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),o("form",{onSubmit:n=>this.setCount(n)},o("div",{ref:n=>this.manualInputWrapperElement=n},o("input",{class:s("form-control",{hidden:n}),type:"number","aria-label":"Aantal",value:this.manualCount,min:this.min,max:this.max,onInput:n=>this.handleOnChange(n)})),this.manual===true&&o("button",{class:s("dso-manual-input-button",{"sr-only":!n}),type:!n?"submit":"button",disabled:this.disabled,onClick:()=>n&&this.startManualCountInput()},n?o("span",{class:"sr-only"},"Handmatig aantal invullen"):o("span",{class:"sr-only"},"Zet waarde")))),n&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{icon:"plus-circle"}),o("span",{class:"sr-only"},"Aantal verhogen"))))}static get watchers(){return{manual:["watchManualCallback"]}}};r.style=i;export{r as dso_list_button};
-//# sourceMappingURL=p-d37a6c95.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,c as s,h as t,F as l,f as o,a as c}from"./p-3ca5b6f4.js";import{c as a}from"./p-c87b4d11.js";const i=":host{display:block;background-color:#f2f2f2;color:#000;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host(:not([active]):not([fixed])){display:none}button{-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}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::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}";const d=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7);this.fixed=undefined;this.active=undefined}render(){return t(l,null,t("slot",null),!this.fixed&&t("button",{type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{icon:"times"}),t("span",{class:"sr-only"},"Sluiten")))}};d.style=i;function n(){return Math.random().toString(16).slice(-4)}function b(e){return`${e}-${n()}${n()}-${n()}-${n()}-${n()}-${n()}${n()}${n()}`}const r='.sc-dso-selectable-h{display:block;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;margin-inline:-32px;min-height:24px;padding-inline:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}';const p=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.fallbackIdentifier=b("DsoSelectable");this.type=undefined;this.identifier=undefined;this.name=undefined;this.value=undefined;this.invalid=undefined;this.describedById=undefined;this.labelledById=undefined;this.disabled=undefined;this.required=undefined;this.checked=undefined;this.indeterminate=undefined;this.infoFixed=undefined;this.infoActive=false;this.keyboardFocus=false}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)||this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(l,null,t("div",{class:a("dso-selectable-container",{"has-info-button":s})},t("div",{class:a("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:e=>this.dsoChange.emit(e),onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null)),s&&t(l,null,!this.infoFixed&&t("dso-info-button",{active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active}))),s&&t("dso-info",{id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",null,t("slot",{name:"info"}))))}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return c(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};p.style=r;export{d as dso_info,p as dso_selectable};
-//# sourceMappingURL=p-f55b3647.entry.js.map

package/dist/dso-toolkit/p-f55b3647.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["infoCss","Info","render","h","Fragment","this","fixed","type","onClick","e","dsoClose","emit","icon","class","chr4","Math","random","toString","slice","createIdentifier","prefix","selectableCss","Selectable","fallbackIdentifier","toggleInfo","active","infoActive","componentDidLoad","_a","mutationObserver","disconnect","MutationObserver","forceUpdate","host","observe","childList","setIndeterminate","disconnectedCallback","input","HTMLInputElement","indeterminate","hasInfo","querySelector","clsx","keyboardFocus","id","getIdentifier","value","name","invalid","infoFixed","describedById","undefined","labelledById","disabled","required","checked","onChange","dsoChange","onBlur","onKeyUp","ref","el","htmlFor","onDsoToggle","detail","onDsoClose","identifier"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active]):not([fixed])) {\r\n  display: none;\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n  return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include selectable.root(\"dso-info\", false);\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    @include selectable.invalid();\r\n  }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n  @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n  display: inline-block;\r\n  position: relative;\r\n  padding-inline-start: units.$u4;\r\n\r\n  &.has-info-button {\r\n    padding-inline-end: units.$u4;\r\n  }\r\n\r\n  .dso-selectable-input-wrapper {\r\n    display: inline-block;\r\n    margin-inline: -#{units.$u4};\r\n    min-height: units.$u3;\r\n    padding-inline: units.$u4;\r\n\r\n    &:focus-within.dso-keyboard-focus {\r\n      @include utilities.focus-outline();\r\n    }\r\n\r\n    input[type=\"radio\"],\r\n    input[type=\"checkbox\"] {\r\n      &:focus + label::before {\r\n        @include selectable.selectableBoxShadow(\r\n          selectable.$border-width,\r\n          var(--dso-selectable-color, selectable.$valid-color)\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndso-info-button {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Element,\r\n  State,\r\n  forceUpdate,\r\n  Watch,\r\n  Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop()\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={(e) => this.dsoChange.emit(e)}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot></slot>\r\n              </label>\r\n            ) : (\r\n              <label></label>\r\n            )}\r\n          </div>\r\n          {hasInfo && (\r\n            <Fragment>\r\n              {!this.infoFixed && (\r\n                <dso-info-button\r\n                  active={this.infoActive}\r\n                  onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n                ></dso-info-button>\r\n              )}\r\n            </Fragment>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"],"mappings":"2GAAA,MAAMA,EAAU,kqB,MCOHC,EAAI,M,uGAmBf,MAAAC,GACE,OACEC,EAACC,EAAQ,KACPD,EAAA,cACEE,KAAKC,OACLH,EAAA,UAAQI,KAAK,SAASC,QAAUC,GAAMJ,KAAKK,SAASC,KAAKF,IACvDN,EAAA,YAAUS,KAAK,UACfT,EAAA,QAAMU,MAAM,WAAS,Y,sBC9BjBC,IACd,OAAOC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAC3C,C,SAMgBC,EAAiBC,GAC/B,MAAO,GAAGA,KAAUN,MAASA,OAAUA,OAAUA,OAAUA,OAAUA,MAASA,MAASA,KACzF,CCbA,MAAMO,EAAgB,4tL,MCsBTC,EAAU,M,8DA0GbjB,KAAAkB,mBAAqBJ,EAAiB,iB,oTAlBjC,M,mBAGG,K,CAShB,gBAAMK,CAAWC,GACfpB,KAAKqB,WAAaD,IAAM,MAANA,SAAM,EAANA,GAAWpB,KAAKqB,U,CASpC,gBAAAC,G,OACEC,EAAAvB,KAAKwB,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,aAEvBzB,KAAKwB,iBAAmB,IAAIE,kBAAiB,IAAMC,EAAY3B,KAAK4B,QACpE5B,KAAKwB,iBAAiBK,QAAQ7B,KAAK4B,KAAM,CACvCE,UAAW,OAGb9B,KAAK+B,kB,CAGP,oBAAAC,G,OACET,EAAAvB,KAAKwB,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,Y,CAIzB,gBAAAM,GACE,KAAM/B,KAAKiC,iBAAiBC,mBAAqBlC,KAAKE,OAAS,WAAY,CACzE,M,CAGFF,KAAKiC,MAAME,gBAAkBnC,KAAKmC,a,CAGpC,MAAAtC,G,MACE,MAAMuC,IAAYpC,KAAK4B,KAAKS,cAAc,iBAE1C,OACEvC,EAACC,EAAQ,KACPD,EAAA,OAAKU,MAAO8B,EAAK,2BAA4B,CAAE,kBAAmBF,KAChEtC,EAAA,OAAKU,MAAO8B,EAAK,+BAAgC,CAAE,qBAAsBtC,KAAKuC,iBAC5EzC,EAAA,SACEI,KAAMF,KAAKE,KACXsC,GAAIxC,KAAKyC,gBACTC,MAAO1C,KAAK0C,MACZC,KAAM3C,KAAK2C,KAAI,gBACDpB,EAAAvB,KAAK4C,WAAO,MAAArB,SAAA,SAAAA,EAAEX,WAAU,mBACpBwB,GAAWpC,KAAK6C,UAAY7C,KAAK8C,cAAgBC,UAAS,kBAC3D/C,KAAKgD,aACtBC,SAAUjD,KAAKiD,SACfC,SAAUlD,KAAKkD,SACfC,QAASnD,KAAKmD,QACdC,SAAWhD,GAAMJ,KAAKqD,UAAU/C,KAAKF,GACrCkD,OAAQ,IAAOtD,KAAKuC,cAAgB,MACpCgB,QAAS,IAAOvD,KAAKuC,cAAgB,KACrCiB,IAAMC,GAAQzD,KAAKiC,MAAQwB,KAE3BzD,KAAKgD,aACLlD,EAAA,SAAO4D,QAAS1D,KAAKyC,iBACnB3C,EAAA,cAGFA,EAAA,eAGHsC,GACCtC,EAACC,EAAQ,MACLC,KAAK6C,WACL/C,EAAA,mBACEsB,OAAQpB,KAAKqB,WACbsC,YAAcvD,GAAOJ,KAAKqB,WAAajB,EAAEwD,OAAOxC,WAMzDgB,GACCtC,EAAA,YACE0C,GAAIJ,GAAWpC,KAAK6C,UAAY7C,KAAK8C,cAAgBC,UACrD9C,MAAOD,KAAK6C,UACZzB,OAAQpB,KAAKqB,WACbwC,WAAY,IAAO7D,KAAKqB,WAAa,OAErCvB,EAAA,WACEA,EAAA,QAAM6C,KAAK,W,CAQf,aAAAF,G,MACN,OAAOlB,EAAAvB,KAAK8D,cAAU,MAAAvC,SAAA,EAAAA,EAAIvB,KAAKkB,kB"}