@dso-toolkit/core 74.0.0 → 75.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../../../src/components/selectable/selectable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAIjE;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IALvB;QA6FE,eAAU,GAAG,KAAK,CAAC;QAGnB,kBAAa,GAAG,KAAK,CAAC;QAed,uBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAIvD,mBAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;YACpC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;YAErB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,aAAa,EAAE,CAAC;gBAChB,OAAO,EAAE,MAAM,YAAY,gBAAgB,IAAI,MAAM,CAAC,OAAO;aAC9D,CAAC,CAAC;YAEH,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,CAAC;KA4FH;IAtHC;;;;;OAKG;IAEH,KAAK,CAAC,UAAU,CAAC,MAAgB;QAC/B,IAAI,CAAC,UAAU,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,IAAI,CAAC,UAAU,CAAC;IAC/C,CAAC;IAmBD,gBAAgB;;QACd,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACvC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;IACtC,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,YAAY,gBAAgB,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC1E,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;IAClD,CAAC;IAED,MAAM;;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE3D,OAAO,CACL,EAAC,QAAQ;YACP,4DAAK,KAAK,EAAC,0BAA0B;gBACnC,4DAAK,KAAK,EAAE,IAAI,CAAC,8BAA8B,EAAE,EAAE,oBAAoB,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;oBAC5F,8DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,EAAE,sBACpB,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,qBAC3D,IAAI,CAAC,YAAY,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,EAC1C,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAC1C,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAC9B;oBACD,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACpB,aAAO,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE;wBAClC,eAAQ,CACF,CACT,CAAC,CAAC,CAAC,CACF;wBACE,eAAQ,CACF,CACT,CACG;gBACL,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAC7B,wEACE,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GACtC,CACpB,CACG;YACL,OAAO,IAAI,CACV,iEACE,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC9D,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBAE3C;oBACE,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACG,CACZ;YACD,6DAAM,IAAI,EAAC,SAAS,GAAG,CACd,CACZ,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC3F,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,CAAC;IACH,CAAC;IAEO,aAAa;;QACnB,OAAO,MAAA,IAAI,CAAC,UAAU,mCAAI,IAAI,CAAC,kBAAkB,CAAC;IACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\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 { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  private handleOnChange = (e: Event) => {\r\n    const { target } = e;\r\n\r\n    this.dsoChange.emit({\r\n      originalEvent: e,\r\n      checked: target instanceof HTMLInputElement && target.checked,\r\n    });\r\n\r\n    forceUpdate(this.host);\r\n  };\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class=\"dso-selectable-container\">\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={this.handleOnChange}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot />\r\n              </label>\r\n            ) : (\r\n              <label>\r\n                <slot />\r\n              </label>\r\n            )}\r\n          </div>\r\n          {hasInfo && !this.infoFixed && (\r\n            <dso-info-button\r\n              active={this.infoActive}\r\n              onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n            ></dso-info-button>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n        <slot name=\"options\" />\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n      this.input.checked = this.checked;\r\n    }\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../../../src/components/selectable/selectable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  private handleOnChange = (e: Event) => {\r\n    const { target } = e;\r\n\r\n    this.dsoChange.emit({\r\n      originalEvent: e,\r\n      checked: target instanceof HTMLInputElement && target.checked,\r\n    });\r\n\r\n    forceUpdate(this.host);\r\n  };\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class=\"dso-selectable-container\">\r\n          <div class=\"dso-selectable-input-wrapper\">\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={this.handleOnChange}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot />\r\n              </label>\r\n            ) : (\r\n              <label>\r\n                <slot />\r\n              </label>\r\n            )}\r\n          </div>\r\n          {hasInfo && !this.infoFixed && (\r\n            <dso-info-button\r\n              active={this.infoActive}\r\n              onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n            ></dso-info-button>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n        <slot name=\"options\" />\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n      this.input.checked = this.checked;\r\n    }\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/skiplink/skiplink.css

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 :host {
   position: fixed;
   inset-block-start: 0;

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

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: '88e0a5fde8738d879c43ea9947d0bf67ac20221c', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '5f51d5cfad04c230d4b107587103c4929ab335d5', icon: "chevron-right" })));
+        return (h("a", { key: '78c9b83c84af108ad52064712dea6dfd03fcf186', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'e1ed433e9827d63a09140adbc5c25cadf9d34e6c', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 :host {
   display: inline-block;
   padding-block-start: 2px;
@@ -16,7 +31,7 @@ button.dso-slider svg rect {
   transition: fill 0.25s;
 }
 button.dso-slider svg circle {
-  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform: translateX(10px);
   fill: #fff;
 }

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

@@ -25,7 +25,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: 'b7dc0110eb83aa234b1d2b225ca8e4a3bfec426c', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '8dfb32aa94195a577fbd960c33dfd8d23afa2921', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'b291fd2d918322729a1564a9d856ed66cb4465ad', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'c51051570b80c247f4ff049ebcc7addd38a5f669', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '12e0f02816079d4ca1f9953f96ac6ae844f7d05a', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '56f7be1b63e0aed9b1048b2a6c8b21b1ab9360d8', htmlFor: this.identifier }, h("slot", { key: '4c6a01b02ca3b63959e91d6a5d94ce2983c51a2c' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: 'dbbdfa26429a8f68cd9c1785c0083dbe715595ae', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'e52d22c5011f22d56f276f04dd88418ca9fa9bd3', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'f94f10415a5159b5629f5ebd5dee4c69b2743528', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'd67b7ed2762f2031bb83cb5d8bcd1fa478a7b652', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '11931b9b335f08c61398c3742a1970811009f6e3', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '1a87390566ff4e48a4196f9a665b59ede9a811cc', htmlFor: this.identifier }, h("slot", { key: '6041e9938f97b0c1730c9824357a431d40498e59' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 :host {
   display: block;
   position: fixed;

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

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '9040ae190a33af5d259011c22016749d84720da2', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'b7b9bd9b0a97c5e3fa227e0af5949f6f36c39275', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '1db31c25e032536223ae9c53718dcea388d6b0fd' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '422e4887289d315d5f008e0f1d6ae4936e08da86', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'ea9eef2c9b40f68a562eda5df4943e6e3a4393a1', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'fe9d2c8bf6cac8705a9eca4250d91b95e67ec35c' }, "Heel moeilijk"), h("span", { key: '7a039794087fd90273e21fc0926e1eb4fed8ebee' }, "Heel makkelijk")), h("div", { key: '002b4918b471324eeabcbeeda2899024286c0df6', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '2e5937fa8c380bec3d4adae16e69bdefdbaf82bc', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '4f3f881593ef092b08783aefc34bb7f14363d1ed', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '8ee906c2a235ec53daf8d4f5c0556f4fca2c990f' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '0f67da7840b36e77c2985506f1f9d8028a4e4b86', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'ea7319a7d50dfd3651972e1a4ffaa2d8b7a7711b', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '77387af6e521e3666e8a3d52fe23d01033f76ff8' }, "Heel moeilijk"), h("span", { key: '2735ccb467c3834819e558cff70b4b825cb0cde9' }, "Heel makkelijk")), h("div", { key: '698c4ad1fe25db15b2785d877eaf2a889c243493', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: 'e1257162f5826778a751ca0d8dbc3f4b4a9a0177', type: "submit", class: "dso-secondary" }, h("span", { key: '8bd71f5506750e1e9e7c67cbd08489fd00149ba0' }, "Antwoord verzenden")))));
+        })), h("button", { key: '74e8281a1333de60b4805cc6126306637c255a5d', type: "submit", class: "dso-secondary" }, h("span", { key: 'e10548b38ecca92f1b5cdca0ff7b5b3789114f49' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.css

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 button {
   -webkit-appearance: button;
   color: inherit;

package/dist/collection/components/table/table.js

@@ -31,7 +31,7 @@ export class Table {
     render() {
         var _a, _b, _c;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: '2e3e36a2af519d04cc704561e1f96f32d8753c4b', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'b91b4b4a9552f2b40dbcfe79cbcca31ea0d51747', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '12034faea5d74ae417241d8029575e93ab4d3d9d', class: "dso-modal-overlay" }), h("div", { key: 'cf5306514dbe5310b8ba0f13343dc78c9931d393', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '823618582ff57f7469da084b8e4ac0f39c0e5b5f', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'e39bd37081810df2506b1205c56d44193436c625', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '5578938c4e5070051d8bcaceb9327428195e48a7', class: "dso-responsive-message" }, h("span", { key: 'a5c126e5a8b6ccf1b15c6e57b663b1b702ae385e' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '55764237e9959086b8e696959602646089616999', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '9d3b6669fbcb8fb2364472a792e662d02096178a', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '09f023589648b483cecb7de8c1691f1d85a4173a' }, "vergroten"), h("dso-icon", { key: '4474dbbee7d540ac6e68f0058166eab15732ea2c', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'ccbf556d51530bc6d86b3ce66b7dd69b451fff3d', class: "dso-header" }, h("h2", { key: '39fe21305ac8a1df8cfa5ac3a5c56c067ead2a69', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '496c1135c8820f061642555d026da6f27cca5a9b', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '62704273cddf8e2524ce038ca0270010748eac6e', icon: "times" }), h("span", { key: '9e3220f8f696877cd568cfc85f36f39447b074ee', class: "sr-only" }, "Sluiten")))), h("div", { key: '6f0ab07376dffb6ccdb90e15e8aa9c94159207b6', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '5471317311645d02906ae73e265ab6185aa3ceb3' }))))));
+        return (h(Host, { key: 'abc41f29d138faa37d87d350f7979abb29c7fcf9', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '94612e6ffde9632cad9ad83040823ad047167609', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '32915c47acef4aafab824f3ae9601f7033dba378', class: "dso-modal-overlay" }), h("div", { key: 'e5dcb2f41dd133d2d5b6f8461264f6df9414bb82', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '53116a074f905fe9495a8cc9e81c78afee4804a5', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '313d3ec481a920c975f0189b7296afe183a9a0bd', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '4044e7467f9ad89d48df92dcb234d5e96a8be52d', class: "dso-responsive-message" }, h("span", { key: '092a20f5ef6136090eb54613057760ef057d8b47' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'd7c8cfbfd618d4c5f90931f75e7fd8ee568a837d', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '0555b81ced9b75fcff531529d7da376717dc4aef', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '4fd27302400268f3d1645a71d04d9c8009783a90' }, "vergroten"), h("dso-icon", { key: '140b7291ab7bb3b933a8a422757f0bf3d1782be9', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'd7e87f13cae5cc5d8827f2be830869c47d346236', class: "dso-header" }, h("h2", { key: '4c657cbe0a5530dfa4d6abfaa7175eded13777f8', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '1b6366418d4be90624fda575cc6edbea75e9dbea', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '380edcd71ac1b7fd182172c974d0fafa40d47184', icon: "times" }), h("span", { key: 'f09d43199d6ceb3ebb1b73e24f714d67f41ee970', class: "sr-only" }, "Sluiten")))), h("div", { key: 'f5a338fb024ef754e53ff5be4edfc2827afe99e0', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '075ff38a4c065431ece451a78635c8bad0cf92d4' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/collection/components/tabs/components/tab.css

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 *,
 *::after,
 *::before {

package/dist/collection/components/tabs/tabs.css

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 *,
 *::after,
 *::before {

package/dist/collection/components/tabs/tabs.js

@@ -64,7 +64,7 @@ export class Tabs {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '9a6bdd5ffe17c8426f03ba2722e425fa0f8e62fb' }, h("div", { key: 'dec379f32507e5784a13bd95b58ab02cb958febb', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '51c8052f6072c4c3abc4459137998153ec7e51cc' })), h("div", { key: '8106030b6b93202f62be3aac38a90807afe33606', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'd30f72afe67410e95720c184d4af7d8c3df0dc03', name: "panel" }))));
+        return (h(Host, { key: 'b9568d7dc32c55b0b54c37b28756274bb57cbacf' }, h("div", { key: '314522c3eba0fb007ce5d214d309ab20a4a9e53c', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '0ea47d9bd541ee8657b5c9be2f24b6f641051c17' })), h("div", { key: 'd7a531a6ee574d7deb3455c3f43d16f40a0faf1b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '65e458b46fcf351079f225fb49336ffcc5dd7982', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggletip/toggletip.css

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 *,
 *::after,
 *::before {

package/dist/collection/components/toggletip/toggletip.js

@@ -44,7 +44,7 @@ export class Toggletip {
         };
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: 'ba15af3240f90d815cf626e335d70729ec5b9fce', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '392f8b42eeee84174e57f68fada10a0c8a30adcb', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '02b455171f94b769a36e22aaeb0ad28672293b30' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: '0c95a99da4efdb1586d340556ed2a30e8639de6b', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: 'b9a89bf55642c6bf35bf87b4166e5958bc179529', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'da02438922da4d6cc6dcc2a10a143ea2c55d7493' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.css

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 :host(.hidden) {
   visibility: hidden;
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -189,7 +189,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '3b7b072ac2cbf99d0cd274fdd803f87110148747', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '9a50dba09c72797fd9f13a3afd0ee6ee74b3fb22', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '7fb9ad5c0ab6733625321374974398d52b98f196', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'e3aeb925d1073a4e5728cdbe241726993ff79941', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'ae49f6af4b043da6c4e62dc54fc88d47f9cab94c' })))));
+        return (h(Host, { key: 'ba4416a1e3c0abf29724586b344d4dd8cddb911f', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'ba55124130f41dee4f79788aef29706f291fe12c', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'bfb67934bf28dc3e0fe70380c3df52c8afc3e2da', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '1f8e12ba721400c87fe2ff53eb6d257904f1e5eb', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '0bcd2b965e7d4e26ebdb32aa67a189eab3254daa' })))));
     }
     activatePopper() {
         var _a;

package/dist/collection/components/tree-view/tree-view.css

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 :host ul {
   list-style-type: none;
   padding-inline-start: 32px;

package/dist/collection/components/tree-view/tree-view.js

@@ -174,7 +174,7 @@ export class TreeView {
     }
     render() {
         var _a;
-        return (h("div", { key: '7db23c7d7736a1b2f4f18c6240db2dcb72d965a2', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'dc8acc481f22aaced2657634b24a0e054194a33f', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: 'bb0af3cdb37897eab28b61c078dcd1598122e4b9', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '034cbbf4aa4272aecfa5f670787f53b68bf61d76', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/* Genereert een `transition` met vaste easing en optionele duur en delay per property.
+**
+** @param {ArgList} $transitions...
+**   - "property": gebruikt standaard duur (260ms) en delay (0ms)
+**   - ("property", duur): eigen duur, geen delay
+**   - ("property", duur, delay): eigen duur én delay
+**
+** @example
+**   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
+**
+** @output
+**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
+**
+*/
 *,
 *::after,
 *::before {

package/dist/collection/components/viewer-grid/viewer-grid.js

@@ -158,7 +158,7 @@ export class ViewerGrid {
         }
     }
     render() {
-        return (h(Fragment, null, h("slot", { key: '30a27a066b6c66a817bce9082fef6a4447f459d6', name: "top-bar" }), h("div", { key: 'faeae17f2aea5520eb1903c01eef387a494b42a9', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '3559fb25907ec6d589db8d0592096da6e4747f90', class: "dso-navbar" }, h("ul", { key: '9304fc7c899d39ac08fb750a6b61f14e4352cb08', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(MainPanel, { key: '0c6bd15b16e07efc768efffbbbd6379bf8079d26', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: '07b2df2f64137d5d9608fb53676672b8430a8f4a', title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '68f605647afdc868991702c238902d286b400d50', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'e87559e3d6c9063a21d2ad410aa9ba000a60a643', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '30d4dcd5f16d7fd65644bcbefa13d36fa6cfbb2e', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'b0ef14b03c22dcacde5a246b5e9b9ebca637d83e', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, null, h("slot", { key: '1762942f6837742694acf5f612274e28c5b8db16', name: "top-bar" }), h("div", { key: '45f11f3985e59cb3c99e22404d864565c7d25d9b', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '5bc513049a8583b98f89ca1f79df55f1f2454bb2', class: "dso-navbar" }, h("ul", { key: '655920b2a69275b460614a31313d1fc1333cb08e', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(MainPanel, { key: '8fb75439c8dc08cf9c9b2fd31eedfb635d232bf4', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: '42d05837fc02297c2a7918c1694f9e798441f815', title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'ce5c7b4b31c409353a800e0347f60f38aa9f3d9d', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '1ff73af3fcdd23240030438d8e62578ae19eac65', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'a17d9d60c2e27ebce816fe96febef5068b6515e5', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'b2f7054f93f35cd4008f139fa24cdcc58fa5e66b', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/alert.js

@@ -24,7 +24,7 @@ const translations = {
     },
 };
 
-const alertCss = ":host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{line-height:1.5;margin-block-end:24px;min-block-size:64px;position:relative}@media screen and (min-width: 481px){.alert{padding-block:19px;padding-inline:63px 40px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px 40px}}@media screen and (max-width: 480px){.alert{padding-block:63px 16px;padding-inline:16px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px}}.alert:not(:first-child){margin-block-start:24px}.alert .icon-status{inset-block-start:16px;inset-inline-start:16px;position:absolute;block-size:32px;inline-size:32px}.alert .dso-close{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none;position:absolute;inset-block-start:4px;inset-inline-end:4px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.alert .dso-close[disabled]{cursor:default}.alert .dso-close::-moz-focus-inner{border:0;padding:0}.alert.dso-compact{min-block-size:16px}";
+const alertCss = "@charset \"UTF-8\";:host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{line-height:1.5;margin-block-end:24px;min-block-size:64px;position:relative}@media screen and (min-width: 481px){.alert{padding-block:19px;padding-inline:63px 40px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px 40px}}@media screen and (max-width: 480px){.alert{padding-block:63px 16px;padding-inline:16px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px}}.alert:not(:first-child){margin-block-start:24px}.alert .icon-status{inset-block-start:16px;inset-inline-start:16px;position:absolute;block-size:32px;inline-size:32px}.alert .dso-close{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none;position:absolute;inset-block-start:4px;inset-inline-end:4px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.alert .dso-close[disabled]{cursor:default}.alert .dso-close::-moz-focus-inner{border:0;padding:0}.alert.dso-compact{min-block-size:16px}";
 
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     constructor() {

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"file":"alert.js","mappings":";;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,QAAQ,GAAG,gwCAAgwC;;MCapwC,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;AALlB,IAAA,WAAA,GAAA;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA0BnD;IAxBC,MAAM,GAAA;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,CAAE,CAAA,CAAC;;AAGlD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,MAAM,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAA,EAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAI,CAAA,EACjF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,EAAS,GAAA,CAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,EAC9F,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC1C,CACV,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/alert/alert.i18n.ts","src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-alert\": {\r\n      close: \"Close\",\r\n      success: \"Success\",\r\n      info: \"Notice\",\r\n      warning: \"Warning\",\r\n      error: \"Error\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-alert\": {\r\n      close: \"Sluiten\",\r\n      success: \"Gelukt\",\r\n      info: \"Opmerking\",\r\n      warning: \"Waarschuwing\",\r\n      error: \"Fout\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-block-start: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n  @include alert.root();\r\n\r\n  &.dso-compact {\r\n    min-block-size: alert.$inline-padding;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element()\r\n  host!: HTMLDsoAlertElement;\r\n\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * When `false` the close button in the alert will not be rendered.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  /**\r\n   * Emitted when the user closes the Alert.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    const status = this.text(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n\r\n        {this.closable && (\r\n          <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n          </button>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"alert.js","mappings":";;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,QAAQ,GAAG,mxCAAmxC;;MCavxC,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;AALlB,IAAA,WAAA,GAAA;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA0BnD;IAxBC,MAAM,GAAA;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,CAAE,CAAA,CAAC;;AAGlD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,MAAM,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAA,EAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAI,CAAA,EACjF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,EAAS,GAAA,CAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,EAC9F,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC1C,CACV,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/alert/alert.i18n.ts","src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-alert\": {\r\n      close: \"Close\",\r\n      success: \"Success\",\r\n      info: \"Notice\",\r\n      warning: \"Warning\",\r\n      error: \"Error\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-alert\": {\r\n      close: \"Sluiten\",\r\n      success: \"Gelukt\",\r\n      info: \"Opmerking\",\r\n      warning: \"Waarschuwing\",\r\n      error: \"Fout\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-block-start: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n  @include alert.root();\r\n\r\n  &.dso-compact {\r\n    min-block-size: alert.$inline-padding;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element()\r\n  host!: HTMLDsoAlertElement;\r\n\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * When `false` the close button in the alert will not be rendered.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  /**\r\n   * Emitted when the user closes the Alert.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    const status = this.text(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n\r\n        {this.closable && (\r\n          <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n          </button>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/annotation-locatie.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './renvooi.js';
 import { d as defineCustomElement$2 } from './slide-toggle.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const annotationCss = "a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url(\"./di.svg#download\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#download-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-scampi\"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host([wijzigactie=verwijder]){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}";
+const annotationCss = "@charset \"UTF-8\";a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url(\"./di.svg#download\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#download-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-scampi\"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host([wijzigactie=verwijder]){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}";
 
 const AnnotationLocatie = /*@__PURE__*/ proxyCustomElement(class AnnotationLocatie extends HTMLElement {
     constructor() {

package/dist/components/annotation-locatie.js.map

@@ -1 +1 @@
-{"file":"annotation-locatie.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,klLAAklL;;MCiB3lL,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAA,WAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;QAuCU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6BrC;IA3BC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAC,CAAA,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACrC,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"annotation-locatie.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,qmLAAqmL;;MCiB9mL,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAA,WAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;QAuCU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6BrC;IA3BC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAC,CAAA,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACrC,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/attachments-counter.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const attachmentsCounterCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}";
+const attachmentsCounterCss = "@charset \"UTF-8\";:host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}";
 
 const AttachmentsCounter = /*@__PURE__*/ proxyCustomElement(class AttachmentsCounter extends HTMLElement {
     constructor() {

package/dist/components/attachments-counter.js.map

@@ -1 +1 @@
-{"file":"attachments-counter.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,sVAAsV;;MCOvW,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAA,WAAA,CAAA;;;;;;IAO7B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAC1B,IAAI,CAAC,KAAK,OAAE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,aAAS,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAQ,EAC9E,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,WAAW,EAAY,CAAA,CACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/attachments-counter/attachments-counter.scss?tag=dso-attachments-counter&encapsulation=shadow","src/components/attachments-counter/attachments-counter.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/attachments-counter\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-attachments {\r\n  @include attachments-counter.root();\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-attachments-counter\",\r\n  styleUrl: \"attachments-counter.scss\",\r\n  shadow: true,\r\n})\r\nexport class AttachmentsCounter {\r\n  /**\r\n   * The number of attachments.\r\n   */\r\n  @Prop()\r\n  count!: number;\r\n\r\n  render() {\r\n    return (\r\n      <span class=\"dso-attachments\">\r\n        {this.count} <span class=\"sr-only\">bijlage{this.count !== 1 ? \"n\" : \"\"}</span>\r\n        <dso-icon icon=\"paperclip\"></dso-icon>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"attachments-counter.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,yWAAyW;;MCO1X,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAA,WAAA,CAAA;;;;;;IAO7B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAC1B,IAAI,CAAC,KAAK,OAAE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,aAAS,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAQ,EAC9E,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,WAAW,EAAY,CAAA,CACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/attachments-counter/attachments-counter.scss?tag=dso-attachments-counter&encapsulation=shadow","src/components/attachments-counter/attachments-counter.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/attachments-counter\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-attachments {\r\n  @include attachments-counter.root();\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-attachments-counter\",\r\n  styleUrl: \"attachments-counter.scss\",\r\n  shadow: true,\r\n})\r\nexport class AttachmentsCounter {\r\n  /**\r\n   * The number of attachments.\r\n   */\r\n  @Prop()\r\n  count!: number;\r\n\r\n  render() {\r\n    return (\r\n      <span class=\"dso-attachments\">\r\n        {this.count} <span class=\"sr-only\">bijlage{this.count !== 1 ? \"n\" : \"\"}</span>\r\n        <dso-icon icon=\"paperclip\"></dso-icon>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/badge.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
 
-const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{border:1px solid;border-radius:1em;display:inline-block;font-size:0.875em;line-height:1;min-inline-size:1.5rem;padding-block:4px;padding-inline:8px;text-align:center}.dso-badge{background-color:#666;border-color:#666;color:#fff}.dso-badge.badge-info{background-color:#2b5780;border-color:#2b5780;color:#fff}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}.dso-badge.badge-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}";
+const badgeCss = "@charset \"UTF-8\";:host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{border:1px solid;border-radius:1em;display:inline-block;font-size:0.875em;line-height:1;min-inline-size:1.5rem;padding-block:4px;padding-inline:8px;text-align:center}.dso-badge{background-color:#666;border-color:#666;color:#fff}.dso-badge.badge-info{background-color:#2b5780;border-color:#2b5780;color:#fff}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}.dso-badge.badge-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}";
 
 const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
     constructor() {

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"file":"badge.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,o/BAAo/B;;MCUx/B,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;;;;;;IAOhB,MAAM,GAAA;QACJ,QACE,6DAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAA,EACvE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/badge/badge.scss?tag=dso-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/badge\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-badge {\r\n  @include badge.root();\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { BadgeStatus } from \"./badge.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: BadgeStatus;\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"badge.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,ugCAAugC;;MCU3gC,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;;;;;;IAOhB,MAAM,GAAA;QACJ,QACE,6DAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAA,EACvE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/badge/badge.scss?tag=dso-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/badge\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-badge {\r\n  @include badge.root();\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { BadgeStatus } from \"./badge.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: BadgeStatus;\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"version":3}