@dso-toolkit/core 62.18.0 → 62.20.0

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

@@ -2,56 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2556c4c6.js');
-const getActiveElement = require('./get-active-element-618f7b1f.js');
+const index = require('./index-a58ba49d.js');
+const getActiveElement = require('./get-active-element-05f06ef1.js');
 const v4 = require('./v4-c23234d2.js');
 
 const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";
+const DsoModalStyle0 = modalCss;
 
 const Modal = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dsoClose = index.createEvent(this, "dsoClose", 7);
-    this.ariaId = v4.v4();
-    this.fullscreen = undefined;
-    this.modalTitle = undefined;
-    this.role = "dialog";
-    this.returnFocus = undefined;
-    this.showCloseButton = true;
-  }
-  get hasFooter() {
-    return this.host.querySelector("[slot='footer']") !== null;
-  }
-  componentDidLoad() {
-    var _a;
-    if ((_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.isConnected) {
-      const activeElement = getActiveElement.getActiveElement();
-      if (activeElement instanceof HTMLElement) {
-        this.returnFocusElement = activeElement;
-      }
-      this.htmlDialogElement.showModal();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsoClose = index.createEvent(this, "dsoClose", 7);
+        this.ariaId = v4.v4();
+        this.fullscreen = undefined;
+        this.modalTitle = undefined;
+        this.role = "dialog";
+        this.returnFocus = undefined;
+        this.showCloseButton = true;
     }
-    document.body.classList.add("dso-modal-open");
-  }
-  disconnectedCallback() {
-    var _a, _b, _c;
-    document.body.classList.remove("dso-modal-open");
-    (_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.close();
-    if (this.returnFocus === false) {
-      return;
+    get hasFooter() {
+        return this.host.querySelector("[slot='footer']") !== null;
     }
-    (_c = ((_b = this.returnFocus) !== null && _b !== void 0 ? _b : this.returnFocusElement)) === null || _c === void 0 ? void 0 : _c.focus();
-  }
-  render() {
-    var _a;
-    return (index.h("dialog", { class: "dso-modal", role: (_a = this.role) !== 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 });
-      } }, index.h("div", { class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("dso-scrollable", null, index.h("div", { class: "dso-body", tabIndex: 0 }, index.h("slot", { name: "body" }))), this.hasFooter && (index.h("div", { class: "dso-footer" }, index.h("slot", { name: "footer" }))))));
-  }
-  get host() { return index.getElement(this); }
+    componentDidLoad() {
+        var _a;
+        if ((_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.isConnected) {
+            const activeElement = getActiveElement.getActiveElement();
+            if (activeElement instanceof HTMLElement) {
+                this.returnFocusElement = activeElement;
+            }
+            this.htmlDialogElement.showModal();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.close();
+        if (this.returnFocus === false) {
+            return;
+        }
+        (_c = ((_b = this.returnFocus) !== null && _b !== void 0 ? _b : this.returnFocusElement)) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+    render() {
+        var _a;
+        return (index.h("dialog", { key: '6072654b30fb1d5d37a85e415cc8238d9737fb62', class: "dso-modal", role: (_a = this.role) !== 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 });
+            } }, index.h("div", { key: 'f1332e303c002cdc221237f69691c339fe6b629f', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("dso-scrollable", { key: '8ada9f86ded3d0b35cfcc2df1edcd2c969864d00' }, index.h("div", { key: 'b3845f15bdb227ade9a13ef4e718c6a13b0e21b8', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: '5b55389b43bcaa09eabef43e16cb2d298e9d47dd', name: "body" }))), this.hasFooter && (index.h("div", { key: '135742b97efe4617a4ec7f64b86461fa69b5ab4a', class: "dso-footer" }, index.h("slot", { key: '6ddd36972880b56bc98764da436872a38664ad44', name: "footer" }))))));
+    }
+    get host() { return index.getElement(this); }
 };
-Modal.style = modalCss;
+Modal.style = DsoModalStyle0;
 
 exports.dso_modal = Modal;
 

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

@@ -1 +1 @@
-{"file":"dso-modal.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,23LAA23L;;MCW/3L,KAAK;;;;kBAOPA,KAAE,EAAE;;;gBAkBS,QAAQ;uBAUiB,SAAS;2BAQtC,IAAI;;EAUtB,IAAI,SAAS;IACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;GAC5D;EAED,gBAAgB;;IACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;MACvC,MAAM,aAAa,GAAGC,iCAAgB,EAAE,CAAC;MACzC,IAAI,aAAa,YAAY,WAAW,EAAE;QACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;OACzC;MAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;KACpC;IAED,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;GAC/C;EAED,oBAAoB;;IAClB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACjD,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;IAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;MAC9B,OAAO;KACR;IAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;GACxD;EAED,MAAM;;IACJ,QACEC,oBACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;QACV,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;OAC1C,IAEDA,iBAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACdA,iBAAK,KAAK,EAAC,YAAY,IACrBA,gBAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnBA,oBAAQ,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,IAC9FA,sBAAU,IAAI,EAAC,OAAO,GAAY,EAClCA,kBAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAENA,kBAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAEDA,gCACEA,iBAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/BA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACbA,iBAAK,KAAK,EAAC,YAAY,IACrBA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;GACH;;;;;;;","names":["v4","getActiveElement","h"],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@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 { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\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  role: 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  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    document.body.classList.add(\"dso-modal-open\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.body.classList.remove(\"dso-modal-open\");\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.role ?? 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\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\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.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,23LAA23L,CAAC;AAC74L,uBAAe,QAAQ;;MCUV,KAAK;;;;sBAOPA,KAAE,EAAE;;;oBAmBS,QAAQ;2BAUiB,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAED,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAGC,iCAAgB,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,QACEC,qEACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,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,IAEDA,kEAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACdA,iBAAK,KAAK,EAAC,YAAY,IACrBA,gBAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnBA,oBAAQ,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,IAC9FA,sBAAU,IAAI,EAAC,OAAO,GAAY,EAClCA,kBAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAENA,kBAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAEDA,+EACEA,kEAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/BA,mEAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACbA,kEAAK,KAAK,EAAC,YAAY,IACrBA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;","names":["v4","getActiveElement","h"],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@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 { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\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  // eslint-disable-next-line @stencil-community/reserved-member-names\r\n  role: 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  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.role ?? 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\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\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/cjs/dso-pagination.cjs.entry.js

@@ -2,141 +2,142 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2556c4c6.js');
-const isModifiedEvent = require('./is-modified-event-97f83d0f.js');
+const index = require('./index-a58ba49d.js');
+const isModifiedEvent = require('./is-modified-event-f643edb2.js');
 
 const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
+const DsoPaginationStyle0 = paginationCss;
 
 const Pagination = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dsoSelectPage = index.createEvent(this, "dsoSelectPage", 7);
-    this.sizePositionsMap = {
-      small: 7,
-      medium: 9,
-      large: 11,
-    };
-    this.availablePositions = undefined;
-    this.totalPages = undefined;
-    this.currentPage = undefined;
-    this.formatHref = (page) => "#" + page;
-  }
-  /**
-   * Listens to the dsoSizeChange event on Responsive Element
-   */
-  sizeChangeHandler(event) {
-    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);
-  }
-  clickHandler(e, page) {
-    this.dsoSelectPage.emit({
-      originalEvent: e,
-      page,
-      isModifiedEvent: isModifiedEvent.isModifiedEvent(e),
-    });
-  }
-  componentDidLoad() {
-    var _a;
-    (_a = this.responsiveElement) === null || _a === void 0 ? void 0 : _a.getSize().then((size) => (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])));
-  }
-  render() {
-    var _a, _b, _c;
-    if (!this.totalPages) {
-      return null;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsoSelectPage = index.createEvent(this, "dsoSelectPage", 7);
+        this.sizePositionsMap = {
+            small: 7,
+            medium: 9,
+            large: 11,
+        };
+        this.availablePositions = undefined;
+        this.totalPages = undefined;
+        this.currentPage = undefined;
+        this.formatHref = (page) => "#" + page;
     }
-    if (this.availablePositions === undefined) {
-      return index.h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) });
+    /**
+     * Listens to the dsoSizeChange event on Responsive Element
+     */
+    sizeChangeHandler(event) {
+        this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);
     }
-    const availablePositions = this.availablePositions;
-    const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
-    const pages = this.getPages(currentPage, this.availablePositions, this.totalPages);
-    return (index.h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, index.h("ul", { class: "pagination" }, index.h("li", { class: currentPage <= 1 || currentPage > this.totalPages ? "dso-page-hidden" : undefined }, index.h("a", { href: this.formatHref((_b = pages[pages.indexOf(currentPage) - 1]) !== null && _b !== void 0 ? _b : 1), "aria-label": "Vorige", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) - 1]) !== null && _a !== void 0 ? _a : 1); } }, index.h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (index.h(index.Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions) && (index.h("li", null, index.h("span", null, "..."))), index.h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (index.h("span", { "aria-current": "page" }, page)) : (index.h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, page))), this.showEllipsisAfterFirst(pages, page, availablePositions) && (index.h("li", null, index.h("span", null, "...")))))), index.h("li", { class: currentPage < 1 || currentPage >= this.totalPages ? "dso-page-hidden" : undefined }, index.h("a", { href: this.formatHref((_c = pages[pages.indexOf(currentPage) + 1]) !== null && _c !== void 0 ? _c : this.totalPages), "aria-label": "Volgende", onClick: (e) => {
-        var _a;
-        return currentPage &&
-          this.totalPages &&
-          this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) + 1]) !== null && _a !== void 0 ? _a : this.totalPages);
-      } }, index.h("dso-icon", { icon: "chevron-right" }))))));
-  }
-  getAvailablePositions(sizePositions) {
-    if (sizePositions % 2 === 0) {
-      // Even aantal posities zorgt voor een scheve pagination
-      return sizePositions - 1;
-    }
-    if (sizePositions <= 3) {
-      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.
-      return 3;
+    clickHandler(e, page) {
+        this.dsoSelectPage.emit({
+            originalEvent: e,
+            page,
+            isModifiedEvent: isModifiedEvent.isModifiedEvent(e),
+        });
     }
-    return sizePositions;
-  }
-  getPages(currentPage, availablePositions, totalPages) {
-    if (totalPages + 2 <= availablePositions) {
-      // + 2 voor de vorige en volgende knop
-      return Array.from({ length: totalPages }, (_value, i) => i + 1);
-    }
-    if (availablePositions === 3) {
-      return [currentPage];
+    componentDidLoad() {
+        var _a;
+        (_a = this.responsiveElement) === null || _a === void 0 ? void 0 : _a.getSize().then((size) => (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])));
     }
-    if (availablePositions === 5) {
-      return [1, currentPage, totalPages];
+    render() {
+        var _a, _b, _c;
+        if (!this.totalPages) {
+            return null;
+        }
+        if (this.availablePositions === undefined) {
+            return index.h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) });
+        }
+        const availablePositions = this.availablePositions;
+        const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
+        const pages = this.getPages(currentPage, this.availablePositions, this.totalPages);
+        return (index.h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, index.h("ul", { class: "pagination" }, index.h("li", { class: currentPage <= 1 || currentPage > this.totalPages ? "dso-page-hidden" : undefined }, index.h("a", { href: this.formatHref((_b = pages[pages.indexOf(currentPage) - 1]) !== null && _b !== void 0 ? _b : 1), "aria-label": "Vorige", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) - 1]) !== null && _a !== void 0 ? _a : 1); } }, index.h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (index.h(index.Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions) && (index.h("li", null, index.h("span", null, "..."))), index.h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (index.h("span", { "aria-current": "page" }, page)) : (index.h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, page))), this.showEllipsisAfterFirst(pages, page, availablePositions) && (index.h("li", null, index.h("span", null, "...")))))), index.h("li", { class: currentPage < 1 || currentPage >= this.totalPages ? "dso-page-hidden" : undefined }, index.h("a", { href: this.formatHref((_c = pages[pages.indexOf(currentPage) + 1]) !== null && _c !== void 0 ? _c : this.totalPages), "aria-label": "Volgende", onClick: (e) => {
+                var _a;
+                return currentPage &&
+                    this.totalPages &&
+                    this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) + 1]) !== null && _a !== void 0 ? _a : this.totalPages);
+            } }, index.h("dso-icon", { icon: "chevron-right" }))))));
     }
-    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];
-  }
-  getPageRange(currentPage, availablePositions, totalPages) {
-    const range = [];
-    const positionRange = Math.floor(availablePositions / 2);
-    if (currentPage <= positionRange) {
-      for (let i = 2; i <= availablePositions - 4; i++) {
-        range.push(i);
-      }
+    getAvailablePositions(sizePositions) {
+        if (sizePositions % 2 === 0) {
+            // Even aantal posities zorgt voor een scheve pagination
+            return sizePositions - 1;
+        }
+        if (sizePositions <= 3) {
+            // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.
+            return 3;
+        }
+        return sizePositions;
     }
-    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {
-      if (positionRange === 1) {
-        if (currentPage > totalPages - 2) {
-          range.push(totalPages - 2);
+    getPages(currentPage, availablePositions, totalPages) {
+        if (totalPages + 2 <= availablePositions) {
+            // + 2 voor de vorige en volgende knop
+            return Array.from({ length: totalPages }, (_value, i) => i + 1);
         }
-        range.push(currentPage);
-        if (currentPage < 3) {
-          range.push(3);
+        if (availablePositions === 3) {
+            return [currentPage];
         }
-      }
-      if (positionRange > 1) {
-        const pagesBeforeOrAfter = positionRange - 3;
-        for (let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange); i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange); i++) {
-          if (i > 2 && i < totalPages - 1) {
-            range.push(i);
-          }
+        if (availablePositions === 5) {
+            return [1, currentPage, totalPages];
         }
-      }
+        return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];
     }
-    if (currentPage > totalPages - positionRange) {
-      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {
-        range.push(i);
-      }
+    getPageRange(currentPage, availablePositions, totalPages) {
+        const range = [];
+        const positionRange = Math.floor(availablePositions / 2);
+        if (currentPage <= positionRange) {
+            for (let i = 2; i <= availablePositions - 4; i++) {
+                range.push(i);
+            }
+        }
+        if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {
+            if (positionRange === 1) {
+                if (currentPage > totalPages - 2) {
+                    range.push(totalPages - 2);
+                }
+                range.push(currentPage);
+                if (currentPage < 3) {
+                    range.push(3);
+                }
+            }
+            if (positionRange > 1) {
+                const pagesBeforeOrAfter = positionRange - 3;
+                for (let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange); i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange); i++) {
+                    if (i > 2 && i < totalPages - 1) {
+                        range.push(i);
+                    }
+                }
+            }
+        }
+        if (currentPage > totalPages - positionRange) {
+            for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {
+                range.push(i);
+            }
+        }
+        return range.filter((v, i, a) => a.indexOf(v) === i);
     }
-    return range.filter((v, i, a) => a.indexOf(v) === i);
-  }
-  showEllipsisAfterFirst(pages, page, availablePositions) {
-    const totalPages = pages[pages.length - 1];
-    if (!totalPages) {
-      throw new Error("No totalPages");
+    showEllipsisAfterFirst(pages, page, availablePositions) {
+        const totalPages = pages[pages.length - 1];
+        if (!totalPages) {
+            throw new Error("No totalPages");
+        }
+        return (pages.indexOf(page) === 0 &&
+            totalPages > availablePositions - 2 &&
+            !pages.some((p) => p === 2) &&
+            availablePositions >= 7);
     }
-    return (pages.indexOf(page) === 0 &&
-      totalPages > availablePositions - 2 &&
-      !pages.some((p) => p === 2) &&
-      availablePositions >= 7);
-  }
-  showEllipsisBeforeLast(pages, page, availablePositions) {
-    const totalPages = pages[pages.length - 1];
-    if (!totalPages) {
-      throw new Error("No totalPages");
+    showEllipsisBeforeLast(pages, page, availablePositions) {
+        const totalPages = pages[pages.length - 1];
+        if (!totalPages) {
+            throw new Error("No totalPages");
+        }
+        return (pages.indexOf(page) === pages.length - 1 &&
+            totalPages > availablePositions - 2 &&
+            !pages.some((p) => p === totalPages - 1) &&
+            availablePositions >= 7);
     }
-    return (pages.indexOf(page) === pages.length - 1 &&
-      totalPages > availablePositions - 2 &&
-      !pages.some((p) => p === totalPages - 1) &&
-      availablePositions >= 7);
-  }
-  get host() { return index.getElement(this); }
+    get host() { return index.getElement(this); }
 };
-Pagination.style = paginationCss;
+Pagination.style = DsoPaginationStyle0;
 
 exports.dso_pagination = Pagination;
 

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

@@ -1 +1 @@
-{"file":"dso-pagination.entry.cjs.js","mappings":"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","names":["isModifiedEvent","h"],"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","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        <ul class=\"pagination\">\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              </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      </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.cjs.js","mappings":"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","names":["isModifiedEvent","h"],"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","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        <ul class=\"pagination\">\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              </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      </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/cjs/dso-progress-bar.cjs.entry.js

@@ -2,24 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2556c4c6.js');
+const index = require('./index-a58ba49d.js');
 
 const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-bottom:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;height:16px}.progress .progress-bar>span{background-color:#39870c;float:left;height:100%;width:0%}.progress .progress-bar+span{font-size:14px;margin-top:8px}";
+const DsoProgressBarStyle0 = progressBarCss;
 
 const ProgressBar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.progress = undefined;
-    this.min = 0;
-    this.max = 100;
-  }
-  render() {
-    const progressNumber = Math.round(this.progress);
-    const progressPercentage = `${progressNumber}%`;
-    return (index.h("div", { class: "progress" }, index.h("span", { class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("span", { style: { width: `${progressPercentage}` } })), index.h("span", { id: "progress-bar-label" }, index.h("slot", null))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.progress = undefined;
+        this.min = 0;
+        this.max = 100;
+    }
+    render() {
+        const progressNumber = Math.round(this.progress);
+        const progressPercentage = `${progressNumber}%`;
+        return (index.h("div", { key: '934db66813ae6a3e46bea91a27dc0186d895a730', class: "progress" }, index.h("span", { key: '04c069db44d12bfb25ffb8f4fb1ad694aa5f83d6', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("span", { key: 'ea66a781d0c3c02c48623ea803c975ad2364f102', style: { width: `${progressPercentage}` } })), index.h("span", { key: '7e30b61ee45fe03728838ab0bbbd0b37d7125710', id: "progress-bar-label" }, index.h("slot", { key: '7a6a57446f74c97edb10635d49a318f0489a16db' }))));
+    }
 };
-ProgressBar.style = progressBarCss;
+ProgressBar.style = DsoProgressBarStyle0;
 
 exports.dso_progress_bar = ProgressBar;
 

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

@@ -1 +1 @@
-{"file":"dso-progress-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,ocAAoc;;MCO9c,WAAW;;;;eAWhB,CAAC;eAMD,GAAG;;EAET,MAAM;IACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,GAAG,cAAc,GAAG,CAAC;IAEhD,QACEA,iBAAK,KAAK,EAAC,UAAU,IACnBA,kBACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,qBACF,oBAAoB,mBACrB,cAAc,mBACd,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,IAEvBA,kBAAM,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAS,CACnD,EACPA,kBAAM,EAAE,EAAC,oBAAoB,IAC3BA,qBAAa,CACR,CACH,EACN;GACH;;;;;;","names":["h"],"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.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,ocAAoc,CAAC;AAC5d,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,QACEA,kEAAK,KAAK,EAAC,UAAU,IACnBA,mEACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,qBACF,oBAAoB,mBACrB,cAAc,mBACd,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,IAEvBA,mEAAM,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAS,CACnD,EACPA,mEAAM,EAAE,EAAC,oBAAoB,IAC3BA,oEAAa,CACR,CACH,EACN;KACH;;;;;;","names":["h"],"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/cjs/dso-progress-indicator.cjs.entry.js

@@ -2,22 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2556c4c6.js');
+const index = require('./index-a58ba49d.js');
 
 const progressIndicatorCss = "*,*::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-left:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host([size=small]) dso-icon,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) dso-icon{height:24px;width:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding:12px 16px}:host([size=medium]) .dso-progress-indicator-spinner,:host([size=medium]) dso-icon{height:32px;width:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner,:host([size=large]) dso-icon{height:48px;width:48px}:host([size=large]):host([block]){padding:24px 16px}";
+const DsoProgressIndicatorStyle0 = progressIndicatorCss;
 
 const Progressindicator = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.label = "Resultaten laden: een moment geduld alstublieft.";
-    this.size = undefined;
-    this.block = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("dso-icon", { icon: "spinner" })), index.h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.label = "Resultaten laden: een moment geduld alstublieft.";
+        this.size = undefined;
+        this.block = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: '25d4e250926f77eaf40a3cbccccbf5af370b9791' }, index.h("span", { key: '200556fa4278425fda6b805bdaccf248d84cd5e6', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("dso-icon", { key: 'b6e5a3081bf8e5f9b4b9160e2a57e7b437f8778c', icon: "spinner" })), index.h("span", { key: 'f509b115a8b7520d90a8faecf7276b3527e412fe', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
+    }
 };
-Progressindicator.style = progressIndicatorCss;
+Progressindicator.style = DsoProgressIndicatorStyle0;
 
 exports.dso_progress_indicator = Progressindicator;
 

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

@@ -1 +1 @@
-{"file":"dso-progress-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,k7BAAk7B;;MCOl8B,iBAAiB;;;iBAKpB,kDAAkD;;;;EAgB1D,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,kBAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,IACxGA,sBAAU,IAAI,EAAC,SAAS,GAAY,CAC/B,EACPA,kBAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["@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, h, Host, Prop } from \"@stencil/core\";\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  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\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()\r\n  block?: boolean;\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}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-progress-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,k7BAAk7B,CAAC;AACh9B,mCAAe,oBAAoB;;MCMtB,iBAAiB;;;qBAKpB,kDAAkD;;;;IAgB1D,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,mEAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,IACxGA,uEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B,EACPA,mEAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["@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, h, Host, Prop } from \"@stencil/core\";\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  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\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()\r\n  block?: boolean;\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}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}