@dso-toolkit/core 64.0.0 → 65.0.0

package/dist/dso-toolkit/p-786f3a41.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["actionListItemCss","DsoActionListItemStyle0","ActionListItem","render","h","Host","key","class","divider","this","flowLine","warning","icon","step","itemTitle"],"sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  @include headings.base();\r\n  @include headings.h3();\r\n\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin) 1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { h, Component, ComponentInterface, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAoB,w6CAC1B,MAAAC,EAAeD,E,MCMFE,EAAc,M,oFAiBd,M,aAMD,M,aAMA,K,CAEV,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,QAASC,KAAKD,QACd,YAAaC,KAAKC,WAGpBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACRE,KAAKE,QAAUP,EAAA,YAAUQ,KAAK,mBAA+BR,EAAA,OAAKG,MAAM,oBAAoBE,KAAKI,MAClGT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACRE,KAAKK,WAAaV,EAAA,MAAAE,IAAA,4CAAKG,KAAKK,WAC7BV,EAAA,QAAAE,IAAA,+C","ignoreList":[]}
+{"version":3,"names":["actionListItemCss","DsoActionListItemStyle0","ActionListItem","render","h","Host","key","class","divider","this","flowLine","warning","icon","step","itemTitle"],"sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  @include heading.base();\r\n  @include heading.h3();\r\n\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin) 1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { h, Component, ComponentInterface, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAoB,w6CAC1B,MAAAC,EAAeD,E,MCMFE,EAAc,M,oFAiBd,M,aAMD,M,aAMA,K,CAEV,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,QAASC,KAAKD,QACd,YAAaC,KAAKC,WAGpBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACRE,KAAKE,QAAUP,EAAA,YAAUQ,KAAK,mBAA+BR,EAAA,OAAKG,MAAM,oBAAoBE,KAAKI,MAClGT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACRE,KAAKK,WAAaV,EAAA,MAAAE,IAAA,4CAAKG,KAAKK,WAC7BV,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/dist/dso-toolkit/p-7d7630d0.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,a}from"./p-b623c74b.js";import{i as r}from"./p-2d694112.js";const i="*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px}}";const s=i;const l=class{constructor(t){e(this,t);this.dsoTabSwitch=o(this,"dsoTabSwitch",7);this.emitEvent=e=>{this.dsoTabSwitch.emit({originalEvent:e,isModifiedEvent:e instanceof MouseEvent?r(e):false})};this.keyUpHandler=e=>{if(e.key===" "&&!this.disabled&&!this.active){this.emitEvent(e)}};this.clickHandler=e=>{if(this.disabled&&this.href||this.active){e.preventDefault()}else{this.emitEvent(e)}};this.active=undefined;this.disabled=undefined;this.href=undefined}async _dsoFocus(){var e;(e=this.anchorOrButtonRef)===null||e===void 0?void 0:e.focus()}render(){return this.href?t("a",Object.assign({role:"tab",href:this.href,onKeyUp:this.keyUpHandler,onClick:this.clickHandler,"aria-selected":this.active?"true":"false"},!this.active?{tabIndex:-1}:{},{ref:e=>this.anchorOrButtonRef=e}),t("slot",null)):t("button",Object.assign({role:"tab",type:"button",disabled:this.disabled,onClick:this.clickHandler,"aria-selected":this.active?"true":"false"},!this.active?{tabIndex:-1}:{},{ref:e=>this.anchorOrButtonRef=e}),t("slot",null))}get host(){return a(this)}};l.style=s;export{l as dso_tab};
+//# sourceMappingURL=p-7d7630d0.entry.js.map

package/dist/dso-toolkit/p-7d7630d0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabCss","DsoTabStyle0","Tab","this","emitEvent","e","dsoTabSwitch","emit","originalEvent","isModifiedEvent","MouseEvent","keyUpHandler","key","disabled","active","clickHandler","href","preventDefault","_dsoFocus","_a","anchorOrButtonRef","focus","render","h","Object","assign","role","onKeyUp","onClick","tabIndex","ref","element","type"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\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/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  border-color: tab-variables.$color;\r\n  // Make the list-items overlay the bottom border\r\n  margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  :host {\r\n    margin-block: 10px;\r\n  }\r\n\r\n  :host(:first-child) {\r\n    margin-block-start: 0;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    &,\r\n    &:active,\r\n    &:focus,\r\n    &:hover,\r\n    &:visited {\r\n      background-color: colors.$wit;\r\n      border: 1px solid tab-variables.$color;\r\n      border-block-end-color: colors.$wit;\r\n      color: tab-variables.$color;\r\n      cursor: default;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: tab-variables.$color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    color: tab-variables.$nav-disabled-link-color;\r\n\r\n    &:hover,\r\n    &:focus {\r\n      color: tab-variables.$nav-disabled-link-hover-color;\r\n      text-decoration: none;\r\n      cursor: scaffolding.$cursor-disabled;\r\n      background-color: transparent;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\na {\r\n  @include anchor.clean();\r\n\r\n  &:visited {\r\n    color: tab-variables.$text-color;\r\n  }\r\n}\r\n\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  display: block;\r\n  min-block-size: tab-variables.$block-size;\r\n  border: 1px solid transparent;\r\n  border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n  color: tab-variables.$text-color;\r\n  line-height: typography.$line-height-base;\r\n  padding-block: tab-variables.$block-padding;\r\n  padding-inline: tab-variables.$inline-padding;\r\n\r\n  &:hover {\r\n    border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n      tab-variables.$border-color;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    text-decoration: none;\r\n    background-color: tab-variables.$nav-link-hover-bg;\r\n  }\r\n\r\n  &:active,\r\n  &:focus,\r\n  &:hover {\r\n    background-color: tab-variables.$hover-color;\r\n    border: 1px solid transparent;\r\n    border-block-end-color: tab-variables.$color;\r\n    text-decoration: none;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      border-block-end-color: colors.$wit;\r\n    }\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border-color: colors.$wit;\r\n    border-radius: 8px;\r\n    padding-block: 18px;\r\n    padding-inline: 20px;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"wFAAA,MAAMA,EAAS,+tEACf,MAAAC,EAAeD,E,MCWFE,EAAG,M,oEAsCNC,KAAAC,UAAaC,IACnBF,KAAKG,aAAaC,KAAK,CACrBC,cAAeH,EACfI,gBAAiBJ,aAAaK,WAAaD,EAAgBJ,GAAK,OAChE,EAGIF,KAAAQ,aAAgBN,IACtB,GAAIA,EAAEO,MAAQ,MAAQT,KAAKU,WAAaV,KAAKW,OAAQ,CACnDX,KAAKC,UAAUC,E,GAIXF,KAAAY,aAAgBV,IACtB,GAAKF,KAAKU,UAAYV,KAAKa,MAASb,KAAKW,OAAQ,CAC/CT,EAAEY,gB,KACG,CACLd,KAAKC,UAAUC,E,qEAvBnB,eAAMa,G,OACJC,EAAAhB,KAAKiB,qBAAiB,MAAAD,SAAA,SAAAA,EAAEE,O,CA0B1B,MAAAC,GACE,OAAOnB,KAAKa,KACVO,EAAA,IAAAC,OAAAC,OAAA,CACEC,KAAK,MACLV,KAAMb,KAAKa,KACXW,QAASxB,KAAKQ,aACdiB,QAASzB,KAAKY,aAAY,gBACXZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAW,GAAM,GAAE,CACzCC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAA,cAGFA,EAAA,SAAAC,OAAAC,OAAA,CACEC,KAAK,MACLM,KAAK,SACLnB,SAAUV,KAAKU,SACfe,QAASzB,KAAKY,aAAY,gBACXZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAW,GAAM,GAAE,CACzCC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAA,a","ignoreList":[]}

package/dist/dso-toolkit/p-88aebd15.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,f as a,h as r,H as n,a as t}from"./p-b623c74b.js";import{i as s}from"./p-2d694112.js";const i=e=>e instanceof HTMLButtonElement||e instanceof HTMLAnchorElement||e instanceof HTMLInputElement||e.tagName.startsWith("DSO-TOGGLETIP");const d=':host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:url("./dso-icons.svg#img-download")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:url("./dso-icons.svg#img-download-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:url("./dso-icons.svg#img-external-link")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:url("./dso-icons.svg#img-external-link-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:url("./dso-icons.svg#img-call-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:url("./dso-icons.svg#img-call-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:url("./dso-icons.svg#img-email-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:url("./dso-icons.svg#img-email-scampi")}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-block-end:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-inline-end:8px}:host(:hover) .dso-card-heading a{color:#275937;text-decoration:underline}.dso-card-heading a{text-decoration:none}.heading-anchor{color:#275937;display:flex}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const c=d;const l=class{constructor(a){e(this,a);this.dsoCardClicked=o(this,"dsoCardClicked",7);this.clickable=true;this.imageShape="normal";this.href=undefined;this.mode=undefined}connectedCallback(){this.mutationObserver=new MutationObserver((()=>a(this.host)));this.mutationObserver.observe(this.host,{attributes:true,childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();delete this.mutationObserver}clickEventHandler(e){if(!(e.target instanceof HTMLElement)||!this.clickable&&!this.href){return}let o=e.target;while(o!==this.host&&o!==null){if(i(o)||o===null){return}if(o.parentNode instanceof ShadowRoot&&o.parentNode.host instanceof HTMLElement){o=o.parentNode.host}else{o=o.parentElement}}return this.dsoCardClicked.emit({originalEvent:e,isModifiedEvent:s(e)})}get selectableSlottedElement(){return this.host.querySelector("[slot='selectable']")}get imageSlottedElement(){return this.host.querySelector("[slot='image']")}get headingSlottedElement(){return this.host.querySelector("[slot='heading']")}get interactionsSlottedElement(){return this.host.querySelector("[slot='interactions']")}render(){const e=this.selectableSlottedElement!==null;const o=this.imageSlottedElement!==null;return r(n,{key:"b9cc1a47bc39e6e2011ba6412436ab855d9819cf",onClick:e=>this.clickEventHandler(e),"is-selectable":e,"has-image":o},r("div",{key:"b8a059c5b2cc2f29392e0311fcbb3a02b1b39580",class:"dso-card-selectable",hidden:!e},r("slot",{key:"304c0dad6a73ebb2ad12f7c4e0a807d53c7ca660",name:"selectable"})),r("div",{key:"3e976d9e8eb0fbc3578a8fc6f32687f97ca6fc69",class:"dso-card-image",hidden:!o},r("slot",{key:"e10f2acff35dcd3316f0cb14575d5d2e4ab86c95",name:"image"})),r("div",{key:"c7d437cc6d54eab8e9d6ad45411230498b243466",class:"dso-card-heading"},this.headingSlottedElement instanceof HTMLAnchorElement||!this.href?r("slot",{name:"heading"}):(!this.mode||!["download","extern"].includes(this.mode))&&r("a",{href:this.href,class:"heading-anchor"},r("slot",{name:"heading"}),r("dso-icon",{icon:"chevron-right"}))||this.mode==="extern"&&r("a",{href:this.href,class:"heading-anchor",target:"_blank",rel:"noopener noreferrer"},r("slot",{name:"heading"}),r("dso-icon",{icon:"external-link"}),r("span",{class:"sr-only"},"(Opent andere website in nieuw tabblad)"))||this.mode==="download"&&r("a",{href:this.href,class:"heading-anchor"},r("slot",{name:"heading"}),r("dso-icon",{icon:"download"})),this.interactionsSlottedElement!==null&&r("slot",{key:"f318d02fe89a6aa2a9377e2f32d72726c848c42f",name:"interactions"})),r("div",{key:"7b725b7edeee93b237352eff09ae2574647b9a3b",class:"dso-card-content"},r("slot",{key:"9f855efe124e2a273b1ecb465b27bc7e01ac10e9",name:"content"})))}get host(){return t(this)}};l.style=c;export{l as dso_card};
+//# sourceMappingURL=p-88aebd15.entry.js.map

package/dist/dso-toolkit/{p-8e902d74.entry.js.map → p-88aebd15.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["isInteractiveElement","element","HTMLButtonElement","HTMLAnchorElement","HTMLInputElement","tagName","startsWith","cardCss","DsoCardStyle0","Card","connectedCallback","this","mutationObserver","MutationObserver","forceUpdate","host","observe","attributes","childList","disconnectedCallback","_a","disconnect","clickEventHandler","e","target","HTMLElement","clickable","href","parentNode","ShadowRoot","parentElement","dsoCardClicked","emit","originalEvent","isModifiedEvent","selectableSlottedElement","querySelector","imageSlottedElement","headingSlottedElement","interactionsSlottedElement","render","isSelectable","hasImage","h","Host","key","onClick","class","hidden","name","mode","includes","icon","rel"],"sources":["src/utils/is-interactive-element.ts","src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n  return (\r\n    element instanceof HTMLButtonElement ||\r\n    element instanceof HTMLAnchorElement ||\r\n    element instanceof HTMLInputElement ||\r\n    element.tagName.startsWith(\"DSO-TOGGLETIP\")\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/components/card\";\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include card.root();\r\n\r\n  display: block;\r\n}\r\n\r\n:host(:hover) {\r\n  .dso-card-heading a {\r\n    color: card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n}\r\n\r\n.dso-card-heading a {\r\n  text-decoration: none;\r\n}\r\n\r\n.heading-anchor {\r\n  color: card.$heading-anchor-color;\r\n  display: flex;\r\n\r\n  &:visited {\r\n    color: card.$heading-anchor-color;\r\n  }\r\n\r\n  dso-icon {\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable.\r\n   *\r\n   * @deprecated Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor).\r\n   */\r\n  @Prop({ reflect: true })\r\n  clickable = true;\r\n\r\n  /**\r\n   * Presentation of image in header.\r\n   *  - \"normal\" (\"24 x 24\").\r\n   *  - \"wide\" (\"30 x 26\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  imageShape: ImageShape = \"normal\";\r\n\r\n  /**\r\n   * The URL to which the Card heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Display the link as an external link or a download link\r\n   *  - \"download\"\r\n   *  - \"extern\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode?: string;\r\n\r\n  /**\r\n   * Emitted when the Card is clickable and the user clicked the Card.\r\n   */\r\n  @Event()\r\n  dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || (!this.clickable && !this.href)) {\r\n      return;\r\n    }\r\n\r\n    let element: HTMLElement | null = e.target;\r\n\r\n    while (element !== this.host && element !== null) {\r\n      if (isInteractiveElement(element) || element === null) {\r\n        return;\r\n      }\r\n\r\n      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n        element = element.parentNode.host;\r\n      } else {\r\n        element = element.parentElement;\r\n      }\r\n    }\r\n\r\n    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\"[slot='selectable']\");\r\n  }\r\n\r\n  get imageSlottedElement() {\r\n    return this.host.querySelector(\"[slot='image']\");\r\n  }\r\n\r\n  get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  get interactionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='interactions']\");\r\n  }\r\n\r\n  render() {\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n    const hasImage = this.imageSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onClick={(e: MouseEvent) => this.clickEventHandler(e)} is-selectable={isSelectable} has-image={hasImage}>\r\n        <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n          <slot name=\"selectable\" />\r\n        </div>\r\n        <div class=\"dso-card-image\" hidden={!hasImage}>\r\n          <slot name=\"image\" />\r\n        </div>\r\n        <div class=\"dso-card-heading\">\r\n          {this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (\r\n            <slot name=\"heading\" />\r\n          ) : (\r\n            ((!this.mode || ![\"download\", \"extern\"].includes(this.mode)) && (\r\n              <a href={this.href} class=\"heading-anchor\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            )) ||\r\n            (this.mode === \"extern\" && (\r\n              <a href={this.href} class=\"heading-anchor\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"external-link\"></dso-icon>\r\n                <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n              </a>\r\n            )) ||\r\n            (this.mode === \"download\" && (\r\n              <a href={this.href} class=\"heading-anchor\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"download\"></dso-icon>\r\n              </a>\r\n            ))\r\n          )}\r\n          {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n        </div>\r\n        <div class=\"dso-card-content\">\r\n          <slot name=\"content\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2GAAO,MAAMA,EAAwBC,GAEjCA,aAAmBC,mBACnBD,aAAmBE,mBACnBF,aAAmBG,kBACnBH,EAAQI,QAAQC,WAAW,iBCL/B,MAAMC,EAAU,2uFAChB,MAAAC,EAAeD,E,MCWFE,EAAI,M,uFAUH,K,gBAQa,S,wCAwBzB,iBAAAC,GACEC,KAAKC,iBAAmB,IAAIC,kBAAiB,IAAMC,EAAYH,KAAKI,QAEpEJ,KAAKC,iBAAiBI,QAAQL,KAAKI,KAAM,CAAEE,WAAY,KAAMC,UAAW,M,CAG1E,oBAAAC,G,OACEC,EAAAT,KAAKC,oBAAgB,MAAAQ,SAAA,SAAAA,EAAEC,oBAEhBV,KAAKC,gB,CAGN,iBAAAU,CAAkBC,GACxB,KAAMA,EAAEC,kBAAkBC,eAAkBd,KAAKe,YAAcf,KAAKgB,KAAO,CACzE,M,CAGF,IAAI1B,EAA8BsB,EAAEC,OAEpC,MAAOvB,IAAYU,KAAKI,MAAQd,IAAY,KAAM,CAChD,GAAID,EAAqBC,IAAYA,IAAY,KAAM,CACrD,M,CAGF,GAAIA,EAAQ2B,sBAAsBC,YAAc5B,EAAQ2B,WAAWb,gBAAgBU,YAAa,CAC9FxB,EAAUA,EAAQ2B,WAAWb,I,KACxB,CACLd,EAAUA,EAAQ6B,a,EAItB,OAAOnB,KAAKoB,eAAeC,KAAK,CAAEC,cAAeV,EAAGW,gBAAiBA,EAAgBX,I,CAGvF,4BAAIY,GACF,OAAOxB,KAAKI,KAAKqB,cAAc,sB,CAGjC,uBAAIC,GACF,OAAO1B,KAAKI,KAAKqB,cAAc,iB,CAGjC,yBAAIE,GACF,OAAO3B,KAAKI,KAAKqB,cAAc,mB,CAGjC,8BAAIG,GACF,OAAO5B,KAAKI,KAAKqB,cAAc,wB,CAGjC,MAAAI,GACE,MAAMC,EAAe9B,KAAKwB,2BAA6B,KACvD,MAAMO,EAAW/B,KAAK0B,sBAAwB,KAE9C,OACEM,EAACC,EAAI,CAAAC,IAAA,2CAACC,QAAUvB,GAAkBZ,KAAKW,kBAAkBC,GAAE,gBAAiBkB,EAAY,YAAaC,GACnGC,EAAA,OAAAE,IAAA,2CAAKE,MAAM,sBAAsBC,QAASP,GACxCE,EAAA,QAAAE,IAAA,2CAAMI,KAAK,gBAEbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,iBAAiBC,QAASN,GACnCC,EAAA,QAAAE,IAAA,2CAAMI,KAAK,WAEbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,oBACRpC,KAAK2B,iCAAiCnC,oBAAsBQ,KAAKgB,KAChEgB,EAAA,QAAMM,KAAK,cAERtC,KAAKuC,OAAS,CAAC,WAAY,UAAUC,SAASxC,KAAKuC,QACpDP,EAAA,KAAGhB,KAAMhB,KAAKgB,KAAMoB,MAAM,kBACxBJ,EAAA,QAAMM,KAAK,YACXN,EAAA,YAAUS,KAAK,oBAGlBzC,KAAKuC,OAAS,UACbP,EAAA,KAAGhB,KAAMhB,KAAKgB,KAAMoB,MAAM,iBAAiBvB,OAAO,SAAS6B,IAAI,uBAC7DV,EAAA,QAAMM,KAAK,YACXN,EAAA,YAAUS,KAAK,kBACfT,EAAA,QAAMI,MAAM,WAAS,6CAGxBpC,KAAKuC,OAAS,YACbP,EAAA,KAAGhB,KAAMhB,KAAKgB,KAAMoB,MAAM,kBACxBJ,EAAA,QAAMM,KAAK,YACXN,EAAA,YAAUS,KAAK,cAIpBzC,KAAK4B,6BAA+B,MAAQI,EAAA,QAAAE,IAAA,2CAAMI,KAAK,kBAE1DN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,oBACTJ,EAAA,QAAAE,IAAA,2CAAMI,KAAK,a","ignoreList":[]}
+{"version":3,"names":["isInteractiveElement","element","HTMLButtonElement","HTMLAnchorElement","HTMLInputElement","tagName","startsWith","cardCss","DsoCardStyle0","Card","connectedCallback","this","mutationObserver","MutationObserver","forceUpdate","host","observe","attributes","childList","disconnectedCallback","_a","disconnect","clickEventHandler","e","target","HTMLElement","clickable","href","parentNode","ShadowRoot","parentElement","dsoCardClicked","emit","originalEvent","isModifiedEvent","selectableSlottedElement","querySelector","imageSlottedElement","headingSlottedElement","interactionsSlottedElement","render","isSelectable","hasImage","h","Host","key","onClick","class","hidden","name","mode","includes","icon","rel"],"sources":["src/utils/is-interactive-element.ts","src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n  return (\r\n    element instanceof HTMLButtonElement ||\r\n    element instanceof HTMLAnchorElement ||\r\n    element instanceof HTMLInputElement ||\r\n    element.tagName.startsWith(\"DSO-TOGGLETIP\")\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/components/card\";\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include card.root();\r\n\r\n  display: block;\r\n}\r\n\r\n:host(:hover) {\r\n  .dso-card-heading a {\r\n    color: card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n}\r\n\r\n.dso-card-heading a {\r\n  text-decoration: none;\r\n}\r\n\r\n.heading-anchor {\r\n  color: card.$heading-anchor-color;\r\n  display: flex;\r\n\r\n  &:visited {\r\n    color: card.$heading-anchor-color;\r\n  }\r\n\r\n  dso-icon {\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * Whether or not the Card is clickable. This is NOT a boolean attribute. Set to \"false\" to make the Card non-clickable.\r\n   *\r\n   * @deprecated Use `href` instead and `<ELEMENT_TYPE slot=\"heading\">` should NOT be of element type `a` (anchor).\r\n   */\r\n  @Prop({ reflect: true })\r\n  clickable = true;\r\n\r\n  /**\r\n   * Presentation of image in header.\r\n   *  - \"normal\" (\"24 x 24\").\r\n   *  - \"wide\" (\"30 x 26\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  imageShape: ImageShape = \"normal\";\r\n\r\n  /**\r\n   * The URL to which the Card heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Display the link as an external link or a download link\r\n   *  - \"download\"\r\n   *  - \"extern\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode?: string;\r\n\r\n  /**\r\n   * Emitted when the Card is clickable and the user clicked the Card.\r\n   */\r\n  @Event()\r\n  dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || (!this.clickable && !this.href)) {\r\n      return;\r\n    }\r\n\r\n    let element: HTMLElement | null = e.target;\r\n\r\n    while (element !== this.host && element !== null) {\r\n      if (isInteractiveElement(element) || element === null) {\r\n        return;\r\n      }\r\n\r\n      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n        element = element.parentNode.host;\r\n      } else {\r\n        element = element.parentElement;\r\n      }\r\n    }\r\n\r\n    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\"[slot='selectable']\");\r\n  }\r\n\r\n  get imageSlottedElement() {\r\n    return this.host.querySelector(\"[slot='image']\");\r\n  }\r\n\r\n  get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  get interactionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='interactions']\");\r\n  }\r\n\r\n  render() {\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n    const hasImage = this.imageSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onClick={(e: MouseEvent) => this.clickEventHandler(e)} is-selectable={isSelectable} has-image={hasImage}>\r\n        <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n          <slot name=\"selectable\" />\r\n        </div>\r\n        <div class=\"dso-card-image\" hidden={!hasImage}>\r\n          <slot name=\"image\" />\r\n        </div>\r\n        <div class=\"dso-card-heading\">\r\n          {this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (\r\n            <slot name=\"heading\" />\r\n          ) : (\r\n            ((!this.mode || ![\"download\", \"extern\"].includes(this.mode)) && (\r\n              <a href={this.href} class=\"heading-anchor\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            )) ||\r\n            (this.mode === \"extern\" && (\r\n              <a href={this.href} class=\"heading-anchor\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"external-link\"></dso-icon>\r\n                <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n              </a>\r\n            )) ||\r\n            (this.mode === \"download\" && (\r\n              <a href={this.href} class=\"heading-anchor\">\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"download\"></dso-icon>\r\n              </a>\r\n            ))\r\n          )}\r\n          {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n        </div>\r\n        <div class=\"dso-card-content\">\r\n          <slot name=\"content\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2GAAO,MAAMA,EAAwBC,GAEjCA,aAAmBC,mBACnBD,aAAmBE,mBACnBF,aAAmBG,kBACnBH,EAAQI,QAAQC,WAAW,iBCL/B,MAAMC,EAAU,8/FAChB,MAAAC,EAAeD,E,MCWFE,EAAI,M,uFAUH,K,gBAQa,S,wCAwBzB,iBAAAC,GACEC,KAAKC,iBAAmB,IAAIC,kBAAiB,IAAMC,EAAYH,KAAKI,QAEpEJ,KAAKC,iBAAiBI,QAAQL,KAAKI,KAAM,CAAEE,WAAY,KAAMC,UAAW,M,CAG1E,oBAAAC,G,OACEC,EAAAT,KAAKC,oBAAgB,MAAAQ,SAAA,SAAAA,EAAEC,oBAEhBV,KAAKC,gB,CAGN,iBAAAU,CAAkBC,GACxB,KAAMA,EAAEC,kBAAkBC,eAAkBd,KAAKe,YAAcf,KAAKgB,KAAO,CACzE,M,CAGF,IAAI1B,EAA8BsB,EAAEC,OAEpC,MAAOvB,IAAYU,KAAKI,MAAQd,IAAY,KAAM,CAChD,GAAID,EAAqBC,IAAYA,IAAY,KAAM,CACrD,M,CAGF,GAAIA,EAAQ2B,sBAAsBC,YAAc5B,EAAQ2B,WAAWb,gBAAgBU,YAAa,CAC9FxB,EAAUA,EAAQ2B,WAAWb,I,KACxB,CACLd,EAAUA,EAAQ6B,a,EAItB,OAAOnB,KAAKoB,eAAeC,KAAK,CAAEC,cAAeV,EAAGW,gBAAiBA,EAAgBX,I,CAGvF,4BAAIY,GACF,OAAOxB,KAAKI,KAAKqB,cAAc,sB,CAGjC,uBAAIC,GACF,OAAO1B,KAAKI,KAAKqB,cAAc,iB,CAGjC,yBAAIE,GACF,OAAO3B,KAAKI,KAAKqB,cAAc,mB,CAGjC,8BAAIG,GACF,OAAO5B,KAAKI,KAAKqB,cAAc,wB,CAGjC,MAAAI,GACE,MAAMC,EAAe9B,KAAKwB,2BAA6B,KACvD,MAAMO,EAAW/B,KAAK0B,sBAAwB,KAE9C,OACEM,EAACC,EAAI,CAAAC,IAAA,2CAACC,QAAUvB,GAAkBZ,KAAKW,kBAAkBC,GAAE,gBAAiBkB,EAAY,YAAaC,GACnGC,EAAA,OAAAE,IAAA,2CAAKE,MAAM,sBAAsBC,QAASP,GACxCE,EAAA,QAAAE,IAAA,2CAAMI,KAAK,gBAEbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,iBAAiBC,QAASN,GACnCC,EAAA,QAAAE,IAAA,2CAAMI,KAAK,WAEbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,oBACRpC,KAAK2B,iCAAiCnC,oBAAsBQ,KAAKgB,KAChEgB,EAAA,QAAMM,KAAK,cAERtC,KAAKuC,OAAS,CAAC,WAAY,UAAUC,SAASxC,KAAKuC,QACpDP,EAAA,KAAGhB,KAAMhB,KAAKgB,KAAMoB,MAAM,kBACxBJ,EAAA,QAAMM,KAAK,YACXN,EAAA,YAAUS,KAAK,oBAGlBzC,KAAKuC,OAAS,UACbP,EAAA,KAAGhB,KAAMhB,KAAKgB,KAAMoB,MAAM,iBAAiBvB,OAAO,SAAS6B,IAAI,uBAC7DV,EAAA,QAAMM,KAAK,YACXN,EAAA,YAAUS,KAAK,kBACfT,EAAA,QAAMI,MAAM,WAAS,6CAGxBpC,KAAKuC,OAAS,YACbP,EAAA,KAAGhB,KAAMhB,KAAKgB,KAAMoB,MAAM,kBACxBJ,EAAA,QAAMM,KAAK,YACXN,EAAA,YAAUS,KAAK,cAIpBzC,KAAK4B,6BAA+B,MAAQI,EAAA,QAAAE,IAAA,2CAAMI,KAAK,kBAE1DN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,oBACTJ,EAAA,QAAAE,IAAA,2CAAMI,KAAK,a","ignoreList":[]}

package/dist/dso-toolkit/p-892b8003.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as e,f as t,h as o,a as s}from"./p-b623c74b.js";import{c as i}from"./p-808a98bc.js";import{c as r}from"./p-8a1a6e56.js";import"./p-1dbcaeef.js";const d="*,\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  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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 {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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  inline-size: 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  block-size: 1.5rem;\n  text-align: center;\n  inline-size: 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}\n.dso-button-group.dso-disabled > * {\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-inline-start-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}\n.dso-button-group > .dso-input-number {\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 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: #d7e7ce;\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}\n.dso-button-group > *.dso-selected + .dso-input-number {\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: #d7e7ce;\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}\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  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding-block: 0;\n  padding-inline: 32px 0;\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  block-size: 24px;\n  inset-inline-start: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 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-inline-start: 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  block-size: 20px;\n  inset-inline-start: 2px;\n  position: absolute;\n  inset-block-start: 2px;\n  inline-size: 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  block-size: 18px;\n  inset-inline-start: 3px;\n  inset-block-start: 3px;\n  inline-size: 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  block-size: 22px;\n  inset-inline-start: 1px;\n  inset-block-start: 1px;\n  inline-size: 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  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 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-block-start-color: transparent;\n  border-width: 0 0 3px 3px;\n  block-size: 8px;\n  transform: rotate(-45deg);\n  inline-size: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  block-size: 12px;\n  inline-size: 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  block-size: 12px;\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  inline-size: 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 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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.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 {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #d7e7ce;\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: #d7e7ce;\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}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\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-inline-end: 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 label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  inline-size: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  block-size: 24px;\n  position: absolute;\n  inset-inline-end: 15px;\n  inset-block-start: 15px;\n  inline-size: 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    inline-size: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-inline-start: 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-block-start: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  inline-size: 9ch;\n}\n\n.form-control {\n  display: block;\n  inline-size: 100%;\n  block-size: 40px;\n  padding-block: 6px;\n  padding-inline: 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  inline-size: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  position: absolute;\n  inset: 0;\n}\n\n.hidden {\n  display: none !important;\n}";const a=d;const l=class{constructor(t){n(this,t);this.dsoCountChange=e(this,"dsoCountChange",7);this.dsoSelectedChange=e(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.subcontentPrefix=undefined;this.manual=true}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}connectedCallback(){this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true})}componentDidRender(){var n,e;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=i(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}(e=this.subcontentSlot)===null||e===void 0?void 0:e.setAttribute("aria-hidden","true")}disconnectedCallback(){var n,e;(n=this.trap)===null||n===void 0?void 0:n.deactivate();(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();delete this.mutationObserver}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,e){if(typeof this.count==="number"){const t=e==="increment"?this.count+1:this.count-1;if(!this.isNewCountValid(t)){return}this.dsoCountChange.emit({originalEvent:n,count:t})}}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){return!(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max)))}render(){const n=this.manualCount===undefined;const e=this.checked||this.count!==undefined&&this.count>0;return o("div",{key:"d40fdadfac45c00b7657ff365ddfac8769c72710",class:r(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{key:"916de1d699fdb155530dfb5aa5b4b9315eb78b33",class:r(["dso-list-button",{"dso-selected":e,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{key:"cf718524bcc8bff10602d19701319522276390b6",class:"dso-selectable"},o("input",{key:"2d36b3e7a9377ff765cbfbbd19874f2db49786e4",id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam","aria-describedby":[this.sublabel&&"sublabel",this.subcontentSlot&&"description"].filter((n=>!!n)).join(" ")||null,checked:e,disabled:this.disabled}),o("label",{key:"b5997457d4260bcf7971d2e57c7cb22ba036ef17",htmlFor:"dso-list-button-checkbox"},this.label),this.subcontentSlot&&o("div",{key:"c3747912f68572b004672ae49d770037cc40ed3c",class:"sr-only",id:"description"},this.subcontentPrefix&&this.subcontentPrefix+":",o("div",{key:"85bd8620045f43ee3af685fcc9805f287b992ebd",innerHTML:this.subcontentSlot.innerHTML}))),this.sublabel&&o("span",{key:"0936df007aa982b94bd63f63d2744dc342d0ec96",class:"dso-sublabel",id:"sublabel"},this.sublabel),o("slot",{key:"4e54fda951864d13c59bbf70f9052b7aeabb6bdb",name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{key:"8bd1030c7f7e779da73c67886c6da74e59eee9e9",class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&o("button",{key:"eeaf4920e388b5315a705859832fafe6d14920e3",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{key:"60020bb171ed5b33e9850bc7472a7caa08bfbfd6",icon:"minus-circle"}),o("span",{key:"6f085b670db936d7ae44405a87d5aa04e663de8e",class:"sr-only"},"Aantal verlagen")),o("div",{key:"aeacf135c45b4b255a5399dcded381769cc5962b",class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&o("input",{key:"84dd0679203c6ff85ea858e689366fb952a9e666",class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),o("form",{key:"19b9381145862bf3893284594479ff009f37a310",onSubmit:n=>this.setCount(n)},o("div",{key:"e6bb25bd9ba9b848431e7451154ab91888f3193d",ref:n=>this.manualInputWrapperElement=n},o("input",{key:"da5757dc2be34a994e1a54ceae73e176cccb99b8",class:r("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&&o("button",{key:"cce6b85e2cbb094c7dbe9b008320758c075106d6",class:r("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",{key:"09fd129b37155929d83573123cb15fd4c072cee3",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{key:"53bc95e299e1c0af676e397382f15137016c58e7",icon:"plus-circle"}),o("span",{key:"a22ef9ead527e8ba09685fc9ec89b26661f22c7e",class:"sr-only"},"Aantal verhogen"))))}get host(){return s(this)}static get watchers(){return{manual:["watchManualCallback"]}}};l.style=a;export{l as dso_list_button};
+//# sourceMappingURL=p-892b8003.entry.js.map

package/dist/dso-toolkit/{p-78daa04d.entry.js.map → p-892b8003.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["listButtonCss","DsoListButtonStyle0","ListButton","subcontentSlot","this","host","querySelector","watchManualCallback","manual","manualCount","stopManualCountInput","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","characterData","childList","subtree","attributes","componentDidRender","undefined","manualInputWrapperElement","trap","createFocusTrap","escapeDeactivates","setReturnFocus","clickOutsideDeactivates","e","setCount","onDeactivate","onPostDeactivate","_a","manualInputButtonElement","focus","activate","deactivate","_b","setAttribute","disconnectedCallback","disconnect","handleOnChange","target","HTMLInputElement","valueAsNumber","stepValue","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","preventDefault","handleSelectClick","dsoSelectedChange","checked","startManualCountInput","min","max","Number","render","showButtonInputs","selected","h","key","class","clsx","disabled","onClick","id","type","value","name","sublabel","filter","s","join","htmlFor","label","subcontentPrefix","innerHTML","icon","tabIndex","readOnly","onSubmit","ref","element","hidden","onInput"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n  cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n  @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n  @include selectable.root(\"dso-info\");\r\n\r\n  label {\r\n    font-weight: 700;\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include list-button.root();\r\n\r\n  .dso-sublabel {\r\n    padding-inline-start: selectable.$size + units.$u1;\r\n  }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n  + .dso-list-button,\r\n  + .dso-button-group {\r\n    @include list-button.sibling();\r\n  }\r\n}\r\n\r\n.dso-input-wrapper {\r\n  position: relative;\r\n\r\n  .form-control {\r\n    inline-size: 9ch;\r\n  }\r\n}\r\n\r\n.form-control {\r\n  @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n  background-color: transparent;\r\n  border: 0;\r\n  position: absolute;\r\n  inset: 0;\r\n}\r\n\r\n.hidden {\r\n  display: none !important;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  h,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  @State()\r\n  private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n  private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n  @State()\r\n  manualCount?: number;\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Allow user to directly input a value.\r\n   *\r\n   * Set to `false` to force users to use plus/minus buttons.\r\n   */\r\n  @Prop()\r\n  manual = true;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  @Watch(\"manual\")\r\n  watchManualCallback() {\r\n    if (!this.manual && this.manualCount) {\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n        escapeDeactivates: true,\r\n        setReturnFocus: false,\r\n\r\n        clickOutsideDeactivates: (e) => {\r\n          this.setCount(e);\r\n\r\n          return true;\r\n        },\r\n        onDeactivate: () => this.stopManualCountInput(),\r\n        onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n      }).activate();\r\n    } else if (this.manualCount === undefined && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n\r\n    this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate();\r\n\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private handleOnChange({ target }: Event): void {\r\n    if (target instanceof HTMLInputElement) {\r\n      this.manualCount = target.valueAsNumber;\r\n    }\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private setCount(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.manualCount,\r\n      });\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private startManualCountInput(): void {\r\n    this.manualCount = this.count;\r\n  }\r\n\r\n  private stopManualCountInput(): void {\r\n    this.manualCount = undefined;\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const showButtonInputs = this.manualCount === undefined;\r\n\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              aria-describedby={\r\n                [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n              }\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n            {this.subcontentSlot && (\r\n              <div class=\"sr-only\" id=\"description\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n                <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.sublabel && (\r\n            <span class=\"dso-sublabel\" id=\"sublabel\">\r\n              {this.sublabel}\r\n            </span>\r\n          )}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.manualCount === undefined && this.count > 1 && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.min) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"decrement\")}\r\n              >\r\n                <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verlagen</span>\r\n              </button>\r\n            )}\r\n\r\n            <div class=\"dso-input-wrapper\">\r\n              {this.manualCount === undefined && this.count > 1 && (\r\n                <input\r\n                  class=\"dso-input-step-counter\"\r\n                  type=\"number\"\r\n                  tabIndex={-1}\r\n                  aria-label=\"Aantal\"\r\n                  value={this.count}\r\n                  readOnly\r\n                />\r\n              )}\r\n\r\n              <form onSubmit={(e) => this.setCount(e)}>\r\n                <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n                  <input\r\n                    class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n                    type=\"number\"\r\n                    aria-label=\"Aantal\"\r\n                    value={this.manualCount}\r\n                    min={this.min}\r\n                    max={this.max}\r\n                    onInput={(e) => this.handleOnChange(e)}\r\n                  />\r\n                </div>\r\n\r\n                {this.manual && (\r\n                  <button\r\n                    class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n                    type={!showButtonInputs ? \"submit\" : \"button\"}\r\n                    disabled={this.disabled}\r\n                    onClick={() => showButtonInputs && this.startManualCountInput()}\r\n                  >\r\n                    {showButtonInputs ? (\r\n                      <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n                    ) : (\r\n                      <span class=\"sr-only\">Zet waarde</span>\r\n                    )}\r\n                  </button>\r\n                )}\r\n              </form>\r\n            </div>\r\n\r\n            {showButtonInputs && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.max) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"increment\")}\r\n              >\r\n                <dso-icon icon=\"plus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verhogen</span>\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["listButtonCss","DsoListButtonStyle0","ListButton","subcontentSlot","this","host","querySelector","watchManualCallback","manual","manualCount","stopManualCountInput","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","characterData","childList","subtree","attributes","componentDidRender","undefined","manualInputWrapperElement","trap","createFocusTrap","escapeDeactivates","setReturnFocus","clickOutsideDeactivates","e","setCount","onDeactivate","onPostDeactivate","_a","manualInputButtonElement","focus","activate","deactivate","_b","setAttribute","disconnectedCallback","disconnect","handleOnChange","target","HTMLInputElement","valueAsNumber","stepValue","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","preventDefault","handleSelectClick","dsoSelectedChange","checked","startManualCountInput","min","max","Number","render","showButtonInputs","selected","h","key","class","clsx","disabled","onClick","id","type","value","name","sublabel","filter","s","join","htmlFor","label","subcontentPrefix","innerHTML","icon","tabIndex","readOnly","onSubmit","ref","element","hidden","onInput"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n  cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n  @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n  @include selectable.root(\"dso-info\");\r\n\r\n  label {\r\n    font-weight: 700;\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include list-button.root();\r\n\r\n  .dso-sublabel {\r\n    padding-inline-start: selectable.$size + units.$u1;\r\n  }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n  + .dso-list-button,\r\n  + .dso-button-group {\r\n    @include list-button.sibling();\r\n  }\r\n}\r\n\r\n.dso-input-wrapper {\r\n  position: relative;\r\n\r\n  .form-control {\r\n    inline-size: 9ch;\r\n  }\r\n}\r\n\r\n.form-control {\r\n  @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n  background-color: transparent;\r\n  border: 0;\r\n  position: absolute;\r\n  inset: 0;\r\n}\r\n\r\n.hidden {\r\n  display: none !important;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  h,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  @State()\r\n  private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n  private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n  @State()\r\n  manualCount?: number;\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Allow user to directly input a value.\r\n   *\r\n   * Set to `false` to force users to use plus/minus buttons.\r\n   */\r\n  @Prop()\r\n  manual = true;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  @Watch(\"manual\")\r\n  watchManualCallback() {\r\n    if (!this.manual && this.manualCount) {\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n        escapeDeactivates: true,\r\n        setReturnFocus: false,\r\n\r\n        clickOutsideDeactivates: (e) => {\r\n          this.setCount(e);\r\n\r\n          return true;\r\n        },\r\n        onDeactivate: () => this.stopManualCountInput(),\r\n        onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n      }).activate();\r\n    } else if (this.manualCount === undefined && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n\r\n    this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate();\r\n\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private handleOnChange({ target }: Event): void {\r\n    if (target instanceof HTMLInputElement) {\r\n      this.manualCount = target.valueAsNumber;\r\n    }\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private setCount(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.manualCount,\r\n      });\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private startManualCountInput(): void {\r\n    this.manualCount = this.count;\r\n  }\r\n\r\n  private stopManualCountInput(): void {\r\n    this.manualCount = undefined;\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const showButtonInputs = this.manualCount === undefined;\r\n\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              aria-describedby={\r\n                [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n              }\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n            {this.subcontentSlot && (\r\n              <div class=\"sr-only\" id=\"description\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n                <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.sublabel && (\r\n            <span class=\"dso-sublabel\" id=\"sublabel\">\r\n              {this.sublabel}\r\n            </span>\r\n          )}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.manualCount === undefined && this.count > 1 && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.min) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"decrement\")}\r\n              >\r\n                <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verlagen</span>\r\n              </button>\r\n            )}\r\n\r\n            <div class=\"dso-input-wrapper\">\r\n              {this.manualCount === undefined && this.count > 1 && (\r\n                <input\r\n                  class=\"dso-input-step-counter\"\r\n                  type=\"number\"\r\n                  tabIndex={-1}\r\n                  aria-label=\"Aantal\"\r\n                  value={this.count}\r\n                  readOnly\r\n                />\r\n              )}\r\n\r\n              <form onSubmit={(e) => this.setCount(e)}>\r\n                <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n                  <input\r\n                    class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n                    type=\"number\"\r\n                    aria-label=\"Aantal\"\r\n                    value={this.manualCount}\r\n                    min={this.min}\r\n                    max={this.max}\r\n                    onInput={(e) => this.handleOnChange(e)}\r\n                  />\r\n                </div>\r\n\r\n                {this.manual && (\r\n                  <button\r\n                    class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n                    type={!showButtonInputs ? \"submit\" : \"button\"}\r\n                    disabled={this.disabled}\r\n                    onClick={() => showButtonInputs && this.startManualCountInput()}\r\n                  >\r\n                    {showButtonInputs ? (\r\n                      <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n                    ) : (\r\n                      <span class=\"sr-only\">Zet waarde</span>\r\n                    )}\r\n                  </button>\r\n                )}\r\n              </form>\r\n            </div>\r\n\r\n            {showButtonInputs && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.max) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"increment\")}\r\n              >\r\n                <dso-icon icon=\"plus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verhogen</span>\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-9772e3b6.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as e,h as o,F as r,a as t,H as a}from"./p-b623c74b.js";import{A as s}from"./p-ae8b8810.js";import{w as i,A as d,a as l}from"./p-00caab3b.js";const c='a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:url("./dso-icons.svg#img-download")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:url("./dso-icons.svg#img-download-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:url("./dso-icons.svg#img-external-link")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:url("./dso-icons.svg#img-external-link-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:url("./dso-icons.svg#img-call-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:url("./dso-icons.svg#img-call-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:url("./dso-icons.svg#img-email-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:url("./dso-icons.svg#img-email-scampi")}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}:host([wijzigactie=voegtoe]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}:host([wijzigactie=voegtoe]) a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}:host([wijzigactie=voegtoe]) a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}:host([wijzigactie=verwijder]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}:host([wijzigactie=verwijder]) a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}:host([wijzigactie=verwijder]) a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}:host([wijzigactie=verwijder]){text-decoration:line-through}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}';const b=c;const g=class{constructor(o){n(this,o);this.dsoActiveChange=e(this,"dsoActiveChange",7);this.watcher=i(this.host);this.wijzigactie=undefined;this.active=undefined;this.gewijzigdeLocatie=undefined;this.locatieNoemer=undefined}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const n=this.watcher.hasSymbool();return o(s,{key:"662684126533447bdee1394221937203261601be",symbol:n?o(d,null):undefined,active:this.active,dsoActiveChange:this.dsoActiveChange,title:o(r,null,o("span",{class:"content"},o("dso-renvooi",{value:this.locatieNoemer})),this.gewijzigdeLocatie&&o(l,null))})}get host(){return t(this)}};g.style=b;var f=undefined&&undefined.__rest||function(n,e){var o={};for(var r in n)if(Object.prototype.hasOwnProperty.call(n,r)&&e.indexOf(r)<0)o[r]=n[r];if(n!=null&&typeof Object.getOwnPropertySymbols==="function")for(var t=0,r=Object.getOwnPropertySymbols(n);t<r.length;t++){if(e.indexOf(r[t])<0&&Object.prototype.propertyIsEnumerable.call(n,r[t]))o[r[t]]=n[r[t]]}return o};const h=(n,e)=>{var{heading:r}=n,t=f(n,["heading"]);switch(r){default:case"h2":return o("h2",Object.assign({},t),e);case"h3":return o("h3",Object.assign({},t),e);case"h4":return o("h4",Object.assign({},t),e);case"h5":return o("h5",Object.assign({},t),e);case"h6":return o("h6",Object.assign({},t),e)}};const y="button {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary dso-icon,\na.dso-primary svg.di,\nbutton.dso-primary dso-icon,\nbutton.dso-primary svg.di,\nlabel.dso-primary dso-icon,\nlabel.dso-primary svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\na.dso-primary span + dso-icon,\na.dso-primary span + svg.di,\nbutton.dso-primary span + dso-icon,\nbutton.dso-primary span + svg.di,\nlabel.dso-primary span + dso-icon,\nlabel.dso-primary span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.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: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.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: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./dso-icons.svg#img-download-wit\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./dso-icons.svg#img-external-link-wit\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary dso-icon,\na.dso-secondary svg.di,\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di,\nlabel.dso-secondary dso-icon,\nlabel.dso-secondary svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\na.dso-secondary span + dso-icon,\na.dso-secondary span + svg.di,\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di,\nlabel.dso-secondary span + dso-icon,\nlabel.dso-secondary span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./dso-icons.svg#img-download\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: url(\"./dso-icons.svg#img-download-wit\");\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-wit\");\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n  outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n  vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  position: relative;\n  inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./dso-icons.svg#img-download\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n  background-image: url(\"./dso-icons.svg#img-download-scampi\");\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-scampi\");\n}\n\na.dso-primary {\n  text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n  color: #fff;\n}\na.dso-secondary {\n  text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n  color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n  color: #39870c;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-inline-start: 16px;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n:host {\n  display: block;\n  --depth: var(--a, 0);\n}\n\n:host([not-collapsible]:where([wijzigactie=verwijder], [wijzigactie=voegtoe])) {\n  padding-inline-start: 8px;\n  margin-inline-end: 8px;\n}\n\n:host(:where([wijzigactie=verwijder], [wijzigactie=voegtoe])),\n:host(:where([wijzigactie=nieuweContainer], [wijzigactie=verwijderContainer])) .heading-container {\n  padding-block-start: 4px;\n  padding-block-end: 4px;\n}\n\n:host([wijzigactie=verwijderContainer]) .heading-container,\n:host(:where([wijzigactie=verwijder])) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #f5d8dc;\n  border-color: #f5d8dc;\n  color: #191919;\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:is(.download, .download:hover, .download:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:is(.download, .download:hover, .download:focus-visible) {\n  background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:is(.extern, .extern:hover, .extern:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\n:host([wijzigactie=verwijderContainer]) .heading-container,\n:host(:where([wijzigactie=verwijder])) {\n  text-decoration: line-through;\n}\n\n:host([wijzigactie=nieuweContainer]) .heading-container,\n:host([wijzigactie=voegtoe]) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e4f1d4;\n  border-color: #e4f1d4;\n  color: #191919;\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:is(.download, .download:hover, .download:focus-visible),\n:host([wijzigactie=voegtoe]) a:is(.download, .download:hover, .download:focus-visible) {\n  background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:is(.extern, .extern:hover, .extern:focus-visible),\n:host([wijzigactie=voegtoe]) a:is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n:host([wijzigactie=voegtoe]) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n:host([wijzigactie=voegtoe]) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\n:host([wijzigactie=nieuweContainer]) .heading-container,\n:host([wijzigactie=voegtoe]) {\n  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\n\n:host([filtered]) {\n  position: relative;\n}\n:host([filtered])::before {\n  content: \"\";\n  inset-inline-start: -3px;\n  position: absolute;\n  display: block;\n  inline-size: 3px;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  background-color: #6ca4d9;\n}\n\n:host([open]) .heading-container {\n  margin-block-end: 8px;\n}\n\n.recursive-toggle,\n.toggle-button {\n  border: 0;\n  padding: 0;\n  background: 0;\n  color: #275937;\n}\n\n.heading-element {\n  align-items: start;\n  display: flex;\n  font-size: 1rem;\n  color: #275937;\n  margin: 0;\n}\n.heading-element > * {\n  vertical-align: middle;\n}\n\n:host([not-collapsible]) .heading-container {\n  margin-block-end: 0;\n}\n:host([not-collapsible]) .editaction-label {\n  margin-inline-start: 0;\n}\n:host([not-collapsible]) .heading-element {\n  color: #000;\n}\n\n:host(:not([not-collapsible])) .heading-element {\n  cursor: pointer;\n}\n:host(:not([not-collapsible])) .heading-element:hover, :host(:not([not-collapsible])) .heading-element:focus-visible {\n  color: var(--link-hover-color);\n  text-decoration: underline;\n}\n:host(:not([not-collapsible])) .heading-element:active {\n  text-decoration: none;\n}\n:host(:not([not-collapsible])) .editaction-label {\n  margin-inline-start: 24px;\n}\n\n.addons {\n  margin-inline-start: auto;\n  display: flex;\n  gap: 8px;\n}\n\n.heading {\n  display: flex;\n  align-items: start;\n  gap: 8px;\n}\n\n:host([type=ARTIKEL]) .heading-element,\n:host([type=ARTIKEL]) .toggle-button {\n  color: #000;\n}\n\n.editaction-label {\n  font-style: italic;\n  margin-inline-start: 8px;\n}\n\n.content,\n.heading-container {\n  padding-inline-end: 8px;\n}";const p=y;const m={nieuweContainer:"Toegevoegd",verwijder:"Verwijderd",verwijderContainer:"Verwijderd",voegtoe:"Toegevoegd"};const u=class{constructor(o){n(this,o);this.dsoRecursiveToggle=e(this,"dsoRecursiveToggle",3);this.dsoOpenToggle=e(this,"dsoOpenToggle",3);this.dsoOzonContentAnchorClick=e(this,"dsoOzonContentAnchorClick",3);this.dsoAnnotationToggle=e(this,"dsoAnnotationToggle",3);this.dsoMarkItemHighlight=e(this,"dsoMarkItemHighlight",3);this.handleHeadingClick=n=>{if(this.type!=="LID"){this.dsoOpenToggle.emit({originalEvent:n,open:!this.open})}};this.handleOzonContentAnchorClick=n=>{this.dsoOzonContentAnchorClick.emit({originalEvent:n,ozonContentAnchorClick:n.detail})};this.handleRecursiveToggleClick=n=>{this.dsoRecursiveToggle.emit({originalEvent:n,current:this.recursiveToggle,next:this.recursiveToggle!==true})};this.heading="h2";this.label=undefined;this.nummer=undefined;this.opschrift=undefined;this.inhoud=undefined;this.open=false;this.filtered=false;this.notApplicable=false;this.genesteOntwerpInformatie=false;this.bevatOntwerpInformatie=false;this.annotated=false;this.gereserveerd=false;this.vervallen=false;this.openAnnotation=false;this.alternativeTitle=undefined;this.type=undefined;this.wijzigactie=undefined;this.mark=undefined;this.recursiveToggle=undefined}get wijzigactieLabel(){return this.wijzigactie&&m[this.wijzigactie]}suffix(){if(this.vervallen){return"vervallen"}if(this.gereserveerd){return"gereserveerd"}return undefined}render(){const n=this.suffix();const e=!!((this.label||this.nummer||this.opschrift||this.alternativeTitle)&&this.type!=="LID");const t=!!(this.wijzigactie||e||this.label||this.nummer||this.opschrift||this.alternativeTitle||this.bevatOntwerpInformatie||this.annotated);return o(a,{key:"d9fbf327a2334fa789aca4e287edb2a72b7a143c","not-collapsible":!e},t&&o("div",{key:"be06c84763a0ebeb4b737b35199143e3dfd2df69",class:"heading-container",part:"_heading-container"},this.wijzigactie&&o("span",{key:"a49b41ed8dedf72c8e7c4d2ca6a7ad4b74896d2f",class:"editaction-label"},this.wijzigactieLabel,":"),o("div",{key:"6c527436ab28110f2a567f5324f645ccadd7b2af",class:"heading"},o(h,{key:"af14361336a0bec3938f6fdbef68486c0f665839",heading:this.heading,class:"heading-element",onClick:this.handleHeadingClick},e&&o("button",{key:"ec14fa46b5523db43ecf2a0f5872f683b15c3044",type:"button",class:"toggle-button","aria-describedby":"heading-title","aria-expanded":this.open.toString()},o("dso-icon",{key:"530c11c39efb69202d495013a16d08203dc2a47a",icon:this.open?"chevron-down":"chevron-right"}),o("span",{key:"526ab6032c2882649ff40b2a6a167b1bba5b0ce0",class:"sr-only"},this.open?"Invouwen":"Uitvouwen")),o("div",{key:"11d2b4d495a0fbdbf1aced54151382ac9e3aa72b",id:"heading-title"},this.notApplicable&&o("span",{key:"4e5cc5d128833bf15d58a2fb30072c586ff980c2",class:"sr-only"},"Niet van toepassing:"),this.label||this.nummer||this.opschrift?o(r,null,this.label&&o(r,null," ",o("dso-ozon-content",{content:this.label,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var e;return(e=this.mark)===null||e===void 0?void 0:e.call(this,n,"label")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"label"})),inline:true})),this.nummer&&o(r,null," ",o("dso-ozon-content",{content:this.nummer,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var e;return(e=this.mark)===null||e===void 0?void 0:e.call(this,n,"nummer")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"nummer"})),inline:true})),this.opschrift&&o(r,null," ",o("dso-ozon-content",{content:this.opschrift,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var e;return(e=this.mark)===null||e===void 0?void 0:e.call(this,n,"opschrift")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"opschrift"})),inline:true}))):this.alternativeTitle,n&&o("span",{key:"e8849ad89494fbeb22dab9f94d7bb20ae8c620ab"}," - [",n,"]"))),this.recursiveToggle!==undefined&&this.open&&o("button",{key:"a607765c7d38fd1f797aad54ddbb42ef0b67721a",type:"button",class:"recursive-toggle",title:this.recursiveToggle===true?"Verberg alles":"Toon alles",onClick:this.handleRecursiveToggleClick},o("dso-icon",{key:"c28e4caab77b5f6732dfd6cb0c9188655ff13545",icon:this.recursiveToggle===true?"eye":"eye-slash"})),this.genesteOntwerpInformatie&&!this.open&&!this.bevatOntwerpInformatie&&o(r,null,o("dso-badge",{key:"c1ecb135adb76ebe9632326a33e0dfd236f78694",status:"warning","aria-describedby":"nested-draft-description"},"!"),o("dso-tooltip",{key:"d054622128abb03799737d27efb3158eb9fbfbbe",id:"nested-draft-description"},"Er is een ontwerp beschikbaar.")),(this.bevatOntwerpInformatie||this.annotated)&&o("div",{key:"4e861bf2b1e823cabb145dc2e2fd3d58278028c1",class:"addons"},this.bevatOntwerpInformatie&&o("dso-label",{key:"27fb8767f9fbe08b6b06b6651db4250e30c6979f",status:"warning",compact:true},"Ontwerp"),this.annotated&&o("button",{key:"32cabfce40e57be32a8e20fb252e15b08dbf1b69",type:"button",class:"dso-tertiary","aria-controls":this.openAnnotation?"annotations":undefined,"aria-expanded":this.openAnnotation.toString(),onClick:n=>this.dsoAnnotationToggle.emit({originalEvent:n})},o("dso-icon",{key:"4352ff84f9a43767dc1bb87b668f06719bffebc8",icon:"label"}),o("span",{key:"4ec23888f3ed5586d47bd4f08c098c2c1a8db8c5",class:"sr-only"},"Toelichting bekijken"))))),o("div",{key:"486702c5974c32bcea89085de489aaeac40e6682",class:"annotation-container",part:"_annotation-container"},this.openAnnotation&&o("dso-panel",{key:"deab6e1cd15335e369d152d0ee79880bcac0f4e2",id:"annotations",onDsoCloseClick:n=>this.dsoAnnotationToggle.emit({originalEvent:n})},o("h2",{key:"5716abe7b4ca874aedd6cb17be11e14ece1dd572",slot:"heading"},"Kenmerken en kaart"),o("slot",{key:"c583bb579656312b42e3ead86418c7bd223a343a",name:"annotations"}))),this.open&&(this.inhoud||this.gereserveerd||this.vervallen)&&o("div",{key:"57de95eda0b81b91cd1340ace254b33caa065e88",class:"content",part:"_content"},this.gereserveerd&&o("dso-alert",{key:"f16856d048e45802fc325c90d2d879d7a5fe7a0e",status:"info"},"Dit onderdeel is gereserveerd voor toekomstige toevoeging."),this.vervallen&&o("dso-alert",{key:"65354d50e70d74a0d30f1e6209f9babe93b74d95",status:"info"},"Dit onderdeel is vervallen."),this.inhoud&&o("dso-ozon-content",{key:"1e7631193b8dafdd830df9ec5d6d1bbb37eba878",content:this.inhoud,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var e;return(e=this.mark)===null||e===void 0?void 0:e.call(this,n,"inhoud")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"inhoud"}))})),o("div",{key:"ae7be71e5be0c8e8d16362a29614dc57a19b17e7",class:"children-container",part:"_children-container"},o("slot",{key:"f5dcb7db6079a27530176e06c8726fca11525bd5"})))}};u.style=p;export{g as dso_annotation_locatie,u as dso_document_component};
+//# sourceMappingURL=p-9772e3b6.entry.js.map

package/dist/dso-toolkit/{p-eaa9146c.entry.js.map → p-9772e3b6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["annotationCss","DsoAnnotationLocatieStyle0","AnnotationLocatie","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","Fragment","class","value","locatieNoemer","gewijzigdeLocatie","AnnotationGewijzigdeLocatie","Heading","_a","children","heading","props","__rest","Object","assign","documentComponentCss","DsoDocumentComponentStyle0","wijzigactieLabels","nieuweContainer","verwijder","verwijderContainer","voegtoe","DocumentComponent","handleHeadingClick","e","type","dsoOpenToggle","emit","originalEvent","open","handleOzonContentAnchorClick","dsoOzonContentAnchorClick","ozonContentAnchorClick","detail","handleRecursiveToggleClick","dsoRecursiveToggle","current","recursiveToggle","next","wijzigactieLabel","wijzigactie","suffix","vervallen","gereserveerd","collapsible","label","nummer","opschrift","alternativeTitle","showHeading","bevatOntwerpInformatie","annotated","Host","part","onClick","toString","icon","id","notApplicable","content","onDsoAnchorClick","mark","text","call","onDsoOzonContentMarkItemHighlight","dsoMarkItemHighlight","source","inline","genesteOntwerpInformatie","status","compact","openAnnotation","dsoAnnotationToggle","onDsoCloseClick","slot","name","inhoud"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx","src/components/document-component/document-component-heading.tsx","src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","src/components/document-component/document-component.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n","import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, ...props }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return <h2 {...props}>{children}</h2>;\r\n    case \"h3\":\r\n      return <h3 {...props}>{children}</h3>;\r\n    case \"h4\":\r\n      return <h4 {...props}>{children}</h4>;\r\n    case \"h5\":\r\n      return <h5 {...props}>{children}</h5>;\r\n    case \"h6\":\r\n      return <h6 {...props}>{children}</h6>;\r\n  }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n@use \"~dso-toolkit/src/components/insert\";\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  --depth: var(--a, 0);\r\n}\r\n\r\n:host([not-collapsible]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n  padding-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n  padding-block-start: units.$u1 * 0.5;\r\n  padding-block-end: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n  @include delete.root();\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([filtered]) {\r\n  position: relative;\r\n\r\n  &::before {\r\n    content: \"\";\r\n    inset-inline-start: -3px;\r\n    position: absolute;\r\n    display: block;\r\n    inline-size: 3px;\r\n    inset-block-start: 0;\r\n    inset-block-end: 0;\r\n    background-color: colors.$lichtblauw;\r\n  }\r\n}\r\n\r\n:host([open]) {\r\n  .heading-container {\r\n    margin-block-end: units.$u1;\r\n  }\r\n}\r\n\r\n.recursive-toggle,\r\n.toggle-button {\r\n  border: 0;\r\n  padding: 0;\r\n  background: 0;\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.heading-element {\r\n  align-items: start;\r\n  display: flex;\r\n  font-size: 1rem;\r\n  color: colors.$bosgroen;\r\n  margin: 0;\r\n\r\n  > * {\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n:host([not-collapsible]) {\r\n  .heading-container {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: 0;\r\n  }\r\n\r\n  .heading-element {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host(:not([not-collapsible])) {\r\n  .heading-element {\r\n    cursor: pointer;\r\n\r\n    @include anchor.pseudo();\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: document-component.$indent;\r\n  }\r\n}\r\n\r\n.addons {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n  display: flex;\r\n  align-items: start;\r\n  gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]) {\r\n  .heading-element,\r\n  .toggle-button {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n.editaction-label {\r\n  font-style: italic;\r\n  margin-inline-start: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n  padding-inline-end: units.$u1;\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  /**\r\n   * The Label XML.\r\n   */\r\n  @Prop()\r\n  label?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Nummer XML.\r\n   */\r\n  @Prop()\r\n  nummer?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Opschrift XML.\r\n   */\r\n  @Prop()\r\n  opschrift?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  inhoud?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  gereserveerd = false;\r\n\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  vervallen = false;\r\n\r\n  /**\r\n   * When the Annotation is opened, set this to true.\r\n   */\r\n  @Prop()\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop()\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: DocumentComponentMarkFunction;\r\n\r\n  /**\r\n   * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n   */\r\n  @Prop()\r\n  recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n  /**\r\n   * Emitted when the user activates the recursive toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  /**\r\n   * Emitted each time a marked item gets highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigactieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private suffix(): string | undefined {\r\n    if (this.vervallen) {\r\n      return \"vervallen\";\r\n    }\r\n\r\n    if (this.gereserveerd) {\r\n      return \"gereserveerd\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n    this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n  };\r\n\r\n  private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n    this.dsoRecursiveToggle.emit({\r\n      originalEvent: e,\r\n      current: this.recursiveToggle,\r\n      next: this.recursiveToggle !== true,\r\n    });\r\n  };\r\n\r\n  render() {\r\n    const suffix = this.suffix();\r\n    const collapsible = !!(\r\n      (this.label || this.nummer || this.opschrift || this.alternativeTitle) &&\r\n      this.type !== \"LID\"\r\n    );\r\n    const showHeading = !!(\r\n      this.wijzigactie ||\r\n      collapsible ||\r\n      this.label ||\r\n      this.nummer ||\r\n      this.opschrift ||\r\n      this.alternativeTitle ||\r\n      this.bevatOntwerpInformatie ||\r\n      this.annotated\r\n    );\r\n\r\n    return (\r\n      <Host not-collapsible={!collapsible}>\r\n        {showHeading && (\r\n          <div class=\"heading-container\" part=\"_heading-container\">\r\n            {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n            <div class=\"heading\">\r\n              <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n                {collapsible && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"toggle-button\"\r\n                    aria-describedby=\"heading-title\"\r\n                    aria-expanded={this.open.toString()}\r\n                  >\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                    <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n                  </button>\r\n                )}\r\n                <div id=\"heading-title\">\r\n                  {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n                  {this.label || this.nummer || this.opschrift ? (\r\n                    <>\r\n                      {this.label && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.label}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.nummer && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.nummer}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.opschrift && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.opschrift}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  ) : (\r\n                    this.alternativeTitle\r\n                  )}\r\n                  {suffix && <span> - [{suffix}]</span>}\r\n                </div>\r\n              </Heading>\r\n              {this.recursiveToggle !== undefined && this.open && (\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"recursive-toggle\"\r\n                  title={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n                  onClick={this.handleRecursiveToggleClick}\r\n                >\r\n                  <dso-icon icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"} />\r\n                </button>\r\n              )}\r\n              {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n                <>\r\n                  <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                    !\r\n                  </dso-badge>\r\n                  <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n                </>\r\n              )}\r\n              {(this.bevatOntwerpInformatie || this.annotated) && (\r\n                <div class=\"addons\">\r\n                  {this.bevatOntwerpInformatie && (\r\n                    <dso-label status=\"warning\" compact>\r\n                      Ontwerp\r\n                    </dso-label>\r\n                  )}\r\n                  {this.annotated && (\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"dso-tertiary\"\r\n                      aria-controls={this.openAnnotation ? \"annotations\" : undefined}\r\n                      aria-expanded={this.openAnnotation.toString()}\r\n                      onClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    >\r\n                      <dso-icon icon=\"label\"></dso-icon>\r\n                      <span class=\"sr-only\">Toelichting bekijken</span>\r\n                    </button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        <div class=\"annotation-container\" part=\"_annotation-container\">\r\n          {this.openAnnotation && (\r\n            <dso-panel id=\"annotations\" onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}>\r\n              <h2 slot=\"heading\">Annotaties</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          )}\r\n        </div>\r\n        {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (\r\n          <div class=\"content\" part=\"_content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n            {this.inhoud && (\r\n              <dso-ozon-content\r\n                content={this.inhoud}\r\n                onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n                onDsoOzonContentMarkItemHighlight={(e) =>\r\n                  this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n        <div class=\"children-container\" part=\"_children-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["annotationCss","DsoAnnotationLocatieStyle0","AnnotationLocatie","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","Fragment","class","value","locatieNoemer","gewijzigdeLocatie","AnnotationGewijzigdeLocatie","Heading","_a","children","heading","props","__rest","Object","assign","documentComponentCss","DsoDocumentComponentStyle0","wijzigactieLabels","nieuweContainer","verwijder","verwijderContainer","voegtoe","DocumentComponent","handleHeadingClick","e","type","dsoOpenToggle","emit","originalEvent","open","handleOzonContentAnchorClick","dsoOzonContentAnchorClick","ozonContentAnchorClick","detail","handleRecursiveToggleClick","dsoRecursiveToggle","current","recursiveToggle","next","wijzigactieLabel","wijzigactie","suffix","vervallen","gereserveerd","collapsible","label","nummer","opschrift","alternativeTitle","showHeading","bevatOntwerpInformatie","annotated","Host","part","onClick","toString","icon","id","notApplicable","content","onDsoAnchorClick","mark","text","call","onDsoOzonContentMarkItemHighlight","dsoMarkItemHighlight","source","inline","genesteOntwerpInformatie","status","compact","openAnnotation","dsoAnnotationToggle","onDsoCloseClick","slot","name","inhoud"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx","src/components/document-component/document-component-heading.tsx","src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","src/components/document-component/document-component.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n","import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, ...props }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return <h2 {...props}>{children}</h2>;\r\n    case \"h3\":\r\n      return <h3 {...props}>{children}</h3>;\r\n    case \"h4\":\r\n      return <h4 {...props}>{children}</h4>;\r\n    case \"h5\":\r\n      return <h5 {...props}>{children}</h5>;\r\n    case \"h6\":\r\n      return <h6 {...props}>{children}</h6>;\r\n  }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n@use \"~dso-toolkit/src/components/insert\";\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  --depth: var(--a, 0);\r\n}\r\n\r\n:host([not-collapsible]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n  padding-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n  padding-block-start: units.$u1 * 0.5;\r\n  padding-block-end: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n  @include delete.root();\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([filtered]) {\r\n  position: relative;\r\n\r\n  &::before {\r\n    content: \"\";\r\n    inset-inline-start: -3px;\r\n    position: absolute;\r\n    display: block;\r\n    inline-size: 3px;\r\n    inset-block-start: 0;\r\n    inset-block-end: 0;\r\n    background-color: colors.$lichtblauw;\r\n  }\r\n}\r\n\r\n:host([open]) {\r\n  .heading-container {\r\n    margin-block-end: units.$u1;\r\n  }\r\n}\r\n\r\n.recursive-toggle,\r\n.toggle-button {\r\n  border: 0;\r\n  padding: 0;\r\n  background: 0;\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.heading-element {\r\n  align-items: start;\r\n  display: flex;\r\n  font-size: 1rem;\r\n  color: colors.$bosgroen;\r\n  margin: 0;\r\n\r\n  > * {\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n:host([not-collapsible]) {\r\n  .heading-container {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: 0;\r\n  }\r\n\r\n  .heading-element {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host(:not([not-collapsible])) {\r\n  .heading-element {\r\n    cursor: pointer;\r\n\r\n    @include anchor.pseudo();\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: document-component.$indent;\r\n  }\r\n}\r\n\r\n.addons {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n  display: flex;\r\n  align-items: start;\r\n  gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]) {\r\n  .heading-element,\r\n  .toggle-button {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n.editaction-label {\r\n  font-style: italic;\r\n  margin-inline-start: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n  padding-inline-end: units.$u1;\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  /**\r\n   * The Label XML.\r\n   */\r\n  @Prop()\r\n  label?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Nummer XML.\r\n   */\r\n  @Prop()\r\n  nummer?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Opschrift XML.\r\n   */\r\n  @Prop()\r\n  opschrift?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  inhoud?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  gereserveerd = false;\r\n\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  vervallen = false;\r\n\r\n  /**\r\n   * When the Annotation is opened, set this to true.\r\n   */\r\n  @Prop()\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop()\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: DocumentComponentMarkFunction;\r\n\r\n  /**\r\n   * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n   */\r\n  @Prop()\r\n  recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n  /**\r\n   * Emitted when the user activates the recursive toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  /**\r\n   * Emitted each time a marked item gets highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigactieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private suffix(): string | undefined {\r\n    if (this.vervallen) {\r\n      return \"vervallen\";\r\n    }\r\n\r\n    if (this.gereserveerd) {\r\n      return \"gereserveerd\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n    this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n  };\r\n\r\n  private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n    this.dsoRecursiveToggle.emit({\r\n      originalEvent: e,\r\n      current: this.recursiveToggle,\r\n      next: this.recursiveToggle !== true,\r\n    });\r\n  };\r\n\r\n  render() {\r\n    const suffix = this.suffix();\r\n    const collapsible = !!(\r\n      (this.label || this.nummer || this.opschrift || this.alternativeTitle) &&\r\n      this.type !== \"LID\"\r\n    );\r\n    const showHeading = !!(\r\n      this.wijzigactie ||\r\n      collapsible ||\r\n      this.label ||\r\n      this.nummer ||\r\n      this.opschrift ||\r\n      this.alternativeTitle ||\r\n      this.bevatOntwerpInformatie ||\r\n      this.annotated\r\n    );\r\n\r\n    return (\r\n      <Host not-collapsible={!collapsible}>\r\n        {showHeading && (\r\n          <div class=\"heading-container\" part=\"_heading-container\">\r\n            {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n            <div class=\"heading\">\r\n              <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n                {collapsible && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"toggle-button\"\r\n                    aria-describedby=\"heading-title\"\r\n                    aria-expanded={this.open.toString()}\r\n                  >\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                    <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n                  </button>\r\n                )}\r\n                <div id=\"heading-title\">\r\n                  {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n                  {this.label || this.nummer || this.opschrift ? (\r\n                    <>\r\n                      {this.label && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.label}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.nummer && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.nummer}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.opschrift && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.opschrift}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  ) : (\r\n                    this.alternativeTitle\r\n                  )}\r\n                  {suffix && <span> - [{suffix}]</span>}\r\n                </div>\r\n              </Heading>\r\n              {this.recursiveToggle !== undefined && this.open && (\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"recursive-toggle\"\r\n                  title={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n                  onClick={this.handleRecursiveToggleClick}\r\n                >\r\n                  <dso-icon icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"} />\r\n                </button>\r\n              )}\r\n              {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n                <>\r\n                  <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                    !\r\n                  </dso-badge>\r\n                  <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n                </>\r\n              )}\r\n              {(this.bevatOntwerpInformatie || this.annotated) && (\r\n                <div class=\"addons\">\r\n                  {this.bevatOntwerpInformatie && (\r\n                    <dso-label status=\"warning\" compact>\r\n                      Ontwerp\r\n                    </dso-label>\r\n                  )}\r\n                  {this.annotated && (\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"dso-tertiary\"\r\n                      aria-controls={this.openAnnotation ? \"annotations\" : undefined}\r\n                      aria-expanded={this.openAnnotation.toString()}\r\n                      onClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    >\r\n                      <dso-icon icon=\"label\"></dso-icon>\r\n                      <span class=\"sr-only\">Toelichting bekijken</span>\r\n                    </button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        <div class=\"annotation-container\" part=\"_annotation-container\">\r\n          {this.openAnnotation && (\r\n            <dso-panel id=\"annotations\" onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}>\r\n              <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          )}\r\n        </div>\r\n        {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (\r\n          <div class=\"content\" part=\"_content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n            {this.inhoud && (\r\n              <dso-ozon-content\r\n                content={this.inhoud}\r\n                onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n                onDsoOzonContentMarkItemHighlight={(e) =>\r\n                  this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n        <div class=\"children-container\" part=\"_children-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-9af9870b.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,F as a}from"./p-b623c74b.js";const d=":host{display:block;padding:16px;border:1px solid #ccc;border-radius:4px}*,*::after,*::before{box-sizing:border-box}::slotted(dl[slot=progress]),::slotted(dl[slot=status]){--_dt-dl-margin-block-end:0;--_dt-dl-before-display:none;--_dt-dl-dt-font-weight:normal;--_dt-dl-dd-margin-block-start:0;--_dt-dl-dd-margin-inline-start:units.$u1;--_dt-dl-dd-padding-inline-start:0;--_dt-dl-dt-inline-size:auto;--_dt-dl-dd-last-margin-block-end:0;--_dt-mark-bg-color:none;--_dt-mark-padding-block:0;--_dt-mark-color:inherit;--_dt-mark-font-weight:600;display:flex !important;flex-wrap:wrap;column-gap:16px}::slotted([slot=status]){--_dt-dl-font-size:0.875rem}::slotted([slot=title]){margin-block:0 !important;font-size:1.25rem !important}::slotted([slot=actions]){display:flex}.project-item-header{display:flex;gap:16px;flex-wrap:nowrap;align-items:flex-start;margin-block-end:16px}.project-item-title{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;flex-grow:1}.project-item-actions{display:flex;flex-shrink:0;flex-wrap:nowrap}.project-item-info{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end}";const s=d;const l=class{constructor(t){e(this,t);this.label=undefined}render(){return t(a,null,t("div",{key:"7e8ce0768a4d29b8f0e0870e514fb0cb839dca70",class:"project-item-header"},t("div",{key:"5c7b01e378c96a972b1780aff226af0437569148",class:"project-item-title"},t("slot",{key:"e8af48f1b1ef400f6598b299dc424e1c068c493a",name:"title"}),this.label&&t("dso-label",{key:"7d4d6bfb4104391af6feeef50c8abfdf0112a19c",status:"danger",compact:true},this.label)),t("div",{key:"cb66a125f18494e5504a86a530a92fc07b972fd9",class:"project-item-actions"},t("slot",{key:"3fd674fe94215b163cbd741febf8a255d2e69ee6",name:"actions"}))),t("div",{key:"cee317bf938c9d5f3943f2f5df46377748963108",class:"project-item-info"},t("div",{key:"91402c05f20e06d21e219be63da508c2116beb45",class:"project-item-progress"},t("slot",{key:"60fe0fa198bd97e757ce867460ef1b0124a56129",name:"progress"})),t("div",{key:"2f2252fe030f12d87d956848aca9bd6559794fbf",class:"project-item-status"},t("slot",{key:"7e15b524f5ca6d20dc8b9550dd80162614e1c3c6",name:"status"}))))}};l.style=s;export{l as dso_project_item};
+//# sourceMappingURL=p-9af9870b.entry.js.map

package/dist/dso-toolkit/p-9af9870b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["projectItemCss","DsoProjectItemStyle0","ProjectItem","render","h","Fragment","key","class","name","this","label","status","compact"],"sources":["src/components/project-item/project-item.scss?tag=dso-project-item&encapsulation=shadow","src/components/project-item/project-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  padding: units.$u2;\r\n\r\n  border: 1px solid colors.$grijs-20;\r\n  border-radius: calc(units.$u1 / 2);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(dl[slot=\"progress\"]),\r\n::slotted(dl[slot=\"status\"]) {\r\n  --_dt-dl-margin-block-end: 0;\r\n  --_dt-dl-before-display: none;\r\n  --_dt-dl-dt-font-weight: normal;\r\n  --_dt-dl-dd-margin-block-start: 0;\r\n  --_dt-dl-dd-margin-inline-start: units.$u1;\r\n  --_dt-dl-dd-padding-inline-start: 0;\r\n  --_dt-dl-dt-inline-size: auto;\r\n  --_dt-dl-dd-last-margin-block-end: 0;\r\n\r\n  --_dt-mark-bg-color: none;\r\n  --_dt-mark-padding-block: 0;\r\n  --_dt-mark-color: inherit;\r\n  --_dt-mark-font-weight: 600;\r\n\r\n  display: flex !important;\r\n  flex-wrap: wrap;\r\n  column-gap: units.$u2;\r\n}\r\n\r\n::slotted([slot=\"status\"]) {\r\n  --_dt-dl-font-size: 0.875rem;\r\n}\r\n\r\n::slotted([slot=\"title\"]) {\r\n  margin-block: 0 !important;\r\n  font-size: 1.25rem !important;\r\n}\r\n\r\n::slotted([slot=\"actions\"]) {\r\n  display: flex;\r\n}\r\n\r\n.project-item-header {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  flex-wrap: nowrap;\r\n  align-items: flex-start;\r\n\r\n  margin-block-end: units.$u2;\r\n}\r\n\r\n.project-item-title {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  flex-grow: 1;\r\n}\r\n\r\n.project-item-actions {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n.project-item-info {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  align-items: flex-end;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-project-item\",\r\n  styleUrl: \"project-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProjectItem implements ComponentInterface {\r\n  /**\r\n   * The label of the project item.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <div class=\"project-item-header\">\r\n          <div class=\"project-item-title\">\r\n            <slot name=\"title\" />\r\n            {this.label && (\r\n              <dso-label status=\"danger\" compact>\r\n                {this.label}\r\n              </dso-label>\r\n            )}\r\n          </div>\r\n          <div class=\"project-item-actions\">\r\n            <slot name=\"actions\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"project-item-info\">\r\n          <div class=\"project-item-progress\">\r\n            <slot name=\"progress\" />\r\n          </div>\r\n          <div class=\"project-item-status\">\r\n            <slot name=\"status\" />\r\n          </div>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAiB,4oCACvB,MAAAC,EAAeD,E,MCMFE,EAAW,M,8CAOtB,MAAAC,GACE,OACEC,EAAAC,EAAA,KACED,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,UACVC,KAAKC,OACJN,EAAA,aAAAE,IAAA,2CAAWK,OAAO,SAASC,QAAO,MAC/BH,KAAKC,QAIZN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,cAGfJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,cAEbJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,a","ignoreList":[]}