@dso-toolkit/core 67.3.1 → 68.0.0

package/dist/esm/dso-modal.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-60b7c895.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b281ec90.js';
 import { g as getActiveElement } from './get-active-element-37680994.js';
-import { i as i18n } from './i18n-43c79e8f.js';
-import { v as v4 } from './v4-692dad5f.js';
+import { i as i18n } from './i18n-001de5be.js';
+import { v as v4 } from './v4-c74494dc.js';
 
 const translations = {
     en: {
@@ -25,13 +25,26 @@ const Modal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dsoClose = createEvent(this, "dsoClose", 7);
-        this.text = i18n(() => this.host, translations);
         this.ariaId = v4();
-        this.fullscreen = undefined;
-        this.modalTitle = undefined;
+        /**
+         * the role for the modal `dialog` | `alert` | `alertdialog`.
+         */
         this.dialogRole = "dialog";
+        /**
+         * The element to return focus to after the modal is closed.
+         *
+         * * `undefined` will return focus to the previously focused element (default).
+         * * `false` will not return focus to any element.
+         * * or, provide your own `HTMLElement` that will receive focus upon closing.
+         */
         this.returnFocus = undefined;
+        /**
+         * when `false` the close button in the header will not be rendered. Defaults to `true`.
+         *
+         * Needs `modalTitle` to be set.
+         */
         this.showCloseButton = true;
+        this.text = i18n(() => this.host, translations);
     }
     get hasFooter() {
         return this.host.querySelector("[slot='footer']") !== null;
@@ -56,10 +69,10 @@ const Modal = class {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '0255e7eddb5998c8cab38704900f2476569da1de', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: 'e9f3f64908aa9846a53ae75805fa210c4870b9d8', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: '4c64ce20e353566db32301b776188a1c264124ba', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'a4bd988f90c7b5770e4a4cf5fde4ae67a2a66cac' }, h("div", { key: '4ec222b1b944910e406ee18e19ca83be55d29e10', class: "dso-body", tabIndex: 0 }, h("slot", { key: '72288b5c808498115f94afaf1531de16786fc1d9', name: "body" }))), this.hasFooter && (h("div", { key: 'c21a38f8cfd9db4f107d06324a2ed2c065eedcc7', class: "dso-footer" }, h("slot", { key: 'ef9d617e2ecade2278beefdd4f72a29cab456a98', name: "footer" }))))));
+            } }, h("div", { key: '6537a33e78b15dfc32bac8a2699d2bf54e2abe1d', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '9a62c534ae961cd684568170c1309beaff90c20f' }, h("div", { key: 'd9f5eef59453d70504cecbdde59e3556a864c677', class: "dso-body", tabIndex: 0 }, h("slot", { key: '42efeae8512eb09d66fb1e4457b515730aece8a0', name: "body" }))), this.hasFooter && (h("div", { key: '967c39dbe11cceec7b8922ad2759f353a3219d84', class: "dso-footer" }, h("slot", { key: '1dd8152a3b944a18965d85e0216d8f0924d887db', name: "footer" }))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-modal.entry.js.map

@@ -1 +1 @@
-{"file":"dso-modal.entry.js","mappings":";;;;;AAEO,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,WAAW,EAAE;YACX,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,QAAQ;SACjB;KACF;IACD,EAAE,EAAE;QACF,WAAW,EAAE;YACX,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;SAClB;KACF;CACF;;ACfD,MAAM,QAAQ,GAAG,ylNAAylN,CAAC;AAC3mN,uBAAe,QAAQ;;MCaV,KAAK;;;;QAyDR,SAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;sBAlD1C,EAAE,EAAE;;;0BAkBe,QAAQ;2BAUW,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAID,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE;gBACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;aACzC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;SACpC;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;KACxD;IAED,MAAM;;QACJ,QACE,+DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,UAAU,mCAAI,SAAS,gBACvB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;aAC1C,IAED,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,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,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC1C,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACf,CACR,EAED,yEACE,4DAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;","names":[],"sources":["src/components/modal/modal.i18n.ts","src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-modal\": {\r\n      close: \"Close\",\r\n      dialog: \"Dialog\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-modal\": {\r\n      close: \"Sluiten\",\r\n      dialog: \"Dialoog\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { translations } from \"./modal.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\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            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-modal.entry.js","mappings":"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","names":[],"sources":["src/components/modal/modal.i18n.ts","src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-modal\": {\r\n      close: \"Close\",\r\n      dialog: \"Dialog\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-modal\": {\r\n      close: \"Sluiten\",\r\n      dialog: \"Dialoog\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { translations } from \"./modal.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\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            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-pagination.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-60b7c895.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-b281ec90.js';
 import { i as isModifiedEvent } from './is-modified-event-70db5fa8.js';
 
 const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination ul{padding-inline-start:initial;text-align:center}.pagination ul>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination ul>li>a,.pagination ul>li>span{align-items:center;color:#39870c;display:flex;block-size:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px;padding-block:2px;padding-inline:2px}.pagination ul>li>a:active,.pagination ul>li>span:active{background-color:#ebf3e6}.pagination ul>li>span{border:2px solid transparent;border-radius:1rem}.pagination ul>li a{line-height:2rem;text-decoration:none}.pagination ul>li a:hover,.pagination ul>li a:focus{text-decoration:none}.pagination ul>li a:hover::after,.pagination ul>li a:focus::after{border-block-end-color:#39870c}.pagination ul>li a::after{border-block-end:3px solid transparent;inset-block-end:0;content:\"\";display:inline-block;inset-inline-start:0;position:absolute;inline-size:100%}.pagination ul>li.active span{background-color:#39870c;color:#fff}.pagination ul>li+li{margin-inline-start:8px}.dso-page-hidden{visibility:hidden}.sr-only.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
@@ -13,9 +13,9 @@ const Pagination = class {
             medium: 9,
             large: 11,
         };
-        this.availablePositions = undefined;
-        this.totalPages = undefined;
-        this.currentPage = undefined;
+        /**
+         * This function is called to format the href
+         */
         this.formatHref = (page) => "#" + page;
     }
     /**

package/dist/esm/dso-pagination.entry.js.map

@@ -1 +1 @@
-{"file":"dso-pagination.entry.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n  @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n  visibility: hidden;\r\n}\r\n\r\n.sr-only.sr-only {\r\n  // class daisy-chained to prevent overwrites by other more specific styling set on this element.\r\n  @include utilities.sr-only();\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <nav class=\"pagination\" aria-label=\"Paginering\">\r\n          <ul>\r\n            <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n                aria-label=\"Vorige\"\r\n                onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n              >\r\n                <dso-icon icon=\"chevron-left\"></dso-icon>\r\n              </a>\r\n            </li>\r\n            {pages.map((page) => (\r\n              <>\r\n                {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n\r\n                <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                  {currentPage === page ? (\r\n                    <span aria-current=\"page\">{page}</span>\r\n                  ) : (\r\n                    <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                      {page}\r\n                    </a>\r\n                  )}\r\n                  {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n                </li>\r\n\r\n                {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n              </>\r\n            ))}\r\n            <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n                aria-label=\"Volgende\"\r\n                onClick={(e) =>\r\n                  currentPage &&\r\n                  this.totalPages &&\r\n                  this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n                }\r\n              >\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    if (totalPages + 2 <= availablePositions) {\r\n      // + 2 voor de vorige en volgende knop\r\n      return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n    }\r\n\r\n    if (availablePositions === 3) {\r\n      return [currentPage];\r\n    }\r\n\r\n    if (availablePositions === 5) {\r\n      return [1, currentPage, totalPages];\r\n    }\r\n\r\n    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-pagination.entry.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n  @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n  visibility: hidden;\r\n}\r\n\r\n.sr-only.sr-only {\r\n  // class daisy-chained to prevent overwrites by other more specific styling set on this element.\r\n  @include utilities.sr-only();\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <nav class=\"pagination\" aria-label=\"Paginering\">\r\n          <ul>\r\n            <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n                aria-label=\"Vorige\"\r\n                onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n              >\r\n                <dso-icon icon=\"chevron-left\"></dso-icon>\r\n              </a>\r\n            </li>\r\n            {pages.map((page) => (\r\n              <>\r\n                {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n\r\n                <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                  {currentPage === page ? (\r\n                    <span aria-current=\"page\">{page}</span>\r\n                  ) : (\r\n                    <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                      {page}\r\n                    </a>\r\n                  )}\r\n                  {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n                </li>\r\n\r\n                {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n              </>\r\n            ))}\r\n            <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n                aria-label=\"Volgende\"\r\n                onClick={(e) =>\r\n                  currentPage &&\r\n                  this.totalPages &&\r\n                  this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n                }\r\n              >\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    if (totalPages + 2 <= availablePositions) {\r\n      // + 2 voor de vorige en volgende knop\r\n      return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n    }\r\n\r\n    if (availablePositions === 3) {\r\n      return [currentPage];\r\n    }\r\n\r\n    if (availablePositions === 5) {\r\n      return [1, currentPage, totalPages];\r\n    }\r\n\r\n    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-plekinfo-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, F as Fragment, H as Host, a as getElement } from './index-60b7c895.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, F as Fragment, H as Host, a as getElement } from './index-b281ec90.js';
 import { i as isModifiedEvent } from './is-modified-event-70db5fa8.js';
 
 const plekinfoCardCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}ins a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}ins a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}del a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}del a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-plekinfo-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-plekinfo-card-container .dso-plekinfo-card-heading{display:flex;align-items:start;column-gap:8px}@media screen and (max-width: 480px){.dso-plekinfo-card-container .dso-plekinfo-card-heading{flex-wrap:wrap}}.dso-plekinfo-card-container .dso-plekinfo-card-heading+.dso-plekinfo-card-content{margin-block-start:8px}.dso-plekinfo-card-container .dso-plekinfo-card-symbol{grid-row:span 2;margin-inline-end:8px}.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}ins.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#d8e5c9}del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#e9cdd1}:host([active]:not([active=false])) .dso-plekinfo-card-container{background-color:#e5e5e5}:host([active]:not([active=false])) ins.dso-plekinfo-card-container{background-color:#ced9bf}:host([active]:not([active=false])) del.dso-plekinfo-card-container{background-color:#ddc3c6}:host([has-symbol]) .dso-plekinfo-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-heading,:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-content{grid-column:2/-1}::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:8px !important}}::slotted([slot=heading]){display:flex !important;align-items:center !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interaction]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interaction]){flex-basis:100% !important;margin-block-start:16px !important}}.heading-anchor{display:flex;flex-wrap:nowrap;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0;align-self:end}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
@@ -17,10 +17,10 @@ const PlekinfoCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dsoPlekinfoCardClick = createEvent(this, "dsoPlekinfoCardClick", 7);
-        this.wijzigactie = undefined;
-        this.href = undefined;
+        /**
+         * Opens the urls in a new window or tab
+         */
         this.targetBlank = false;
-        this.active = undefined;
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
@@ -48,7 +48,7 @@ const PlekinfoCard = class {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: 'efed80f420fd0bc102884c5478a6f305a7e921bb', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'c03ee95a473b5e4e400f0747f0df75104f775fa6', wijzigactie: this.wijzigactie }, h("div", { key: '49c8426ce24cb280846b0d55aa60755e9fd4e682', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'f81a3ffe0cb84e8e9bc5811ffbce1c5cb835a401', name: "symbol" })), h("div", { key: '3f97fab34dd4fe5b7120c36c3af056cb1d1f0d58', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { name: "heading" }), this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'ca9a2fa82eac6064534dee0347c6524478813ada', name: "meta" }), this.interaction !== null && h("slot", { key: '854cb4902965b2ca2902e5490c669561e0b7f741', name: "interaction" })), h("div", { key: '3eb14cd26135e37d9de933afe33d6e6f5c6b6a02', class: "dso-plekinfo-card-content" }, h("slot", { key: '2b3e8c7a199a1b8d1927918387bbf6c366f5c1aa', name: "content" })))));
+        return (h(Host, { key: 'a2c907d0f2be52a4816c2a0c7d73449a6f1463f2', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '712a59c849527b431093889eb75edbb54a6b6217', wijzigactie: this.wijzigactie }, h("div", { key: 'bf76d9c9dccc1bac5c20c12abc57a1a6f4cc42b2', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'afcdc38b574d5422c2a93819949d1a74c88e5960', name: "symbol" })), h("div", { key: 'b4f0b7014e90ef73531a0beab46e275824e00272', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { name: "heading" }), this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'f73f42353431608fdc60c62d64d30ec67fa475cf', name: "meta" }), this.interaction !== null && h("slot", { key: '5b85fbb43c071a7aee1249c9f2577a993a92defb', name: "interaction" })), h("div", { key: 'c10712fdc6e4434c726736b94d18d2b316456db1', class: "dso-plekinfo-card-content" }, h("slot", { key: 'd249a0e896e45e6c829a7b80297fcdb77ad996ce', name: "content" })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-plekinfo-card.entry.js.map

@@ -1 +1 @@
-{"file":"dso-plekinfo-card.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,onIAAonI,CAAC;AAC7oI,8BAAe,eAAe;;ACqB9B,MAAM,eAAe,GAA8C,CAAC,EAAE,WAAW,EAAE,EAAE,QAAQ;IAC3F,IAAI,WAAW,KAAK,SAAS,EAAE;QAC7B,OAAO,WAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;KAClE;IAED,IAAI,WAAW,KAAK,WAAW,EAAE;QAC/B,OAAO,WAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;KAClE;IAED,OAAO,WAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;AACnE,CAAC,CAAC;MAeW,YAAY;;;;;;2BAoBA,KAAK;;;IAgB5B,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACjF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;KAC9B;IAEO,iBAAiB,CAAC,CAAa;QACrC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KAClG;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KACnD;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACjD;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;KACxD;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QAErD,QACE,EAAC,IAAI,mEAAa,SAAS,IACzB,EAAC,eAAe,qDAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAC5C,4DAAK,KAAK,EAAC,0BAA0B,EAAC,MAAM,EAAE,CAAC,SAAS,IACtD,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,IAAI,IACR,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,SAAS,EAC/C,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,qBAAqB,GAAG,SAAS,EACzD,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAEzC,YAAM,IAAI,EAAC,SAAS,GAAG,EACtB,IAAI,CAAC,WAAW,IACf,kBACE,gBAAU,IAAI,EAAC,eAAe,GAAG,EACjC,YAAM,KAAK,EAAC,SAAS,8CAA+C,CACnE,KAEH,gBAAU,IAAI,EAAC,eAAe,GAAG,CAClC,CACC,KAEJ,YAAM,IAAI,EAAC,SAAS,GAAG,CACxB,EACA,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,MAAM,GAAG,EACxD,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,aAAa,GAAG,CACrD,EACN,4DAAK,KAAK,EAAC,2BAA2B,IACpC,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACU,CACb,EACP;KACH;;;;;;;","names":[],"sources":["src/components/plekinfo-card/plekinfo-card.scss?tag=dso-plekinfo-card&encapsulation=shadow","src/components/plekinfo-card/plekinfo-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/components/plekinfo-card\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-plekinfo-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-plekinfo-card-heading {\r\n    display: flex;\r\n    align-items: start;\r\n    column-gap: units.$u1;\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  .dso-plekinfo-card-heading + .dso-plekinfo-card-content {\r\n    margin-block-start: units.$u1;\r\n  }\r\n\r\n  .dso-plekinfo-card-symbol {\r\n    grid-row: span 2;\r\n\r\n    margin-inline-end: units.$u1;\r\n  }\r\n\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover;\r\n  }\r\n}\r\n\r\nins.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-voegtoe;\r\n  }\r\n}\r\n\r\ndel.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-verwijder;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active;\r\n  }\r\n\r\n  ins.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-voegtoe;\r\n  }\r\n\r\n  del.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-verwijder;\r\n  }\r\n}\r\n\r\n:host([has-symbol]) {\r\n  .dso-plekinfo-card-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n    .dso-plekinfo-card-heading,\r\n    .dso-plekinfo-card-content {\r\n      grid-column: 2 /-1;\r\n    }\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.$u1 !important;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: flex !important;\r\n  align-items: center !important;\r\n\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  color: colors.$bosgroen !important;\r\n  line-height: 1.25 !important;\r\n\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n  --_dt-rich-content-margin-block-end: 0;\r\n  --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interaction\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  margin-inline-start: auto !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.heading-anchor {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n\r\n  color: plekinfo-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: plekinfo-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: plekinfo-card.$heading-anchor-color;\r\n  }\r\n\r\n  dso-icon {\r\n    flex-shrink: 0;\r\n    align-self: end;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n","import {\r\n  Fragment,\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  forceUpdate,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n  wijzigactie: PlekinfoWijzigactie | undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n  if (wijzigactie === \"voegtoe\") {\r\n    return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n  }\r\n\r\n  if (wijzigactie === \"verwijder\") {\r\n    return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n  }\r\n\r\n  return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/**\r\n * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\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 content - An optional slot to place `Rich Content` in.\r\n * @slot interaction - A slot for the `SlideToggle`s elments.\r\n *\r\n */\r\n@Component({\r\n  tag: \"dso-plekinfo-card\",\r\n  styleUrl: \"plekinfo-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPlekinfoCardElement;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: PlekinfoWijzigactie;\r\n\r\n  /**\r\n   * The URL to which the PlekinfoCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Opens the urls in a new window or tab\r\n   */\r\n  @Prop()\r\n  targetBlank: boolean = false;\r\n\r\n  /**\r\n   * Makes the PlekinfoCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the PlekinfoCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\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.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  get interaction() {\r\n    return this.host.querySelector(\"[slot='interaction']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n    return (\r\n      <Host has-symbol={hasSymbol}>\r\n        <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n          <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-heading\">\r\n            {this.href ? (\r\n              <a\r\n                href={this.href}\r\n                target={this.targetBlank ? \"_blank\" : undefined}\r\n                rel={this.targetBlank ? \"noopener noreferrer\" : undefined}\r\n                class=\"heading-anchor\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <slot name=\"heading\" />\r\n                {this.targetBlank ? (\r\n                  <>\r\n                    <dso-icon icon=\"external-link\" />\r\n                    <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n                  </>\r\n                ) : (\r\n                  <dso-icon icon=\"chevron-right\" />\r\n                )}\r\n              </a>\r\n            ) : (\r\n              <slot name=\"heading\" />\r\n            )}\r\n            {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n            {this.interaction !== null && <slot name=\"interaction\" />}\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </WrapWijzigactie>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-plekinfo-card.entry.js","mappings":"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","names":[],"sources":["src/components/plekinfo-card/plekinfo-card.scss?tag=dso-plekinfo-card&encapsulation=shadow","src/components/plekinfo-card/plekinfo-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/components/plekinfo-card\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-plekinfo-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-plekinfo-card-heading {\r\n    display: flex;\r\n    align-items: start;\r\n    column-gap: units.$u1;\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  .dso-plekinfo-card-heading + .dso-plekinfo-card-content {\r\n    margin-block-start: units.$u1;\r\n  }\r\n\r\n  .dso-plekinfo-card-symbol {\r\n    grid-row: span 2;\r\n\r\n    margin-inline-end: units.$u1;\r\n  }\r\n\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover;\r\n  }\r\n}\r\n\r\nins.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-voegtoe;\r\n  }\r\n}\r\n\r\ndel.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-verwijder;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active;\r\n  }\r\n\r\n  ins.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-voegtoe;\r\n  }\r\n\r\n  del.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-verwijder;\r\n  }\r\n}\r\n\r\n:host([has-symbol]) {\r\n  .dso-plekinfo-card-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n    .dso-plekinfo-card-heading,\r\n    .dso-plekinfo-card-content {\r\n      grid-column: 2 /-1;\r\n    }\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.$u1 !important;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: flex !important;\r\n  align-items: center !important;\r\n\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  color: colors.$bosgroen !important;\r\n  line-height: 1.25 !important;\r\n\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n  --_dt-rich-content-margin-block-end: 0;\r\n  --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interaction\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  margin-inline-start: auto !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.heading-anchor {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n\r\n  color: plekinfo-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: plekinfo-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: plekinfo-card.$heading-anchor-color;\r\n  }\r\n\r\n  dso-icon {\r\n    flex-shrink: 0;\r\n    align-self: end;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n","import {\r\n  Fragment,\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  forceUpdate,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n  wijzigactie: PlekinfoWijzigactie | undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n  if (wijzigactie === \"voegtoe\") {\r\n    return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n  }\r\n\r\n  if (wijzigactie === \"verwijder\") {\r\n    return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n  }\r\n\r\n  return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/**\r\n * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\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 content - An optional slot to place `Rich Content` in.\r\n * @slot interaction - A slot for the `SlideToggle`s elments.\r\n *\r\n */\r\n@Component({\r\n  tag: \"dso-plekinfo-card\",\r\n  styleUrl: \"plekinfo-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPlekinfoCardElement;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: PlekinfoWijzigactie;\r\n\r\n  /**\r\n   * The URL to which the PlekinfoCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Opens the urls in a new window or tab\r\n   */\r\n  @Prop()\r\n  targetBlank: boolean = false;\r\n\r\n  /**\r\n   * Makes the PlekinfoCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the PlekinfoCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\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.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  get interaction() {\r\n    return this.host.querySelector(\"[slot='interaction']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n    return (\r\n      <Host has-symbol={hasSymbol}>\r\n        <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n          <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-heading\">\r\n            {this.href ? (\r\n              <a\r\n                href={this.href}\r\n                target={this.targetBlank ? \"_blank\" : undefined}\r\n                rel={this.targetBlank ? \"noopener noreferrer\" : undefined}\r\n                class=\"heading-anchor\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <slot name=\"heading\" />\r\n                {this.targetBlank ? (\r\n                  <>\r\n                    <dso-icon icon=\"external-link\" />\r\n                    <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n                  </>\r\n                ) : (\r\n                  <dso-icon icon=\"chevron-right\" />\r\n                )}\r\n              </a>\r\n            ) : (\r\n              <slot name=\"heading\" />\r\n            )}\r\n            {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n            {this.interaction !== null && <slot name=\"interaction\" />}\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </WrapWijzigactie>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-progress-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-60b7c895.js';
+import { r as registerInstance, h } from './index-b281ec90.js';
 
 const progressBarCss = ":host{display: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}.progress{margin-block-end:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;block-size:16px}.progress .progress-bar>span{background-color:#39870c;float:inline-start;block-size:100%;inline-size:0%}.progress .progress-bar+span{font-size:14px;margin-block-start:8px}";
 const DsoProgressBarStyle0 = progressBarCss;
@@ -6,14 +6,19 @@ const DsoProgressBarStyle0 = progressBarCss;
 const ProgressBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.progress = undefined;
+        /**
+         * From where progress is made.
+         */
         this.min = 0;
+        /**
+         * When the operation completes.
+         */
         this.max = 100;
     }
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: '8d1ef26a0057600a7c9b04192c56fbe033ff7964', class: "progress" }, h("span", { key: '3a3040f35495aae0197dcb7603302adf6aa37db0', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '52807607101891d339fad53d0941aa9e271ffed0', style: { width: `${progressPercentage}` } })), h("span", { key: '886f755e1baddc370fdf5799bd73e9b92787a99c', id: "progress-bar-label" }, h("slot", { key: 'f0461d69044d89438d78186c7db8e3e0ad07ec12' }))));
+        return (h("div", { key: '7f846fa726d258a0382cc0c93f773e7594aeca4e', class: "progress" }, h("span", { key: '9c79a8ff192c24dcb1a3aeaf9879759a34c4aafc', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '9f198b3c5be9e470e07c40ada1a219b82d33617b', style: { width: `${progressPercentage}` } })), h("span", { key: '992bb15ae26fe58e92d6cf4b83b8b8d57d45fbb1', id: "progress-bar-label" }, h("slot", { key: '85ab2f029a84b3a3dca387dedf1f7bcf75ea19d2' }))));
     }
 };
 ProgressBar.style = DsoProgressBarStyle0;

package/dist/esm/dso-progress-bar.entry.js.map

@@ -1 +1 @@
-{"file":"dso-progress-bar.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+eAA+e,CAAC;AACvgB,6BAAe,cAAc;;MCMhB,WAAW;;;;mBAWhB,CAAC;mBAMD,GAAG;;IAET,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,MAAM,kBAAkB,GAAG,GAAG,cAAc,GAAG,CAAC;QAEhD,QACE,4DAAK,KAAK,EAAC,UAAU,IACnB,6DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,qBACF,oBAAoB,mBACrB,cAAc,mBACd,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,IAEvB,6DAAM,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAS,CACnD,EACP,6DAAM,EAAE,EAAC,oBAAoB,IAC3B,8DAAa,CACR,CACH,EACN;KACH;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=dso-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-bar\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.progress {\r\n  @include progress-bar.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-bar\",\r\n  styleUrl: \"progress-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProgressBar {\r\n  /**\r\n   * The current progress. Should be between `min` and `max`.\r\n   */\r\n  @Prop()\r\n  progress!: number;\r\n\r\n  /**\r\n   * From where progress is made.\r\n   */\r\n  @Prop()\r\n  min = 0;\r\n\r\n  /**\r\n   * When the operation completes.\r\n   */\r\n  @Prop()\r\n  max = 100;\r\n\r\n  render() {\r\n    const progressNumber = Math.round(this.progress);\r\n    const progressPercentage = `${progressNumber}%`;\r\n\r\n    return (\r\n      <div class=\"progress\">\r\n        <span\r\n          class=\"progress-bar\"\r\n          role=\"progressbar\"\r\n          aria-labelledby=\"progress-bar-label\"\r\n          aria-valuenow={progressNumber}\r\n          aria-valuemin={this.min}\r\n          aria-valuemax={this.max}\r\n        >\r\n          <span style={{ width: `${progressPercentage}` }}></span>\r\n        </span>\r\n        <span id=\"progress-bar-label\">\r\n          <slot></slot>\r\n        </span>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-progress-bar.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+eAA+e,CAAC;AACvgB,6BAAe,cAAc;;MCMhB,WAAW;IALxB;;;;;QAgBE,QAAG,GAAG,CAAC,CAAC;;;;QAMR,QAAG,GAAG,GAAG,CAAC;KAwBX;IAtBC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,MAAM,kBAAkB,GAAG,GAAG,cAAc,GAAG,CAAC;QAEhD,QACE,4DAAK,KAAK,EAAC,UAAU,IACnB,6DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,qBACF,oBAAoB,mBACrB,cAAc,mBACd,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,IAEvB,6DAAM,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAS,CACnD,EACP,6DAAM,EAAE,EAAC,oBAAoB,IAC3B,8DAAa,CACR,CACH,EACN;KACH;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=dso-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-bar\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.progress {\r\n  @include progress-bar.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-bar\",\r\n  styleUrl: \"progress-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProgressBar {\r\n  /**\r\n   * The current progress. Should be between `min` and `max`.\r\n   */\r\n  @Prop()\r\n  progress!: number;\r\n\r\n  /**\r\n   * From where progress is made.\r\n   */\r\n  @Prop()\r\n  min = 0;\r\n\r\n  /**\r\n   * When the operation completes.\r\n   */\r\n  @Prop()\r\n  max = 100;\r\n\r\n  render() {\r\n    const progressNumber = Math.round(this.progress);\r\n    const progressPercentage = `${progressNumber}%`;\r\n\r\n    return (\r\n      <div class=\"progress\">\r\n        <span\r\n          class=\"progress-bar\"\r\n          role=\"progressbar\"\r\n          aria-labelledby=\"progress-bar-label\"\r\n          aria-valuenow={progressNumber}\r\n          aria-valuemin={this.min}\r\n          aria-valuemax={this.max}\r\n        >\r\n          <span style={{ width: `${progressPercentage}` }}></span>\r\n        </span>\r\n        <span id=\"progress-bar-label\">\r\n          <slot></slot>\r\n        </span>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-progress-indicator.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-60b7c895.js';
-import { i as i18n } from './i18n-43c79e8f.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-b281ec90.js';
+import { i as i18n } from './i18n-001de5be.js';
 
 const translations = {
     en: {
@@ -21,12 +21,9 @@ const Progressindicator = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.text = i18n(() => this.host, translations);
-        this.label = undefined;
-        this.size = undefined;
-        this.block = undefined;
     }
     render() {
-        return (h(Host, { key: 'b6703c229225d1fe41c64a548683b273bb407e4b' }, h("span", { key: '1f7354a33c6e225f98da4ec1a46786e56c28ff38', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '8390d994ff9087aa1528d585c484009c36a554b7', icon: "spinner" })), h("span", { key: 'af5a3464ff7074d3519623df2d8aee534d5adeca', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '2c1fac2517c997562f5e37c5f4e815945f5c75e8' }, h("span", { key: '552dfc960646715b639467906bb334d9ff3bccf0', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'dffa61729c5c0aed94fa6b2261d41746b770b2f9', icon: "spinner" })), h("span", { key: '55bdbfba87dceb04dd5f18042a4036e382e425f3', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-progress-indicator.entry.js.map

@@ -1 +1 @@
-{"file":"dso-progress-indicator.entry.js","mappings":";;;AAEO,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,iCAAiC;SACzC;KACF;IACD,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,kDAAkD;SAC1D;KACF;CACF;;ACbD,MAAM,oBAAoB,GAAG,kgCAAkgC,CAAC;AAChiC,mCAAe,oBAAoB;;MCStB,iBAAiB;;;QAwBpB,SAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;;;;;IAEnD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,IACxG,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B,EACP,6DAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF,EACP;KACH;;;;;;;","names":[],"sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Loading results. Please wait...\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n  @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include progress-indicator.small();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.small-block();\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include progress-indicator.medium();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.medium-block();\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include progress-indicator.large();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.large-block();\r\n  }\r\n}\r\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  @Element()\r\n  host!: HTMLDsoProgressIndicatorElement;\r\n\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  block?: boolean;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          <dso-icon icon=\"spinner\"></dso-icon>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label || this.text(\"label\")}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-progress-indicator.entry.js","mappings":";;;AAEO,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,iCAAiC;SACzC;KACF;IACD,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,kDAAkD;SAC1D;KACF;CACF;;ACbD,MAAM,oBAAoB,GAAG,kgCAAkgC,CAAC;AAChiC,mCAAe,oBAAoB;;MCStB,iBAAiB;IAL9B;;QA6BU,SAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KAcpD;IAZC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,IACxG,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B,EACP,6DAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF,EACP;KACH;;;;;;;","names":[],"sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Loading results. Please wait...\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n  @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include progress-indicator.small();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.small-block();\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include progress-indicator.medium();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.medium-block();\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include progress-indicator.large();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.large-block();\r\n  }\r\n}\r\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  @Element()\r\n  host!: HTMLDsoProgressIndicatorElement;\r\n\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  block?: boolean;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          <dso-icon icon=\"spinner\"></dso-icon>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label || this.text(\"label\")}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-project-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, F as Fragment } from './index-60b7c895.js';
+import { r as registerInstance, h, F as Fragment } from './index-b281ec90.js';
 
 const projectItemCss = ":host{display:block;padding:16px;border:1px solid #ccc;border-radius:4px}*,*::after,*::before{box-sizing:border-box}::slotted(dl[slot=progress]),::slotted(dl[slot=status]){--_dt-dl-margin-block-end:0;--_dt-dl-before-display:none;--_dt-dl-dt-font-weight:normal;--_dt-dl-dd-margin-block-start:0;--_dt-dl-dd-margin-inline-start:units.$u1;--_dt-dl-dd-padding-inline-start:0;--_dt-dl-dt-inline-size:auto;--_dt-dl-dd-last-margin-block-end:0;--_dt-mark-bg-color:none;--_dt-mark-padding-block:0;--_dt-mark-color:inherit;--_dt-mark-font-weight:600;display:flex !important;flex-wrap:wrap;column-gap:16px}::slotted([slot=status]){--_dt-dl-font-size:0.875rem}::slotted([slot=title]){margin-block:0 !important;font-size:1.25rem !important}::slotted([slot=actions]){display:flex}.project-item-header{display:flex;gap:16px;flex-wrap:nowrap;align-items:flex-start;margin-block-end:16px}.project-item-title{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;flex-grow:1}.project-item-actions{display:flex;flex-shrink:0;flex-wrap:nowrap}.project-item-info{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end}";
 const DsoProjectItemStyle0 = projectItemCss;
@@ -6,10 +6,9 @@ const DsoProjectItemStyle0 = projectItemCss;
 const ProjectItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.label = undefined;
     }
     render() {
-        return (h(Fragment, null, h("div", { key: 'b32c96f3ae0a3b156b1f00fd7af9224017f83162', class: "project-item-header" }, h("div", { key: 'c625657f0b8dbc262db30c84492af07c21cb23a3', class: "project-item-title" }, h("slot", { key: '04850d81b1e373c68993c40e26c0a955f6306c9f', name: "title" }), this.label && (h("dso-label", { key: 'a1936df3ee345f56581217d81312f324e383ace5', status: "danger", compact: true }, this.label))), h("div", { key: 'e6548e70221ad64b2a1ab5bbeed28a848d4d1a1c', class: "project-item-actions" }, h("slot", { key: '72da7430b195e6eec765472c1ff6bb0f8f76635c', name: "actions" }))), h("div", { key: 'd28a9d18ea89e64f7ac4fafdbc6d7ccc313fc0e7', class: "project-item-info" }, h("div", { key: '7298f09e13a9a648e88b31468993bcb1de4892f0', class: "project-item-progress" }, h("slot", { key: 'e6593dd6a34963926733dc77148d17d9a20aa481', name: "progress" })), h("div", { key: 'f12eb4f1f9eeb9cbee07d42097b6d3909472bf42', class: "project-item-status" }, h("slot", { key: 'fc868a7759e22495b59ebea7acadf05f3233d6b4', name: "status" })))));
+        return (h(Fragment, null, h("div", { key: '9508ed0ac57668586db56265f68beb4bee04ec38', class: "project-item-header" }, h("div", { key: '0e06b1788ae5938fec6bba83fadd1228ed6ad133', class: "project-item-title" }, h("slot", { key: 'ad43b586dfa5e85f6b3fc625db5e7361e2f57729', name: "title" }), this.label && (h("dso-label", { key: '90e0729599c9aaae5dca6e11a52c94ac85dab49f', status: "danger", compact: true }, this.label))), h("div", { key: '7ee6a221d017cf65119ac47122298d9002e3ca76', class: "project-item-actions" }, h("slot", { key: '4deccd0d8613c23efe2f3480dd6f88933a289a88', name: "actions" }))), h("div", { key: '488975fe9e9d7958eb9084b107a63a7728af95f8', class: "project-item-info" }, h("div", { key: '159b6549e1010120c3838c332d079eb6edf8944c', class: "project-item-progress" }, h("slot", { key: '91f6a74c039a94432c682a0c29fc22ed9f4909da', name: "progress" })), h("div", { key: 'ea65acdf8b4dd9b489f02a2b981ab2e22912eea5', class: "project-item-status" }, h("slot", { key: 'fe4f181848d2f7da2652c26f662dc5f7203e8197', name: "status" })))));
     }
 };
 ProjectItem.style = DsoProjectItemStyle0;

package/dist/esm/dso-project-item.entry.js.map

@@ -1 +1 @@
-{"file":"dso-project-item.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2oCAA2oC,CAAC;AACnqC,6BAAe,cAAc;;MCMhB,WAAW;;;;;IAOtB,MAAM;QACJ,QACE,kBACE,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,6DAAM,IAAI,EAAC,OAAO,GAAG,EACpB,IAAI,CAAC,KAAK,KACT,kEAAW,MAAM,EAAC,QAAQ,EAAC,OAAO,UAC/B,IAAI,CAAC,KAAK,CACD,CACb,CACG,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACL,EACH;KACH;;;;;;","names":[],"sources":["src/components/project-item/project-item.scss?tag=dso-project-item&encapsulation=shadow","src/components/project-item/project-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  padding: units.$u2;\r\n\r\n  border: 1px solid colors.$grijs-20;\r\n  border-radius: calc(units.$u1 / 2);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(dl[slot=\"progress\"]),\r\n::slotted(dl[slot=\"status\"]) {\r\n  --_dt-dl-margin-block-end: 0;\r\n  --_dt-dl-before-display: none;\r\n  --_dt-dl-dt-font-weight: normal;\r\n  --_dt-dl-dd-margin-block-start: 0;\r\n  --_dt-dl-dd-margin-inline-start: units.$u1;\r\n  --_dt-dl-dd-padding-inline-start: 0;\r\n  --_dt-dl-dt-inline-size: auto;\r\n  --_dt-dl-dd-last-margin-block-end: 0;\r\n\r\n  --_dt-mark-bg-color: none;\r\n  --_dt-mark-padding-block: 0;\r\n  --_dt-mark-color: inherit;\r\n  --_dt-mark-font-weight: 600;\r\n\r\n  display: flex !important;\r\n  flex-wrap: wrap;\r\n  column-gap: units.$u2;\r\n}\r\n\r\n::slotted([slot=\"status\"]) {\r\n  --_dt-dl-font-size: 0.875rem;\r\n}\r\n\r\n::slotted([slot=\"title\"]) {\r\n  margin-block: 0 !important;\r\n  font-size: 1.25rem !important;\r\n}\r\n\r\n::slotted([slot=\"actions\"]) {\r\n  display: flex;\r\n}\r\n\r\n.project-item-header {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  flex-wrap: nowrap;\r\n  align-items: flex-start;\r\n\r\n  margin-block-end: units.$u2;\r\n}\r\n\r\n.project-item-title {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  flex-grow: 1;\r\n}\r\n\r\n.project-item-actions {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n.project-item-info {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  align-items: flex-end;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-project-item\",\r\n  styleUrl: \"project-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProjectItem implements ComponentInterface {\r\n  /**\r\n   * The label of the project item.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <div class=\"project-item-header\">\r\n          <div class=\"project-item-title\">\r\n            <slot name=\"title\" />\r\n            {this.label && (\r\n              <dso-label status=\"danger\" compact>\r\n                {this.label}\r\n              </dso-label>\r\n            )}\r\n          </div>\r\n          <div class=\"project-item-actions\">\r\n            <slot name=\"actions\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"project-item-info\">\r\n          <div class=\"project-item-progress\">\r\n            <slot name=\"progress\" />\r\n          </div>\r\n          <div class=\"project-item-status\">\r\n            <slot name=\"status\" />\r\n          </div>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-project-item.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2oCAA2oC,CAAC;AACnqC,6BAAe,cAAc;;MCMhB,WAAW;;;;IAOtB,MAAM;QACJ,QACE,kBACE,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,6DAAM,IAAI,EAAC,OAAO,GAAG,EACpB,IAAI,CAAC,KAAK,KACT,kEAAW,MAAM,EAAC,QAAQ,EAAC,OAAO,UAC/B,IAAI,CAAC,KAAK,CACD,CACb,CACG,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACL,EACH;KACH;;;;;;","names":[],"sources":["src/components/project-item/project-item.scss?tag=dso-project-item&encapsulation=shadow","src/components/project-item/project-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  padding: units.$u2;\r\n\r\n  border: 1px solid colors.$grijs-20;\r\n  border-radius: calc(units.$u1 / 2);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(dl[slot=\"progress\"]),\r\n::slotted(dl[slot=\"status\"]) {\r\n  --_dt-dl-margin-block-end: 0;\r\n  --_dt-dl-before-display: none;\r\n  --_dt-dl-dt-font-weight: normal;\r\n  --_dt-dl-dd-margin-block-start: 0;\r\n  --_dt-dl-dd-margin-inline-start: units.$u1;\r\n  --_dt-dl-dd-padding-inline-start: 0;\r\n  --_dt-dl-dt-inline-size: auto;\r\n  --_dt-dl-dd-last-margin-block-end: 0;\r\n\r\n  --_dt-mark-bg-color: none;\r\n  --_dt-mark-padding-block: 0;\r\n  --_dt-mark-color: inherit;\r\n  --_dt-mark-font-weight: 600;\r\n\r\n  display: flex !important;\r\n  flex-wrap: wrap;\r\n  column-gap: units.$u2;\r\n}\r\n\r\n::slotted([slot=\"status\"]) {\r\n  --_dt-dl-font-size: 0.875rem;\r\n}\r\n\r\n::slotted([slot=\"title\"]) {\r\n  margin-block: 0 !important;\r\n  font-size: 1.25rem !important;\r\n}\r\n\r\n::slotted([slot=\"actions\"]) {\r\n  display: flex;\r\n}\r\n\r\n.project-item-header {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  flex-wrap: nowrap;\r\n  align-items: flex-start;\r\n\r\n  margin-block-end: units.$u2;\r\n}\r\n\r\n.project-item-title {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  flex-grow: 1;\r\n}\r\n\r\n.project-item-actions {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n.project-item-info {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  align-items: flex-end;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-project-item\",\r\n  styleUrl: \"project-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProjectItem implements ComponentInterface {\r\n  /**\r\n   * The label of the project item.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <div class=\"project-item-header\">\r\n          <div class=\"project-item-title\">\r\n            <slot name=\"title\" />\r\n            {this.label && (\r\n              <dso-label status=\"danger\" compact>\r\n                {this.label}\r\n              </dso-label>\r\n            )}\r\n          </div>\r\n          <div class=\"project-item-actions\">\r\n            <slot name=\"actions\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"project-item-info\">\r\n          <div class=\"project-item-progress\">\r\n            <slot name=\"progress\" />\r\n          </div>\r\n          <div class=\"project-item-status\">\r\n            <slot name=\"status\" />\r\n          </div>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-renvooi_2.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, F as Fragment, c as createEvent, a as getElement } from './index-60b7c895.js';
-import { v as v4 } from './v4-692dad5f.js';
+import { r as registerInstance, h, F as Fragment, c as createEvent, a as getElement } from './index-b281ec90.js';
+import { v as v4 } from './v4-c74494dc.js';
 
 const renvooiCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}ins a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}ins a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}del a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}del a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}:host{display:inline}*,*::after,*::before{box-sizing:border-box}.text{text-decoration:var(--_dso-renvooi-text-decoration)}";
 const DsoRenvooiStyle0 = renvooiCss;
@@ -23,10 +23,9 @@ const RenvooiRender = ({ value }) => {
 const Renvooi = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.value = undefined;
     }
     render() {
-        return h(RenvooiRender, { key: '4836bbc37493b1229cdb048e32705220b5537f6b', value: this.value });
+        return h(RenvooiRender, { key: '9a8b18bd7d095e8663debcc5fa67e9c887665528', value: this.value });
     }
 };
 Renvooi.style = DsoRenvooiStyle0;
@@ -38,11 +37,17 @@ const SlideToggle = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dsoActiveChange = createEvent(this, "dsoActiveChange", 5);
+        /**
+         * Set to true if Slide Toggle is checked.
+         */
         this.checked = false;
+        /**
+         * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.
+         */
         this.disabled = false;
-        this.accessibleLabel = undefined;
-        this.labelledbyId = undefined;
-        this.hasVisibleLabel = undefined;
+        /**
+         * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for="id">`.
+         */
         this.identifier = v4();
     }
     handleSwitch(e) {
@@ -55,7 +60,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: '1d0bd72208407db78bf18151ca091cc52ee8fb01', 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: 'aeab86c82b268e0090b94867fd8f404cc2c52ba2', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '8ba58bfc4e94d0ef9ed98a2a3a6c6820f7ad0e43', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '992551dcb7d56e2db0f71816b2d7af218dc1b1f3', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'a3aca9759480ab267897c3d156945e8df7f6af70', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '688ed90390ee4454f4361b8d44018a7f40502886', htmlFor: this.identifier }, h("slot", { key: '1681d2d582523acb101921eb6653328676213392' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: '306eb41c32a4811e8ae34fb407f827bc8b875d90', 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: '35dac095c112ff5ebfe85701c5d3a44d5b1dbf68', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'b6db44931a28ffbf074ebe22b6ad2aaca58609d1', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '40618cd396f7fb4c316c58fb9afe7138aa5dffd5', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '3bd59d43e08c68849e89ec62f89d8cd32e68542b', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '1de645b2d4f302b4c34ffbcbd7f012b6aa2eb164', htmlFor: this.identifier }, h("slot", { key: '21915a975abcff59b830a891660cb1f23f604a6f' })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-renvooi_2.entry.js.map

@@ -1 +1 @@
-{"file":"dso-renvooi.dso-slide-toggle.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,ojDAAojD,CAAC;AACxkD,yBAAe,UAAU;;ACOzB,MAAM,aAAa,GAA4C,CAAC,EAAE,KAAK,EAAE;IACvE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE;;QAEvC,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,KAAK,CAAQ,CAAC;KAC1C;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,QACE,kBACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAC1B,kBACE,EAAC,aAAa,IAAC,KAAK,EAAE,CAAC,GAAI,EAC1B,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,CAC1B,CACJ,CAAC,CACD,EACH;KACH;IAED,IAAI,YAAY,IAAI,KAAK,EAAE;QACzB,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;KACtC;IAED,IAAI,YAAY,IAAI,KAAK,EAAE;QACzB,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;KACtC;IAED,QACE,kBACE,eAAM,KAAK,CAAC,GAAG,CAAO,OAAC,eAAM,KAAK,CAAC,KAAK,CAAO,CAC9C,EACH;AACJ,CAAC,CAAC;MAUW,OAAO;;;;;IAOlB,MAAM;QACJ,OAAO,EAAC,aAAa,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAC7C;;;;AC3DH,MAAM,cAAc,GAAG,4vBAA4vB,CAAC;AACpxB,6BAAe,cAAc;;MCQhB,WAAW;;;;uBAQZ,KAAK;wBAMJ,KAAK;;;;0BAqBH,EAAE,EAAE;;IAQT,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,kBACE,6EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAEtE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChF,0DAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChC,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3D,+DAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnB,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,8DAAQ,CACF,CACT,CACA,EACH;KACH;;;;;;;","names":[],"sources":["src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n:host {\r\n  display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n  text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Fragment, FunctionalComponent, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n  value: RenvooiValue | RenvooiValue[] | undefined;\r\n}\r\n\r\nconst RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value }) => {\r\n  if (typeof value === \"string\" || !value) {\r\n    // This element is used for --_dso-renvooi-text-decoration\r\n    return <span class=\"text\">{value}</span>;\r\n  }\r\n\r\n  if (Array.isArray(value)) {\r\n    return (\r\n      <>\r\n        {value.map((v, i, { length }) => (\r\n          <>\r\n            <RenvooiRender value={v} />\r\n            {i < length - 1 ? \", \" : \"\"}\r\n          </>\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n\r\n  if (\"toegevoegd\" in value) {\r\n    return <ins>{value.toegevoegd}</ins>;\r\n  }\r\n\r\n  if (\"verwijderd\" in value) {\r\n    return <del>{value.verwijderd}</del>;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n    </>\r\n  );\r\n};\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  render() {\r\n    return <RenvooiRender value={this.value} />;\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-renvooi.dso-slide-toggle.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,ojDAAojD,CAAC;AACxkD,yBAAe,UAAU;;ACOzB,MAAM,aAAa,GAA4C,CAAC,EAAE,KAAK,EAAE;IACvE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE;;QAEvC,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,KAAK,CAAQ,CAAC;KAC1C;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,QACE,kBACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAC1B,kBACE,EAAC,aAAa,IAAC,KAAK,EAAE,CAAC,GAAI,EAC1B,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,CAC1B,CACJ,CAAC,CACD,EACH;KACH;IAED,IAAI,YAAY,IAAI,KAAK,EAAE;QACzB,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;KACtC;IAED,IAAI,YAAY,IAAI,KAAK,EAAE;QACzB,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;KACtC;IAED,QACE,kBACE,eAAM,KAAK,CAAC,GAAG,CAAO,OAAC,eAAM,KAAK,CAAC,KAAK,CAAO,CAC9C,EACH;AACJ,CAAC,CAAC;MAUW,OAAO;;;;IAOlB,MAAM;QACJ,OAAO,EAAC,aAAa,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAC7C;;;;AC3DH,MAAM,cAAc,GAAG,4vBAA4vB,CAAC;AACpxB,6BAAe,cAAc;;MCQhB,WAAW;IALxB;;;;;;QAaE,YAAO,GAAG,KAAK,CAAC;;;;QAMhB,aAAQ,GAAG,KAAK,CAAC;;;;QAqBjB,eAAU,GAAG,EAAE,EAAE,CAAC;KA+CnB;IAvCS,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,kBACE,6EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAEtE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChF,0DAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChC,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3D,+DAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnB,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,8DAAQ,CACF,CACT,CACA,EACH;KACH;;;;;;;","names":[],"sources":["src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n:host {\r\n  display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n  text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Fragment, FunctionalComponent, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n  value: RenvooiValue | RenvooiValue[] | undefined;\r\n}\r\n\r\nconst RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value }) => {\r\n  if (typeof value === \"string\" || !value) {\r\n    // This element is used for --_dso-renvooi-text-decoration\r\n    return <span class=\"text\">{value}</span>;\r\n  }\r\n\r\n  if (Array.isArray(value)) {\r\n    return (\r\n      <>\r\n        {value.map((v, i, { length }) => (\r\n          <>\r\n            <RenvooiRender value={v} />\r\n            {i < length - 1 ? \", \" : \"\"}\r\n          </>\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n\r\n  if (\"toegevoegd\" in value) {\r\n    return <ins>{value.toegevoegd}</ins>;\r\n  }\r\n\r\n  if (\"verwijderd\" in value) {\r\n    return <del>{value.verwijderd}</del>;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n    </>\r\n  );\r\n};\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  render() {\r\n    return <RenvooiRender value={this.value} />;\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-responsive-element.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-60b7c895.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b281ec90.js';
 
 const responsiveElementCss = ":host{display:block}";
 const DsoResponsiveElementStyle0 = responsiveElementCss;
@@ -21,6 +21,8 @@ const ResponsiveElement = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dsoSizeChange = createEvent(this, "dsoSizeChange", 7);
+        this.sizeAlias = elementSizes[0].alias;
+        this.sizeWidth = 0;
         this.observer = new ResizeObserver(([entry]) => {
             var _a, _b;
             if (!entry) {
@@ -30,8 +32,6 @@ const ResponsiveElement = class {
             this.sizeAlias = size;
             this.dsoSizeChange.emit(size);
         });
-        this.sizeAlias = elementSizes[0].alias;
-        this.sizeWidth = 0;
     }
     /**
      * The current size
@@ -46,7 +46,7 @@ const ResponsiveElement = class {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '457b1983ff925174c7e41bc11ef3f1b69f98b860', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'f560e834ad9dc5c4391acf73e5f14e0339338a60' })));
+        return (h(Host, { key: 'cea59e4cce2f8ed5802f4aac185431f16c952279', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '5363655a113fcb9720a312412c4759cda02da06b' })));
     }
     get host() { return getElement(this); }
 };