@dso-toolkit/core 79.1.0 → 80.0.0

package/dist/collection/components/onboarding-tip/onboarding-tip.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-onboarding-tip\",\r\n  styleUrl: \"onboarding-tip.scss\",\r\n  shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoOnboardingTipElement;\r\n\r\n  /**\r\n   * Where to place the Onboarding Tip relative to its reference element.\r\n   */\r\n  @Prop()\r\n  placement: TooltipPlacement = \"right\";\r\n\r\n  /**\r\n   * Emitted when the user closes the Onboarding Tip.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n  @State()\r\n  ready = false;\r\n\r\n  componentDidRender() {\r\n    if (!this.host.matches(\":popover-open\")) {\r\n      this.host.showPopover();\r\n    }\r\n\r\n    if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n      this.cleanUp = positionTooltip({\r\n        referenceElement: this.referenceElement,\r\n        tipRef: this.host,\r\n        tipArrowRef: this.tipArrowRef,\r\n        placementTip: `${this.placement}-start`,\r\n        topPositionSmallViewPort: true,\r\n        halfMainAxisOffset: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.host.matches(\":popover-open\")) {\r\n      this.host.hidePopover();\r\n    }\r\n\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n        <div class=\"onboarding-tip\" role=\"tooltip\">\r\n          <div class=\"onboarding-tip-inner\">\r\n            <div class=\"onboarding-tip-content-wrapper\">\r\n              {this.headingSlottedElement !== null && (\r\n                <div class=\"onboarding-tip-content-heading\">\r\n                  <dso-icon icon=\"light-bulb\"></dso-icon>\r\n                  <slot name=\"heading\" />\r\n                </div>\r\n              )}\r\n              <dso-icon-button\r\n                class=\"dso-close\"\r\n                label=\"Sluiten\"\r\n                variant=\"tertiary\"\r\n                icon=\"times\"\r\n                onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n              />\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n          <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private tipArrowRef: HTMLDivElement | undefined;\r\n\r\n  private get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  private cleanUp: TooltipClean | undefined;\r\n\r\n  private get referenceElement(): HTMLElement | undefined {\r\n    const id = this.host.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.host.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    return reference;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-onboarding-tip\",\r\n  styleUrl: \"onboarding-tip.scss\",\r\n  shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoOnboardingTipElement;\r\n\r\n  /**\r\n   * Where to place the Onboarding Tip relative to its reference element.\r\n   */\r\n  @Prop()\r\n  placement: TooltipPlacement = \"right\";\r\n\r\n  /**\r\n   * Emitted when the user closes the Onboarding Tip.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n  @State()\r\n  ready = false;\r\n\r\n  @State()\r\n  popoverOpen = false;\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (!this.popoverOpen) {\r\n      this.host.showPopover();\r\n      this.popoverOpen = true;\r\n    }\r\n\r\n    if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n      this.cleanUp = positionTooltip({\r\n        referenceElement: this.referenceElement,\r\n        tipRef: this.host,\r\n        tipArrowRef: this.tipArrowRef,\r\n        placementTip: `${this.placement}-start`,\r\n        topPositionSmallViewPort: true,\r\n        halfMainAxisOffset: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.popoverOpen) {\r\n      this.host.hidePopover();\r\n      this.popoverOpen = false;\r\n    }\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n        <div class=\"onboarding-tip\" role=\"tooltip\">\r\n          <div class=\"onboarding-tip-inner\">\r\n            <div class=\"onboarding-tip-content-wrapper\">\r\n              {this.headingSlottedElement !== null && (\r\n                <div class=\"onboarding-tip-content-heading\">\r\n                  <dso-icon icon=\"light-bulb\"></dso-icon>\r\n                  <slot name=\"heading\" />\r\n                </div>\r\n              )}\r\n              <dso-icon-button\r\n                class=\"dso-close\"\r\n                label=\"Sluiten\"\r\n                variant=\"tertiary\"\r\n                icon=\"times\"\r\n                onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n              />\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n          <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private tipArrowRef: HTMLDivElement | undefined;\r\n\r\n  private get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  private cleanUp: TooltipClean | undefined;\r\n\r\n  private get referenceElement(): HTMLElement | undefined {\r\n    const id = this.host.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.host.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    return reference;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ozon-content/ozon-content.css

@@ -1771,6 +1771,10 @@ span[role=paragraph].editaction-add,
 .dso-ozon-lijst.editaction-add,
 .dso-ozon-lijst > ul > li.editaction-add,
 table.editaction-add {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1779,7 +1783,6 @@ table.editaction-add {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
 p.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
@@ -1822,6 +1825,10 @@ span[role=paragraph].editaction-remove,
 .dso-ozon-lijst.editaction-remove,
 .dso-ozon-lijst > ul > li.editaction-remove,
 table.editaction-remove {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1830,7 +1837,6 @@ table.editaction-remove {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 p.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
@@ -1882,6 +1888,10 @@ ins {
   text-decoration: none;
 }
 ins.new-text {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1890,7 +1900,6 @@ ins.new-text {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
 ins.new-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -1914,6 +1923,10 @@ ins.editaction-add {
   padding: 8px;
 }
 ins.editaction-add {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1922,7 +1935,6 @@ ins.editaction-add {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
 ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -1945,6 +1957,10 @@ ins.editaction-add p:last-child {
 }
 
 del.removed-text {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1953,7 +1969,6 @@ del.removed-text {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 del.removed-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -1982,6 +1997,10 @@ del.editaction-remove {
   padding: 8px;
 }
 del.editaction-remove {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1990,7 +2009,6 @@ del.editaction-remove {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -2077,6 +2095,10 @@ del.editaction-remove p:last-child {
   padding-inline: 4px;
 }
 .subtitel:has(del:not(.removed-text)) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -2085,7 +2107,6 @@ del.editaction-remove p:last-child {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 .subtitel:has(del:not(.removed-text)) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -2112,6 +2133,10 @@ del.editaction-remove p:last-child {
   text-decoration: none;
 }
 .subtitel:has(ins:not(.new-text)) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -2120,7 +2145,6 @@ del.editaction-remove p:last-child {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
 .subtitel:has(ins:not(.new-text)) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {

package/dist/collection/components/ozon-content/ozon-content.js

@@ -27,7 +27,7 @@ export class OzonContent {
             urlResolver: this.urlResolver,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '60038c9dc09d49498357f0c34dd2689e4364e793' }, transformed);
+        return h(Fragment, { key: '5c8cdc4a818606d5c22649b45ff8809ebd87117c' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/ozon-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,QAAQ,EAER,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAW/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;IALxB;QAYE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAsCf,UAAK,GAAyB,EAAE,CAAC;QAEzB,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC;KAkBH;IA3BC,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IASD,MAAM;QACJ,MAAM,OAAO,GAAuB;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACzC,qBAAqB,EAAE,IAAI,CAAC,uBAAuB;YACnD,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI;YACzC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAE5D,OAAO,EAAC,QAAQ,uDAAE,WAAW,CAAY,CAAC;IAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,YAAY,EAAE,CAAC;IAEf,OAAO,CACL;QACE,mBAAY;QACZ,4BAAqB;QACrB,sBAAe;QACf,oBAAa,CACZ,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  JSX,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\nimport {\r\n  OzonContentAnchorClickEvent,\r\n  OzonContentClickEvent,\r\n  OzonContentInputType,\r\n  OzonContentMarkFunction,\r\n  OzonContentMarkItemHighlightEvent,\r\n  OzonContentUrlResolver,\r\n} from \"./ozon-content.interfaces\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content?: OzonContentInputType;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: OzonContentMarkFunction;\r\n\r\n  /**\r\n   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n   */\r\n  @Prop()\r\n  urlResolver?: OzonContentUrlResolver;\r\n\r\n  /**\r\n   * Emitted when an interactive element is clicked, except for <IntIoRef> and <IntRef>.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<OzonContentClickEvent>;\r\n\r\n  /**\r\n   * Emitted when `<a>` that is created through <IntIoRef> or <IntRef> is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnchorClick!: EventEmitter<OzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentMarkItemHighlight!: EventEmitter<OzonContentMarkItemHighlightEvent>;\r\n\r\n  @Watch(\"content\")\r\n  contentWatcher() {\r\n    this.state = {};\r\n  }\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      inline: this.inline,\r\n      mark: this.mark,\r\n      setState: (state) => (this.state = state),\r\n      emitMarkItemHighlight: this.handleMarkItemHighlight,\r\n      emitAnchorClick: this.dsoAnchorClick.emit,\r\n      emitClick: this.dsoClick.emit,\r\n      urlResolver: this.urlResolver,\r\n    };\r\n\r\n    const transformed = mapper.transform(this.content, context);\r\n\r\n    return <Fragment>{transformed}</Fragment>;\r\n  }\r\n}\r\n\r\nconst dependencies = () => {\r\n  dependencies();\r\n\r\n  return (\r\n    <>\r\n      <dso-icon />\r\n      <dso-image-overlay />\r\n      <dso-tooltip />\r\n      <dso-table />\r\n    </>\r\n  );\r\n};\r\n"]}
+{"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,QAAQ,EAER,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAW/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;IALxB;QAYE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAsCf,UAAK,GAAyB,EAAE,CAAC;QAEzB,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC;KAkBH;IA3BC,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IASD,MAAM;QACJ,MAAM,OAAO,GAAuB;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACzC,qBAAqB,EAAE,IAAI,CAAC,uBAAuB;YACnD,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI;YACzC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAE5D,OAAO,EAAC,QAAQ,uDAAE,WAAW,CAAY,CAAC;IAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,YAAY,EAAE,CAAC;IAEf,OAAO,CACL,EAAC,QAAQ;QACP,mBAAY;QACZ,4BAAqB;QACrB,sBAAe;QACf,oBAAa,CACJ,CACZ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  JSX,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\nimport {\r\n  OzonContentAnchorClickEvent,\r\n  OzonContentClickEvent,\r\n  OzonContentInputType,\r\n  OzonContentMarkFunction,\r\n  OzonContentMarkItemHighlightEvent,\r\n  OzonContentUrlResolver,\r\n} from \"./ozon-content.interfaces\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content?: OzonContentInputType;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: OzonContentMarkFunction;\r\n\r\n  /**\r\n   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n   */\r\n  @Prop()\r\n  urlResolver?: OzonContentUrlResolver;\r\n\r\n  /**\r\n   * Emitted when an interactive element is clicked, except for <IntIoRef> and <IntRef>.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<OzonContentClickEvent>;\r\n\r\n  /**\r\n   * Emitted when `<a>` that is created through <IntIoRef> or <IntRef> is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnchorClick!: EventEmitter<OzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentMarkItemHighlight!: EventEmitter<OzonContentMarkItemHighlightEvent>;\r\n\r\n  @Watch(\"content\")\r\n  contentWatcher() {\r\n    this.state = {};\r\n  }\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      inline: this.inline,\r\n      mark: this.mark,\r\n      setState: (state) => (this.state = state),\r\n      emitMarkItemHighlight: this.handleMarkItemHighlight,\r\n      emitAnchorClick: this.dsoAnchorClick.emit,\r\n      emitClick: this.dsoClick.emit,\r\n      urlResolver: this.urlResolver,\r\n    };\r\n\r\n    const transformed = mapper.transform(this.content, context);\r\n\r\n    return <Fragment>{transformed}</Fragment>;\r\n  }\r\n}\r\n\r\nconst dependencies = () => {\r\n  dependencies();\r\n\r\n  return (\r\n    <Fragment>\r\n      <dso-icon />\r\n      <dso-image-overlay />\r\n      <dso-tooltip />\r\n      <dso-table />\r\n    </Fragment>\r\n  );\r\n};\r\n"]}

package/dist/collection/components/panel/panel.css

@@ -22,8 +22,13 @@
   border-block-end: 1px solid #b2b2b2;
   border-start-start-radius: 4px;
   border-start-end-radius: 4px;
+  border-color: #b2b2b2;
 }
 .panel-heading {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -32,7 +37,6 @@
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e5e5e5;
-  border-color: #b2b2b2;
   color: #191919;
 }
 .panel-heading a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {

package/dist/collection/components/plekinfo-card/plekinfo-card.css

@@ -2,6 +2,10 @@ ins {
   text-decoration: none;
 }
 ins {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -10,7 +14,6 @@ ins {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
 ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -30,6 +33,10 @@ ins {
 }
 
 del {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -38,7 +45,6 @@ del {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {

package/dist/collection/components/plekinfo-card/plekinfo-card.js

@@ -50,7 +50,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '332ec131f42579005a42d89342a9b32e86a6997d', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'e16ee664be89ae2ced9dced43cf6146c45b9c474', wijzigactie: this.wijzigactie }, h("div", { key: '3ebc696f26ef762a8b04f24c4362a234585fb71e', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '4ab459813050641dbdebe28928f1b2ea75667875', name: "symbol" })), h("div", { key: '317c27f7263bb7ecb4f35c3089e1f7f190f3699b', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '493f6bc69e167c46e874fae15ad596d5694314ff', name: "meta" }), this.interaction !== null && h("slot", { key: '00f7fcd4113cb464bb55221659dc6e71a89a4ad3', name: "interaction" })), h("div", { key: '3add2177328f84a7fd7067d11299124ce3fe7676', class: "dso-plekinfo-card-content" }, h("slot", { key: '9ea4620de28d349740c50e9696cf1c580a414143', name: "content" })))));
+        return (h(Host, { key: '13ba9e08589f2af374b4b605ba242eaae84637b0', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '51740725c5264415a910a89d6d6b6d7e39a1daf8', wijzigactie: this.wijzigactie }, h("div", { key: 'ee351b60947ccabc008e04d99206e0a02cdb9ebc', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '34f7f79ede2e3bbfd1717afc3e1e24d755a01bad', name: "symbol" })), h("div", { key: 'ad36a0942ca4785f49ca7fb36d6d8d300f27cfb7', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '4b9493f432b0007916a7a0bfc9b1122fdf31da40', name: "meta" }), this.interaction !== null && h("slot", { key: '838090d72c573e64c28d6415b68e21ba5d0a4d82', name: "interaction" })), h("div", { key: '1b4bf7fbf22dc4192a78f42c847ad5ddfc0ce5b1', class: "dso-plekinfo-card-content" }, h("slot", { key: '0a94e70c6cc90268999a0fbe505a134ec6b8192b', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -13,7 +13,7 @@ export class ProgressBar {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: 'fadc3ce49184687a5ed6d384477679f02c443afc', class: "progress" }, h("span", { key: '36db93b5a7a749b8435df14918caa82883a134bb', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: 'd69c3f5879bd06d518c63527489971bd2fa76749', style: { width: `${progressPercentage}` } })), h("span", { key: '032c53996cc324c5bfed12ab6e7ae6500d4600ea', id: "progress-bar-label" }, h("slot", { key: '08e1a0cba14ac76650c10a7175a9d66c2d9f999a' }))));
+        return (h("div", { key: '4307ae00f191cb11060481659a62baf2a4553306', class: "progress" }, h("span", { key: '8fbcbfb7317decfcf2ab04002399f6aad26b6b75', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '4e4d43bf4137d54e5be4c6cc6585878cf72a0864', style: { width: `${progressPercentage}` } })), h("span", { key: 'a020afe5269fa734a2f24fba89f08f727d9aa1f3', id: "progress-bar-label" }, h("slot", { key: '7ac2b7f0e0131ae95fd814f93bb880b70fee1e47' }))));
     }
     static get is() { return "dso-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: 'cc02a6ff8cf367d7906d120a4ae62485815e686a' }, h("span", { key: '58fd2984fbb74ea615e0a3b1514b13ae9074b060', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'd3420ad522e4bce941dd68eb32b2a7fe2895dfbf', icon: "spinner" })), h("span", { key: '9ae972b2459f76913f6e7726fe0bbd50142477ba', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '709a4cc259ecd2965a8ad2ef4a1d5f49fd0928d1' }, h("span", { key: 'b62d7d5dc6c0647f04378758642aef5fab187e68', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'f7c1592560dc10342194d2cfae038677b2184603', icon: "spinner" })), h("span", { key: '216752dd24a14ce4d3f726200fd8039aab4ae017', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/project-item/project-item.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: '9c322e99bb0c79734200f27a2469720413413545' }, h("div", { key: '79587c24d9ee9385b0eb9ab32d13b8e464fff378', class: "project-item-header" }, h("div", { key: '94997c3b36d9214ea3afd8c6f321c319d3dacf1a', class: "project-item-title" }, h("slot", { key: 'feaf20c56c765fa56981cb6300cb16c9617a4f40', name: "title" }), this.label && (h("dso-label", { key: 'f3adc64db8f1897177e3fb9fc052326685aba79c', status: "error", compact: true }, this.label))), h("div", { key: 'f8ef593d6b46ba091e4f2a63e118b667579fa35b', class: "project-item-actions" }, h("slot", { key: '9346c22768782faadb8e8fab102fd809d3c72f3c', name: "actions" }))), h("div", { key: 'bf9e4cfe31d1c3113955002c604803bb3cf43c2b', class: "project-item-info" }, h("div", { key: '84d56570fd648edef357ec6d6ec1acfd91155ed4', class: "project-item-progress" }, h("slot", { key: '08d2f101cddd41c37c81cf2a17b17b1b307c57a1', name: "progress" })), h("div", { key: '9551bb47c5dafe548437852044e61b6835bde9ab', class: "project-item-status" }, h("slot", { key: '591f4a199283729366b064e356a0ebf41cfdbcb7', name: "status" })))));
+        return (h(Fragment, { key: '89abe30a6d5572ce03b0bb2ede86203691de7e8b' }, h("div", { key: 'a168be00169d9aa207487b61e914268061d1df44', class: "project-item-header" }, h("div", { key: '595e7ed83a584f66a3604e829f5edc9bf269e4d4', class: "project-item-title" }, h("slot", { key: 'a60440b49e97f03eabf28f12733e8c0a6a592665', name: "title" }), this.label && (h("dso-label", { key: '74123de7f12003b24db71d79daae0457f11d0e7a', status: "error", compact: true }, this.label))), h("div", { key: '0ea2d3c8743dedce7c1ed8416c80cadded32f012', class: "project-item-actions" }, h("slot", { key: '880071c37ca6296792d82ada33989bc24ee7a109', name: "actions" }))), h("div", { key: '343143a42cfb01d7b68f522213fc1c394941bd68', class: "project-item-info" }, h("div", { key: 'a7420e4130ccbad5a99c2b337953b9732f920562', class: "project-item-progress" }, h("slot", { key: 'b400e59aaebe1b9c105950f47e76f71aa85e29cf', name: "progress" })), h("div", { key: 'e1e90f69026c7142e2204ed5f399a55919a1638f', class: "project-item-status" }, h("slot", { key: 'd15e248defe09ee612e077ab18425cb9240d92a0', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/renvooi/renvooi.css

@@ -2,6 +2,10 @@ ins {
   text-decoration: none;
 }
 ins {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -10,7 +14,6 @@ ins {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
 ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -30,6 +33,10 @@ ins {
 }
 
 del {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -38,7 +45,6 @@ del {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {

package/dist/collection/components/responsive-element/responsive-element.js

@@ -40,7 +40,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '7df8a0107dec10534a1ee68c12b0718675ca37d0', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '376cdb5c8b4b349877b7289b9bb5b0ae597620b6' })));
+        return (h(Host, { key: '2e70f03bdf53149270d5a32b5fb3cc0df91bceae', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '7c4f9ad0ed4029f81e73b681ad88b564987c1187' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js

@@ -84,9 +84,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '70329cb775aa7b06be2e6fcb1e28670f735c2467', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'ff50504d84fad62027ea67742b64ddae2be63f47', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '4ade944da89ae578f3064ead3795c0e6d8eee860', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'f20a9197a653c356520887f730ecde6ec2ccb2b0', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'ab03fe8a94df6fd40037376a054c474d75197944' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '6d613626ea227e38dbd7d4c44a46e64d0554240b' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selectable/selectable.js

@@ -49,7 +49,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'b63fc8aab21122ba98c097a4d5be66f5fe59772d' }, h("div", { key: '46a0b3c11e687d55f7e9261c412eb691b10e0d99', class: "dso-selectable-container" }, h("div", { key: '0ca4a7d7138166f0fa94ba503019eee76e332b92', class: "dso-selectable-input-wrapper" }, h("input", { key: 'c5f047f64b9da721f3d5c6c7360555b804d07c72', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '69ca6d6798246b1eb1c764d705057271b108802b', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '5639d7a239132520317431c3bacffa6d8835d47f', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '90595df3652c47edbd5a54b7e2390cce5522e622' }, h("slot", { key: 'a27932700d3b5d64735bfa2f15e51bd681ecd079', name: "info" })))), h("slot", { key: '39bbd0d46a479b9295ca3e62521a97385e85dad9', name: "options" })));
+        return (h(Fragment, { key: 'dd56e17cb9d6d5bf1fed5f905eaab8349b3aa6ad' }, h("div", { key: '1962731add825703834c580a80789a8c5e937109', class: "dso-selectable-container" }, h("div", { key: '6904486f126c03c3b4afb3d4c0c1166c770c318b', class: "dso-selectable-input-wrapper" }, h("input", { key: 'ae90c664821db922280071167b6dd95b0c3f89b8', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '66ca12db3f23a7ece38062a86b20c24d2f8142a4', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '22569a4e817dcb5ee023aa62028e62f1a1838490', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '3c07526291d148c8b51f95b042c711ada1824940' }, h("slot", { key: '977fac29ac7a8bd1e9588725f4b1d36bba215ecc', name: "info" })))), h("slot", { key: '96cea0f3a49c0a3bf05012eea94f5932941f61c9', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/skiplink/skiplink.js

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: '40c3c6d5b541f6c69b3dd1e13ab6120a13e89f08', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'fceb144a8534dfd1f53f3c63a50e723800086c9d', icon: "chevron-right" })));
+        return (h("a", { key: '47531eaf0658de3f0c424a5559214e355a8f215f', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '37e646984957bc1566d045cac8b28d6aa7401226', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -25,7 +25,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: '4877f1d9f853fb6e7c39b2d06f25ba014b75b7a1' }, h("button", Object.assign({ key: 'fffabbb04974e110d24e23699bde6c81a7d45b18', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '73bd9d98b013f196cc1d37e652250c9871443b30', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '29d3bfc04cd8f0bb111489ba81acefac17f5415c', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '9c1d228f600a1c3aeb4564f2394eed98a7ad3d35', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '51fc869908ba679612196a126b440705439a5ea6', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '2b4f8f719afccfcbf3cb41f50c86134571b7a043', htmlFor: this.identifier }, h("slot", { key: '7ec7d97745bbd326f3fd5bd6d4b097c507c4f70f' })))));
+        return (h(Fragment, { key: '282c8250fb2fdb709639c39e09276aed99e932b4' }, h("button", Object.assign({ key: '0a1ba101e6bcd72413ee60e39107e1b5b4cbf72c', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '2474f01547225c9fca4289a2b2705877f9f325c2', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '616da328248d3d8258f04c510532ff19c5f29d0c', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '689866229e09d7ee74fada5620028e01085245cc', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'd1b9fa0f8e5006b6c497a9e17671103dedcb3771', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'f15b3b4bd1612bad67678d0aec8cf375189a2716', htmlFor: this.identifier }, h("slot", { key: '291bb84d790f9a20b87cb3d727165c387087e212' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/survey-rating/survey-rating.css

@@ -102,12 +102,15 @@ label:has(input:checked) {
   font-weight: bold;
 }
 label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #b62f41;
-  border-color: #ccc;
   color: #fff;
 }
 label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -122,13 +125,19 @@ label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
 }
+label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {
+  border-color: #ccc;
+}
 label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #ce3f51;
-  border-color: #ccc;
   color: #fff;
 }
 label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -143,7 +152,14 @@ label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
 }
+label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {
+  border-color: #ccc;
+}
 label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -152,7 +168,6 @@ label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e17000;
-  border-color: #ccc;
   color: #191919;
 }
 label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -167,7 +182,14 @@ label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
+  border-color: #ccc;
+}
 label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -176,7 +198,6 @@ label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #dcd400;
-  border-color: #ccc;
   color: #191919;
 }
 label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -191,7 +212,14 @@ label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
+  border-color: #ccc;
+}
 label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -200,7 +228,6 @@ label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #79b929;
-  border-color: #ccc;
   color: #191919;
 }
 label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -215,13 +242,19 @@ label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
+  border-color: #ccc;
+}
 label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #39870c;
-  border-color: #ccc;
   color: #fff;
 }
 label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -236,13 +269,19 @@ label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
 }
+label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {
+  border-color: #ccc;
+}
 label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #275937;
-  border-color: #ccc;
   color: #fff;
 }
 label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -257,6 +296,9 @@ label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
 }
+label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {
+  border-color: #ccc;
+}
 
 button {
   -webkit-appearance: button;

package/dist/collection/components/survey-rating/survey-rating.js

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '4afde1602b2d7f15262530650451f581b3fc9f9e', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '4d1484e447fd0d556fd09127e85d5913d9aa1f1f', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '19cbf6097a3e26e9c525468d130930c7a7ef348c' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'd930003ed608626d73522dc4d7f5aeb0aae02e4d', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '7004838e50bc55da67207d235976b2240af46b0d', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '0a510fc64215eda8ddd3d29f4235c802d1fdce2f' }, "Heel moeilijk"), h("span", { key: 'd4621ecdc8e1a34e9ed4b2dcc42de74ca3a8464a' }, "Heel makkelijk")), h("div", { key: '4b9a1c49b5dbe53ef27b14d44e9db846304056db', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '18145121de6dff4b2b19b9880c7848de2d859e45', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '34c79fa59aa1ac80cfbfe3b0fdd3f194cd1326b5', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '00605046f63929e65e0827932998641c72750435' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'f52b05061d777d070ee201c95e30750df864dee4', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'f3bf8a325729b303ddd72eddbb1c8cb86174ea1a', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '9d875e1e093975030aeba48ff1487213f0eed306' }, "Heel moeilijk"), h("span", { key: '3b0c57925f2ae5c5eb14c6943cb1cd690fa612dc' }, "Heel makkelijk")), h("div", { key: '70b221cfcb90dbc569f69a2e20e2f5907c5785f2', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: '8c60b7142f98cd173391a20d75660f0ab64f0b43', type: "submit", class: "dso-secondary" }, h("span", { key: '3222b05f44e1bb8a99acc49f349a38fae0ea6917' }, "Antwoord verzenden")))));
+        })), h("button", { key: '095992b41dde35d4853f8281ad2a1af770ba424c', type: "submit", class: "dso-secondary" }, h("span", { key: '21e9730a1a6e19085c6df4ef63ab563f90fbd370' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }