npm - @dso-toolkit/core - Versions diffs - 67.3.1 → 68.0.0 - Mend

@dso-toolkit/core 67.3.1 → 68.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (702) hide show

package/dist/components/dso-map-overlays.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-map-overlays.js","mappings":";;;;;;;;AAEO,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,kBAAkB,EAAE;YAClB,KAAK,EAAE,WAAW;SACnB;KACF;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE;YAClB,KAAK,EAAE,YAAY;SACpB;KACF;CACF;;ACbD,MAAM,cAAc,GAAG,sYAAsY,CAAC;AAC9Z,6BAAe,cAAc;;MCahB,WAAW~~;;;;;;QAEd~~,mBAAc,GAA+C,EAAE,CAAC;~~QA6BhE~~,SAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;~~qBApB3CA~~,~~EAAM,EAAE;;;IAcR,~~oBAAoB,CAAC,OAAgB,EAAE,CAAqC;QAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;KAClD;IAID,kBAAkB;QAChB,IAAI,CAAC,QAAQ;aACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aAClG,OAAO,CAAC,CAAC,CAAC;;YACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SAC9C,CAAC,CAAC;QAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;KACvC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;SACjC;QAED,QACE,iEAAU,KAAK,EAAC,2BAA2B,IACzC,+DAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3C,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,IAC3C,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACd,CACH,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzB,sBACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/map-overlays/map-overlays.i18n.ts","src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-map-overlays\": {\r\n title: \"Maplayers\",\r\n },\r\n },\r\n nl: {\r\n \"dso-map-overlays\": {\r\n title: \"Kaartlagen\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n border: 0;\r\n margin: 0;\r\n min-inline-size: 0;\r\n padding: 0;\r\n\r\n .control-label {\r\n display: inline-block;\r\n font-weight: bold;\r\n margin-block-end: units.$u1;\r\n max-inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n\r\np[slot=\"info\"] {\r\n margin: 0;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\nimport { translations } from \"./map-overlays.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-map-overlays\",\r\n styleUrl: \"./map-overlays.scss\",\r\n shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n private previousOverlays: Overlay[] \| undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n @Element()\r\n host!: HTMLDsoMapOverlaysElement;\r\n\r\n /*\r\n To group the overlays together. Generally the default value suffices.\r\n /\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /\r\n The overlays.\r\n /\r\n @Prop()\r\n overlays!: Overlay[];\r\n\r\n /\r\n Emitted when the user selects a different overlay.\r\n */\r\n @Event()\r\n dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n const { checked } = e.detail;\r\n\r\n this.dsoToggleOverlay.emit({ overlay, checked });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n this.overlays\r\n .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousOverlays = this.overlays;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-checkboxes\">\r\n <legend class=\"sr-only\">Kaartlagen</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n {this.text(\"title\")}\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.overlays.map((overlay) => (\r\n <dso-selectable\r\n key={overlay.id}\r\n type=\"checkbox\"\r\n value={overlay.name}\r\n checked={overlay.checked}\r\n disabled={overlay.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n >\r\n {overlay.name}\r\n {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-map-overlays.js","mappings":";;;;;;;;AAEO,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,kBAAkB,EAAE;YAClB,KAAK,EAAE,WAAW;SACnB;KACF;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE;YAClB,KAAK,EAAE,YAAY;SACpB;KACF;CACF;;ACbD,MAAM,cAAc,GAAG,sYAAsY,CAAC;AAC9Z,6BAAe,cAAc;;MCahB,WAAW;IALxB;;;;;QAOU,mBAAc,GAA+C,EAAE,CAAC;;;;QASxE,UAAK,GAAGA,EAAM,EAAE,CAAC;QAoBT,SAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KA6CpD;IAnDS,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;QAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;KAClD;IAID,kBAAkB;QAChB,IAAI,CAAC,QAAQ;aACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aAClG,OAAO,CAAC,CAAC,CAAC;;YACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SAC9C,CAAC,CAAC;QAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;KACvC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;SACjC;QAED,QACE,iEAAU,KAAK,EAAC,2BAA2B,IACzC,+DAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3C,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,IAC3C,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACd,CACH,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzB,sBACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/map-overlays/map-overlays.i18n.ts","src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-map-overlays\": {\r\n title: \"Maplayers\",\r\n },\r\n },\r\n nl: {\r\n \"dso-map-overlays\": {\r\n title: \"Kaartlagen\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n border: 0;\r\n margin: 0;\r\n min-inline-size: 0;\r\n padding: 0;\r\n\r\n .control-label {\r\n display: inline-block;\r\n font-weight: bold;\r\n margin-block-end: units.$u1;\r\n max-inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n\r\np[slot=\"info\"] {\r\n margin: 0;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\nimport { translations } from \"./map-overlays.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-map-overlays\",\r\n styleUrl: \"./map-overlays.scss\",\r\n shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n private previousOverlays: Overlay[] \| undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n @Element()\r\n host!: HTMLDsoMapOverlaysElement;\r\n\r\n /*\r\n To group the overlays together. Generally the default value suffices.\r\n /\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /\r\n The overlays.\r\n /\r\n @Prop()\r\n overlays!: Overlay[];\r\n\r\n /\r\n Emitted when the user selects a different overlay.\r\n */\r\n @Event()\r\n dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n const { checked } = e.detail;\r\n\r\n this.dsoToggleOverlay.emit({ overlay, checked });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n this.overlays\r\n .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousOverlays = this.overlays;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-checkboxes\">\r\n <legend class=\"sr-only\">Kaartlagen</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n {this.text(\"title\")}\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.overlays.map((overlay) => (\r\n <dso-selectable\r\n key={overlay.id}\r\n type=\"checkbox\"\r\n value={overlay.name}\r\n checked={overlay.checked}\r\n disabled={overlay.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n >\r\n {overlay.name}\r\n {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-mark-bar.js CHANGED Viewed

@@ -13,6 +13,10 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends HTMLEleme
         this.dsoNext = createEvent(this, "dsoNext", 3);
         this.dsoPrevious = createEvent(this, "dsoPrevious", 3);
         this.dsoClear = createEvent(this, "dsoClear", 3);
+        /**
+         * The label for the input field.
+         */
+        this.label = "Zoeken in document";
         this.handleInput = (e) => {
             if (!(e.target instanceof HTMLInputElement)) {
                 return;
@@ -36,10 +40,6 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends HTMLEleme
                 this.handleNext(e);
             }
         };
-        this.value = undefined;
-        this.label = "Zoeken in document";
-        this.current = undefined;
-        this.totalCount = undefined;
     }
     /**
      * Focuses the input field.
@@ -54,7 +54,7 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends HTMLEleme
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '713f33bf86bbfa9366b0ace08d92aaaa239cbe3e', class: "dso-mark-bar" }, h("div", { key: '40c44a84e9845c59aa42e503b6c738a78773ea1e', class: "dso-mark-bar-input" }, h("input", { key: 'c893af76fd1f36f890092d7fceec08ac280ca962', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'c4517f993ea111bcca6fe5d4fe63f7d2a6e74c10', htmlFor: "search-input" }, h("dso-icon", { key: '74718e9f76210e1ab8a7dc8f419d0290117dc4ca', class: "dso-search-icon", icon: "search" }), h("span", { key: '53198aa36fb29f5783804a07f57850ffb03857f7', class: "label-text" }, this.label)), h("button", { key: 'be8ba44782a2eeee3da99c172855798c16ea4c11', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '38c296e3ecde58915ff7f972c38a97b41fb5b0c2', icon: "times" }), h("span", { key: '71d5cf07fa7a65c4a62c9f1548c512ed69a469ff', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'ff49db6cb388f862954e65923c985497dcaf4e66', class: "dso-button-container" }, h("span", { key: '1e837b330edf5140544e1b1632e746b19b18d465', class: "divider" }), h("button", { key: '3c3f6648f6ba2968286b4f905cbbebe3829c7ce3', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '61741ca86c6ce3979ca5364426dd27a56631a7ea', icon: "chevron-up", class: "hydrated" }), h("span", { key: '01b609f22699251cbf36e39d34c643b3b9285131', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '8e6366c709fe6b6dc091190d379270d11739e204' }, current, "/", totalCount), h("button", { key: '6ab4b758bd001ee342618c83e4e733cbea243063', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'bdfa2853ecbc90021a4f1b3e857d700c80cce4b8', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'ab319210d11d0f0b2a858205e9343d4cc3847e77', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: 'de64c956f5f0f039e949fb66525bfe13292fc344', class: "dso-mark-bar" }, h("div", { key: 'f9a28ebe0673d21b51382db70b399198980f2981', class: "dso-mark-bar-input" }, h("input", { key: '3f8ba3bcc85a1e3d457f00b4997ff14257275cff', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'de0a188de0580a986d97c6b183506ff503a9f840', htmlFor: "search-input" }, h("dso-icon", { key: 'c996d6ae25fd237cbe6e3432dd9820911699800b', class: "dso-search-icon", icon: "search" }), h("span", { key: '4eb8bf932a5493d4672efb1d30f5f936faa04dc0', class: "label-text" }, this.label)), h("button", { key: '4eb0be7a9c8794fe086f9cccbd5f2c3ee2422f4c', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '7995d127da202d54b403c1614616e754d3996069', icon: "times" }), h("span", { key: '8584ac86467c4ed39f07cb62498a4818302de7e8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'd0a10d3218bf2c84592b793f63cbbf37c0204325', class: "dso-button-container" }, h("span", { key: 'd75c77cb216e84dd20df7b8745263aea7b33a6aa', class: "divider" }), h("button", { key: '503a2cad201543a574f5c298b981bb7610955134', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: 'c2ce69b1abc65f71355fdd5681f7165d0c2680cf', icon: "chevron-up", class: "hydrated" }), h("span", { key: '573b5f49881d3d87d14650fca99efcc034714989', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'caa4799ae003ce7a34430f5112ffce9b6ef22903' }, current, "/", totalCount), h("button", { key: '83cd9bc034d51cdf677a6a97a4bd170530cbf5b8', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '9b7442aa4e879ae3dfa22265fbba5c115eed6aa0', icon: "chevron-down", class: "hydrated" }), h("span", { key: '1f41bec8eb4619ee7a6a2fabd205ab0cadfb446c', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get style() { return DsoMarkBarStyle0; }
 }, [1, "dso-mark-bar", {

package/dist/components/dso-mark-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-mark-bar.js","mappings":"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","names":[],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n$block-size: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n display: flex;\r\n flex-grow: 1;\r\n\r\n .dso-mark-bar-input {\r\n display: flex;\r\n position: relative;\r\n inline-size: 100%;\r\n\r\n input {\r\n background-color: transparent;\r\n background-image: none;\r\n border: 1px solid form-control.$focus-border-color;\r\n border-radius: 4px;\r\n border-width: 1px;\r\n box-shadow: none;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n block-size: $block-size;\r\n line-height: $block-size;\r\n padding-inline: $block-size;\r\n padding-block: 6px;\r\n transition:\r\n border-color ease-in-out 0.15s,\r\n box-shadow ease-in-out 0.15s;\r\n inline-size: 100%;\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end: 0;\r\n\r\n &:focus {\r\n border-color: form-control.$focus-border-color;\r\n box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n outline: 0;\r\n }\r\n\r\n &::-ms-clear {\r\n display: none;\r\n }\r\n\r\n &:not(:placeholder-shown) + label {\r\n inline-size: $block-size;\r\n padding-inline-end: units.$u1;\r\n\r\n .label-text {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n }\r\n\r\n label {\r\n inset-block-end: units.$u1;\r\n block-size: $block-size;\r\n inset-inline-start: 0;\r\n inset-inline-end: units.$u5;\r\n padding-block: units.$u1;\r\n padding-inline-start: units.$u1;\r\n cursor: text;\r\n position: absolute;\r\n inset-block-start: 0;\r\n overflow: hidden;\r\n /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior /\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n / stylelint-enable-next-line declaration-property-value-disallowed-list /\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n cursor: default;\r\n margin: -8px;\r\n padding: 8px;\r\n inline-size: $block-size;\r\n block-size: $block-size;\r\n }\r\n\r\n .label-text {\r\n margin-inline-start: units.$u1;\r\n color: colors.$grijs-60;\r\n }\r\n }\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n box-shadow: none;\r\n color: colors.$grasgroen;\r\n font-size: 0;\r\n block-size: $block-size;\r\n padding: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0;\r\n text-align: center;\r\n inset-block-start: 0;\r\n inline-size: $block-size;\r\n cursor: pointer;\r\n }\r\n }\r\n}\r\n\r\n.dso-button-container {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: units.$u1;\r\n flex-shrink: 0;\r\n\r\n padding-inline: units.$u1;\r\n\r\n border: 1px solid colors.$bosgroen;\r\n border-inline-start: 0;\r\n border-start-end-radius: scaffolding.$border-radius-base;\r\n border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n button {\r\n appearance: none;\r\n padding: 0;\r\n border: 0;\r\n background-color: transparent;\r\n color: colors.$grasgroen;\r\n cursor: pointer;\r\n\r\n &:disabled {\r\n color: colors.$grijs-20;\r\n cursor: default;\r\n }\r\n }\r\n\r\n .divider {\r\n position: absolute;\r\n inset-inline-start: 0;\r\n inset-block-start: units.$u1;\r\n inset-block-end: units.$u1;\r\n\r\n inline-size: 1px;\r\n\r\n background-color: colors.$grijs-20;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n MarkBarInputEvent,\r\n MarkBarClearEvent,\r\n MarkBarPaginationEvent,\r\n MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-mark-bar\",\r\n styleUrl: \"./mark-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n /\r\n The current search value.\r\n /\r\n @Prop()\r\n value?: string;\r\n\r\n /\r\n The label for the input field.\r\n /\r\n @Prop()\r\n label = \"Zoeken in document\";\r\n\r\n /\r\n The current (one-based) highlighted search item.\r\n /\r\n @Prop()\r\n current?: number;\r\n\r\n /\r\n Total number of search results.\r\n /\r\n @Prop()\r\n totalCount?: number;\r\n\r\n /\r\n Focuses the input field.\r\n /\r\n @Method()\r\n async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n this.inputElement?.focus();\r\n\r\n if (options.select) {\r\n this.inputElement?.select();\r\n }\r\n }\r\n\r\n /\r\n Emitted each time the user types in the search field.\r\n /\r\n @Event({ bubbles: false })\r\n dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n /\r\n Emitted when user activates \"next search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"previous search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"clear search result\" button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n private inputElement?: HTMLInputElement;\r\n\r\n private handleInput = (e: Event) => {\r\n if (!(e.target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n this.dsoInput.emit({\r\n originalEvent: e,\r\n value: e.target.value,\r\n });\r\n };\r\n\r\n private handleNext = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoNext.emit({ originalEvent: e });\r\n };\r\n\r\n private handlePrevious = (e: MouseEvent) => {\r\n this.dsoPrevious.emit({ originalEvent: e });\r\n };\r\n\r\n private handleClear = (e: MouseEvent) => {\r\n this.dsoClear.emit({ originalEvent: e });\r\n };\r\n\r\n private handleKeyDown = (e: KeyboardEvent) => {\r\n if (e.key === \"Enter\") {\r\n this.handleNext(e);\r\n }\r\n };\r\n\r\n render() {\r\n const current = this.current \|\| 0;\r\n const totalCount = this.totalCount \|\| 0;\r\n\r\n return (\r\n <div class=\"dso-mark-bar\">\r\n <div class=\"dso-mark-bar-input\">\r\n <input\r\n type=\"text\"\r\n id=\"search-input\"\r\n value={this.value}\r\n onInput={this.handleInput}\r\n onKeyDown={this.handleKeyDown}\r\n placeholder=\" \"\r\n ref={(element) => (this.inputElement = element)}\r\n />\r\n <label htmlFor=\"search-input\">\r\n <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n <span class=\"label-text\">{this.label}</span>\r\n </label>\r\n <button type=\"button\" onClick={this.handleClear}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Zoekopdracht legen</span>\r\n </button>\r\n </div>\r\n <div class=\"dso-button-container\">\r\n <span class=\"divider\" />\r\n <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n </button>\r\n <span>\r\n {current}/{totalCount}\r\n </span>\r\n <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-mark-bar.js","mappings":"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","names":[],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n$block-size: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n display: flex;\r\n flex-grow: 1;\r\n\r\n .dso-mark-bar-input {\r\n display: flex;\r\n position: relative;\r\n inline-size: 100%;\r\n\r\n input {\r\n background-color: transparent;\r\n background-image: none;\r\n border: 1px solid form-control.$focus-border-color;\r\n border-radius: 4px;\r\n border-width: 1px;\r\n box-shadow: none;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n block-size: $block-size;\r\n line-height: $block-size;\r\n padding-inline: $block-size;\r\n padding-block: 6px;\r\n transition:\r\n border-color ease-in-out 0.15s,\r\n box-shadow ease-in-out 0.15s;\r\n inline-size: 100%;\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end: 0;\r\n\r\n &:focus {\r\n border-color: form-control.$focus-border-color;\r\n box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n outline: 0;\r\n }\r\n\r\n &::-ms-clear {\r\n display: none;\r\n }\r\n\r\n &:not(:placeholder-shown) + label {\r\n inline-size: $block-size;\r\n padding-inline-end: units.$u1;\r\n\r\n .label-text {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n }\r\n\r\n label {\r\n inset-block-end: units.$u1;\r\n block-size: $block-size;\r\n inset-inline-start: 0;\r\n inset-inline-end: units.$u5;\r\n padding-block: units.$u1;\r\n padding-inline-start: units.$u1;\r\n cursor: text;\r\n position: absolute;\r\n inset-block-start: 0;\r\n overflow: hidden;\r\n /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior /\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n / stylelint-enable-next-line declaration-property-value-disallowed-list /\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n cursor: default;\r\n margin: -8px;\r\n padding: 8px;\r\n inline-size: $block-size;\r\n block-size: $block-size;\r\n }\r\n\r\n .label-text {\r\n margin-inline-start: units.$u1;\r\n color: colors.$grijs-60;\r\n }\r\n }\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n box-shadow: none;\r\n color: colors.$grasgroen;\r\n font-size: 0;\r\n block-size: $block-size;\r\n padding: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0;\r\n text-align: center;\r\n inset-block-start: 0;\r\n inline-size: $block-size;\r\n cursor: pointer;\r\n }\r\n }\r\n}\r\n\r\n.dso-button-container {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: units.$u1;\r\n flex-shrink: 0;\r\n\r\n padding-inline: units.$u1;\r\n\r\n border: 1px solid colors.$bosgroen;\r\n border-inline-start: 0;\r\n border-start-end-radius: scaffolding.$border-radius-base;\r\n border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n button {\r\n appearance: none;\r\n padding: 0;\r\n border: 0;\r\n background-color: transparent;\r\n color: colors.$grasgroen;\r\n cursor: pointer;\r\n\r\n &:disabled {\r\n color: colors.$grijs-20;\r\n cursor: default;\r\n }\r\n }\r\n\r\n .divider {\r\n position: absolute;\r\n inset-inline-start: 0;\r\n inset-block-start: units.$u1;\r\n inset-block-end: units.$u1;\r\n\r\n inline-size: 1px;\r\n\r\n background-color: colors.$grijs-20;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n MarkBarInputEvent,\r\n MarkBarClearEvent,\r\n MarkBarPaginationEvent,\r\n MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-mark-bar\",\r\n styleUrl: \"./mark-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n /\r\n The current search value.\r\n /\r\n @Prop()\r\n value?: string;\r\n\r\n /\r\n The label for the input field.\r\n /\r\n @Prop()\r\n label = \"Zoeken in document\";\r\n\r\n /\r\n The current (one-based) highlighted search item.\r\n /\r\n @Prop()\r\n current?: number;\r\n\r\n /\r\n Total number of search results.\r\n /\r\n @Prop()\r\n totalCount?: number;\r\n\r\n /\r\n Focuses the input field.\r\n /\r\n @Method()\r\n async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n this.inputElement?.focus();\r\n\r\n if (options.select) {\r\n this.inputElement?.select();\r\n }\r\n }\r\n\r\n /\r\n Emitted each time the user types in the search field.\r\n /\r\n @Event({ bubbles: false })\r\n dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n /\r\n Emitted when user activates \"next search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"previous search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"clear search result\" button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n private inputElement?: HTMLInputElement;\r\n\r\n private handleInput = (e: Event) => {\r\n if (!(e.target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n this.dsoInput.emit({\r\n originalEvent: e,\r\n value: e.target.value,\r\n });\r\n };\r\n\r\n private handleNext = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoNext.emit({ originalEvent: e });\r\n };\r\n\r\n private handlePrevious = (e: MouseEvent) => {\r\n this.dsoPrevious.emit({ originalEvent: e });\r\n };\r\n\r\n private handleClear = (e: MouseEvent) => {\r\n this.dsoClear.emit({ originalEvent: e });\r\n };\r\n\r\n private handleKeyDown = (e: KeyboardEvent) => {\r\n if (e.key === \"Enter\") {\r\n this.handleNext(e);\r\n }\r\n };\r\n\r\n render() {\r\n const current = this.current \|\| 0;\r\n const totalCount = this.totalCount \|\| 0;\r\n\r\n return (\r\n <div class=\"dso-mark-bar\">\r\n <div class=\"dso-mark-bar-input\">\r\n <input\r\n type=\"text\"\r\n id=\"search-input\"\r\n value={this.value}\r\n onInput={this.handleInput}\r\n onKeyDown={this.handleKeyDown}\r\n placeholder=\" \"\r\n ref={(element) => (this.inputElement = element)}\r\n />\r\n <label htmlFor=\"search-input\">\r\n <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n <span class=\"label-text\">{this.label}</span>\r\n </label>\r\n <button type=\"button\" onClick={this.handleClear}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Zoekopdracht legen</span>\r\n </button>\r\n </div>\r\n <div class=\"dso-button-container\">\r\n <span class=\"divider\" />\r\n <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n </button>\r\n <span>\r\n {current}/{totalCount}\r\n </span>\r\n <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-modal.js CHANGED Viewed

@@ -29,13 +29,26 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.__registerHost();
         this.__attachShadow();
         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;
@@ -60,10 +73,10 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     }
     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 this; }
     static get style() { return DsoModalStyle0; }

package/dist/components/dso-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-modal.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}
1	+ {"file":"dso-modal.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/components/dso-pagination.js CHANGED Viewed

@@ -17,9 +17,9 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
             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/components/dso-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-pagination.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}
1	+ {"file":"dso-pagination.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/components/dso-plekinfo-card.js CHANGED Viewed

@@ -20,10 +20,10 @@ const PlekinfoCard = /*@__PURE__*/ proxyCustomElement(class PlekinfoCard extends
         this.__registerHost();
         this.__attachShadow();
         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));
@@ -51,7 +51,7 @@ const PlekinfoCard = /*@__PURE__*/ proxyCustomElement(class PlekinfoCard extends
     }
     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 this; }
     static get style() { return DsoPlekinfoCardStyle0; }

package/dist/components/dso-plekinfo-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-plekinfo-card.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}
1	+ {"file":"dso-plekinfo-card.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/components/dso-progress-bar.js CHANGED Viewed

@@ -8,14 +8,19 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         super();
         this.__registerHost();
         this.__attachShadow();
-        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' }))));
     }
     static get style() { return DsoProgressBarStyle0; }
 }, [1, "dso-progress-bar", {

package/dist/components/dso-progress-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-progress-bar.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}
1	+ {"file":"dso-progress-bar.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/components/dso-project-item.js CHANGED Viewed

@@ -11,10 +11,9 @@ const ProjectItem = /*@__PURE__*/ proxyCustomElement(class ProjectItem extends H
         super();
         this.__registerHost();
         this.__attachShadow();
-        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" })))));
     }
     static get style() { return DsoProjectItemStyle0; }
 }, [1, "dso-project-item", {

package/dist/components/dso-project-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-project-item.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}
1	+ {"file":"dso-project-item.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/components/dso-skiplink.js CHANGED Viewed

@@ -11,8 +11,6 @@ const Skiplink = /*@__PURE__*/ proxyCustomElement(class Skiplink extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.dsoSkiplinkClick = createEvent(this, "dsoSkiplinkClick", 7);
-        this.to = undefined;
-        this.label = undefined;
     }
     clickEventHandler(e) {
         if (!(e.target instanceof HTMLElement) || !this.to) {
@@ -21,7 +19,7 @@ const Skiplink = /*@__PURE__*/ proxyCustomElement(class Skiplink extends HTMLEle
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: 'f2773851b2d0f9838a9323935ab8a108258b8fdb', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'c920fa16fd4c6dac2eee63531c83385a4cee5170', icon: "chevron-right" })));
+        return (h("a", { key: '9ea0faf0f29664560824f8d4308282c6553fa59d', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '47783ba800794b0e1681c78c0cd21af6319df498', icon: "chevron-right" })));
     }
     static get style() { return DsoSkiplinkStyle0; }
 }, [1, "dso-skiplink", {

package/dist/components/dso-skiplink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-skiplink.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,klBAAklB,CAAC;AACvmB,0BAAe,WAAW;;MCUb,QAAQ~~;;;;;;;;;~~IAmBX,iBAAiB,CAAC,CAAa;QACrC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YAClD,OAAO;SACR;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KAC9F;IAED,MAAM;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAC9D,IAAI,CAAC,KAAK,EACX,iEAAU,IAAI,EAAC,eAAe,GAAY,CACxC,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/skiplink/skiplink.scss?tag=dso-skiplink&encapsulation=shadow","src/components/skiplink/skiplink.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n position: fixed;\r\n inset-block-start: 0;\r\n inset-inline-start: 0;\r\n z-index: 2;\r\n\r\n display: block;\r\n\r\n inline-size: 100vw;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\na {\r\n position: absolute;\r\n inset-inline-start: 50%;\r\n inset-block-start: units.$u2;\r\n\r\n display: inline-block;\r\n\r\n inline-size: 1px;\r\n block-size: 1px;\r\n\r\n overflow: hidden;\r\n\r\n background-color: colors.$wit;\r\n\r\n border-radius: units.$focus-border-radius;\r\n\r\n clip: rect(1px, 1px, 1px, 1px);\r\n\r\n color: var(--link-color);\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- prevent wrapping\r\n white-space: nowrap;\r\n text-decoration: none;\r\n\r\n transform: translate(-50%);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n\r\n &:focus-visible {\r\n inline-size: auto;\r\n block-size: auto;\r\n\r\n padding: units.$u1;\r\n\r\n clip: auto;\r\n\r\n white-space: normal;\r\n\r\n outline-offset: 2px;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-skiplink\",\r\n styleUrl: \"skiplink.scss\",\r\n shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n /*\r\n The location to which the skiplink links.\r\n /\r\n @Prop({ reflect: true })\r\n to!: string \| undefined;\r\n\r\n /\r\n link text\r\n /\r\n @Prop({ reflect: true })\r\n label!: string \| undefined;\r\n\r\n /\r\n Emitted when the Skiplink is clicked.\r\n */\r\n @Event()\r\n dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.to) {\r\n return;\r\n }\r\n\r\n return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n render() {\r\n return (\r\n <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n {this.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-skiplink.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,klBAAklB,CAAC;AACvmB,0BAAe,WAAW;;MCUb,QAAQ;;;;;;;IAmBX,iBAAiB,CAAC,CAAa;QACrC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YAClD,OAAO;SACR;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KAC9F;IAED,MAAM;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAC9D,IAAI,CAAC,KAAK,EACX,iEAAU,IAAI,EAAC,eAAe,GAAY,CACxC,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/skiplink/skiplink.scss?tag=dso-skiplink&encapsulation=shadow","src/components/skiplink/skiplink.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n position: fixed;\r\n inset-block-start: 0;\r\n inset-inline-start: 0;\r\n z-index: 2;\r\n\r\n display: block;\r\n\r\n inline-size: 100vw;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\na {\r\n position: absolute;\r\n inset-inline-start: 50%;\r\n inset-block-start: units.$u2;\r\n\r\n display: inline-block;\r\n\r\n inline-size: 1px;\r\n block-size: 1px;\r\n\r\n overflow: hidden;\r\n\r\n background-color: colors.$wit;\r\n\r\n border-radius: units.$focus-border-radius;\r\n\r\n clip: rect(1px, 1px, 1px, 1px);\r\n\r\n color: var(--link-color);\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- prevent wrapping\r\n white-space: nowrap;\r\n text-decoration: none;\r\n\r\n transform: translate(-50%);\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\r\n\r\n &:focus-visible {\r\n inline-size: auto;\r\n block-size: auto;\r\n\r\n padding: units.$u1;\r\n\r\n clip: auto;\r\n\r\n white-space: normal;\r\n\r\n outline-offset: 2px;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-skiplink\",\r\n styleUrl: \"skiplink.scss\",\r\n shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n /*\r\n The location to which the skiplink links.\r\n /\r\n @Prop({ reflect: true })\r\n to!: string \| undefined;\r\n\r\n /\r\n link text\r\n /\r\n @Prop({ reflect: true })\r\n label!: string \| undefined;\r\n\r\n /\r\n Emitted when the Skiplink is clicked.\r\n */\r\n @Event()\r\n dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) \|\| !this.to) {\r\n return;\r\n }\r\n\r\n return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n render() {\r\n return (\r\n <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n {this.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-tab.js CHANGED Viewed

@@ -29,9 +29,6 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
                 this.emitEvent(e);
             }
         };
-        this.active = undefined;
-        this.disabled = undefined;
-        this.href = undefined;
     }
     /**
      * @internal

package/dist/components/dso-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-tab.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE,CAAC;AAChxE,qBAAe,MAAM;;MCWR,GAAG~~;;;;;;QAsCN~~,cAAS,GAAG,CAAC,CAA6B;YAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;aACtE,CAAC,CAAC;SACJ,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAgB;YACtC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBACnD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAa;YACnC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC~~;;;;;;;;IAzBF~~,MAAM,SAAS;;QACb,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACjC;IAyBD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,uBACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpD,eAAQ,CACN,KAEJ,4BACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpD,eAAQ,CACD,CACV,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n border-color: tab-variables.$color;\r\n // Make the list-items overlay the bottom border\r\n margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n :host {\r\n margin-block: 10px;\r\n }\r\n\r\n :host(:first-child) {\r\n margin-block-start: 0;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n [role=\"tab\"] {\r\n &,\r\n &:active,\r\n &:focus,\r\n &:hover,\r\n &:visited {\r\n background-color: colors.$wit;\r\n border: 1px solid tab-variables.$color;\r\n border-block-end-color: colors.$wit;\r\n color: tab-variables.$color;\r\n cursor: default;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: tab-variables.$color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n [role=\"tab\"] {\r\n color: tab-variables.$nav-disabled-link-color;\r\n\r\n &:hover,\r\n &:focus {\r\n color: tab-variables.$nav-disabled-link-hover-color;\r\n text-decoration: none;\r\n cursor: scaffolding.$cursor-disabled;\r\n background-color: transparent;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\na {\r\n @include anchor.clean();\r\n\r\n &:visited {\r\n color: tab-variables.$text-color;\r\n }\r\n}\r\n\r\nbutton {\r\n font-family: inherit;\r\n font-size: inherit;\r\n background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: block;\r\n min-block-size: tab-variables.$block-size;\r\n border: 1px solid transparent;\r\n border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n color: tab-variables.$text-color;\r\n line-height: typography.$line-height-base;\r\n padding-block: tab-variables.$block-padding;\r\n padding-inline: tab-variables.$inline-padding;\r\n\r\n &:hover {\r\n border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n tab-variables.$border-color;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n background-color: tab-variables.$nav-link-hover-bg;\r\n }\r\n\r\n &:active,\r\n &:focus,\r\n &:hover {\r\n background-color: tab-variables.$hover-color;\r\n border: 1px solid transparent;\r\n border-block-end-color: tab-variables.$color;\r\n text-decoration: none;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-color: colors.$wit;\r\n border-radius: 8px;\r\n padding-block: 18px;\r\n padding-inline: 20px;\r\n inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/*\r\n @slot - The label for this tab\r\n /\r\n@Component({\r\n tag: \"dso-tab\",\r\n styleUrl: \"tab.scss\",\r\n shadow: true,\r\n})\r\nexport class Tab {\r\n @Element()\r\n host!: HTMLDsoTabElement;\r\n\r\n /\r\n Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n /\r\n @Prop({ reflect: true })\r\n disabled?: boolean;\r\n\r\n /\r\n The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n /\r\n @Prop()\r\n href?: string;\r\n\r\n /\r\n Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n /\r\n @Event()\r\n dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _dsoFocus() {\r\n this.anchorOrButtonRef?.focus();\r\n }\r\n\r\n private anchorOrButtonRef?: HTMLAnchorElement \| HTMLButtonElement;\r\n\r\n private emitEvent = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoTabSwitch.emit({\r\n originalEvent: e,\r\n isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n });\r\n };\r\n\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (e.key === \" \" && !this.disabled && !this.active) {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n private clickHandler = (e: MouseEvent) => {\r\n if ((this.disabled && this.href) \|\| this.active) {\r\n e.preventDefault();\r\n } else {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n render() {\r\n return this.href ? (\r\n <a\r\n role=\"tab\"\r\n href={this.href}\r\n onKeyUp={this.keyUpHandler}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </a>\r\n ) : (\r\n <button\r\n role=\"tab\"\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </button>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-tab.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE,CAAC;AAChxE,qBAAe,MAAM;;MCWR,GAAG;IALhB;;;;;QA2CU,cAAS,GAAG,CAAC,CAA6B;YAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;aACtE,CAAC,CAAC;SACJ,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAgB;YACtC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBACnD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAa;YACnC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC;KA6BH;;;;IAtDC,MAAM,SAAS;;QACb,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACjC;IAyBD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,uBACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpD,eAAQ,CACN,KAEJ,4BACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpD,eAAQ,CACD,CACV,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n border-color: tab-variables.$color;\r\n // Make the list-items overlay the bottom border\r\n margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n :host {\r\n margin-block: 10px;\r\n }\r\n\r\n :host(:first-child) {\r\n margin-block-start: 0;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n [role=\"tab\"] {\r\n &,\r\n &:active,\r\n &:focus,\r\n &:hover,\r\n &:visited {\r\n background-color: colors.$wit;\r\n border: 1px solid tab-variables.$color;\r\n border-block-end-color: colors.$wit;\r\n color: tab-variables.$color;\r\n cursor: default;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: tab-variables.$color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n [role=\"tab\"] {\r\n color: tab-variables.$nav-disabled-link-color;\r\n\r\n &:hover,\r\n &:focus {\r\n color: tab-variables.$nav-disabled-link-hover-color;\r\n text-decoration: none;\r\n cursor: scaffolding.$cursor-disabled;\r\n background-color: transparent;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\na {\r\n @include anchor.clean();\r\n\r\n &:visited {\r\n color: tab-variables.$text-color;\r\n }\r\n}\r\n\r\nbutton {\r\n font-family: inherit;\r\n font-size: inherit;\r\n background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: block;\r\n min-block-size: tab-variables.$block-size;\r\n border: 1px solid transparent;\r\n border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n color: tab-variables.$text-color;\r\n line-height: typography.$line-height-base;\r\n padding-block: tab-variables.$block-padding;\r\n padding-inline: tab-variables.$inline-padding;\r\n\r\n &:hover {\r\n border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n tab-variables.$border-color;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n background-color: tab-variables.$nav-link-hover-bg;\r\n }\r\n\r\n &:active,\r\n &:focus,\r\n &:hover {\r\n background-color: tab-variables.$hover-color;\r\n border: 1px solid transparent;\r\n border-block-end-color: tab-variables.$color;\r\n text-decoration: none;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-color: colors.$wit;\r\n border-radius: 8px;\r\n padding-block: 18px;\r\n padding-inline: 20px;\r\n inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/*\r\n @slot - The label for this tab\r\n /\r\n@Component({\r\n tag: \"dso-tab\",\r\n styleUrl: \"tab.scss\",\r\n shadow: true,\r\n})\r\nexport class Tab {\r\n @Element()\r\n host!: HTMLDsoTabElement;\r\n\r\n /\r\n Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n /\r\n @Prop({ reflect: true })\r\n disabled?: boolean;\r\n\r\n /\r\n The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n /\r\n @Prop()\r\n href?: string;\r\n\r\n /\r\n Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n /\r\n @Event()\r\n dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _dsoFocus() {\r\n this.anchorOrButtonRef?.focus();\r\n }\r\n\r\n private anchorOrButtonRef?: HTMLAnchorElement \| HTMLButtonElement;\r\n\r\n private emitEvent = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoTabSwitch.emit({\r\n originalEvent: e,\r\n isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n });\r\n };\r\n\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (e.key === \" \" && !this.disabled && !this.active) {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n private clickHandler = (e: MouseEvent) => {\r\n if ((this.disabled && this.href) \|\| this.active) {\r\n e.preventDefault();\r\n } else {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n render() {\r\n return this.href ? (\r\n <a\r\n role=\"tab\"\r\n href={this.href}\r\n onKeyUp={this.keyUpHandler}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </a>\r\n ) : (\r\n <button\r\n role=\"tab\"\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </button>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-tabs.js CHANGED Viewed

@@ -67,7 +67,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'd115f11054298f6f4ba09e97f0e8c1b726aac09c' }, h("div", { key: '74e724fc01facb00f7ca14f3420b68172c313927', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '7d65307f3dd7372b30eccf57ae2c552451d0920f' })), h("div", { key: '251184652aace25225b69336bf9c0bae0ab98e68', role: "tabpanel", tabindex: "0" }, h("slot", { key: '79e95365db5486bd5e54161919f653df5ac525cc', name: "panel" }))));
+        return (h(Host, { key: '6f2a81d22ac8cd8702205ec9677dc77aab2def53' }, h("div", { key: 'c91c2d14016e0aeec92935fc8cfe17d7e8134d0a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '2bd28da0f1be671d9e34d175d87fcb153cb7b806' })), h("div", { key: 'ece2325b9520401d784445c737d819aba6773f3b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '9606d989fd9c6aead0175b20aff4362a67931b4c', name: "panel" }))));
     }
     get host() { return this; }
     static get style() { return DsoTabsStyle0; }