@dso-toolkit/core 73.1.0 → 73.2.0

package/dist/cjs/dso-responsive-element.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-responsive-element.entry.cjs.js","sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Method, State } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,sBAAsB;;ACInD,MAAM,YAAY,GAA4C;AAC5D,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;CACF;MAOY,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;QAOE,IAAA,CAAA,SAAS,GAA0B,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAGxD,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;QAgBL,IAAQ,CAAA,QAAA,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;;YAChD,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC;;AAGnC,YAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAEzG,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,SAAC,CAAC;AAoBH;AArCC;;AAEG;AAEH,IAAA,MAAM,OAAO,GAAA;QACX,OAAO,IAAI,CAAC,SAAS;;IAiBvB,iBAAiB,GAAA;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGlC,oBAAoB,GAAA;QAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGpC,MAAM,GAAA;QACJ,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAA,EAC7GD,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;"}
+{"version":3,"file":"dso-responsive-element.entry.cjs.js","sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, State, h } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,sBAAsB;;ACInD,MAAM,YAAY,GAA4C;AAC5D,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;CACF;MAOY,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;QAOE,IAAA,CAAA,SAAS,GAA0B,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAGxD,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;QAgBL,IAAQ,CAAA,QAAA,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;;YAChD,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC;;AAGnC,YAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAEzG,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,SAAC,CAAC;AAoBH;AArCC;;AAEG;AAEH,IAAA,MAAM,OAAO,GAAA;QACX,OAAO,IAAI,CAAC,SAAS;;IAiBvB,iBAAiB,GAAA;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGlC,oBAAoB,GAAA;QAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGpC,MAAM,GAAA;QACJ,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAA,EAC7GD,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;"}

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

@@ -92,9 +92,9 @@ const Scrollable = class {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (index$1.h("div", { key: '8731a96c831972ad8f3ab111c24977bfb8ab3b49', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, index$1.h("div", { key: 'b2af22551c7847525bbf52ab8fef0a71cc84da7e', ref: (el) => (this.scrollContainerDiv = el), class: clsx.clsx("dso-scroll-container", {
+        return (index$1.h("div", { key: 'cc565ff75ecdda69bfe110cf6e199e231766d08a', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, index$1.h("div", { key: 'da7b69191bdd9920f103ec5f02683d662f026ffe', ref: (el) => (this.scrollContainerDiv = el), class: clsx.clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, index$1.h("slot", { key: '69233c37151fc601b20b938d828dba01ec98033a' }))));
+            }), onScroll: () => this._setScrollState() }, index$1.h("slot", { key: 'dd3aa14c1c1d24e68dd5fb7f0457b3efe20ae05d' }))));
     }
     get host() { return index$1.getElement(this); }
 };

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, h, Method, State } 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, h, Method, State } 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

@@ -17,7 +17,7 @@ const Skiplink = class {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent.isModifiedEvent(e) });
     }
     render() {
-        return (index.h("a", { key: '9d91efb96653b3344f79386814633d08520d6ab0', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, index.h("dso-icon", { key: '3d79ed32ff98d7e1e7eea58307d03892756dbbf1', icon: "chevron-right" })));
+        return (index.h("a", { key: '88e0a5fde8738d879c43ea9947d0bf67ac20221c', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, index.h("dso-icon", { key: '5f51d5cfad04c230d4b107587103c4929ab335d5', 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, h, Prop } 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,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}

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, h, Prop } 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: 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;;;;;;;"}

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

@@ -28,10 +28,10 @@ const SurveyRating = class {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (index.h("dso-panel", { key: '2a2195f431d05af2f95157241dbe233743cc45a6', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, index.h("h2", { key: '6078cb4a0285e2f4afda8c2452efbbbdd2938c20', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), index.h("strong", { key: '1e424390809f7a1cb59f636f4bd27f9d9e4b3c70' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), index.h("form", { key: '22c216ba2253ae2f748030be3336155318d01449', onSubmit: (e) => this.handleForm(e) }, index.h("div", { key: '3eb88c0afcf933bb8974df638b5eb2aed1a45d0a', class: "visual-rating-labels", "aria-hidden": "true" }, index.h("span", { key: '1a74a9093fc56e5f1192e1400d9989074d2c0add' }, "Heel moeilijk"), index.h("span", { key: '78c7bffac4fd101c39917a9903fda62acdbf3806' }, "Heel makkelijk")), index.h("div", { key: 'd1b523bf50e3a901da0f6d0af0e20c72df9e8bc9', role: "radiogroup" }, ratings.map((rating, index$1) => {
+        return (index.h("dso-panel", { key: '9040ae190a33af5d259011c22016749d84720da2', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, index.h("h2", { key: 'b7b9bd9b0a97c5e3fa227e0af5949f6f36c39275', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), index.h("strong", { key: '1db31c25e032536223ae9c53718dcea388d6b0fd' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), index.h("form", { key: '422e4887289d315d5f008e0f1d6ae4936e08da86', onSubmit: (e) => this.handleForm(e) }, index.h("div", { key: 'ea9eef2c9b40f68a562eda5df4943e6e3a4393a1', class: "visual-rating-labels", "aria-hidden": "true" }, index.h("span", { key: 'fe9d2c8bf6cac8705a9eca4250d91b95e67ec35c' }, "Heel moeilijk"), index.h("span", { key: '7a039794087fd90273e21fc0926e1eb4fed8ebee' }, "Heel makkelijk")), index.h("div", { key: '002b4918b471324eeabcbeeda2899024286c0df6', 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: '8105cc59e8f59f056579f21f56d82e518cfe7396', type: "submit", class: "dso-secondary" }, index.h("span", { key: '379e72689c91d68a90013578fc03019a0eac4042' }, "Antwoord verzenden")))));
+        })), index.h("button", { key: 'e1257162f5826778a751ca0d8dbc3f4b4a9a0177', type: "submit", class: "dso-secondary" }, index.h("span", { key: '8bd71f5506750e1e9e7c67cbd08489fd00149ba0' }, "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-variables.$survey-rating-border-color);\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\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":"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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-variables.$survey-rating-border-color);\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-variables.$survey-rating-border-color);\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\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-variables.$survey-rating-border-color);\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-tab.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-tab.entry.cjs.js","mappings":";;;;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE;;MCYlwE,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAGA,+BAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACdC,OACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpDA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJA,OAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpDA,OAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;","names":["isModifiedEvent","h"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  border-color: tab-variables.$color;\r\n  // Make the list-items overlay the bottom border\r\n  margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  :host {\r\n    margin-block: 10px;\r\n  }\r\n\r\n  :host(:first-child) {\r\n    margin-block-start: 0;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    &,\r\n    &:active,\r\n    &:focus,\r\n    &:hover,\r\n    &:visited {\r\n      background-color: colors.$wit;\r\n      border: 1px solid tab-variables.$color;\r\n      border-block-end-color: colors.$wit;\r\n      color: tab-variables.$color;\r\n      cursor: default;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: tab-variables.$color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    color: tab-variables.$nav-disabled-link-color;\r\n\r\n    &:hover,\r\n    &:focus {\r\n      color: tab-variables.$nav-disabled-link-hover-color;\r\n      text-decoration: none;\r\n      cursor: scaffolding.$cursor-disabled;\r\n      background-color: transparent;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\na {\r\n  @include link.clean();\r\n\r\n  &:visited {\r\n    color: tab-variables.$text-color;\r\n  }\r\n}\r\n\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  display: block;\r\n  min-block-size: tab-variables.$block-size;\r\n  border: 1px solid transparent;\r\n  border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n  color: tab-variables.$text-color;\r\n  line-height: typography.$line-height-base;\r\n  padding-block: tab-variables.$block-padding;\r\n  padding-inline: tab-variables.$inline-padding;\r\n\r\n  &:hover {\r\n    border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n      tab-variables.$border-color;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    text-decoration: none;\r\n    background-color: tab-variables.$nav-link-hover-bg;\r\n  }\r\n\r\n  &:active,\r\n  &:focus,\r\n  &:hover {\r\n    background-color: tab-variables.$hover-color;\r\n    border: 1px solid transparent;\r\n    border-block-end-color: tab-variables.$color;\r\n    text-decoration: none;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      border-block-end-color: colors.$wit;\r\n    }\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border-color: colors.$wit;\r\n    border-radius: 8px;\r\n    padding-block: 18px;\r\n    padding-inline: 20px;\r\n    inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-tab.entry.cjs.js","mappings":";;;;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE;;MCalwE,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAGA,+BAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACdC,OACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpDA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJA,OAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpDA,OAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;","names":["isModifiedEvent","h"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  border-color: tab-variables.$color;\r\n  // Make the list-items overlay the bottom border\r\n  margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  :host {\r\n    margin-block: 10px;\r\n  }\r\n\r\n  :host(:first-child) {\r\n    margin-block-start: 0;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    &,\r\n    &:active,\r\n    &:focus,\r\n    &:hover,\r\n    &:visited {\r\n      background-color: colors.$wit;\r\n      border: 1px solid tab-variables.$color;\r\n      border-block-end-color: colors.$wit;\r\n      color: tab-variables.$color;\r\n      cursor: default;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: tab-variables.$color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    color: tab-variables.$nav-disabled-link-color;\r\n\r\n    &:hover,\r\n    &:focus {\r\n      color: tab-variables.$nav-disabled-link-hover-color;\r\n      text-decoration: none;\r\n      cursor: scaffolding.$cursor-disabled;\r\n      background-color: transparent;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\na {\r\n  @include link.clean();\r\n\r\n  &:visited {\r\n    color: tab-variables.$text-color;\r\n  }\r\n}\r\n\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  display: block;\r\n  min-block-size: tab-variables.$block-size;\r\n  border: 1px solid transparent;\r\n  border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n  color: tab-variables.$text-color;\r\n  line-height: typography.$line-height-base;\r\n  padding-block: tab-variables.$block-padding;\r\n  padding-inline: tab-variables.$inline-padding;\r\n\r\n  &:hover {\r\n    border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n      tab-variables.$border-color;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    text-decoration: none;\r\n    background-color: tab-variables.$nav-link-hover-bg;\r\n  }\r\n\r\n  &:active,\r\n  &:focus,\r\n  &:hover {\r\n    background-color: tab-variables.$hover-color;\r\n    border: 1px solid transparent;\r\n    border-block-end-color: tab-variables.$color;\r\n    text-decoration: none;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      border-block-end-color: colors.$wit;\r\n    }\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border-color: colors.$wit;\r\n    border-radius: 8px;\r\n    padding-block: 18px;\r\n    padding-inline: 20px;\r\n    inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +1 @@
-{"version":3,"file":"dso-tab.entry.cjs.js","sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  border-color: tab-variables.$color;\r\n  // Make the list-items overlay the bottom border\r\n  margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  :host {\r\n    margin-block: 10px;\r\n  }\r\n\r\n  :host(:first-child) {\r\n    margin-block-start: 0;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    &,\r\n    &:active,\r\n    &:focus,\r\n    &:hover,\r\n    &:visited {\r\n      background-color: colors.$wit;\r\n      border: 1px solid tab-variables.$color;\r\n      border-block-end-color: colors.$wit;\r\n      color: tab-variables.$color;\r\n      cursor: default;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: tab-variables.$color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    color: tab-variables.$nav-disabled-link-color;\r\n\r\n    &:hover,\r\n    &:focus {\r\n      color: tab-variables.$nav-disabled-link-hover-color;\r\n      text-decoration: none;\r\n      cursor: scaffolding.$cursor-disabled;\r\n      background-color: transparent;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\na {\r\n  @include link.clean();\r\n\r\n  &:visited {\r\n    color: tab-variables.$text-color;\r\n  }\r\n}\r\n\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  display: block;\r\n  min-block-size: tab-variables.$block-size;\r\n  border: 1px solid transparent;\r\n  border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n  color: tab-variables.$text-color;\r\n  line-height: typography.$line-height-base;\r\n  padding-block: tab-variables.$block-padding;\r\n  padding-inline: tab-variables.$inline-padding;\r\n\r\n  &:hover {\r\n    border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n      tab-variables.$border-color;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    text-decoration: none;\r\n    background-color: tab-variables.$nav-link-hover-bg;\r\n  }\r\n\r\n  &:active,\r\n  &:focus,\r\n  &:hover {\r\n    background-color: tab-variables.$hover-color;\r\n    border: 1px solid transparent;\r\n    border-block-end-color: tab-variables.$color;\r\n    text-decoration: none;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      border-block-end-color: colors.$wit;\r\n    }\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border-color: colors.$wit;\r\n    border-radius: 8px;\r\n    padding-block: 18px;\r\n    padding-inline: 20px;\r\n    inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"names":["isModifiedEvent","h"],"mappings":";;;;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE;;MCYlwE,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAGA,+BAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACdC,OACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpDA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJA,OAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpDA,OAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;"}
+{"version":3,"file":"dso-tab.entry.cjs.js","sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  border-color: tab-variables.$color;\r\n  // Make the list-items overlay the bottom border\r\n  margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  :host {\r\n    margin-block: 10px;\r\n  }\r\n\r\n  :host(:first-child) {\r\n    margin-block-start: 0;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    &,\r\n    &:active,\r\n    &:focus,\r\n    &:hover,\r\n    &:visited {\r\n      background-color: colors.$wit;\r\n      border: 1px solid tab-variables.$color;\r\n      border-block-end-color: colors.$wit;\r\n      color: tab-variables.$color;\r\n      cursor: default;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: tab-variables.$color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    color: tab-variables.$nav-disabled-link-color;\r\n\r\n    &:hover,\r\n    &:focus {\r\n      color: tab-variables.$nav-disabled-link-hover-color;\r\n      text-decoration: none;\r\n      cursor: scaffolding.$cursor-disabled;\r\n      background-color: transparent;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\na {\r\n  @include link.clean();\r\n\r\n  &:visited {\r\n    color: tab-variables.$text-color;\r\n  }\r\n}\r\n\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  display: block;\r\n  min-block-size: tab-variables.$block-size;\r\n  border: 1px solid transparent;\r\n  border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n  color: tab-variables.$text-color;\r\n  line-height: typography.$line-height-base;\r\n  padding-block: tab-variables.$block-padding;\r\n  padding-inline: tab-variables.$inline-padding;\r\n\r\n  &:hover {\r\n    border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n      tab-variables.$border-color;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    text-decoration: none;\r\n    background-color: tab-variables.$nav-link-hover-bg;\r\n  }\r\n\r\n  &:active,\r\n  &:focus,\r\n  &:hover {\r\n    background-color: tab-variables.$hover-color;\r\n    border: 1px solid transparent;\r\n    border-block-end-color: tab-variables.$color;\r\n    text-decoration: none;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      border-block-end-color: colors.$wit;\r\n    }\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border-color: colors.$wit;\r\n    border-radius: 8px;\r\n    padding-block: 18px;\r\n    padding-inline: 20px;\r\n    inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"names":["isModifiedEvent","h"],"mappings":";;;;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE;;MCalwE,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAGA,+BAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACdC,OACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpDA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJA,OAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpDA,OAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;"}

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: 'ee52a51bd4dce360be086fe4ac9603c3b1e12255' }, index.h("div", { key: '7f9270557289a2d6a2d8e949cbf8ee7a8ba286a7', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, index.h("slot", { key: '47ad707d1b2dc383074db54e70f85fdd60c8a3d4' })), index.h("div", { key: '5864caa924fcee7d74ef10410ee3b0d38d8af2c0', role: "tabpanel", tabindex: "0" }, index.h("slot", { key: 'a01b5c9915c4385c713dea531eaccecd9757a940', name: "panel" }))));
+        return (index.h(index.Host, { key: '9a6bdd5ffe17c8426f03ba2722e425fa0f8e62fb' }, index.h("div", { key: 'dec379f32507e5784a13bd95b58ab02cb958febb', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, index.h("slot", { key: '51c8052f6072c4c3abc4459137998153ec7e51cc' })), index.h("div", { key: '8106030b6b93202f62be3aac38a90807afe33606', role: "tabpanel", tabindex: "0" }, index.h("slot", { key: 'd30f72afe67410e95720c184d4af7d8c3df0dc03', name: "panel" }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"dso-tabs.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: units.$block-spacing-large;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-tabs.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: units.$block-spacing-large;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Component, Element, Host, forceUpdate, h } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +1 @@
-{"version":3,"file":"dso-tabs.entry.cjs.js","sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: units.$block-spacing-large;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["forceUpdate","h","Host"],"mappings":"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"}
+{"version":3,"file":"dso-tabs.entry.cjs.js","sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: units.$block-spacing-large;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Component, Element, Host, forceUpdate, h } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["forceUpdate","h","Host"],"mappings":"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"}

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

@@ -50,7 +50,7 @@ const Toggletip = class {
         };
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("dso-info-button", { key: '111128db00e6c05e29bdee109ccc04faddb86c66', "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: '42728fdc33b9c2994a6a3dc78ef487beb2c7acab', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: '96d983d968250a2e81727d90990e3145fb2ed1fc' }))));
+        return (index.h(index.Fragment, null, index.h("dso-info-button", { key: 'ba15af3240f90d815cf626e335d70729ec5b9fce', "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: '392f8b42eeee84174e57f68fada10a0c8a30adcb', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: '02b455171f94b769a36e22aaeb0ad28672293b30' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"dso-toggletip.entry.cjs.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,sOAAsO;;MCQ9O,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAAC,cAAA,EAAA,IAAA,EACED,OAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACFA,OAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACb;;;;;;;;","names":["h","Fragment"],"sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n  // tooltip arrow placement exceptions\r\n  --tooltip-margin-block-start: 0;\r\n  --tooltip-margin-inline-start: 3px;\r\n  --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n  z-index: zindex.$tooltip;\r\n}\r\n","import { h, Component, Fragment, Element, Prop, State } from \"@stencil/core\";\r\nimport { Placement } from \"@popperjs/core\";\r\n\r\n@Component({\r\n  tag: \"dso-toggletip\",\r\n  styleUrl: \"toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Toggletip {\r\n  @Element()\r\n  host!: HTMLDsoToggletipElement;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  /**\r\n   * Toggletip label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting\";\r\n\r\n  /**\r\n   * Toggletip position.\r\n   */\r\n  @Prop()\r\n  position: Placement = \"right\";\r\n\r\n  /**\r\n   * Set to true for small Toggletip.\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Set to true for secondary Toggletip.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n  private click = () => {\r\n    if (this.active) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n  };\r\n\r\n  private close = () => {\r\n    this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (!event.defaultPrevented && event.key === \"Escape\") {\r\n      this.close();\r\n      this.infoButton?.setFocus();\r\n      event.preventDefault();\r\n    }\r\n\r\n    return;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <dso-info-button\r\n          aria-describedby=\"toggle\"\r\n          onClick={this.click}\r\n          label={this.label}\r\n          active={this.active}\r\n          secondary={this.secondary}\r\n          ref={(element) => (this.infoButton = element)}\r\n        />\r\n        <dso-tooltip\r\n          stateless\r\n          descriptive\r\n          id=\"toggle\"\r\n          strategy=\"absolute\"\r\n          active={this.active}\r\n          position={this.position}\r\n          small={this.small}\r\n        >\r\n          <slot />\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-toggletip.entry.cjs.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,sOAAsO;;MCQ9O,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAAC,cAAA,EAAA,IAAA,EACED,OAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACFA,OAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACb;;;;;;;;","names":["h","Fragment"],"sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n  // tooltip arrow placement exceptions\r\n  --tooltip-margin-block-start: 0;\r\n  --tooltip-margin-inline-start: 3px;\r\n  --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n  z-index: zindex.$tooltip;\r\n}\r\n","import { Placement } from \"@popperjs/core\";\r\nimport { Component, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-toggletip\",\r\n  styleUrl: \"toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Toggletip {\r\n  @Element()\r\n  host!: HTMLDsoToggletipElement;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  /**\r\n   * Toggletip label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting\";\r\n\r\n  /**\r\n   * Toggletip position.\r\n   */\r\n  @Prop()\r\n  position: Placement = \"right\";\r\n\r\n  /**\r\n   * Set to true for small Toggletip.\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Set to true for secondary Toggletip.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n  private click = () => {\r\n    if (this.active) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n  };\r\n\r\n  private close = () => {\r\n    this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (!event.defaultPrevented && event.key === \"Escape\") {\r\n      this.close();\r\n      this.infoButton?.setFocus();\r\n      event.preventDefault();\r\n    }\r\n\r\n    return;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <dso-info-button\r\n          aria-describedby=\"toggle\"\r\n          onClick={this.click}\r\n          label={this.label}\r\n          active={this.active}\r\n          secondary={this.secondary}\r\n          ref={(element) => (this.infoButton = element)}\r\n        />\r\n        <dso-tooltip\r\n          stateless\r\n          descriptive\r\n          id=\"toggle\"\r\n          strategy=\"absolute\"\r\n          active={this.active}\r\n          position={this.position}\r\n          small={this.small}\r\n        >\r\n          <slot />\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +1 @@
-{"version":3,"file":"dso-toggletip.entry.cjs.js","sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n  // tooltip arrow placement exceptions\r\n  --tooltip-margin-block-start: 0;\r\n  --tooltip-margin-inline-start: 3px;\r\n  --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n  z-index: zindex.$tooltip;\r\n}\r\n","import { h, Component, Fragment, Element, Prop, State } from \"@stencil/core\";\r\nimport { Placement } from \"@popperjs/core\";\r\n\r\n@Component({\r\n  tag: \"dso-toggletip\",\r\n  styleUrl: \"toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Toggletip {\r\n  @Element()\r\n  host!: HTMLDsoToggletipElement;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  /**\r\n   * Toggletip label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting\";\r\n\r\n  /**\r\n   * Toggletip position.\r\n   */\r\n  @Prop()\r\n  position: Placement = \"right\";\r\n\r\n  /**\r\n   * Set to true for small Toggletip.\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Set to true for secondary Toggletip.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n  private click = () => {\r\n    if (this.active) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n  };\r\n\r\n  private close = () => {\r\n    this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (!event.defaultPrevented && event.key === \"Escape\") {\r\n      this.close();\r\n      this.infoButton?.setFocus();\r\n      event.preventDefault();\r\n    }\r\n\r\n    return;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <dso-info-button\r\n          aria-describedby=\"toggle\"\r\n          onClick={this.click}\r\n          label={this.label}\r\n          active={this.active}\r\n          secondary={this.secondary}\r\n          ref={(element) => (this.infoButton = element)}\r\n        />\r\n        <dso-tooltip\r\n          stateless\r\n          descriptive\r\n          id=\"toggle\"\r\n          strategy=\"absolute\"\r\n          active={this.active}\r\n          position={this.position}\r\n          small={this.small}\r\n        >\r\n          <slot />\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Fragment"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,sOAAsO;;MCQ9O,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAAC,cAAA,EAAA,IAAA,EACED,OAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACFA,OAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACb;;;;;;;;"}
+{"version":3,"file":"dso-toggletip.entry.cjs.js","sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n  // tooltip arrow placement exceptions\r\n  --tooltip-margin-block-start: 0;\r\n  --tooltip-margin-inline-start: 3px;\r\n  --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n  z-index: zindex.$tooltip;\r\n}\r\n","import { Placement } from \"@popperjs/core\";\r\nimport { Component, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-toggletip\",\r\n  styleUrl: \"toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Toggletip {\r\n  @Element()\r\n  host!: HTMLDsoToggletipElement;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  /**\r\n   * Toggletip label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting\";\r\n\r\n  /**\r\n   * Toggletip position.\r\n   */\r\n  @Prop()\r\n  position: Placement = \"right\";\r\n\r\n  /**\r\n   * Set to true for small Toggletip.\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Set to true for secondary Toggletip.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n  private click = () => {\r\n    if (this.active) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n  };\r\n\r\n  private close = () => {\r\n    this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (!event.defaultPrevented && event.key === \"Escape\") {\r\n      this.close();\r\n      this.infoButton?.setFocus();\r\n      event.preventDefault();\r\n    }\r\n\r\n    return;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <dso-info-button\r\n          aria-describedby=\"toggle\"\r\n          onClick={this.click}\r\n          label={this.label}\r\n          active={this.active}\r\n          secondary={this.secondary}\r\n          ref={(element) => (this.infoButton = element)}\r\n        />\r\n        <dso-tooltip\r\n          stateless\r\n          descriptive\r\n          id=\"toggle\"\r\n          strategy=\"absolute\"\r\n          active={this.active}\r\n          position={this.position}\r\n          small={this.small}\r\n        >\r\n          <slot />\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Fragment"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,sOAAsO;;MCQ9O,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAAC,cAAA,EAAA,IAAA,EACED,OAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACFA,OAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACb;;;;;;;;"}

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-Bfuot2fD.js');
-var hasOverflow = require('./has-overflow-B_4p67wC.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var index$1 = require('./index-D8QM7CRO.js');
+var hasOverflow = require('./has-overflow-B_4p67wC.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 
 var maxSize = {
@@ -228,7 +228,7 @@ const Tooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4e8f8eea0ec4a80895d2c176c3ed2f9d9105742b', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, index.h("div", { key: '8e615027b936c9e26dc03b2f3dae790385e0b4f2', class: clsx.clsx("tooltip", { in: this.active }) }, !this.noArrow && index.h("div", { key: 'cdf7c81ceff86d5467982067d4ef3e347f2d909a', "data-popper-arrow": true, class: "tooltip-arrow" }), index.h("div", { key: '33bf1a7cbccbc81c38292b178edda20ab46b2b53', "aria-hidden": !this.descriptive || undefined, class: clsx.clsx("tooltip-inner", { "dso-small": this.small }) }, index.h("slot", { key: '1a7855066e3c084eaaf96a5084e10bac2c75aba1' })))));
+        return (index.h(index.Host, { key: '3b7b072ac2cbf99d0cd274fdd803f87110148747', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, index.h("div", { key: '9a50dba09c72797fd9f13a3afd0ee6ee74b3fb22', class: clsx.clsx("tooltip", { in: this.active }) }, !this.noArrow && index.h("div", { key: '7fb9ad5c0ab6733625321374974398d52b98f196', "data-popper-arrow": true, class: "tooltip-arrow" }), index.h("div", { key: 'e3aeb925d1073a4e5728cdbe241726993ff79941', "aria-hidden": !this.descriptive || undefined, class: clsx.clsx("tooltip-inner", { "dso-small": this.small }) }, index.h("slot", { key: 'ae49f6af4b043da6c4e62dc54fc88d47f9cab94c' })))));
     }
     activatePopper() {
         var _a;