@dso-toolkit/core 83.1.0 → 84.0.0

package/dist/components/dso-date-picker.js.map

@@ -1 +1 @@
-{"file":"dso-date-picker.js","mappings":"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","names":["DsoDatePicker","__stencil_proxyCustomElement"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n  if (!value) {\r\n    return;\r\n  }\r\n\r\n  const matches = value.split(\"-\");\r\n\r\n  if (\r\n    matches.length === 3 &&\r\n    typeof matches[0] === \"string\" &&\r\n    typeof matches[1] === \"string\" &&\r\n    typeof matches[2] === \"string\"\r\n  ) {\r\n    const [d, m, y] = matches;\r\n\r\n    const dd = d.padStart(2, \"0\");\r\n    const mm = m.padStart(2, \"0\");\r\n    const yyyy = y.padStart(4, \"0\");\r\n\r\n    return [yyyy, mm, dd].join(\"-\");\r\n  }\r\n\r\n  return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n  const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n  return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n  display: block;\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    .dso-date__input {\r\n      border-color: colors.$danger-color;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__input {\r\n  @include form-control.root();\r\n\r\n  &::-webkit-calendar-picker-indicator {\r\n    position: relative;\r\n    inset-inline-end: -8px;\r\n\r\n    font-size: 1.75rem;\r\n\r\n    filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  DatePickerBlurEvent,\r\n  DatePickerChangeEvent,\r\n  DatePickerError,\r\n  DatePickerFocusEvent,\r\n  DatePickerKeyboardEvent,\r\n} from \"./date-picker.interfaces\";\r\nimport { parseToDutchFormat, parseToValueFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n  tag: \"dso-date-picker\",\r\n  styleUrl: \"date-picker.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerElement;\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"dso-date\";\r\n\r\n  /**\r\n   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n   */\r\n  @Prop()\r\n  identifier: string | undefined;\r\n\r\n  /**\r\n   * Makes the date picker input component disabled. This prevents users from being able to\r\n   * interact with the input, and conveys its inactive state to assistive technologies.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop({ reflect: true })\r\n  required = false;\r\n\r\n  /**\r\n   * Is input invalid?\r\n   */\r\n  @Prop({ reflect: true })\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * ID of element that describes the input element\r\n   */\r\n  @Prop()\r\n  describedBy?: string;\r\n\r\n  /**\r\n   * Should the input be focused on load?\r\n   */\r\n  @Prop()\r\n  dsoAutofocus = false;\r\n\r\n  /**\r\n   * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n   */\r\n  @Prop({ reflect: true })\r\n  value = \"\";\r\n\r\n  /**\r\n   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the max property.\r\n   */\r\n  @Prop()\r\n  min: string | undefined;\r\n\r\n  /**\r\n   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the min property.\r\n   */\r\n  @Prop()\r\n  max: string | undefined;\r\n\r\n  /**\r\n   * Events section.\r\n   */\r\n\r\n  /**\r\n   * Event emitted when a date is selected.\r\n   */\r\n  @Event()\r\n  dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DatePickerBlurEvent>;\r\n\r\n  /**\r\n   * Event emitted on key up in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted on key down in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  private handleBlur = (e: FocusEvent) => {\r\n    e.stopPropagation();\r\n\r\n    const { target } = e;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerBlurEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoBlur.emit(event);\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleKeyUp = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyUp.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyDown.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n    const { valueAsDate, validity } = target;\r\n\r\n    return {\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n    };\r\n  }\r\n\r\n  private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n    if (validity.valueMissing) {\r\n      return \"required\";\r\n    }\r\n\r\n    if (validity.rangeUnderflow) {\r\n      return \"min-range\";\r\n    }\r\n\r\n    if (validity.rangeOverflow) {\r\n      return \"max-range\";\r\n    }\r\n\r\n    if (!validity.valid) {\r\n      return \"invalid\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        type=\"date\"\r\n        id={this.identifier}\r\n        class=\"dso-date__input\"\r\n        value={parseToValueFormat(this.value)}\r\n        name={this.name}\r\n        min={parseToValueFormat(this.min)}\r\n        max={parseToValueFormat(this.max)}\r\n        disabled={this.disabled || undefined}\r\n        required={this.required || undefined}\r\n        aria-autocomplete=\"none\"\r\n        aria-invalid={this.invalid?.toString()}\r\n        aria-describedby={this.describedBy}\r\n        autoComplete=\"off\"\r\n        autofocus={this.dsoAutofocus || undefined}\r\n        onBlur={this.handleBlur}\r\n        onFocus={this.handleFocus}\r\n        onKeyUp={this.handleKeyUp}\r\n        onKeyDown={this.handleKeyDown}\r\n        onChange={this.handleInputChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-date-picker.js","mappings":"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","names":["DsoDatePicker","__stencil_proxyCustomElement"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n  if (!value) {\r\n    return;\r\n  }\r\n\r\n  const matches = value.split(\"-\");\r\n\r\n  if (\r\n    matches.length === 3 &&\r\n    typeof matches[0] === \"string\" &&\r\n    typeof matches[1] === \"string\" &&\r\n    typeof matches[2] === \"string\"\r\n  ) {\r\n    const [d, m, y] = matches;\r\n\r\n    const dd = d.padStart(2, \"0\");\r\n    const mm = m.padStart(2, \"0\");\r\n    const yyyy = y.padStart(4, \"0\");\r\n\r\n    return [yyyy, mm, dd].join(\"-\");\r\n  }\r\n\r\n  return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n  const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n  return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n  display: block;\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    .dso-date__input {\r\n      border-color: colors.$danger-color;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__input {\r\n  @include form-control.root();\r\n\r\n  &::-webkit-calendar-picker-indicator {\r\n    position: relative;\r\n    inset-inline-end: -8px;\r\n\r\n    font-size: 1.75rem;\r\n\r\n    filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  DatePickerBlurEvent,\r\n  DatePickerChangeEvent,\r\n  DatePickerError,\r\n  DatePickerFocusEvent,\r\n  DatePickerKeyboardEvent,\r\n} from \"./date-picker.interfaces\";\r\nimport { parseToDutchFormat, parseToValueFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n  tag: \"dso-date-picker\",\r\n  styleUrl: \"date-picker.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerElement;\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"dso-date\";\r\n\r\n  /**\r\n   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n   */\r\n  @Prop()\r\n  identifier: string | undefined;\r\n\r\n  /**\r\n   * Makes the date picker input component disabled. This prevents users from being able to\r\n   * interact with the input, and conveys its inactive state to assistive technologies.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop({ reflect: true })\r\n  required = false;\r\n\r\n  /**\r\n   * Is input invalid?\r\n   */\r\n  @Prop({ reflect: true })\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * ID of element that describes the input element\r\n   */\r\n  @Prop()\r\n  describedBy?: string;\r\n\r\n  /**\r\n   * Should the input be focused on load?\r\n   */\r\n  @Prop()\r\n  dsoAutofocus = false;\r\n\r\n  /**\r\n   * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n   */\r\n  @Prop({ reflect: true })\r\n  value = \"\";\r\n\r\n  /**\r\n   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the max property.\r\n   */\r\n  @Prop()\r\n  min: string | undefined;\r\n\r\n  /**\r\n   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the min property.\r\n   */\r\n  @Prop()\r\n  max: string | undefined;\r\n\r\n  /**\r\n   * Events section.\r\n   */\r\n\r\n  /**\r\n   * Event emitted when a date is selected.\r\n   */\r\n  @Event()\r\n  dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DatePickerBlurEvent>;\r\n\r\n  /**\r\n   * Event emitted on key up in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted on key down in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  private handleBlur = (e: FocusEvent) => {\r\n    e.stopPropagation();\r\n\r\n    const { target } = e;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerBlurEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoBlur.emit(event);\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleKeyUp = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyUp.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyDown.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n    const { valueAsDate, validity } = target;\r\n\r\n    return {\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n    };\r\n  }\r\n\r\n  private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n    if (validity.valueMissing) {\r\n      return \"required\";\r\n    }\r\n\r\n    if (validity.rangeUnderflow) {\r\n      return \"min-range\";\r\n    }\r\n\r\n    if (validity.rangeOverflow) {\r\n      return \"max-range\";\r\n    }\r\n\r\n    if (!validity.valid) {\r\n      return \"invalid\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        type=\"date\"\r\n        id={this.identifier}\r\n        class=\"dso-date__input\"\r\n        value={parseToValueFormat(this.value)}\r\n        name={this.name}\r\n        min={parseToValueFormat(this.min)}\r\n        max={parseToValueFormat(this.max)}\r\n        disabled={this.disabled || undefined}\r\n        required={this.required || undefined}\r\n        aria-autocomplete=\"none\"\r\n        aria-invalid={this.invalid?.toString()}\r\n        aria-describedby={this.describedBy}\r\n        autoComplete=\"off\"\r\n        autofocus={this.dsoAutofocus || undefined}\r\n        onBlur={this.handleBlur}\r\n        onFocus={this.handleFocus}\r\n        onKeyUp={this.handleKeyUp}\r\n        onKeyDown={this.handleKeyDown}\r\n        onChange={this.handleInputChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-document-card.js

@@ -1,13 +1,15 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, transformTag } from '@stencil/core/internal/client';
 import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const documentCardCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:16px !important}}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}";
+const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:16px !important}}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}`;
 
 const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoDocumentCardClick = createEvent(this, "dsoDocumentCardClick", 7);
     }
@@ -33,7 +35,7 @@ const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends
         return (h("div", { key: 'fa7b46b5f893de1939b774c925d34f7f18e15571', class: "dso-document-card-container" }, h("div", { key: '682a8fa1673b1c38ca16fc6f4f1a274719adb9f4', class: "dso-document-card-heading" }, h("a", { key: 'ee6c434a98e009753e38f92ef38580970025a58b', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'a14a1a16baafedd1806bf3417dea1135b9cfdb41', class: "icon-container" }, h("dso-icon", { key: '843ee861b72689523ce5af6479a3aa1a9ffd84c2', icon: "chevron-right" }), h("slot", { key: '918b8e3797b99bd07902ab849f95e3a5b2bf1531', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '226986aeeb3d0091f274697b67ebd8de3c358c53', name: "meta" })), h("div", { key: 'e0d5195cfa6feb274e4df486b4ca5869f6654ada', class: "dso-document-card-type" }, h("slot", { key: '089ae1f70596e1bff98b74acad76a0c6f00e665e', name: "type" })), h("div", { key: '6ae6d7023a4b045f7120977d5bccd9b3edaf5ccd', class: "dso-document-card-status" }, h("slot", { key: '832d0c2fda8e6fab9ff211d3fbbdd3a8bdf3bbce', name: "status" }))));
     }
     get host() { return this; }
-    static get style() { return documentCardCss; }
+    static get style() { return documentCardCss(); }
 }, [257, "dso-document-card", {
         "href": [513],
         "active": [516]
@@ -45,12 +47,12 @@ function defineCustomElement$1() {
     const components = ["dso-document-card", "dso-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-document-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DocumentCard);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), DocumentCard);
             }
             break;
         case "dso-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/components/dso-document-card.js.map

@@ -1 +1 @@
-{"file":"dso-document-card.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,wxDAAwxD;;MCiBnyD,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;;IAwBvB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGjF,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAGtB,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD;;AAGF,QAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;AAGlG,IAAA,IAAI,kBAAkB,GAAA;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;;IAGjD,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAClF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC1B,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAG,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CAClB,CACL,EACH,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACrD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/document-card/document-card.scss?tag=dso-document-card&encapsulation=shadow","src/components/document-card/document-card.tsx"],"sourcesContent":["@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/colors\";\r\n@use \"~dso-toolkit/src/components/document-card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-document-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-document-card-heading {\r\n    align-items: center;\r\n    display: flex;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n      flex-wrap: wrap;\r\n    }\r\n  }\r\n\r\n  &:has(.dso-document-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: document-card.$background-color-hover;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-document-card-container {\r\n    background-color: document-card.$background-color-active;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  flex-shrink: 0 !important;\r\n  align-self: end !important;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    flex-basis: 100% !important;\r\n    margin-block-start: units.$u2 !important;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: inline !important;\r\n  color: colors.$bosgroen !important;\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.25 !important;\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n}\r\n\r\n.heading-anchor {\r\n  color: document-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: document-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: document-card.$heading-anchor-color;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n\r\n  .icon-container {\r\n    position: relative;\r\n    padding-inline-end: units.$u3;\r\n\r\n    dso-icon {\r\n      position: absolute;\r\n      inset-inline-end: 0;\r\n      inset-block-end: -3px;\r\n      block-size: units.$u3;\r\n      inline-size: units.$u3;\r\n    }\r\n  }\r\n}\r\n\r\n::slotted([slot=\"type\"]) {\r\n  --_dt-info-button-margin-inline-start: 0;\r\n\r\n  display: flex !important;\r\n  gap: units.$u1 !important;\r\n}\r\n\r\n.dso-document-card-heading + .dso-document-card-type,\r\n.dso-document-card-heading + .dso-document-card-status,\r\n.dso-document-card-type + .dso-document-card-status {\r\n  margin-block-start: units.$u1;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DocumentCardClickEvent } from \"./document-card.interfaces\";\r\n\r\n/**\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot type - A slot to hold type of document with an optional `Toggletip`.\r\n * @slot status - A slot to hold some status information on the document.\r\n */\r\n@Component({\r\n  tag: \"dso-document-card\",\r\n  styleUrl: \"document-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoDocumentCardElement;\r\n\r\n  /**\r\n   * The URL to which the DocumentCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Makes the DocumentCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the DocumentCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoDocumentCardClick!: EventEmitter<DocumentCardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dso-document-card-container\">\r\n        <div class=\"dso-document-card-heading\">\r\n          <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n            <span class=\"icon-container\">\r\n              <dso-icon icon=\"chevron-right\" />\r\n              <slot name=\"heading\" />\r\n            </span>\r\n          </a>\r\n          {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n        </div>\r\n        <div class=\"dso-document-card-type\">\r\n          <slot name=\"type\" />\r\n        </div>\r\n        <div class=\"dso-document-card-status\">\r\n          <slot name=\"status\" />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-document-card.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,2xDAA2xD,CAAC;;MCiB9yD,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;;;;IAwBvB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGjF,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAGtB,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD;;AAGF,QAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;AAGlG,IAAA,IAAI,kBAAkB,GAAA;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;;IAGjD,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAClF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC1B,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAG,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CAClB,CACL,EACH,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACrD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/document-card/document-card.scss?tag=dso-document-card&encapsulation=shadow","src/components/document-card/document-card.tsx"],"sourcesContent":["@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/colors\";\r\n@use \"~dso-toolkit/src/components/document-card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-document-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-document-card-heading {\r\n    align-items: center;\r\n    display: flex;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n      flex-wrap: wrap;\r\n    }\r\n  }\r\n\r\n  &:has(.dso-document-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: document-card.$background-color-hover;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-document-card-container {\r\n    background-color: document-card.$background-color-active;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  flex-shrink: 0 !important;\r\n  align-self: end !important;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    flex-basis: 100% !important;\r\n    margin-block-start: units.$u2 !important;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: inline !important;\r\n  color: colors.$bosgroen !important;\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.25 !important;\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n}\r\n\r\n.heading-anchor {\r\n  color: document-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: document-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: document-card.$heading-anchor-color;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n\r\n  .icon-container {\r\n    position: relative;\r\n    padding-inline-end: units.$u3;\r\n\r\n    dso-icon {\r\n      position: absolute;\r\n      inset-inline-end: 0;\r\n      inset-block-end: -3px;\r\n      block-size: units.$u3;\r\n      inline-size: units.$u3;\r\n    }\r\n  }\r\n}\r\n\r\n::slotted([slot=\"type\"]) {\r\n  --_dt-info-button-margin-inline-start: 0;\r\n\r\n  display: flex !important;\r\n  gap: units.$u1 !important;\r\n}\r\n\r\n.dso-document-card-heading + .dso-document-card-type,\r\n.dso-document-card-heading + .dso-document-card-status,\r\n.dso-document-card-type + .dso-document-card-status {\r\n  margin-block-start: units.$u1;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DocumentCardClickEvent } from \"./document-card.interfaces\";\r\n\r\n/**\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot type - A slot to hold type of document with an optional `Toggletip`.\r\n * @slot status - A slot to hold some status information on the document.\r\n */\r\n@Component({\r\n  tag: \"dso-document-card\",\r\n  styleUrl: \"document-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoDocumentCardElement;\r\n\r\n  /**\r\n   * The URL to which the DocumentCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Makes the DocumentCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the DocumentCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoDocumentCardClick!: EventEmitter<DocumentCardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dso-document-card-container\">\r\n        <div class=\"dso-document-card-heading\">\r\n          <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n            <span class=\"icon-container\">\r\n              <dso-icon icon=\"chevron-right\" />\r\n              <slot name=\"heading\" />\r\n            </span>\r\n          </a>\r\n          {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n        </div>\r\n        <div class=\"dso-document-card-type\">\r\n          <slot name=\"type\" />\r\n        </div>\r\n        <div class=\"dso-document-card-status\">\r\n          <slot name=\"status\" />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-header.js

@@ -1,4 +1,4 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, forceUpdate, Host, Fragment } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent, forceUpdate, Host, Fragment, transformTag } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
 import { i as i18n } from './i18n.js';
 import { i as isModifiedEvent } from './is-modified-event.js';
@@ -28,17 +28,18 @@ const translations = {
 };
 
 const MenuItem = ({ item, onClick, key, ref }) => {
-    return (h("li", { class: clsx({ "dso-active": item.active }), key: key, ref: ref },
-        h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: onClick }, item.label)));
+    return (h("li", { class: clsx({ "dso-active": item.active }), key: key, ref: ref }, h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: onClick }, item.label)));
 };
 
-const headerCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) dso-dropdown-menu .dso-dropdown-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) dso-dropdown-menu .dso-dropdown-options{inline-size:375px}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;gap:0.5rem;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-dropdown-menu>.dso-primary,dso-dropdown-menu>.dso-secondary,dso-dropdown-menu>.dso-tertiary{position:relative}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary)::after,dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after{content:\"\";display:inline-block}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after{margin-inline-start:8px}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding-block:4px 2px;padding-inline:20px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-block:5px;padding-inline:0;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus-visible,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus-visible,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding-block:3px;padding-inline:20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;inline-size:100%}dso-dropdown-menu button{background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;align-items:center;position:relative}dso-dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}dso-dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}dso-dropdown-menu .dso-dropdown-options ul{margin:0;padding:0;list-style:none}dso-dropdown-menu .dso-dropdown-options ul li a,dso-dropdown-menu .dso-dropdown-options ul li button{display:block;padding:16px;color:#275937;font-size:1.25rem;white-space:pre-wrap;text-decoration:none}dso-dropdown-menu .dso-dropdown-options ul li a:focus-visible,dso-dropdown-menu .dso-dropdown-options ul li button:focus-visible{background-color:#39870c;color:#fff}dso-dropdown-menu .dso-dropdown-options ul li a:hover,dso-dropdown-menu .dso-dropdown-options ul li button:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu .dso-dropdown-options ul li a:visited:not(:hover):not(:focus-visible),dso-dropdown-menu .dso-dropdown-options ul li button:visited:not(:hover):not(:focus-visible){color:#275937}dso-dropdown-menu .dso-dropdown-options ul li button{inline-size:100%;text-align:start}dso-dropdown-menu .dso-dropdown-options ul li button dso-icon{margin-inline-start:8px}dso-dropdown-menu .dso-dropdown-options ul li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown dso-dropdown-menu{position:static}.dropdown dso-dropdown-menu .dso-dropdown-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dropdown dso-dropdown-menu>button{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown dso-dropdown-menu>button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:50%;transform:translateY(-50%)}.dropdown dso-dropdown-menu>button:hover,.dropdown dso-dropdown-menu>button:active{cursor:pointer;text-decoration:underline}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{text-decoration:none}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus-visible,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}";
+const headerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) dso-dropdown-menu .dso-dropdown-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) dso-dropdown-menu .dso-dropdown-options{inline-size:375px}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;gap:0.5rem;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-dropdown-menu>.dso-primary,dso-dropdown-menu>.dso-secondary,dso-dropdown-menu>.dso-tertiary{position:relative}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary)::after,dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after{content:"";display:inline-block}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after{margin-inline-start:8px}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding-block:4px 2px;padding-inline:20px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-block:5px;padding-inline:0;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus-visible,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus-visible,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding-block:3px;padding-inline:20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;inline-size:100%}dso-dropdown-menu button{background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;align-items:center;position:relative}dso-dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}dso-dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}dso-dropdown-menu .dso-dropdown-options ul{margin:0;padding:0;list-style:none}dso-dropdown-menu .dso-dropdown-options ul li a,dso-dropdown-menu .dso-dropdown-options ul li button{display:block;padding:16px;color:#275937;font-size:1.25rem;white-space:pre-wrap;text-decoration:none}dso-dropdown-menu .dso-dropdown-options ul li a:focus-visible,dso-dropdown-menu .dso-dropdown-options ul li button:focus-visible{background-color:#39870c;color:#fff}dso-dropdown-menu .dso-dropdown-options ul li a:hover,dso-dropdown-menu .dso-dropdown-options ul li button:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu .dso-dropdown-options ul li a:visited:not(:hover):not(:focus-visible),dso-dropdown-menu .dso-dropdown-options ul li button:visited:not(:hover):not(:focus-visible){color:#275937}dso-dropdown-menu .dso-dropdown-options ul li button{inline-size:100%;text-align:start}dso-dropdown-menu .dso-dropdown-options ul li button dso-icon{margin-inline-start:8px}dso-dropdown-menu .dso-dropdown-options ul li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown dso-dropdown-menu{position:static}.dropdown dso-dropdown-menu .dso-dropdown-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dropdown dso-dropdown-menu>button{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown dso-dropdown-menu>button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:50%;transform:translateY(-50%)}.dropdown dso-dropdown-menu>button:hover,.dropdown dso-dropdown-menu>button:active{cursor:pointer;text-decoration:underline}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{text-decoration:none}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus-visible,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}`;
 
 const minDesktopViewportWidth = 992;
 const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoHeaderClick = createEvent(this, "dsoHeaderClick", 7);
         /**
@@ -172,9 +173,9 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
     static get watchers() { return {
         "mainMenu": ["mainMenuChanged"]
     }; }
-    static get style() { return headerCss; }
+    static get style() { return headerCss(); }
 }, [257, "dso-header", {
-        "mainMenu": [16, "main-menu"],
+        "mainMenu": [16],
         "compact": [1],
         "authStatus": [1, "auth-status"],
         "loginUrl": [1, "login-url"],
@@ -197,17 +198,17 @@ function defineCustomElement$1() {
     const components = ["dso-header", "dso-dropdown-menu", "dso-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Header);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), Header);
             }
             break;
         case "dso-dropdown-menu":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "dso-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/components/dso-header.js.map

@@ -1 +1 @@
-{"file":"dso-header.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Log in\",\r\n      logout: \"Log out\",\r\n      help: \"Help\",\r\n      overflowMenu: \"More\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Inloggen\",\r\n      logout: \"Uitloggen\",\r\n      help: \"Help\",\r\n      overflowMenu: \"Meer\",\r\n      userHome: \"Mijn Omgevingsloket\",\r\n    },\r\n  },\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n  item: HeaderMenuItem;\r\n  onClick: (event: MouseEvent) => void;\r\n  key: string;\r\n  ref?: (el: HTMLLIElement | undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n  return (\r\n    <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n      <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n        {item.label}\r\n      </a>\r\n    </li>\r\n  );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n  border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n  font-size: 1.25em;\r\n  line-height: 1;\r\n  padding-block: units.$u2;\r\n  padding-inline: 0;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host([is-compact]) {\r\n  ::slotted([slot=\"logo\"]) {\r\n    --_dso-logo-block-size: #{units.$ru5} !important;\r\n  }\r\n\r\n  .dso-header {\r\n    flex-wrap: nowrap;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n  .dso-header {\r\n    align-items: center;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 375px;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-header {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n\r\n  .dso-nav {\r\n    border: 0;\r\n  }\r\n}\r\n\r\n.logo-container {\r\n  flex: 1 1 12.5rem;\r\n  margin-inline-end: units.$u3;\r\n  padding-block-end: units.$u2;\r\n  padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n  display: flex;\r\n  align-items: center;\r\n  margin-inline-start: auto;\r\n\r\n  .profile,\r\n  .login,\r\n  .logout,\r\n  .help {\r\n    .dso-tertiary {\r\n      display: flex;\r\n      gap: 0.5rem;\r\n\r\n      cursor: pointer;\r\n\r\n      border: 0;\r\n\r\n      background-color: transparent;\r\n\r\n      padding-inline: 0;\r\n\r\n      outline-offset: 2px;\r\n\r\n      font-family: typography.$font-family-base;\r\n      color: colors.$grasgroen;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      line-height: 1.5;\r\n      text-decoration: none;\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n\r\n  .profile + .logout,\r\n  .logout + .help,\r\n  .login + .help {\r\n    border-inline-start: 3px solid colors.$grijs-20;\r\n    margin-inline-start: units.$u1;\r\n    padding-inline-start: units.$u1;\r\n  }\r\n\r\n  .help {\r\n    a,\r\n    button {\r\n      display: flex;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-navbar {\r\n  flex-basis: 100%;\r\n  max-inline-size: 100%;\r\n  position: relative; // Needed for menu item calculations\r\n}\r\n\r\ndso-dropdown-menu {\r\n  @include dropdown-menu.children();\r\n\r\n  button {\r\n    background-color: transparent;\r\n    border: 0;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    align-items: center;\r\n    position: relative;\r\n\r\n    dso-icon {\r\n      inline-size: units.$u3;\r\n      block-size: units.$u3;\r\n      margin-inline-start: units.$u1;\r\n      padding-block-start: units.$u1 * 0.25;\r\n    }\r\n\r\n    &[aria-expanded=\"true\"] {\r\n      dso-icon {\r\n        transform: rotate(180deg);\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-dropdown-options {\r\n    border: 0;\r\n    border-radius: 0;\r\n    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n    ul {\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n\r\n      li {\r\n        a,\r\n        button {\r\n          display: block;\r\n          padding: units.$u2;\r\n          color: colors.$bosgroen;\r\n          font-size: 1.25rem;\r\n          white-space: pre-wrap;\r\n          text-decoration: none;\r\n\r\n          &:focus-visible {\r\n            background-color: colors.$grasgroen;\r\n            color: colors.$wit;\r\n          }\r\n\r\n          &:hover {\r\n            background-color: colors.$wit;\r\n            color: colors.$bosgroen;\r\n            text-decoration: underline;\r\n          }\r\n\r\n          &:visited:not(:hover):not(:focus-visible) {\r\n            color: colors.$bosgroen;\r\n          }\r\n        }\r\n\r\n        button {\r\n          inline-size: 100%;\r\n          text-align: start;\r\n\r\n          dso-icon {\r\n            margin-inline-start: units.$u1;\r\n          }\r\n        }\r\n\r\n        &.dso-active {\r\n          a {\r\n            font-weight: 600;\r\n          }\r\n        }\r\n\r\n        + li {\r\n          border-block-start: 1px solid colors.$grijs-20;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dropdown {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  dso-dropdown-menu {\r\n    position: static;\r\n\r\n    .dso-dropdown-options {\r\n      inset-inline-end: 0;\r\n      inset-block-start: 100%;\r\n      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n    }\r\n\r\n    > button {\r\n      color: colors.$grasgroen;\r\n      font-size: typography.$font-size-base;\r\n      font-weight: 600;\r\n      line-height: normal;\r\n      position: relative;\r\n\r\n      &::after {\r\n        margin-inline-start: units.$u1;\r\n        position: absolute;\r\n        inset-inline-end: 0px;\r\n        inset-block-start: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n\r\n      &:hover,\r\n      &:active {\r\n        cursor: pointer;\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-nav {\r\n  &.ready {\r\n    .menu-user-home {\r\n      margin-inline-start: auto;\r\n    }\r\n  }\r\n\r\n  align-items: end;\r\n  column-gap: units.$u4;\r\n  display: flex;\r\n  list-style: none;\r\n  margin-block-end: 0;\r\n  margin-block-start: 0;\r\n  padding-inline-start: 0;\r\n\r\n  > li {\r\n    margin-block-end: 4px;\r\n\r\n    > a {\r\n      display: block;\r\n\r\n      &,\r\n      &:hover,\r\n      &:focus,\r\n      &:visited {\r\n        color: colors.$bosgroen;\r\n      }\r\n    }\r\n\r\n    &.dso-active,\r\n    &.is-active {\r\n      margin-block-end: 0;\r\n\r\n      > a {\r\n        @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n        font-weight: bold;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-nav-main {\r\n    display: flex !important;\r\n\r\n    > li {\r\n      > a {\r\n        @include link.reverse();\r\n        @include nav-item-main();\r\n\r\n        // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n        white-space: nowrap;\r\n      }\r\n    }\r\n\r\n    dso-dropdown-menu {\r\n      .dso-dropdown-options {\r\n        inset-inline-start: units.$ru2 * -1 !important;\r\n        inset-block-start: 3px !important;\r\n      }\r\n\r\n      button {\r\n        @include nav-item-main();\r\n\r\n        align-items: flex-end;\r\n        color: colors.$bosgroen;\r\n\r\n        &:hover,\r\n        &:active {\r\n          cursor: pointer;\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &::after {\r\n          margin-inline-start: units.$u1;\r\n          position: absolute;\r\n          inset-inline-end: 0px;\r\n          inset-block-start: auto;\r\n          transform: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .main-menu-item-icon {\r\n    block-size: 1em;\r\n    margin-inline-end: units.$u1;\r\n    position: relative;\r\n    inset-block-start: -2px;\r\n    inline-size: 1.2em;\r\n  }\r\n\r\n  .dropdown-menu-item .main-menu-item-icon {\r\n    margin-inline-end: 0;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport {\r\n  HeaderAuthStatus,\r\n  HeaderCompactMode,\r\n  HeaderEvent,\r\n  HeaderMenuItem,\r\n  HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n  menuItem?: HeaderMenuItem;\r\n  url?: string;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-header\",\r\n  styleUrl: \"header.scss\",\r\n  shadow: true,\r\n})\r\nexport class Header implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoHeaderElement;\r\n\r\n  /**\r\n   * The main menu items.\r\n   */\r\n  @Prop()\r\n  mainMenu: HeaderMenuItem[] = [];\r\n\r\n  /**\r\n   * Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n   * the viewport is smaller than 992px.\r\n   */\r\n  @Prop()\r\n  compact: HeaderCompactMode = \"auto\";\r\n\r\n  /**\r\n   * Used to show the login/logout option. 'none' renders nothing.\r\n   */\r\n  @Prop()\r\n  authStatus: HeaderAuthStatus = \"none\";\r\n\r\n  /**\r\n   * When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n   * The login button will then render as an anchor.\r\n   */\r\n  @Prop()\r\n  loginUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"logout\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  logoutUrl?: string;\r\n\r\n  /**\r\n   * Show a help-button or link in the header\r\n   */\r\n  @Prop()\r\n  showHelp = false;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"help\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  helpUrl?: string;\r\n\r\n  /**\r\n   * The name to show when the user is logged in.\r\n   */\r\n  @Prop()\r\n  userProfileName?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates the profile url.\r\n   */\r\n  @Prop()\r\n  userProfileUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeUrl?: string;\r\n\r\n  /**\r\n   * Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeActive = false;\r\n\r\n  /**\r\n   * Emitted when something in the header is selected.\r\n   *\r\n   * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n   */\r\n  @Event()\r\n  dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n  @State()\r\n  visibleMenuItemsCount: number | undefined = undefined;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  @Watch(\"mainMenu\")\r\n  mainMenuChanged() {\r\n    this.resetVisibleMenuItems();\r\n  }\r\n\r\n  private resetVisibleMenuItems = () => {\r\n    this.visibleMenuItemsCount = undefined;\r\n  };\r\n\r\n  private get isCompact() {\r\n    return this.compact === \"always\" || window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\r\n    this.dsoHeaderClick.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n      type,\r\n      menuItem: options?.menuItem,\r\n      url: options?.url ?? options?.menuItem?.url,\r\n    });\r\n  };\r\n\r\n  private dropdownElement: HTMLDsoDropdownMenuElement | undefined;\r\n  private navElement: HTMLUListElement | undefined;\r\n  private menuItemElementRefs: (HTMLLIElement | undefined)[] = [];\r\n  private dropdownMenuItemElementRef: HTMLLIElement | undefined;\r\n  private userHomeMenuItemElementRef: HTMLLIElement | undefined;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  /**\r\n   * Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n   * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n   *\r\n   * When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n   *\r\n   * @param navElement The navigation element to calculate the overflow menu item count for.\r\n   * @returns The number of menu items that can fit in the available space.\r\n   */\r\n  private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n    const availableWidth = navElement.offsetWidth;\r\n\r\n    const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n    const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n    const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n    if (!mostRightMenuItem || !dropdownMenuItem || !lastMenuItem) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const dropdownMenuItemEffectiveWidth =\r\n      dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n    const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n    if (requiredWidth <= availableWidth) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n      ? this.userHomeMenuItemElementRef.offsetLeft +\r\n        this.userHomeMenuItemElementRef.offsetWidth -\r\n        (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n      : 0;\r\n\r\n    const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n    const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n      (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n    );\r\n\r\n    if (visibleMenuItems < 0) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    return visibleMenuItems;\r\n  }\r\n\r\n  private calculateDropdownOptionsOffset() {\r\n    if (!this.dropdownElement) {\r\n      return 0;\r\n    }\r\n\r\n    return (\r\n      this.host.clientHeight -\r\n      (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n    );\r\n  }\r\n\r\n  private get visibleMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\"\r\n      ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n      : this.mainMenu;\r\n  }\r\n\r\n  private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n  }\r\n\r\n  private resizeObserver = new ResizeObserver(() => {\r\n    this.resetVisibleMenuItems();\r\n\r\n    forceUpdate(this.host);\r\n  });\r\n\r\n  connectedCallback(): void {\r\n    this.resizeObserver.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver.disconnect();\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (this.isCompact && this.dropdownElement) {\r\n      this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n\r\n    if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n      this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host is-compact={this.isCompact}>\r\n        <div class=\"dso-header\">\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\r\n          </div>\r\n          {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private renderCompact() {\r\n    return (\r\n      (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== \"none\") && (\r\n        <div class=\"dropdown\">\r\n          <dso-dropdown-menu\r\n            dropdown-align=\"right\"\r\n            dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n            ref={(element) => (this.dropdownElement = element)}\r\n          >\r\n            <button type=\"button\" slot=\"toggle\">\r\n              <span>{this.text(\"menu\")}</span>\r\n              <dso-icon icon=\"chevron-down\"></dso-icon>\r\n            </button>\r\n            <div class=\"dso-dropdown-options\">\r\n              <ul>\r\n                {this.mainMenu.map((menuItem) => (\r\n                  <MenuItem\r\n                    item={menuItem}\r\n                    onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n                    key={menuItem.label}\r\n                  />\r\n                ))}\r\n                {this.userHomeUrl && (\r\n                  <li>\r\n                    <a\r\n                      href={this.userHomeUrl}\r\n                      onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                    >\r\n                      {this.text(\"userHome\")}\r\n                    </a>\r\n                  </li>\r\n                )}\r\n                {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                  <li>\r\n                    <a\r\n                      href={this.userProfileUrl}\r\n                      onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                    >\r\n                      {this.userProfileName}\r\n                      <span class=\"profile-label\"> - Mijn profiel</span>\r\n                    </a>\r\n                  </li>\r\n                )}\r\n                {this.authStatus === \"loggedOut\" && (\r\n                  <li>\r\n                    {this.loginUrl ? (\r\n                      <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n                        {this.text(\"login\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        {this.text(\"login\")}\r\n                      </button>\r\n                    )}\r\n                  </li>\r\n                )}\r\n                {this.authStatus === \"loggedIn\" && (\r\n                  <li>\r\n                    {this.logoutUrl ? (\r\n                      <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n                        {this.text(\"logout\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        {this.text(\"logout\")}\r\n                      </button>\r\n                    )}\r\n                  </li>\r\n                )}\r\n                {this.showHelp && (\r\n                  <li>\r\n                    {this.helpUrl ? (\r\n                      <a\r\n                        href={this.helpUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                      >\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </a>\r\n                    ) : (\r\n                      <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </button>\r\n                    )}\r\n                  </li>\r\n                )}\r\n              </ul>\r\n            </div>\r\n          </dso-dropdown-menu>\r\n        </div>\r\n      )\r\n    );\r\n  }\r\n\r\n  private renderNormal() {\r\n    this.menuItemElementRefs = [];\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class=\"dso-header-session\">\r\n          {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n            <div class=\"profile\">\r\n              <a\r\n                href={this.userProfileUrl}\r\n                class=\"dso-tertiary\"\r\n                onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n              >\r\n                {this.userProfileName}\r\n              </a>\r\n            </div>\r\n          )}\r\n          {this.authStatus === \"loggedOut\" && (\r\n            <div class=\"login\">\r\n              {this.loginUrl ? (\r\n                <a\r\n                  href={this.loginUrl}\r\n                  class=\"dso-tertiary\"\r\n                  onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                >\r\n                  {this.text(\"login\")}\r\n                </a>\r\n              ) : (\r\n                <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                  {this.text(\"login\")}\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n          {this.authStatus === \"loggedIn\" && (\r\n            <div class=\"logout\">\r\n              {this.logoutUrl ? (\r\n                <a\r\n                  href={this.logoutUrl}\r\n                  class=\"dso-tertiary\"\r\n                  onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                >\r\n                  {this.text(\"logout\")}\r\n                </a>\r\n              ) : (\r\n                <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                  {this.text(\"logout\")}\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n          {this.showHelp && (\r\n            <div class=\"help\">\r\n              {this.helpUrl ? (\r\n                <a\r\n                  href={this.helpUrl}\r\n                  class=\"dso-tertiary\"\r\n                  onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                >\r\n                  <span>{this.text(\"help\")}</span>\r\n                  <dso-icon icon=\"help\"></dso-icon>\r\n                </a>\r\n              ) : (\r\n                <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                  <span>{this.text(\"help\")}</span>\r\n                  <dso-icon icon=\"help\"></dso-icon>\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n        {(this.mainMenu.length > 0 || this.userHomeUrl) && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul\r\n              class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n              ref={(element) => (this.navElement = element)}\r\n            >\r\n              {this.visibleMainMenuItems.map((menuItem, i) => (\r\n                <MenuItem\r\n                  item={menuItem}\r\n                  onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n                  key={menuItem.label}\r\n                  ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n                />\r\n              ))}\r\n              {(this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (\r\n                <li\r\n                  aria-hidden={this.visibleMenuItemsCount === undefined}\r\n                  ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n                  class=\"dropdown-menu-item\"\r\n                >\r\n                  <dso-dropdown-menu>\r\n                    <button type=\"button\" slot=\"toggle\">\r\n                      <span>{this.text(\"overflowMenu\")}</span>\r\n                      <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n                    </button>\r\n                    <div class=\"dso-dropdown-options\">\r\n                      <ul>\r\n                        {this.hiddenMainMenuItems.map((menuItem) => (\r\n                          <MenuItem\r\n                            item={menuItem}\r\n                            onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n                            key={menuItem.label}\r\n                          />\r\n                        ))}\r\n                      </ul>\r\n                    </div>\r\n                  </dso-dropdown-menu>\r\n                </li>\r\n              )}\r\n              {this.userHomeUrl && (\r\n                <li\r\n                  class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n                  ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n                >\r\n                  <a\r\n                    href={this.userHomeUrl}\r\n                    aria-current={this.userHomeActive ? \"page\" : undefined}\r\n                    onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                  >\r\n                    <dso-icon icon=\"user-line\" class=\"main-menu-item-icon\"></dso-icon>\r\n                    {this.text(\"userHome\")}\r\n                  </a>\r\n                </li>\r\n              )}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-header.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Log in\",\r\n      logout: \"Log out\",\r\n      help: \"Help\",\r\n      overflowMenu: \"More\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Inloggen\",\r\n      logout: \"Uitloggen\",\r\n      help: \"Help\",\r\n      overflowMenu: \"Meer\",\r\n      userHome: \"Mijn Omgevingsloket\",\r\n    },\r\n  },\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n  item: HeaderMenuItem;\r\n  onClick: (event: MouseEvent) => void;\r\n  key: string;\r\n  ref?: (el: HTMLLIElement | undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n  return (\r\n    <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n      <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n        {item.label}\r\n      </a>\r\n    </li>\r\n  );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n  border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n  font-size: 1.25em;\r\n  line-height: 1;\r\n  padding-block: units.$u2;\r\n  padding-inline: 0;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host([is-compact]) {\r\n  ::slotted([slot=\"logo\"]) {\r\n    --_dso-logo-block-size: #{units.$ru5} !important;\r\n  }\r\n\r\n  .dso-header {\r\n    flex-wrap: nowrap;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n  .dso-header {\r\n    align-items: center;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 375px;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-header {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n\r\n  .dso-nav {\r\n    border: 0;\r\n  }\r\n}\r\n\r\n.logo-container {\r\n  flex: 1 1 12.5rem;\r\n  margin-inline-end: units.$u3;\r\n  padding-block-end: units.$u2;\r\n  padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n  display: flex;\r\n  align-items: center;\r\n  margin-inline-start: auto;\r\n\r\n  .profile,\r\n  .login,\r\n  .logout,\r\n  .help {\r\n    .dso-tertiary {\r\n      display: flex;\r\n      gap: 0.5rem;\r\n\r\n      cursor: pointer;\r\n\r\n      border: 0;\r\n\r\n      background-color: transparent;\r\n\r\n      padding-inline: 0;\r\n\r\n      outline-offset: 2px;\r\n\r\n      font-family: typography.$font-family-base;\r\n      color: colors.$grasgroen;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      line-height: 1.5;\r\n      text-decoration: none;\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n\r\n  .profile + .logout,\r\n  .logout + .help,\r\n  .login + .help {\r\n    border-inline-start: 3px solid colors.$grijs-20;\r\n    margin-inline-start: units.$u1;\r\n    padding-inline-start: units.$u1;\r\n  }\r\n\r\n  .help {\r\n    a,\r\n    button {\r\n      display: flex;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-navbar {\r\n  flex-basis: 100%;\r\n  max-inline-size: 100%;\r\n  position: relative; // Needed for menu item calculations\r\n}\r\n\r\ndso-dropdown-menu {\r\n  @include dropdown-menu.children();\r\n\r\n  button {\r\n    background-color: transparent;\r\n    border: 0;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    align-items: center;\r\n    position: relative;\r\n\r\n    dso-icon {\r\n      inline-size: units.$u3;\r\n      block-size: units.$u3;\r\n      margin-inline-start: units.$u1;\r\n      padding-block-start: units.$u1 * 0.25;\r\n    }\r\n\r\n    &[aria-expanded=\"true\"] {\r\n      dso-icon {\r\n        transform: rotate(180deg);\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-dropdown-options {\r\n    border: 0;\r\n    border-radius: 0;\r\n    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n    ul {\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n\r\n      li {\r\n        a,\r\n        button {\r\n          display: block;\r\n          padding: units.$u2;\r\n          color: colors.$bosgroen;\r\n          font-size: 1.25rem;\r\n          white-space: pre-wrap;\r\n          text-decoration: none;\r\n\r\n          &:focus-visible {\r\n            background-color: colors.$grasgroen;\r\n            color: colors.$wit;\r\n          }\r\n\r\n          &:hover {\r\n            background-color: colors.$wit;\r\n            color: colors.$bosgroen;\r\n            text-decoration: underline;\r\n          }\r\n\r\n          &:visited:not(:hover):not(:focus-visible) {\r\n            color: colors.$bosgroen;\r\n          }\r\n        }\r\n\r\n        button {\r\n          inline-size: 100%;\r\n          text-align: start;\r\n\r\n          dso-icon {\r\n            margin-inline-start: units.$u1;\r\n          }\r\n        }\r\n\r\n        &.dso-active {\r\n          a {\r\n            font-weight: 600;\r\n          }\r\n        }\r\n\r\n        + li {\r\n          border-block-start: 1px solid colors.$grijs-20;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dropdown {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  dso-dropdown-menu {\r\n    position: static;\r\n\r\n    .dso-dropdown-options {\r\n      inset-inline-end: 0;\r\n      inset-block-start: 100%;\r\n      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n    }\r\n\r\n    > button {\r\n      color: colors.$grasgroen;\r\n      font-size: typography.$font-size-base;\r\n      font-weight: 600;\r\n      line-height: normal;\r\n      position: relative;\r\n\r\n      &::after {\r\n        margin-inline-start: units.$u1;\r\n        position: absolute;\r\n        inset-inline-end: 0px;\r\n        inset-block-start: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n\r\n      &:hover,\r\n      &:active {\r\n        cursor: pointer;\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-nav {\r\n  &.ready {\r\n    .menu-user-home {\r\n      margin-inline-start: auto;\r\n    }\r\n  }\r\n\r\n  align-items: end;\r\n  column-gap: units.$u4;\r\n  display: flex;\r\n  list-style: none;\r\n  margin-block-end: 0;\r\n  margin-block-start: 0;\r\n  padding-inline-start: 0;\r\n\r\n  > li {\r\n    margin-block-end: 4px;\r\n\r\n    > a {\r\n      display: block;\r\n\r\n      &,\r\n      &:hover,\r\n      &:focus,\r\n      &:visited {\r\n        color: colors.$bosgroen;\r\n      }\r\n    }\r\n\r\n    &.dso-active,\r\n    &.is-active {\r\n      margin-block-end: 0;\r\n\r\n      > a {\r\n        @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n        font-weight: bold;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-nav-main {\r\n    display: flex !important;\r\n\r\n    > li {\r\n      > a {\r\n        @include link.reverse();\r\n        @include nav-item-main();\r\n\r\n        // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n        white-space: nowrap;\r\n      }\r\n    }\r\n\r\n    dso-dropdown-menu {\r\n      .dso-dropdown-options {\r\n        inset-inline-start: units.$ru2 * -1 !important;\r\n        inset-block-start: 3px !important;\r\n      }\r\n\r\n      button {\r\n        @include nav-item-main();\r\n\r\n        align-items: flex-end;\r\n        color: colors.$bosgroen;\r\n\r\n        &:hover,\r\n        &:active {\r\n          cursor: pointer;\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &::after {\r\n          margin-inline-start: units.$u1;\r\n          position: absolute;\r\n          inset-inline-end: 0px;\r\n          inset-block-start: auto;\r\n          transform: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .main-menu-item-icon {\r\n    block-size: 1em;\r\n    margin-inline-end: units.$u1;\r\n    position: relative;\r\n    inset-block-start: -2px;\r\n    inline-size: 1.2em;\r\n  }\r\n\r\n  .dropdown-menu-item .main-menu-item-icon {\r\n    margin-inline-end: 0;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport {\r\n  HeaderAuthStatus,\r\n  HeaderCompactMode,\r\n  HeaderEvent,\r\n  HeaderMenuItem,\r\n  HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n  menuItem?: HeaderMenuItem;\r\n  url?: string;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-header\",\r\n  styleUrl: \"header.scss\",\r\n  shadow: true,\r\n})\r\nexport class Header implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoHeaderElement;\r\n\r\n  /**\r\n   * The main menu items.\r\n   */\r\n  @Prop()\r\n  mainMenu: HeaderMenuItem[] = [];\r\n\r\n  /**\r\n   * Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n   * the viewport is smaller than 992px.\r\n   */\r\n  @Prop()\r\n  compact: HeaderCompactMode = \"auto\";\r\n\r\n  /**\r\n   * Used to show the login/logout option. 'none' renders nothing.\r\n   */\r\n  @Prop()\r\n  authStatus: HeaderAuthStatus = \"none\";\r\n\r\n  /**\r\n   * When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n   * The login button will then render as an anchor.\r\n   */\r\n  @Prop()\r\n  loginUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"logout\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  logoutUrl?: string;\r\n\r\n  /**\r\n   * Show a help-button or link in the header\r\n   */\r\n  @Prop()\r\n  showHelp = false;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"help\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  helpUrl?: string;\r\n\r\n  /**\r\n   * The name to show when the user is logged in.\r\n   */\r\n  @Prop()\r\n  userProfileName?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates the profile url.\r\n   */\r\n  @Prop()\r\n  userProfileUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeUrl?: string;\r\n\r\n  /**\r\n   * Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeActive = false;\r\n\r\n  /**\r\n   * Emitted when something in the header is selected.\r\n   *\r\n   * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n   */\r\n  @Event()\r\n  dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n  @State()\r\n  visibleMenuItemsCount: number | undefined = undefined;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  @Watch(\"mainMenu\")\r\n  mainMenuChanged() {\r\n    this.resetVisibleMenuItems();\r\n  }\r\n\r\n  private resetVisibleMenuItems = () => {\r\n    this.visibleMenuItemsCount = undefined;\r\n  };\r\n\r\n  private get isCompact() {\r\n    return this.compact === \"always\" || window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\r\n    this.dsoHeaderClick.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n      type,\r\n      menuItem: options?.menuItem,\r\n      url: options?.url ?? options?.menuItem?.url,\r\n    });\r\n  };\r\n\r\n  private dropdownElement: HTMLDsoDropdownMenuElement | undefined;\r\n  private navElement: HTMLUListElement | undefined;\r\n  private menuItemElementRefs: (HTMLLIElement | undefined)[] = [];\r\n  private dropdownMenuItemElementRef: HTMLLIElement | undefined;\r\n  private userHomeMenuItemElementRef: HTMLLIElement | undefined;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  /**\r\n   * Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n   * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n   *\r\n   * When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n   *\r\n   * @param navElement The navigation element to calculate the overflow menu item count for.\r\n   * @returns The number of menu items that can fit in the available space.\r\n   */\r\n  private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n    const availableWidth = navElement.offsetWidth;\r\n\r\n    const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n    const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n    const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n    if (!mostRightMenuItem || !dropdownMenuItem || !lastMenuItem) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const dropdownMenuItemEffectiveWidth =\r\n      dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n    const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n    if (requiredWidth <= availableWidth) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n      ? this.userHomeMenuItemElementRef.offsetLeft +\r\n        this.userHomeMenuItemElementRef.offsetWidth -\r\n        (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n      : 0;\r\n\r\n    const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n    const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n      (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n    );\r\n\r\n    if (visibleMenuItems < 0) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    return visibleMenuItems;\r\n  }\r\n\r\n  private calculateDropdownOptionsOffset() {\r\n    if (!this.dropdownElement) {\r\n      return 0;\r\n    }\r\n\r\n    return (\r\n      this.host.clientHeight -\r\n      (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n    );\r\n  }\r\n\r\n  private get visibleMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\"\r\n      ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n      : this.mainMenu;\r\n  }\r\n\r\n  private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n  }\r\n\r\n  private resizeObserver = new ResizeObserver(() => {\r\n    this.resetVisibleMenuItems();\r\n\r\n    forceUpdate(this.host);\r\n  });\r\n\r\n  connectedCallback(): void {\r\n    this.resizeObserver.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver.disconnect();\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (this.isCompact && this.dropdownElement) {\r\n      this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n\r\n    if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n      this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host is-compact={this.isCompact}>\r\n        <div class=\"dso-header\">\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\r\n          </div>\r\n          {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private renderCompact() {\r\n    return (\r\n      (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== \"none\") && (\r\n        <div class=\"dropdown\">\r\n          <dso-dropdown-menu\r\n            dropdown-align=\"right\"\r\n            dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n            ref={(element) => (this.dropdownElement = element)}\r\n          >\r\n            <button type=\"button\" slot=\"toggle\">\r\n              <span>{this.text(\"menu\")}</span>\r\n              <dso-icon icon=\"chevron-down\"></dso-icon>\r\n            </button>\r\n            <div class=\"dso-dropdown-options\">\r\n              <ul>\r\n                {this.mainMenu.map((menuItem) => (\r\n                  <MenuItem\r\n                    item={menuItem}\r\n                    onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n                    key={menuItem.label}\r\n                  />\r\n                ))}\r\n                {this.userHomeUrl && (\r\n                  <li>\r\n                    <a\r\n                      href={this.userHomeUrl}\r\n                      onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                    >\r\n                      {this.text(\"userHome\")}\r\n                    </a>\r\n                  </li>\r\n                )}\r\n                {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                  <li>\r\n                    <a\r\n                      href={this.userProfileUrl}\r\n                      onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                    >\r\n                      {this.userProfileName}\r\n                      <span class=\"profile-label\"> - Mijn profiel</span>\r\n                    </a>\r\n                  </li>\r\n                )}\r\n                {this.authStatus === \"loggedOut\" && (\r\n                  <li>\r\n                    {this.loginUrl ? (\r\n                      <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n                        {this.text(\"login\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        {this.text(\"login\")}\r\n                      </button>\r\n                    )}\r\n                  </li>\r\n                )}\r\n                {this.authStatus === \"loggedIn\" && (\r\n                  <li>\r\n                    {this.logoutUrl ? (\r\n                      <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n                        {this.text(\"logout\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        {this.text(\"logout\")}\r\n                      </button>\r\n                    )}\r\n                  </li>\r\n                )}\r\n                {this.showHelp && (\r\n                  <li>\r\n                    {this.helpUrl ? (\r\n                      <a\r\n                        href={this.helpUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                      >\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </a>\r\n                    ) : (\r\n                      <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </button>\r\n                    )}\r\n                  </li>\r\n                )}\r\n              </ul>\r\n            </div>\r\n          </dso-dropdown-menu>\r\n        </div>\r\n      )\r\n    );\r\n  }\r\n\r\n  private renderNormal() {\r\n    this.menuItemElementRefs = [];\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class=\"dso-header-session\">\r\n          {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n            <div class=\"profile\">\r\n              <a\r\n                href={this.userProfileUrl}\r\n                class=\"dso-tertiary\"\r\n                onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n              >\r\n                {this.userProfileName}\r\n              </a>\r\n            </div>\r\n          )}\r\n          {this.authStatus === \"loggedOut\" && (\r\n            <div class=\"login\">\r\n              {this.loginUrl ? (\r\n                <a\r\n                  href={this.loginUrl}\r\n                  class=\"dso-tertiary\"\r\n                  onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                >\r\n                  {this.text(\"login\")}\r\n                </a>\r\n              ) : (\r\n                <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                  {this.text(\"login\")}\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n          {this.authStatus === \"loggedIn\" && (\r\n            <div class=\"logout\">\r\n              {this.logoutUrl ? (\r\n                <a\r\n                  href={this.logoutUrl}\r\n                  class=\"dso-tertiary\"\r\n                  onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                >\r\n                  {this.text(\"logout\")}\r\n                </a>\r\n              ) : (\r\n                <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                  {this.text(\"logout\")}\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n          {this.showHelp && (\r\n            <div class=\"help\">\r\n              {this.helpUrl ? (\r\n                <a\r\n                  href={this.helpUrl}\r\n                  class=\"dso-tertiary\"\r\n                  onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                >\r\n                  <span>{this.text(\"help\")}</span>\r\n                  <dso-icon icon=\"help\"></dso-icon>\r\n                </a>\r\n              ) : (\r\n                <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                  <span>{this.text(\"help\")}</span>\r\n                  <dso-icon icon=\"help\"></dso-icon>\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n        {(this.mainMenu.length > 0 || this.userHomeUrl) && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul\r\n              class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n              ref={(element) => (this.navElement = element)}\r\n            >\r\n              {this.visibleMainMenuItems.map((menuItem, i) => (\r\n                <MenuItem\r\n                  item={menuItem}\r\n                  onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n                  key={menuItem.label}\r\n                  ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n                />\r\n              ))}\r\n              {(this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (\r\n                <li\r\n                  aria-hidden={this.visibleMenuItemsCount === undefined}\r\n                  ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n                  class=\"dropdown-menu-item\"\r\n                >\r\n                  <dso-dropdown-menu>\r\n                    <button type=\"button\" slot=\"toggle\">\r\n                      <span>{this.text(\"overflowMenu\")}</span>\r\n                      <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n                    </button>\r\n                    <div class=\"dso-dropdown-options\">\r\n                      <ul>\r\n                        {this.hiddenMainMenuItems.map((menuItem) => (\r\n                          <MenuItem\r\n                            item={menuItem}\r\n                            onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n                            key={menuItem.label}\r\n                          />\r\n                        ))}\r\n                      </ul>\r\n                    </div>\r\n                  </dso-dropdown-menu>\r\n                </li>\r\n              )}\r\n              {this.userHomeUrl && (\r\n                <li\r\n                  class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n                  ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n                >\r\n                  <a\r\n                    href={this.userHomeUrl}\r\n                    aria-current={this.userHomeActive ? \"page\" : undefined}\r\n                    onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                  >\r\n                    <dso-icon icon=\"user-line\" class=\"main-menu-item-icon\"></dso-icon>\r\n                    {this.text(\"userHome\")}\r\n                  </a>\r\n                </li>\r\n              )}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-highlight-box.js

@@ -1,11 +1,13 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host, transformTag } from '@stencil/core/internal/client';
 
-const highlightBoxCss = "*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset)}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}:host{display:block;container-type:inline-size;position:relative;z-index:1}";
+const highlightBoxCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset)}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}:host{display:block;container-type:inline-size;position:relative;z-index:1}`;
 
 const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     render() {
@@ -14,7 +16,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
         return (h(Host, { key: 'baa2e7b69d8594b34bb3f87b10e50155fcb8bbeb', "has-counter": hasCounter }, hasCounter && h("div", { key: 'e1a29441395455061a92191c2a0d09cac29a1e3d', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'db2bf2c61f04cc0f0a6ac8cd17af5c083cea10f5', name: "icon" })), h("slot", { key: '9ab5693fccdaed92f15dce9c7a76b954f5b53693' })));
     }
     get element() { return this; }
-    static get style() { return highlightBoxCss; }
+    static get style() { return highlightBoxCss(); }
 }, [257, "dso-highlight-box", {
         "yellow": [516],
         "border": [516],
@@ -29,8 +31,8 @@ function defineCustomElement$1() {
     const components = ["dso-highlight-box"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-highlight-box":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, HighlightBox);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), HighlightBox);
             }
             break;
     } });

package/dist/components/dso-highlight-box.js.map

@@ -1 +1 @@
-{"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,yuBAAyuB;;MCOpvB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;IAkCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,uuBAAuuB,CAAC;;MCO1vB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;;;IAkCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-history-item.js

@@ -1,13 +1,15 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Fragment, transformTag } from '@stencil/core/internal/client';
 import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const historyItemCss = ":host{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px}:host:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}*,*::after,*::before{box-sizing:border-box}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=tijdelijk-regelingdeel-besluit]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.title-anchor{color:#39870c;font-weight:600;text-decoration:none}.title-anchor:hover{color:#39870c;text-decoration:underline}.title-anchor:visited{color:#39870c}";
+const historyItemCss = () => `:host{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px}:host:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}*,*::after,*::before{box-sizing:border-box}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=tijdelijk-regelingdeel-besluit]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.title-anchor{color:#39870c;font-weight:600;text-decoration:none}.title-anchor:hover{color:#39870c;text-decoration:underline}.title-anchor:visited{color:#39870c}`;
 
 const HistoryItem = /*@__PURE__*/ proxyCustomElement(class HistoryItem extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoClick = createEvent(this, "dsoClick", 3);
         this.typeIcons = {
@@ -47,7 +49,7 @@ const HistoryItem = /*@__PURE__*/ proxyCustomElement(class HistoryItem extends H
         return (h(Fragment, { key: '2e77d236980aed9e08e35161d001d17f1728a83b' }, h("div", { key: 'c0c0be85009c8f7d97c321a5bdbf43bda7a6f64b', class: "history-item-date" }, h("slot", { key: '099aefc48360345b5d55f6aebe5f9d29aefe59c9', name: "date" })), h("div", { key: 'c4da694c8b9659aecbd6a4594bb5f46dfa372456', class: "history-item-content" }, h("div", { key: '9fd28a25b87a15bf57442a7648834d57e6f260e6', class: "history-item-status-message" }, h("dso-icon", { key: 'cf331e4b19413148a68bafc6bc1849551bb6f435', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '8aa1952d43a8bdf28f63d81e3723e8634be9a0be', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '7128bf286bf5f92c4e061f7b06ad8a709fb88d87', class: "history-item-title" }, h("a", { key: '38635bb3ff0de20d5fdb8633bd5699112cfa753b', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '6a0efc08c7f7d4283f6417505bb727dc4bab75d4', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '505111ed0bf510619c6814b89f01a4ed96f8e2bd', class: "history-item-explanation" }, h("slot", { key: '2b27be5812d5b62e11da7b1a1d4da0c68dd1f625', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '6f6b7e404bf94a00c0835098470d00b70ba5203b', class: "history-item-warning" }, h("dso-icon", { key: '1e8c8c07ebed9ccb58f21f9b2a6c279510b19e4b', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'df67c18e8aea8dfabf5e9ca5cbd33cb0cba0d47b', name: "warning" }))))));
     }
     get host() { return this; }
-    static get style() { return historyItemCss; }
+    static get style() { return historyItemCss(); }
 }, [257, "dso-history-item", {
         "type": [513],
         "href": [513]
@@ -59,12 +61,12 @@ function defineCustomElement$1() {
     const components = ["dso-history-item", "dso-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-history-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, HistoryItem);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), HistoryItem);
             }
             break;
         case "dso-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;