@dso-toolkit/core 81.1.0 → 83.0.0

package/dist/cjs/dso-scrollable.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-scrollable.entry.cjs.js","mappings":"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","names":["debounce","h","clsx"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n  block-size: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  block-size: 100%;\r\n  max-block-size: inherit;\r\n  min-block-size: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    block-size: 100%;\r\n    max-block-size: inherit;\r\n    min-block-size: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      inset-inline-start: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      inline-size: 100%;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-start: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-end: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-scrollable.entry.cjs.js","mappings":"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","names":["debounce","h","clsx"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n  block-size: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  block-size: 100%;\r\n  max-block-size: inherit;\r\n  min-block-size: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    block-size: 100%;\r\n    max-block-size: inherit;\r\n    min-block-size: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      inset-inline-start: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      inline-size: 100%;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-start: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-end: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-scrollable.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-scrollable.entry.cjs.js","sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n  block-size: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  block-size: 100%;\r\n  max-block-size: inherit;\r\n  min-block-size: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    block-size: 100%;\r\n    max-block-size: inherit;\r\n    min-block-size: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      inset-inline-start: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      inline-size: 100%;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-start: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-end: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["debounce","h","clsx"],"mappings":"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"}
+{"version":3,"file":"dso-scrollable.entry.cjs.js","sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n  block-size: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  block-size: 100%;\r\n  max-block-size: inherit;\r\n  min-block-size: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    block-size: 100%;\r\n    max-block-size: inherit;\r\n    min-block-size: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      inset-inline-start: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      inline-size: 100%;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-start: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-end: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["debounce","h","clsx"],"mappings":"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"}

package/dist/cjs/dso-skiplink.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DvLsepiK.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
-const skiplinkCss = ":host{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:2;display:block;inline-size:100vw}*,*::after,*::before{box-sizing:border-box}a{position:absolute;inset-inline-start:50%;inset-block-start:16px;display:inline-block;inline-size:1px;block-size:1px;overflow:hidden;background-color:#fff;border-radius:2px;clip:rect(1px, 1px, 1px, 1px);color:var(--link-color);white-space:nowrap;text-decoration:none;transform:translate(-50%);box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}a:focus-visible{inline-size:auto;block-size:auto;padding:8px;clip:auto;white-space:normal;outline-offset:2px}";
+const skiplinkCss = ":host{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:2;display:block;inline-size:100vw}*,*::after,*::before{box-sizing:border-box}a{position:absolute;inset-inline-start:50%;inset-block-start:16px;display:inline-block;inline-size:1px;block-size:1px;overflow:hidden;background-color:#fff;border-radius:2px;clip-path:inset(1px);color:var(--link-color);white-space:nowrap;text-decoration:none;transform:translate(-50%);box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}a:focus-visible{inline-size:auto;block-size:auto;padding:8px;clip-path:none;white-space:normal;outline-offset:2px}";
 
 const Skiplink = class {
     constructor(hostRef) {
@@ -17,7 +17,7 @@ const Skiplink = class {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent.isModifiedEvent(e) });
     }
     render() {
-        return (index.h("a", { key: '067279ccc91e58160a8c8e32d3ef001558377ea6', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, index.h("dso-icon", { key: 'a8fb2cd1842ee9df06b661f2ab2efcf04783231f', icon: "chevron-right" })));
+        return (index.h("a", { key: '0a20014eec2f813b12bfdb187c48c6901ad616b6', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, index.h("dso-icon", { key: '10e1388497853966680fb5f71659b42ca9f911ab', icon: "chevron-right" })));
     }
 };
 Skiplink.style = skiplinkCss;

package/dist/cjs/dso-skiplink.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-skiplink.entry.cjs.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,klBAAklB;;MCWzlB,QAAQ,GAAA,MAAA;;;;;AAmBX,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YAClD;;AAGF,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAEA,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;IAG9F,MAAM,GAAA;QACJ,QACEC,gEAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,CAAA,CAAE,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAC9D,IAAI,CAAC,KAAK,EACXA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,eAAe,EAAY,CAAA,CACxC;;;;;;;","names":["isModifiedEvent","h"],"sources":["src/components/skiplink/skiplink.scss?tag=dso-skiplink&encapsulation=shadow","src/components/skiplink/skiplink.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  position: fixed;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 0;\r\n  z-index: 2;\r\n\r\n  display: block;\r\n\r\n  inline-size: 100vw;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\na {\r\n  position: absolute;\r\n  inset-inline-start: 50%;\r\n  inset-block-start: units.$u2;\r\n\r\n  display: inline-block;\r\n\r\n  inline-size: 1px;\r\n  block-size: 1px;\r\n\r\n  overflow: hidden;\r\n\r\n  background-color: colors.$wit;\r\n\r\n  border-radius: units.$focus-border-radius;\r\n\r\n  clip: rect(1px, 1px, 1px, 1px);\r\n\r\n  color: var(--link-color);\r\n  // stylelint-disable-next-line declaration-property-value-disallowed-list -- prevent wrapping\r\n  white-space: nowrap;\r\n  text-decoration: none;\r\n\r\n  transform: translate(-50%);\r\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n\r\n  &:focus-visible {\r\n    inline-size: auto;\r\n    block-size: auto;\r\n\r\n    padding: units.$u1;\r\n\r\n    clip: auto;\r\n\r\n    white-space: normal;\r\n\r\n    outline-offset: 2px;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-skiplink\",\r\n  styleUrl: \"skiplink.scss\",\r\n  shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n  /**\r\n   * The location to which the skiplink links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  to!: string | undefined;\r\n\r\n  /**\r\n   * link text\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * Emitted when the Skiplink is clicked.\r\n   */\r\n  @Event()\r\n  dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.to) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n        {this.label}\r\n        <dso-icon icon=\"chevron-right\"></dso-icon>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-skiplink.entry.cjs.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,8kBAA8kB;;MCWrlB,QAAQ,GAAA,MAAA;;;;;AAmBX,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YAClD;;AAGF,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAEA,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;IAG9F,MAAM,GAAA;QACJ,QACEC,gEAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,CAAA,CAAE,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAC9D,IAAI,CAAC,KAAK,EACXA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,eAAe,EAAY,CAAA,CACxC;;;;;;;","names":["isModifiedEvent","h"],"sources":["src/components/skiplink/skiplink.scss?tag=dso-skiplink&encapsulation=shadow","src/components/skiplink/skiplink.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  position: fixed;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 0;\r\n  z-index: 2;\r\n\r\n  display: block;\r\n\r\n  inline-size: 100vw;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\na {\r\n  position: absolute;\r\n  inset-inline-start: 50%;\r\n  inset-block-start: units.$u2;\r\n\r\n  display: inline-block;\r\n\r\n  inline-size: 1px;\r\n  block-size: 1px;\r\n\r\n  overflow: hidden;\r\n\r\n  background-color: colors.$wit;\r\n\r\n  border-radius: units.$focus-border-radius;\r\n\r\n  clip-path: inset(1px);\r\n\r\n  color: var(--link-color);\r\n  // stylelint-disable-next-line declaration-property-value-disallowed-list -- prevent wrapping\r\n  white-space: nowrap;\r\n  text-decoration: none;\r\n\r\n  transform: translate(-50%);\r\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n\r\n  &:focus-visible {\r\n    inline-size: auto;\r\n    block-size: auto;\r\n\r\n    padding: units.$u1;\r\n\r\n    clip-path: none;\r\n\r\n    white-space: normal;\r\n\r\n    outline-offset: 2px;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-skiplink\",\r\n  styleUrl: \"skiplink.scss\",\r\n  shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n  /**\r\n   * The location to which the skiplink links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  to!: string | undefined;\r\n\r\n  /**\r\n   * link text\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * Emitted when the Skiplink is clicked.\r\n   */\r\n  @Event()\r\n  dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.to) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n        {this.label}\r\n        <dso-icon icon=\"chevron-right\"></dso-icon>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-skiplink.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-skiplink.entry.cjs.js","sources":["src/components/skiplink/skiplink.scss?tag=dso-skiplink&encapsulation=shadow","src/components/skiplink/skiplink.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  position: fixed;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 0;\r\n  z-index: 2;\r\n\r\n  display: block;\r\n\r\n  inline-size: 100vw;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\na {\r\n  position: absolute;\r\n  inset-inline-start: 50%;\r\n  inset-block-start: units.$u2;\r\n\r\n  display: inline-block;\r\n\r\n  inline-size: 1px;\r\n  block-size: 1px;\r\n\r\n  overflow: hidden;\r\n\r\n  background-color: colors.$wit;\r\n\r\n  border-radius: units.$focus-border-radius;\r\n\r\n  clip: rect(1px, 1px, 1px, 1px);\r\n\r\n  color: var(--link-color);\r\n  // stylelint-disable-next-line declaration-property-value-disallowed-list -- prevent wrapping\r\n  white-space: nowrap;\r\n  text-decoration: none;\r\n\r\n  transform: translate(-50%);\r\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n\r\n  &:focus-visible {\r\n    inline-size: auto;\r\n    block-size: auto;\r\n\r\n    padding: units.$u1;\r\n\r\n    clip: auto;\r\n\r\n    white-space: normal;\r\n\r\n    outline-offset: 2px;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-skiplink\",\r\n  styleUrl: \"skiplink.scss\",\r\n  shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n  /**\r\n   * The location to which the skiplink links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  to!: string | undefined;\r\n\r\n  /**\r\n   * link text\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * Emitted when the Skiplink is clicked.\r\n   */\r\n  @Event()\r\n  dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.to) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n        {this.label}\r\n        <dso-icon icon=\"chevron-right\"></dso-icon>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"],"names":["isModifiedEvent","h"],"mappings":";;;;;AAAA,MAAM,WAAW,GAAG,klBAAklB;;MCWzlB,QAAQ,GAAA,MAAA;;;;;AAmBX,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YAClD;;AAGF,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAEA,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;IAG9F,MAAM,GAAA;QACJ,QACEC,gEAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,CAAA,CAAE,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAC9D,IAAI,CAAC,KAAK,EACXA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,eAAe,EAAY,CAAA,CACxC;;;;;;;"}
+{"version":3,"file":"dso-skiplink.entry.cjs.js","sources":["src/components/skiplink/skiplink.scss?tag=dso-skiplink&encapsulation=shadow","src/components/skiplink/skiplink.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  position: fixed;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 0;\r\n  z-index: 2;\r\n\r\n  display: block;\r\n\r\n  inline-size: 100vw;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\na {\r\n  position: absolute;\r\n  inset-inline-start: 50%;\r\n  inset-block-start: units.$u2;\r\n\r\n  display: inline-block;\r\n\r\n  inline-size: 1px;\r\n  block-size: 1px;\r\n\r\n  overflow: hidden;\r\n\r\n  background-color: colors.$wit;\r\n\r\n  border-radius: units.$focus-border-radius;\r\n\r\n  clip-path: inset(1px);\r\n\r\n  color: var(--link-color);\r\n  // stylelint-disable-next-line declaration-property-value-disallowed-list -- prevent wrapping\r\n  white-space: nowrap;\r\n  text-decoration: none;\r\n\r\n  transform: translate(-50%);\r\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n\r\n  &:focus-visible {\r\n    inline-size: auto;\r\n    block-size: auto;\r\n\r\n    padding: units.$u1;\r\n\r\n    clip-path: none;\r\n\r\n    white-space: normal;\r\n\r\n    outline-offset: 2px;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-skiplink\",\r\n  styleUrl: \"skiplink.scss\",\r\n  shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n  /**\r\n   * The location to which the skiplink links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  to!: string | undefined;\r\n\r\n  /**\r\n   * link text\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * Emitted when the Skiplink is clicked.\r\n   */\r\n  @Event()\r\n  dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.to) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n        {this.label}\r\n        <dso-icon icon=\"chevron-right\"></dso-icon>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"],"names":["isModifiedEvent","h"],"mappings":";;;;;AAAA,MAAM,WAAW,GAAG,8kBAA8kB;;MCWrlB,QAAQ,GAAA,MAAA;;;;;AAmBX,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YAClD;;AAGF,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAEA,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;IAG9F,MAAM,GAAA;QACJ,QACEC,gEAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,CAAA,CAAE,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAC9D,IAAI,CAAC,KAAK,EACXA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,eAAe,EAAY,CAAA,CACxC;;;;;;;"}

package/dist/cjs/dso-survey-rating.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DvLsepiK.js');
 
-const surveyRatingCss = ":host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\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.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #b62f41;\n  color: #fff;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #ce3f51;\n  color: #fff;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #e17000;\n  color: #191919;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #dcd400;\n  color: #191919;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #79b929;\n  color: #191919;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #39870c;\n  color: #fff;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #275937;\n  color: #fff;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  border-color: #ccc;\n}\n\nbutton {\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  margin-block-start: 16px;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\nbutton.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}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\nbutton.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}\nbutton.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small {\n  padding-block: 9px;\n}\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.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}\nbutton.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}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.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}\nbutton.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}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}";
+const surveyRatingCss = ":host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(0);\n}\n\n.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #b62f41;\n  color: #fff;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #ce3f51;\n  color: #fff;\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #e17000;\n  color: #191919;\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #dcd400;\n  color: #191919;\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #79b929;\n  color: #191919;\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #39870c;\n  color: #fff;\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  border-color: #ccc;\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #275937;\n  color: #fff;\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  border-color: #ccc;\n}\n\nbutton {\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}\nbutton.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}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\nbutton.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}\nbutton.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-extra-small {\n  padding-block: 9px;\n}\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.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}\nbutton.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}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.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}\nbutton.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}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton {\n  margin-block-start: 16px;\n}";
 
 const SurveyRating = class {
     constructor(hostRef) {
@@ -28,10 +28,10 @@ const SurveyRating = class {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (index.h("dso-panel", { key: '0f06dfed9925eabf4bd774ca129f43dd1fc40044', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, index.h("h2", { key: '2d7deb32e2346881ca97f80423be382cbab3855b', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), index.h("strong", { key: 'ebd96e00abb902df3e7e16f32744b36024c7970d' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), index.h("form", { key: '943d8178b356a20960db9755b5d998ac57c1023b', onSubmit: (e) => this.handleForm(e) }, index.h("div", { key: '02d29ea0db5bfdff94c49a7cff5ca28f16dae4db', class: "visual-rating-labels", "aria-hidden": "true" }, index.h("span", { key: '124f8ab8267d44ca06a1443eb455d5812394e9f4' }, "Heel moeilijk"), index.h("span", { key: 'a32058ae664c9e56e290e84824ec1417318bc2da' }, "Heel makkelijk")), index.h("div", { key: '8b010ece10dd4ed7e97b1c6e5d80195d3e70d656', role: "radiogroup" }, ratings.map((rating, index$1) => {
+        return (index.h("dso-panel", { key: '01a5ddb99af6a43c5c6c084b65f39c58b30ba614', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, index.h("h2", { key: 'b58dfad1fc08c8bea31ea7f56587070dc848f83c', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), index.h("strong", { key: '8db9a730003aef73678876b03030cc2a4ea796ed' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), index.h("form", { key: '2fc2e5ac490f5767ddbfed4521582fed650d16de', onSubmit: (e) => this.handleForm(e) }, index.h("div", { key: 'bd6959ff78da6abc23885c6c14db7ed86145694e', class: "visual-rating-labels", "aria-hidden": "true" }, index.h("span", { key: 'a28a329f0fa45f468d3d01963a927d021b539dae' }, "Heel moeilijk"), index.h("span", { key: 'fbf4e943cb15e4305450c7eb5c6c147ca128ddda' }, "Heel makkelijk")), index.h("div", { key: 'b84fb18bb3fe190174bda8edeac06d4954835bce', role: "radiogroup" }, ratings.map((rating, index$1) => {
             const ratingNumber = index$1 + 1;
             return (index.h(index.Fragment, null, index.h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, index.h("span", { class: "sr-only" }, rating), index.h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), index.h("button", { key: '583767e6daf55ee28da9346609644bdfa4da2bc1', type: "submit", class: "dso-secondary" }, index.h("span", { key: 'c5c8b245c1ebc8f8543f863f17ccb80300234c7e' }, "Antwoord verzenden")))));
+        })), index.h("button", { key: '99605c67dd666f2ac4425535562bf5ad8b59feac', type: "submit", class: "dso-secondary" }, index.h("span", { key: '409e8990f6a7708e8b8f0724f2284d845bb0b122' }, "Antwoord verzenden")))));
     }
 };
 SurveyRating.style = surveyRatingCss;

package/dist/cjs/dso-survey-rating.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-survey-rating.entry.cjs.js","mappings":"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","names":["h","index","Fragment"],"sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\r\n  inset-block-end: units.$u2;\r\n  inset-inline-start: units.$u2;\r\n  inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n  background-color: survey-rating-variables.$survey-rating-background-color;\r\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n  border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n  z-index: zindex.$survey-rating;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n\r\n    --panel-heading-padding-inline-start: #{units.$u1};\r\n    --panel-body-padding-inline: #{units.$u1};\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  appearance: none;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  margin-inline: 0;\r\n  margin-block: 0;\r\n  inset-block: units.$u1 0;\r\n  inset-inline: 0;\r\n  z-index: 1;\r\n}\r\n\r\nlabel {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  border-inline-end-width: 0;\r\n  padding-block-start: units.$u1;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n    block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: survey-rating-variables.$survey-rating-color-hover;\r\n  }\r\n\r\n  &:active {\r\n    background-color: survey-rating-variables.$survey-rating-color-active;\r\n  }\r\n\r\n  &:first-of-type {\r\n    border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n      survey-rating-variables.$survey-rating-border-radius;\r\n\r\n    &::before {\r\n      border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &:last-of-type {\r\n    border-inline-end-width: 1px;\r\n    border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n      survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n    &::before {\r\n      border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    block-size: units.$u1;\r\n    inline-size: 100%;\r\n    border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  }\r\n\r\n  &:has(input:checked) {\r\n    font-weight: bold;\r\n  }\r\n\r\n  @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n    $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n    $color: map.get($survey-rating, color);\r\n\r\n    &.survey-rating-#{$i} {\r\n      &::before,\r\n      &:has(input:checked) {\r\n        @include set-colors.apply($color, \"survey-rating\");\r\n\r\n        & {\r\n          border-color: survey-rating-variables.$survey-rating-border-color;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n\r\n  &.dso-secondary {\r\n    @include button.secondary($base-styling: true);\r\n  }\r\n\r\n  margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-survey-rating.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,4pzBAA4pzB;;MCSvqzB,YAAY,GAAA,MAAA;;;;;;AAef,IAAA,UAAU,CAAC,CAAQ,EAAA;QACzB,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;;AAGrF,IAAA,YAAY,CAAC,CAAQ,EAAA;AAC3B,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;QAC3C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB;AAED,QAAA,QACEA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,UAAU,EAAA,IAAA,EACV,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAChE,IAAI,EAAC,QAAQ,EAAA,iBAAA,EACG,eAAe,EAAA,EAE/BA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,EAEhC,EAAA,4BAAA,CAAA,EACLA,OAA0E,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,2DAAA,CAAA,EAC1EA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAA,EACvCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,aAAA,EAAa,MAAM,EAAA,EAClDA,OAA0B,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,eAAA,CAAA,EAC1BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,gBAAA,CAA2B,CACvB,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,YAAY,EAAA,EACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAEC,OAAK,KAAI;AAC7B,YAAA,MAAM,YAAY,GAAGA,OAAK,GAAG,CAAC;AAE9B,YAAA,QACED,OAAA,CAAAE,cAAA,EAAA,IAAA,EACEF,OAAA,CAAA,OAAA,EAAA,EAAO,KAAK,EAAE,CAAA,cAAA,EAAiB,YAAY,CAAE,CAAA,EAAA,EAC1C,YAAY,EACbA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,CAAQ,EACrCA,OAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP;AAEP,SAAC,CAAC,CACE,EACNA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAA,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,oBAAA,CAA+B,CACxB,CACJ,CACG;;;;;;;","names":["h","index","Fragment"],"sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\r\n  inset-block-end: units.$u2;\r\n  inset-inline-start: units.$u2;\r\n  inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n  background-color: survey-rating-variables.$survey-rating-background-color;\r\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n  border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n  z-index: zindex.$survey-rating;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n\r\n    --panel-heading-padding-inline-start: #{units.$u1};\r\n    --panel-body-padding-inline: #{units.$u1};\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  appearance: none;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  margin-inline: 0;\r\n  margin-block: 0;\r\n  inset-block: units.$u1 0;\r\n  inset-inline: 0;\r\n  z-index: 1;\r\n}\r\n\r\nlabel {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  border-inline-end-width: 0;\r\n  padding-block-start: units.$u1;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n    block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: survey-rating-variables.$survey-rating-color-hover;\r\n  }\r\n\r\n  &:active {\r\n    background-color: survey-rating-variables.$survey-rating-color-active;\r\n  }\r\n\r\n  &:first-of-type {\r\n    border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n      survey-rating-variables.$survey-rating-border-radius;\r\n\r\n    &::before {\r\n      border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &:last-of-type {\r\n    border-inline-end-width: 1px;\r\n    border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n      survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n    &::before {\r\n      border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    block-size: units.$u1;\r\n    inline-size: 100%;\r\n    border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  }\r\n\r\n  &:has(input:checked) {\r\n    font-weight: bold;\r\n  }\r\n\r\n  @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n    $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n    $color: map.get($survey-rating, color);\r\n\r\n    &.survey-rating-#{$i} {\r\n      &::before,\r\n      &:has(input:checked) {\r\n        @include set-colors.apply($color, \"survey-rating\");\r\n\r\n        & {\r\n          border-color: survey-rating-variables.$survey-rating-border-color;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n\r\n  &.dso-secondary {\r\n    @include button.secondary($base-styling: true);\r\n  }\r\n\r\n  margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-survey-rating.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-survey-rating.entry.cjs.js","sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\r\n  inset-block-end: units.$u2;\r\n  inset-inline-start: units.$u2;\r\n  inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n  background-color: survey-rating-variables.$survey-rating-background-color;\r\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n  border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n  z-index: zindex.$survey-rating;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n\r\n    --panel-heading-padding-inline-start: #{units.$u1};\r\n    --panel-body-padding-inline: #{units.$u1};\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  appearance: none;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  margin-inline: 0;\r\n  margin-block: 0;\r\n  inset-block: units.$u1 0;\r\n  inset-inline: 0;\r\n  z-index: 1;\r\n}\r\n\r\nlabel {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  border-inline-end-width: 0;\r\n  padding-block-start: units.$u1;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n    block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: survey-rating-variables.$survey-rating-color-hover;\r\n  }\r\n\r\n  &:active {\r\n    background-color: survey-rating-variables.$survey-rating-color-active;\r\n  }\r\n\r\n  &:first-of-type {\r\n    border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n      survey-rating-variables.$survey-rating-border-radius;\r\n\r\n    &::before {\r\n      border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &:last-of-type {\r\n    border-inline-end-width: 1px;\r\n    border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n      survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n    &::before {\r\n      border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    block-size: units.$u1;\r\n    inline-size: 100%;\r\n    border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  }\r\n\r\n  &:has(input:checked) {\r\n    font-weight: bold;\r\n  }\r\n\r\n  @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n    $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n    $color: map.get($survey-rating, color);\r\n\r\n    &.survey-rating-#{$i} {\r\n      &::before,\r\n      &:has(input:checked) {\r\n        @include set-colors.apply($color, \"survey-rating\");\r\n\r\n        & {\r\n          border-color: survey-rating-variables.$survey-rating-border-color;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n\r\n  &.dso-secondary {\r\n    @include button.secondary($base-styling: true);\r\n  }\r\n\r\n  margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","index","Fragment"],"mappings":"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"}
+{"version":3,"file":"dso-survey-rating.entry.cjs.js","sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\r\n  inset-block-end: units.$u2;\r\n  inset-inline-start: units.$u2;\r\n  inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n  background-color: survey-rating-variables.$survey-rating-background-color;\r\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n  border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n  z-index: zindex.$survey-rating;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n\r\n    --panel-heading-padding-inline-start: #{units.$u1};\r\n    --panel-body-padding-inline: #{units.$u1};\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  appearance: none;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  margin-inline: 0;\r\n  margin-block: 0;\r\n  inset-block: units.$u1 0;\r\n  inset-inline: 0;\r\n  z-index: 1;\r\n}\r\n\r\nlabel {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  border-inline-end-width: 0;\r\n  padding-block-start: units.$u1;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n    block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: survey-rating-variables.$survey-rating-color-hover;\r\n  }\r\n\r\n  &:active {\r\n    background-color: survey-rating-variables.$survey-rating-color-active;\r\n  }\r\n\r\n  &:first-of-type {\r\n    border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n      survey-rating-variables.$survey-rating-border-radius;\r\n\r\n    &::before {\r\n      border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &:last-of-type {\r\n    border-inline-end-width: 1px;\r\n    border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n      survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n    &::before {\r\n      border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    block-size: units.$u1;\r\n    inline-size: 100%;\r\n    border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  }\r\n\r\n  &:has(input:checked) {\r\n    font-weight: bold;\r\n  }\r\n\r\n  @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n    $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n    $color: map.get($survey-rating, color);\r\n\r\n    &.survey-rating-#{$i} {\r\n      &::before,\r\n      &:has(input:checked) {\r\n        @include set-colors.apply($color, \"survey-rating\");\r\n\r\n        & {\r\n          border-color: survey-rating-variables.$survey-rating-border-color;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n\r\n  &.dso-secondary {\r\n    @include button.secondary($base-styling: true);\r\n  }\r\n\r\n  margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","index","Fragment"],"mappings":"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"}

package/dist/cjs/dso-tabs.cjs.entry.js

@@ -66,7 +66,7 @@ const Tabs = class {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '6cac5b5aadaee63469ae51fe3edca2127e37a4c6' }, index.h("div", { key: 'b176afce53f463b5b7c53fb5d14e415506c40194', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, index.h("slot", { key: '0db1ce93d3bb4b6ff38b90b5a0fd620573680aa9' })), index.h("div", { key: '33cd57a51cb22a03565b1a805c6839ed3eea6a5b', role: "tabpanel", tabindex: "0" }, index.h("slot", { key: '3c3ea0615970882bed8cbc785118fa01cf489ef7', name: "panel" }))));
+        return (index.h(index.Host, { key: '7f50c4cabce9f19a9708a5f357bf127d993fd273' }, index.h("div", { key: 'd08f63a0e4af86ec0e28cdeb3204a352b736365a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, index.h("slot", { key: '2aad0a3f00f8a836ff64f3a579e988c609a9a892' })), index.h("div", { key: '16f208eb54582aa4d8f05bafe73c8172c378ac11', role: "tabpanel", tabindex: "0" }, index.h("slot", { key: '6b8cb70153160f82c616d2ebd2b519a10a4d317c', name: "panel" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-tijdreis-banner.cjs.entry.js

@@ -2,14 +2,14 @@
 
 var index = require('./index-DvLsepiK.js');
 
-const tijdreisBannerCss = "*,*::after,*::before{box-sizing:border-box}:host{--_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:#8b4a6a;color:#fff}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}:host 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\"))}:host{display:grid;block-size:100%;padding-block:8px;padding-inline:24px}@media screen and (min-width: 768px){:host{align-items:center;justify-content:center;gap:8px;grid-template-columns:auto auto auto;grid-template-areas:\"icon slot button\"}}@media screen and (max-width: 767px){:host{align-items:start;grid-template-columns:max-content auto;grid-template-areas:\"icon slot\" \". button\";padding-block:16px;gap:16px 8px}}:host dso-icon{grid-area:icon}:host slot:not([name]){grid-area:slot;margin-inline-end:10px}:host ::slotted([slot=button]){--_dso-button-secondary-background-color:transparent;--_dso-button-secondary-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-background-color:rgba(235, 225, 235, 0.2);--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-background-color:rgba(235, 225, 235, 0.4);--_dso-button-secondary-active-border-color:rgba(235, 225, 235, 0.3);--_dso-button-secondary-disabled-background-color:transparent;--_dso-button-secondary-disabled-color:rgba(235, 225, 235, 0.7);--_dso-button-secondary-disabled-border-color:rgba(235, 225, 235, 0.7)}@media screen and (min-width: 768px){:host ::slotted([slot=button]){margin-inline-start:32px !important;}}@media screen and (max-width: 767px){:host ::slotted([slot=button]){grid-area:button;justify-self:start}}";
+const tijdreisBannerCss = "*,*::after,*::before{box-sizing:border-box}:host{--_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}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}:host 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\"))}:host{--_dso-icon-button-tertiary-color:#fff;background-color:#8b4a6a;color:#fff}:host{display:grid;block-size:100%;padding-block:8px;padding-inline:24px}@media screen and (min-width: 768px){:host{align-items:center;justify-content:center;gap:8px;grid-template-columns:auto auto auto;grid-template-areas:\"icon slot button\"}}@media screen and (max-width: 767px){:host{align-items:start;grid-template-columns:max-content auto;grid-template-areas:\"icon slot\" \". button\";padding-block:16px;gap:16px 8px}}:host dso-icon{grid-area:icon}:host slot:not([name]){grid-area:slot;margin-inline-end:10px}:host ::slotted([slot=button]){--_dso-button-secondary-background-color:transparent;--_dso-button-secondary-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-background-color:rgba(235, 225, 235, 0.2);--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-background-color:rgba(235, 225, 235, 0.4);--_dso-button-secondary-active-border-color:rgba(235, 225, 235, 0.3);--_dso-button-secondary-disabled-background-color:transparent;--_dso-button-secondary-disabled-color:rgba(235, 225, 235, 0.7);--_dso-button-secondary-disabled-border-color:rgba(235, 225, 235, 0.7)}@media screen and (min-width: 768px){:host ::slotted([slot=button]){margin-inline-start:32px !important;}}@media screen and (max-width: 767px){:host ::slotted([slot=button]){grid-area:button;justify-self:start}}";
 
 const TijdreisBanner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Fragment, { key: 'cb57567ddfb405ed5580f3056824df6f3125e57d' }, index.h("dso-icon", { key: 'e4a8892dabbd44bc9ca7f1548c065473537aaa45', icon: "clock" }), index.h("slot", { key: 'facdf989c45f44e10336ca5d3b7319e48929ca82' }), index.h("slot", { key: '0bc0625232374f0df07b23186e3f51a26632a76b', name: "button" })));
+        return (index.h(index.Fragment, { key: 'c60839046508ee01ec7e36746358a823f57431a5' }, index.h("dso-icon", { key: '9a7b68dc81d3bcf9573f93b4fc1a07315b90da70', icon: "clock" }), index.h("slot", { key: '31f22464c27b57cd29d077ba9d9232c05f3d24c9' }), index.h("slot", { key: 'b60530565182602ea5c828cd55763e0e17808c33', name: "button" })));
     }
 };
 TijdreisBanner.style = tijdreisBannerCss;

package/dist/cjs/dso-tijdreis-banner.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-tijdreis-banner.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,4gFAA4gF;;MCOzhF,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACEA,QAACC,cAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACPD,OAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACzBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CAClB;;;;;;;","names":["h","Fragment"],"sources":["src/components/tijdreis-banner/tijdreis-banner.scss?tag=dso-tijdreis-banner&encapsulation=shadow","src/components/tijdreis-banner/tijdreis-banner.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\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/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(colors.$mauve, \"tijdreis-banner\");\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    display: grid;\r\n    block-size: 100%;\r\n    padding-block: units.$u1;\r\n    padding-inline: units.$u3;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: units.$u1;\r\n    grid-template-columns: auto auto auto;\r\n    grid-template-areas: \"icon slot button\";\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    align-items: start;\r\n    grid-template-columns: max-content auto;\r\n    grid-template-areas:\r\n      \"icon slot\"\r\n      \". button\";\r\n    padding-block: units.$u2;\r\n    gap: units.$u2 units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    grid-area: icon;\r\n  }\r\n\r\n  slot:not([name]) {\r\n    grid-area: slot;\r\n    margin-inline-end: 10px;\r\n  }\r\n\r\n  ::slotted([slot=\"button\"]) {\r\n    --_dso-button-secondary-background-color: transparent;\r\n    --_dso-button-secondary-color: #{colors.$wit};\r\n    --_dso-button-secondary-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-background-color: rgba(235, 225, 235, 0.2);\r\n    --_dso-button-secondary-hover-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-active-background-color: rgba(235, 225, 235, 0.4);\r\n    --_dso-button-secondary-active-border-color: rgba(235, 225, 235, 0.3);\r\n    --_dso-button-secondary-disabled-background-color: transparent;\r\n    --_dso-button-secondary-disabled-color: rgba(235, 225, 235, 0.7);\r\n    --_dso-button-secondary-disabled-border-color: rgba(235, 225, 235, 0.7);\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      margin-inline-start: units.$u4 !important; /* extra ruimte zodat totaal 40px tussen 2e en 3e */\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      grid-area: button;\r\n      justify-self: start;\r\n    }\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Fragment, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-tijdreis-banner\",\r\n  styleUrl: \"tijdreis-banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class TijdreisBanner implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <dso-icon icon=\"clock\" />\r\n        <slot></slot>\r\n        <slot name=\"button\"></slot>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-tijdreis-banner.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,khFAAkhF;;MCO/hF,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACEA,QAACC,cAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACPD,OAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACzBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CAClB;;;;;;;","names":["h","Fragment"],"sources":["src/components/tijdreis-banner/tijdreis-banner.scss?tag=dso-tijdreis-banner&encapsulation=shadow","src/components/tijdreis-banner/tijdreis-banner.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\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/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(colors.$mauve, \"tijdreis-banner\");\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    display: grid;\r\n    block-size: 100%;\r\n    padding-block: units.$u1;\r\n    padding-inline: units.$u3;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: units.$u1;\r\n    grid-template-columns: auto auto auto;\r\n    grid-template-areas: \"icon slot button\";\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    align-items: start;\r\n    grid-template-columns: max-content auto;\r\n    grid-template-areas:\r\n      \"icon slot\"\r\n      \". button\";\r\n    padding-block: units.$u2;\r\n    gap: units.$u2 units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    grid-area: icon;\r\n  }\r\n\r\n  slot:not([name]) {\r\n    grid-area: slot;\r\n    margin-inline-end: 10px;\r\n  }\r\n\r\n  ::slotted([slot=\"button\"]) {\r\n    --_dso-button-secondary-background-color: transparent;\r\n    --_dso-button-secondary-color: #{colors.$wit};\r\n    --_dso-button-secondary-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-background-color: rgba(235, 225, 235, 0.2);\r\n    --_dso-button-secondary-hover-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-active-background-color: rgba(235, 225, 235, 0.4);\r\n    --_dso-button-secondary-active-border-color: rgba(235, 225, 235, 0.3);\r\n    --_dso-button-secondary-disabled-background-color: transparent;\r\n    --_dso-button-secondary-disabled-color: rgba(235, 225, 235, 0.7);\r\n    --_dso-button-secondary-disabled-border-color: rgba(235, 225, 235, 0.7);\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      margin-inline-start: units.$u4 !important; /* extra ruimte zodat totaal 40px tussen 2e en 3e */\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      grid-area: button;\r\n      justify-self: start;\r\n    }\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Fragment, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-tijdreis-banner\",\r\n  styleUrl: \"tijdreis-banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class TijdreisBanner implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <dso-icon icon=\"clock\" />\r\n        <slot></slot>\r\n        <slot name=\"button\"></slot>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-tijdreis-banner.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-tijdreis-banner.entry.cjs.js","sources":["src/components/tijdreis-banner/tijdreis-banner.scss?tag=dso-tijdreis-banner&encapsulation=shadow","src/components/tijdreis-banner/tijdreis-banner.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\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/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(colors.$mauve, \"tijdreis-banner\");\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    display: grid;\r\n    block-size: 100%;\r\n    padding-block: units.$u1;\r\n    padding-inline: units.$u3;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: units.$u1;\r\n    grid-template-columns: auto auto auto;\r\n    grid-template-areas: \"icon slot button\";\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    align-items: start;\r\n    grid-template-columns: max-content auto;\r\n    grid-template-areas:\r\n      \"icon slot\"\r\n      \". button\";\r\n    padding-block: units.$u2;\r\n    gap: units.$u2 units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    grid-area: icon;\r\n  }\r\n\r\n  slot:not([name]) {\r\n    grid-area: slot;\r\n    margin-inline-end: 10px;\r\n  }\r\n\r\n  ::slotted([slot=\"button\"]) {\r\n    --_dso-button-secondary-background-color: transparent;\r\n    --_dso-button-secondary-color: #{colors.$wit};\r\n    --_dso-button-secondary-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-background-color: rgba(235, 225, 235, 0.2);\r\n    --_dso-button-secondary-hover-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-active-background-color: rgba(235, 225, 235, 0.4);\r\n    --_dso-button-secondary-active-border-color: rgba(235, 225, 235, 0.3);\r\n    --_dso-button-secondary-disabled-background-color: transparent;\r\n    --_dso-button-secondary-disabled-color: rgba(235, 225, 235, 0.7);\r\n    --_dso-button-secondary-disabled-border-color: rgba(235, 225, 235, 0.7);\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      margin-inline-start: units.$u4 !important; /* extra ruimte zodat totaal 40px tussen 2e en 3e */\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      grid-area: button;\r\n      justify-self: start;\r\n    }\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Fragment, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-tijdreis-banner\",\r\n  styleUrl: \"tijdreis-banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class TijdreisBanner implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <dso-icon icon=\"clock\" />\r\n        <slot></slot>\r\n        <slot name=\"button\"></slot>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Fragment"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,4gFAA4gF;;MCOzhF,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACEA,QAACC,cAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACPD,OAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACzBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CAClB;;;;;;;"}
+{"version":3,"file":"dso-tijdreis-banner.entry.cjs.js","sources":["src/components/tijdreis-banner/tijdreis-banner.scss?tag=dso-tijdreis-banner&encapsulation=shadow","src/components/tijdreis-banner/tijdreis-banner.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\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/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(colors.$mauve, \"tijdreis-banner\");\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    display: grid;\r\n    block-size: 100%;\r\n    padding-block: units.$u1;\r\n    padding-inline: units.$u3;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: units.$u1;\r\n    grid-template-columns: auto auto auto;\r\n    grid-template-areas: \"icon slot button\";\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    align-items: start;\r\n    grid-template-columns: max-content auto;\r\n    grid-template-areas:\r\n      \"icon slot\"\r\n      \". button\";\r\n    padding-block: units.$u2;\r\n    gap: units.$u2 units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    grid-area: icon;\r\n  }\r\n\r\n  slot:not([name]) {\r\n    grid-area: slot;\r\n    margin-inline-end: 10px;\r\n  }\r\n\r\n  ::slotted([slot=\"button\"]) {\r\n    --_dso-button-secondary-background-color: transparent;\r\n    --_dso-button-secondary-color: #{colors.$wit};\r\n    --_dso-button-secondary-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-background-color: rgba(235, 225, 235, 0.2);\r\n    --_dso-button-secondary-hover-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-active-background-color: rgba(235, 225, 235, 0.4);\r\n    --_dso-button-secondary-active-border-color: rgba(235, 225, 235, 0.3);\r\n    --_dso-button-secondary-disabled-background-color: transparent;\r\n    --_dso-button-secondary-disabled-color: rgba(235, 225, 235, 0.7);\r\n    --_dso-button-secondary-disabled-border-color: rgba(235, 225, 235, 0.7);\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      margin-inline-start: units.$u4 !important; /* extra ruimte zodat totaal 40px tussen 2e en 3e */\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      grid-area: button;\r\n      justify-self: start;\r\n    }\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Fragment, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-tijdreis-banner\",\r\n  styleUrl: \"tijdreis-banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class TijdreisBanner implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <dso-icon icon=\"clock\" />\r\n        <slot></slot>\r\n        <slot name=\"button\"></slot>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Fragment"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,khFAAkhF;;MCO/hF,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACEA,QAACC,cAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACPD,OAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACzBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CAClB;;;;;;;"}

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

@@ -50,7 +50,7 @@ const Toggletip = class {
         };
     }
     render() {
-        return (index.h(index.Fragment, { key: '5d0c70968e78501d56ee3d10cd72bf5d8cb72a7a' }, index.h("dso-info-button", { key: 'a420816c0fa911415ffced3f8e5ef07876710009', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), index.h("dso-tooltip", { key: '943c676aaa520c950f25c37fd85fff50fd1fa692', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: 'a08af99744cf49d69fa3b153afe71730a7bcbb00' }))));
+        return (index.h(index.Fragment, { key: '798565df2cd855ffe6018ad49dea374db1898196' }, index.h("dso-info-button", { key: 'c8be822ae6871fa19e97c4e83cc6be3f030b57f9', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), index.h("dso-tooltip", { key: '737d95706df31ef8fdc5f098d8a354a6c2abf42a', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: '3f95e812cd4d4c53d584055c75fe2171ffbe52f7' }))));
     }
     get host() { return index.getElement(this); }
 };