npm - @dso-toolkit/core - Versions diffs - 72.1.0 → 73.0.0 - Mend

@dso-toolkit/core 72.1.0 → 73.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 (507) hide show

package/dist/esm/dso-map-base-layers.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BzEnSYbR.js';
-import { i as i18n } from './i18n-D6dst_Em.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D2Jo0W7B.js';
+import { i as i18n } from './i18n-BbNJ4wXp.js';
 import { v as v4 } from './v4-BF0_OXTe.js';
 const translations = {
@@ -44,7 +44,7 @@ const MapBaseLayers = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '7e13ee00a63cdad0665bc3730387ccac941c8d66', class: "form-group dso-radios" }, h("legend", { key: '3ef5163845f93065b87711fd01d78725f227d3ce', class: "sr-only" }, "Achtergrond"), h("div", { key: 'f0dafaffdc8c13125cd4afb3c98b6384e1312433', class: "dso-label-container" }, h("span", { key: 'bcf82a98342df39d98832db27823db6e6b2713a2', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '2feee1a616600ef226745c101d9a288b25753ac3', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'acd8cb9bd22f5021d89e656292650098afb58d3c', class: "form-group dso-radios" }, h("legend", { key: '3f6c5f5297323a9d0d1c5195df12b5e162ae3991', class: "sr-only" }, "Achtergrond"), h("div", { key: 'eea63f4a56b1d01fffaab78202718d667533948f', class: "dso-label-container" }, h("span", { key: 'c8aba96d494bea90da43c86c4cc28f0f2ae9f737', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'e6b5b3718321632fe2b9f794dec1dd74b2876620', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-map-controls.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-BzEnSYbR.js';
-import { i as i18n } from './i18n-D6dst_Em.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-D2Jo0W7B.js';
+import { i as i18n } from './i18n-BbNJ4wXp.js';
 const translations = {
     en: {
@@ -85,7 +85,7 @@ const MapControls = class {
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '0fd986956411cb17370bee64462d0d8819611841', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '52a726ecf9d7b42dfec754efdf8de04d88123c58', icon: "layers" }), h("span", { key: '1ddd1e60d1a4f018fb84199c3a61066352d06431' }, this.text("layersButton"))), h("div", { key: '034b8741f04b6764fa8fa8b8c308a5a354c0dcb3', class: "zoom-buttons" }, h("button", { key: '859a740325bbeeae6adc2b7f0b373705ff422ee2', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '480623c3611aa1184c7220db69efcfa204f72a2b' }, this.text("zoomIn")), h("dso-icon", { key: '82622c8e1a812ec3db1063124729096d6f0f76a9', icon: "plus" })), h("button", { key: '5452cf6f7ade2d583f3f9563786b6cec01f5ce04', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '9952df75387874e21072fb5564588f438e2aa0c6' }, this.text("zoomOut")), h("dso-icon", { key: '81c398b34a59db6f00545264685427ddd466f2d5', icon: "minus" }))), h("section", { key: '48e2d301e96a373af8926c7d5f3fc32068993c23', hidden: this.hideContent }, h("header", { key: 'ebbe567521c62e8243add8859fc0a889e624f5bd' }, h("h2", { key: 'b0b6b51cd9ea6f5795ee8d6f35f2be16ae610010' }, this.text("title")), h("button", { key: '1122debc7dbff1b1144a89ca47c0693b88f53919', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '209fa94e79a1b937e8306b1b0e5953d8e7fa8ef5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'caaedeaabcec01c76928e8f86b952ea9297a25ef', icon: "times" }))), h("dso-scrollable", { key: '34a5fac306731abb91b670f22238501a5cf60f06' }, h("div", { key: '34d4a73073d3a53537821c6d5d1360a5886952aa', class: "content" }, h("slot", { key: '98ed8da0651cbd7d30cc6a38948451bce2e1b29a' }))))));
+        return (h(Fragment, null, h("button", { key: 'b441858814604737198dee69f4846f6c9f9defa5', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6413ca3c5e95bf73e2bb6dc9b0a084f7f571c6b5', icon: "layers" }), h("span", { key: '99b7a59c28ff5bde93899c033ab823c989681074' }, this.text("layersButton"))), h("div", { key: 'db99e4f86727a989f08d917e849117476988265e', class: "zoom-buttons" }, h("button", { key: '303e997c3ca4523bb043acd52704a91821707a4b', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'd16dbdcaa12c8b16d86d3c15dea1bab29876de2d' }, this.text("zoomIn")), h("dso-icon", { key: '294f98be996687998285a9e5f97746544126f8d4', icon: "plus" })), h("button", { key: '503b79c1ac721de7fe4afb8be473b8e8ef83b247', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'e957feacae4705fe6aea225f7cbb8947bfea8abb' }, this.text("zoomOut")), h("dso-icon", { key: '121b6fec06a8a629f5ccde14d0ea8a729adc3637', icon: "minus" }))), h("section", { key: '0de7e180cdc57f010bbbc5c34647316147583154', hidden: this.hideContent }, h("header", { key: '2a684665cb6f38d5243d56f03eb33e09a04edc51' }, h("h2", { key: '72d8775338f6619d81ddf668dbed684c3d9114f3' }, this.text("title")), h("button", { key: 'af87fedfd6149ea86d4fee73011110c0fa2e9273', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '5c6b6f98b2856e76d9991e4916182d06fa96c091' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '79c097527f0c769782e18ff5e6f5ce0551ef6b2e', icon: "times" }))), h("dso-scrollable", { key: '26f4e1fe150f39f3333c550c3a9f976ae5e9397a' }, h("div", { key: '4b477dc5ba05eee31edc894ce19a07cb105d6eca', class: "content" }, h("slot", { key: 'e9fefab83fc4f3f08246393bd91b228563bd7563' }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/dso-map-overlays.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BzEnSYbR.js';
-import { i as i18n } from './i18n-D6dst_Em.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D2Jo0W7B.js';
+import { i as i18n } from './i18n-BbNJ4wXp.js';
 import { v as v4 } from './v4-BF0_OXTe.js';
 const translations = {
@@ -45,7 +45,7 @@ const MapOverlays = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '8ef0c3a734d449e75f42c43e2d2f93acb4a443e3', class: "form-group dso-checkboxes" }, h("legend", { key: 'd5317715612e9790d65a411f291c00d7319b9a60', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'e2df4b1aed15cf2e808607a811780ab476bab2b6', class: "dso-label-container" }, h("span", { key: '95751d4947a940c02d7a7b9845f9e51238361519', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'fc68e624a70062c5c98fab61418183ca784f8600', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '912b3952f7f5e647cd41a29ddfd9c9944f0968ad', class: "form-group dso-checkboxes" }, h("legend", { key: '4a00206699febc7cce55074a8ccc656ccadf88af', class: "sr-only" }, "Kaartlagen"), h("div", { key: '0b26d2deddd8fc32b9ecad91b317ff478c31add0', class: "dso-label-container" }, h("span", { key: '03b7e1541b138e5bd3547ba39e8c59612e906da9', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '70f4823f693900a9061395c486c2a0e75b6e8a78', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-mark-bar.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, h } from './index-D2Jo0W7B.js';
 const markBarCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;block-size:2.5rem;padding:8px;position:absolute;inset-inline-end:0;text-align:center;inset-block-start:0;inline-size:2.5rem;cursor:pointer}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c;cursor:pointer}.dso-button-container button:disabled{color:#ccc;cursor:default}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";
@@ -50,7 +50,7 @@ const MarkBar = class {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '654d016b7900a348bb5ecfd0fbe8dd8d1597bf11', class: "dso-mark-bar" }, h("div", { key: '739df0e4d1a381c2f1f2df909d00d958da86ea6e', class: "dso-mark-bar-input" }, h("input", { key: 'be9023cb3f759f8f751accd3d1199bf8c25c6b78', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '1802cb4d1be66d351d68ce743b05a0b2630cc9a2', htmlFor: "search-input" }, h("dso-icon", { key: '29dd2af6fa7ccbff36baabcbcb9ac17f9db75c74', class: "dso-search-icon", icon: "search" }), h("span", { key: '693c70b79a205b28d5d56d4d6e02e4c82bf8cf3d', class: "label-text" }, this.label)), h("button", { key: '4458b5f67b5b90eb03132942c39b3dfdf6f72404', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '601dd220625122f3548e18cd324a90f39430c6bf', icon: "times" }), h("span", { key: 'f3142054e7714925f5c2c22f4b7ac2f47311feb7', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '7f17607ebfdcbce1608d8a5ae6c3e365ce43517c', class: "dso-button-container" }, h("span", { key: 'ffb56f06408798b6065d31405167f91890f243e9', class: "divider" }), h("button", { key: '5edb2809f48b286a3cc4857d18a9551e52d775cb', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '74d026687c712e6b51a8b6bd716f2e02f23cb380', icon: "chevron-up", class: "hydrated" }), h("span", { key: '49255a80b38e4db1b99842700cdb4c21b26fcffb', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'f6a268019e5e946f359386693db8b664e7a995da' }, current, "/", totalCount), h("button", { key: '917951cca40a5f84d9f76f24ab0e713f56280b28', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'e766db3602e8b4011e78f063e552a6b3a32a9442', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'a57cdf1625c09daa708ee9e354a7086bd20ec22d', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: 'dd7b7eaaabb3c90cb8e22ae789add1e489729997', class: "dso-mark-bar" }, h("div", { key: '4c512dad639d767e3956b9e225fee0b8301dfd63', class: "dso-mark-bar-input" }, h("input", { key: 'cd65945d8d1d76f07b987860fb84162af7e520e4', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'c71d9938fe4b5b7be255ff29dfd933f5ffbda692', htmlFor: "search-input" }, h("dso-icon", { key: '38b0f84fd24ece2c0f8279f61984f1fa458d6c0f', class: "dso-search-icon", icon: "search" }), h("span", { key: '1404fe4cfed0b57d3a19c8cf43c56a7622bb37d5', class: "label-text" }, this.label)), h("button", { key: 'eb4197ba90988a53e1aabf0b9f84eb2039f110fb', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'd4632a107abcaf10cdad91f51f9a53b495de1a88', icon: "times" }), h("span", { key: '761fbb5e96a50990e6ec0453f216578d78bbc7dd', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '7364c1860a5e684f32ea6800b2bc4c19e9b4f272', class: "dso-button-container" }, h("span", { key: '8c57772036cdc0a51644f157311a85102bf9d92d', class: "divider" }), h("button", { key: '7c0fda2062a24c52787ce272298ed68922ecb87e', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '5c0c6165c64a7011cb8d46f6458440dae6a60e26', icon: "chevron-up", class: "hydrated" }), h("span", { key: '7750fabddc5075e89f5795d4ed6e2e40573ad31d', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'a6ac6df0c61467d452dc9547e311db586e391096' }, current, "/", totalCount), h("button", { key: 'dae1e4a795809ac9af20261cd93277640ccbbb9b', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'f86affb1ad65b8b5e2d570cabd1855b61488687f', icon: "chevron-down", class: "hydrated" }), h("span", { key: '5f016699b38483d38303c6f7cfac48778394d6ae', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
 };
 MarkBar.style = markBarCss;

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D2Jo0W7B.js';
 import { g as getActiveElement } from './get-active-element-CodDyi2J.js';
-import { i as i18n } from './i18n-D6dst_Em.js';
+import { i as i18n } from './i18n-BbNJ4wXp.js';
 import { v as v4 } from './v4-BF0_OXTe.js';
 const translations = {
@@ -68,10 +68,10 @@ const Modal = class {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'ccf4e09ebb89081ed7a64ef33fac7f45f6759472', 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: 'b00551329a77638a99e92fc9535fc97bedddf777', 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: '78bb62b918f77eff28a6f19f02b3e96e7d81c263', 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: '5000362fe08de5cf67a307e50ae036da36a9eabd' }, h("div", { key: '46acc85a8f80c96792ebaf46eab3ee9077047040', class: "dso-body", tabIndex: 0 }, h("slot", { key: '0a5abf6641f7f3da1ac70cede9355c56eb577d9d', name: "body" }))), this.hasFooter && (h("div", { key: 'e731105b044fb9cd47ad1a8ccdd0265d6304a915', class: "dso-footer" }, h("slot", { key: 'fcbc1f8e4f1e45df0dd52c9bddcb992d5569d42a', name: "footer" }))))));
+            } }, h("div", { key: '0431cff1fb6b496c96991f01cbc51b5680505a2b', 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: 'b5e0c1d6f3894f5fa358573180c8cdf6568248ab' }, h("div", { key: '15d5f642b319448922960e008f5e40760e6b2bf4', class: "dso-body", tabIndex: 0 }, h("slot", { key: '89a6c5aad48a67c10f4ac8065734f190856cddbd', name: "body" }))), this.hasFooter && (h("div", { key: '9ec880a7f89630a0635d952dc3078751cfba36e4', class: "dso-footer" }, h("slot", { key: '5606e60c780ab8c26435664f7e4a751f94a54c60', name: "footer" }))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-onboarding-tip.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D2Jo0W7B.js';
 /**
  * Custom positioning reference element.
@@ -1753,7 +1753,7 @@ const OnboardingTip = class {
         });
     }
     render() {
-        return (h(Host, { key: '81f55bb9189b1e006db917d0563d67701710f519', popover: "manual" }, h("div", { key: 'eed3544de4a3a2b592c4ae418a582e87b2ee0133', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '5847872cf4e5b918c525d62a3d592a765a8e8154', class: "onboarding-tip-inner" }, h("div", { key: 'c35d3a3fe5e926dde418019e1b8b209e6223d504', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '1911891c6aff456fc4e43f80b687f87d1ba1df9d', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '3050474a5736b09709e114f1397b8160cb5b9868', icon: "light-bulb" }), h("slot", { key: '86c668f6602ba615db80c4338edc1157cdaa9999', name: "heading" }))), h("button", { key: '65d9ec9d3e84a409fa18ebd4d6343377a6e25126', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'ec8eb3a63525d2736debd7986ce5546619315553', icon: "times" }), h("span", { key: '99e9048e8003e211488c7fdd2eeda4a32c740b3a', class: "sr-only" }, "Sluiten")), h("slot", { key: '886ba7c055fc303d0186dec7ca30c90d2c6c2943' }))), h("div", { key: 'e838baea223b335370a4d0f14f300fa6d48853a7', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'dfebef068529cd980e0687b2cd5f9174787b6362', popover: "manual" }, h("div", { key: 'a4be1d3305a8d5adf5c5182cef80835b238e7774', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'ea8adbe1732c9158295967cd8a408d13c047200d', class: "onboarding-tip-inner" }, h("div", { key: '50371ee599f9a1cffdde7054d48d6e2c77ad6371', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'd5316ac2efae64714d518e044eecb5f029dd2813', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'f915a2258b8874eec15ec42c4a1249d8e17f4e2f', icon: "light-bulb" }), h("slot", { key: '132fbab5f794a2e4bafbdaf178cc45ea165daf7d', name: "heading" }))), h("button", { key: '29ef10c9ff3fb2d996a7d479a94409617db56775', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'b5e5786d2d646f7aaaa5b752773eee8c7a16779f', icon: "times" }), h("span", { key: 'fbfc0861af78a5bf87e87e86241199abf1ea9a66', class: "sr-only" }, "Sluiten")), h("slot", { key: '08b3622b8244f51443a7fe28573efbcc60e264d3' }))), h("div", { key: '4f614b48c66975e71246588de6e8329f652d365f', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-D2Jo0W7B.js';
 import { i as isModifiedEvent } from './is-modified-event-Hgv-pDpy.js';
 const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination ul{padding-inline-start:initial;text-align:center}.pagination ul>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination ul>li>a,.pagination ul>li>span{align-items:center;color:#39870c;display:flex;block-size:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px;padding-block:2px;padding-inline:2px}.pagination ul>li>a:active,.pagination ul>li>span:active{background-color:#ebf3e6}.pagination ul>li>span{border:2px solid transparent;border-radius:1rem}.pagination ul>li a{line-height:2rem;text-decoration:none}.pagination ul>li a:hover,.pagination ul>li a:focus{text-decoration:none}.pagination ul>li a:hover::after,.pagination ul>li a:focus::after{border-block-end-color:#39870c}.pagination ul>li a::after{border-block-end:3px solid transparent;inset-block-end:0;content:\"\";display:inline-block;inset-inline-start:0;position:absolute;inline-size:100%}.pagination ul>li.active span{background-color:#39870c;color:#fff}.pagination ul>li+li{margin-inline-start:8px}.dso-page-hidden{visibility:hidden}.sr-only.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, F as Fragment, H as Host, g as getElement } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, F as Fragment, H as Host, g as getElement } from './index-D2Jo0W7B.js';
 import { i as isModifiedEvent } from './is-modified-event-Hgv-pDpy.js';
 const plekinfoCardCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-plekinfo-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-plekinfo-card-container .dso-plekinfo-card-heading{display:flex;align-items:start;column-gap:8px}@media screen and (max-width: 480px){.dso-plekinfo-card-container .dso-plekinfo-card-heading{flex-wrap:wrap}}.dso-plekinfo-card-container .dso-plekinfo-card-heading+.dso-plekinfo-card-content{margin-block-start:8px}.dso-plekinfo-card-container .dso-plekinfo-card-symbol{grid-row:span 2;margin-inline-end:8px}.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}ins.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#d8e5c9}del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#e9cdd1}:host([active]:not([active=false])) .dso-plekinfo-card-container{background-color:#e5e5e5}:host([active]:not([active=false])) ins.dso-plekinfo-card-container{background-color:#ced9bf}:host([active]:not([active=false])) del.dso-plekinfo-card-container{background-color:#ddc3c6}:host([has-symbol]) .dso-plekinfo-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-heading,:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-content{grid-column:2/-1}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:8px !important}}::slotted([slot=heading]){display:flex !important;align-items:center !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interaction]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interaction]){flex-basis:100% !important;margin-block-start:16px !important}}.heading-anchor{display:flex;flex-wrap:nowrap;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0;align-self:end}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
@@ -47,7 +47,7 @@ const PlekinfoCard = class {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: 'aee71a264aa898231fbc5e708bc6b1057bfee886', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '234a6cf3826848efd20985b118b1aceb9948df58', wijzigactie: this.wijzigactie }, h("div", { key: '606b796f15489d6096f211b68b291e4dffdd9598', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '876469b5dd24f9404d32bbed7ac96e666ea96792', name: "symbol" })), h("div", { key: 'feb529e9820291145fef32d99f658e5091536c71', 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: 'b08865c49b90d8231606c91f3a2d3fb9373a98e1', name: "meta" }), this.interaction !== null && h("slot", { key: '3327e66eacf36753029666d7a56565d21732aec5', name: "interaction" })), h("div", { key: '6bec23e361930bbb8d66cde9350d13161747cd1d', class: "dso-plekinfo-card-content" }, h("slot", { key: '12ae5a2a1b4fca94fb8232c033767b220721f651', name: "content" })))));
+        return (h(Host, { key: 'a201b895003155d7f25e64519b36b531cf0ce24c', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'd17c9e4c9bebfa7b39fc683be3b764985d1253dc', wijzigactie: this.wijzigactie }, h("div", { key: '904e313b8d4edb9a79e082b797bb437e8924c9fb', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '3d82760ef3828843baadea7e3afa70544e0770c7', name: "symbol" })), h("div", { key: '17af89a7ba640f49a0466a36c9afbd28250218b8', 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: 'ace92f8d7f4088b608b50de590008dbdbf22bf9f', name: "meta" }), this.interaction !== null && h("slot", { key: 'ab7fec97ed32e09dfcfec5173fb16eaad5cc5c19', name: "interaction" })), h("div", { key: 'c89080bfa68702e5e6402874e888c7381fc94086', class: "dso-plekinfo-card-content" }, h("slot", { key: '0597aa1188cf5dd68ea957efc51bcaf8ad5378cd', name: "content" })))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BzEnSYbR.js';
+import { r as registerInstance, h } from './index-D2Jo0W7B.js';
 const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-block-end:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;block-size:16px}.progress .progress-bar>span{background-color:#39870c;float:inline-start;block-size:100%;inline-size:0%}.progress .progress-bar+span{font-size:14px;margin-block-start:8px}";
@@ -17,7 +17,7 @@ const ProgressBar = class {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: '890a38e19abe239b15e97ab5e863bbb88a2e4d89', class: "progress" }, h("span", { key: 'a48b38f078f5ef157d035d9148e07d30363a25e4', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: 'd1fb152692ac60590536d7c5d957fc14813f33c3', style: { width: `${progressPercentage}` } })), h("span", { key: '59d3fbfd633705d73ad442602e9de1c8f12c2def', id: "progress-bar-label" }, h("slot", { key: '90c470afc6e57e744102c2fc7a9c4353a2a6d2b3' }))));
+        return (h("div", { key: '40521f2c53b54f7850a17554f6243aec2c57c03e', class: "progress" }, h("span", { key: '074d5842a7de6677e65b273738dbda4acc9c935d', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '4d8427286c61cd604549665dd9f4c648b4c663bd', style: { width: `${progressPercentage}` } })), h("span", { key: '71876a2059c564cde39196b50950a1598809aba1', id: "progress-bar-label" }, h("slot", { key: '39979bcb43c3e258934e5d0d80ca2e4584677b81' }))));
     }
 };
 ProgressBar.style = progressBarCss;

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BzEnSYbR.js';
-import { i as i18n } from './i18n-D6dst_Em.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-D2Jo0W7B.js';
+import { i as i18n } from './i18n-BbNJ4wXp.js';
 const translations = {
     en: {
@@ -22,7 +22,7 @@ const Progressindicator = class {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '412708c2c447dea51145c32ae824536080b47a2e' }, h("span", { key: 'd922af84f2971cb5a238da95f5f94f3674436d8e', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '8af8ba31c28fdabacf700b774db95d463111919a', icon: "spinner" })), h("span", { key: '13c5c78b7aab6696dc0896cfbf3e391a30d45762', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: 'cc49f22d371a2be1b9f076fa4fdf1c0276922df9' }, h("span", { key: '00e4e97e10b0aaf1649812bdb994ebb564c2e5ef', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '1647cca5be934f705d954a7a215ac350ed38bad7', icon: "spinner" })), h("span", { key: '9b25c57d9408f208797bb341be1f24620f98dde7', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, F as Fragment } from './index-BzEnSYbR.js';
+import { r as registerInstance, h, F as Fragment } from './index-D2Jo0W7B.js';
 const projectItemCss = ":host{display:block;padding:16px;border:1px solid #ccc;border-radius:4px}*,*::after,*::before{box-sizing:border-box}::slotted(dl[slot=progress]),::slotted(dl[slot=status]){--_dt-dl-margin-block-end:0;--_dt-dl-before-display:none;--_dt-dl-dt-font-weight:normal;--_dt-dl-dd-margin-block-start:0;--_dt-dl-dd-margin-inline-start:units.$u1;--_dt-dl-dd-padding-inline-start:0;--_dt-dl-dt-inline-size:auto;--_dt-dl-dd-last-margin-block-end:0;--_dt-mark-bg-color:none;--_dt-mark-padding-block:0;--_dt-mark-color:inherit;--_dt-mark-font-weight:600;display:flex !important;flex-wrap:wrap;column-gap:16px}::slotted([slot=status]){--_dt-dl-font-size:0.875rem}::slotted([slot=title]){margin-block:0 !important;font-size:1.25rem !important}::slotted([slot=actions]){display:flex}.project-item-header{display:flex;gap:16px;flex-wrap:nowrap;align-items:flex-start;margin-block-end:16px}.project-item-title{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;flex-grow:1}.project-item-actions{display:flex;flex-shrink:0;flex-wrap:nowrap}.project-item-info{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end}";
@@ -7,7 +7,7 @@ const ProjectItem = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Fragment, null, h("div", { key: 'd15ec4ffeb4103f4bb2f112408b7e499aa0d1e68', class: "project-item-header" }, h("div", { key: 'b1ac2f3768156a459f87de37491031e804ee5fba', class: "project-item-title" }, h("slot", { key: 'eac6bf4453bfb5b35297dd4472165e4148178f47', name: "title" }), this.label && (h("dso-label", { key: 'd0ee0ca487066a5818b6bbb55936a0356f8d20b3', status: "danger", compact: true }, this.label))), h("div", { key: '83a5bc2c5795542387d2e7370e963a6b955998be', class: "project-item-actions" }, h("slot", { key: 'e85d0a59d4cfbc099b8c3740aaaa6b1c7c7bf4cd', name: "actions" }))), h("div", { key: 'c494d7ee66614b801697b4b5423aded99287e10d', class: "project-item-info" }, h("div", { key: 'f1cccf71fab35f07a018ad4a8811e8e1cded2950', class: "project-item-progress" }, h("slot", { key: '68601ab911ba1af9ada2454c9bf4c8230b9d2618', name: "progress" })), h("div", { key: 'f5619aa511b2bf0f4d9a8b8e38bcd4c6d382669f', class: "project-item-status" }, h("slot", { key: '1d7d7d0a9b70a1d3623e61f22d94fa66efbe658b', name: "status" })))));
+        return (h(Fragment, null, h("div", { key: 'af232d23ec7307a08cfd541e9cd6a7c9d101f442', class: "project-item-header" }, h("div", { key: '3310dd878965eb7a8338f92a7a475a8a2e5d1ed8', class: "project-item-title" }, h("slot", { key: '2a7a705075ba857ebec0db96fed670eb2f37e38e', name: "title" }), this.label && (h("dso-label", { key: '2cebc6be62ff52e0f1488a7799223c871919f609', status: "danger", compact: true }, this.label))), h("div", { key: '9ae781fb767a780c236eb985291284b516679254', class: "project-item-actions" }, h("slot", { key: '758bcb55450348db6eb176f71269cd843c956680', name: "actions" }))), h("div", { key: '79aa45c72390d24b6eccec66648c941fc5da7f32', class: "project-item-info" }, h("div", { key: 'fb6861d5b4636cb905a9d3e43fdcb9e171682094', class: "project-item-progress" }, h("slot", { key: '7a41047f7983d1a9776ee6e3a75d23ebfa964362', name: "progress" })), h("div", { key: '330dc5b7042841706d57da3e549b471168858fdb', class: "project-item-status" }, h("slot", { key: '932d42797170138dcedb06f046e784ed44788121', name: "status" })))));
     }
 };
 ProjectItem.style = projectItemCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D2Jo0W7B.js';
 const responsiveElementCss = ":host{display:block}";
@@ -45,7 +45,7 @@ const ResponsiveElement = class {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: 'e6593b115541e2a8d86f82c0ef8e19a3709f41bf', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '5b3263ef3ec5ea3376002bc62316b7af63a5a0ae' })));
+        return (h(Host, { key: 'e91c4381f1dbed450ac401d4da518280a8c29779', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '41e3674a479ce776ef848b0752b928cb89a3dd4b' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-scrollable.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D2Jo0W7B.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 import { d as debounce } from './index-CoMRvcY0.js';
 import './_commonjsHelpers-BFTU3MAI.js';
@@ -90,9 +90,9 @@ const Scrollable = class {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '18cfb4eb27e7dafc8b2421236dcdaa6bf22bdbe5', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'a32dba02a761a573ff12e80f8f45e3e372bc773a', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '8731a96c831972ad8f3ab111c24977bfb8ab3b49', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'b2af22551c7847525bbf52ab8fef0a71cc84da7e', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'c6f2e56c42e21c91bb8bc63a411dd314bd2652e7' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '69233c37151fc601b20b938d828dba01ec98033a' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-skiplink.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, h } from './index-D2Jo0W7B.js';
 import { i as isModifiedEvent } from './is-modified-event-Hgv-pDpy.js';
 const skiplinkCss = ":host{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:2;display:block;inline-size:100vw}*,*::after,*::before{box-sizing:border-box}a{position:absolute;inset-inline-start:50%;inset-block-start:16px;display:inline-block;inline-size:1px;block-size:1px;overflow:hidden;background-color:#fff;border-radius:2px;clip:rect(1px, 1px, 1px, 1px);color:var(--link-color);white-space:nowrap;text-decoration:none;transform:translate(-50%);box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}a:focus-visible{inline-size:auto;block-size:auto;padding:8px;clip:auto;white-space:normal;outline-offset:2px}";
@@ -15,7 +15,7 @@ const Skiplink = class {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: '78c9b83c84af108ad52064712dea6dfd03fcf186', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'e1ed433e9827d63a09140adbc5c25cadf9d34e6c', icon: "chevron-right" })));
+        return (h("a", { key: '9d91efb96653b3344f79386814633d08520d6ab0', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '3d79ed32ff98d7e1e7eea58307d03892756dbbf1', icon: "chevron-right" })));
     }
 };
 Skiplink.style = skiplinkCss;

package/dist/esm/dso-survey-rating.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-D2Jo0W7B.js';
 const surveyRatingCss = ":host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #b62f41;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #ce3f51;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e17000;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #dcd400;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #79b929;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #39870c;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #275937;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  margin-block-start: 16px;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\nbutton.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\nbutton.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}";
@@ -26,10 +26,10 @@ const SurveyRating = class {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: 'b65dd82e729bd3cb32e827874638d05d8405b1df', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("h2", { key: 'df0812d996ece9fdb934b2b0896e964b94ed4619', slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'cd1db7a2e658b0ed1b477bde58d472bff791e6da' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren"), h("form", { key: 'fe99767e32e730616c82378c7975f45bab0fb92d', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'eaa5f15a5979b5d771a5f7d2ee3c00cce27adc5f', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '6fc5a729d518578a5d353099959e7f0ebb5aca19' }, "Heel moeilijk"), h("span", { key: '9056e1191f57b16b5e6b74e7674ee19c3c3066e2' }, "Heel makkelijk")), h("div", { key: '5c2b13e7804fbbe74d0eda8a29f648d6c72175c1', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '2a2195f431d05af2f95157241dbe233743cc45a6', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '6078cb4a0285e2f4afda8c2452efbbbdd2938c20', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '1e424390809f7a1cb59f636f4bd27f9d9e4b3c70' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '22c216ba2253ae2f748030be3336155318d01449', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '3eb88c0afcf933bb8974df638b5eb2aed1a45d0a', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '1a74a9093fc56e5f1192e1400d9989074d2c0add' }, "Heel moeilijk"), h("span", { key: '78c7bffac4fd101c39917a9903fda62acdbf3806' }, "Heel makkelijk")), h("div", { key: 'd1b523bf50e3a901da0f6d0af0e20c72df9e8bc9', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: 'fad9fd7925f0bf15b4a6bc9484b7de8e58b6721b', type: "submit", class: "dso-secondary" }, h("span", { key: '3353e9c585cc32f35e4106c595add16127b9a663' }, "Antwoord verzenden")))));
+        })), h("button", { key: '8105cc59e8f59f056579f21f56d82e518cfe7396', type: "submit", class: "dso-secondary" }, h("span", { key: '379e72689c91d68a90013578fc03019a0eac4042' }, "Antwoord verzenden")))));
     }
 };
 SurveyRating.style = surveyRatingCss;

package/dist/esm/dso-survey-rating.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-survey-rating.entry.js","sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n display: block;\r\n position: fixed;\r\n inset-block-end: units.$u2;\r\n inset-inline-start: units.$u2;\r\n inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n background-color: survey-rating-variables.$survey-rating-background-color;\r\n box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n z-index: zindex.$survey-rating;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n inset-block-end: 0;\r\n inset-inline-start: 0;\r\n\r\n --panel-heading-padding-inline-start: #{units.$u1};\r\n --panel-body-padding-inline: #{units.$u1};\r\n }\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.visual-rating-labels {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n appearance: none;\r\n cursor: pointer;\r\n position: absolute;\r\n margin-inline: 0;\r\n margin-block: 0;\r\n inset-block: units.$u1 0;\r\n inset-inline: 0;\r\n z-index: 1;\r\n}\r\n\r\nlabel {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n border-inline-end-width: 0;\r\n padding-block-start: units.$u1;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n }\r\n\r\n &:hover {\r\n background-color: survey-rating-variables.$survey-rating-color-hover;\r\n }\r\n\r\n &:active {\r\n background-color: survey-rating-variables.$survey-rating-color-active;\r\n }\r\n\r\n &:first-of-type {\r\n border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n survey-rating-variables.$survey-rating-border-radius;\r\n\r\n &::before {\r\n border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &:last-of-type {\r\n border-inline-end-width: 1px;\r\n border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n &::before {\r\n border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n inset-block-start: 0;\r\n block-size: units.$u1;\r\n inline-size: 100%;\r\n border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n }\r\n\r\n &:has(input:checked) {\r\n font-weight: bold;\r\n }\r\n\r\n @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n $color: map.get($survey-rating, color);\r\n\r\n &.survey-rating-#{$i} {\r\n &::before,\r\n &:has(input:checked) {\r\n @include set-colors.apply($color, survey-rating-variables.$survey-rating-border-color);\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n\r\n &.dso-secondary {\r\n @include button.secondary($base-styling: true);\r\n }\r\n\r\n margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-survey-rating\",\r\n styleUrl: \"survey-rating.scss\",\r\n shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n private rating: number \| undefined;\r\n\r\n /*\r\n Emitted when user submits the Survey Rating.\r\n /\r\n @Event()\r\n dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n /\r\n Emitted when the user wants to close the Survey Rating.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n private handleForm(e: Event): void {\r\n e.preventDefault();\r\n this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n }\r\n\r\n private handleChange(e: Event): void {\r\n const target = e.target as HTMLInputElement;\r\n this.rating = Number(target.value);\r\n }\r\n\r\n render() {\r\n const ratings = [\r\n \"Heel moeilijk\",\r\n \"Moeilijk\",\r\n \"Redelijk moeilijk\",\r\n \"Neutraal\",\r\n \"Redelijk makkelijk\",\r\n \"Makkelijk\",\r\n \"Heel makkelijk\",\r\n ];\r\n\r\n return (\r\n <dso-panel emphasized onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <h2 slot=\"heading\">Help ons met een onderzoek</h2>\r\n <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren</strong>\r\n <form onSubmit={(e) => this.handleForm(e)}>\r\n <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n <span>Heel moeilijk</span>\r\n <span>Heel makkelijk</span>\r\n </div>\r\n <div role=\"radiogroup\">\r\n {ratings.map((rating, index) => {\r\n const ratingNumber = index + 1;\r\n\r\n return (\r\n <>\r\n <label class={`survey-rating-${ratingNumber}`}>\r\n {ratingNumber}\r\n <span class=\"sr-only\">{rating}</span>\r\n <input\r\n type=\"radio\"\r\n name=\"rating\"\r\n value={ratingNumber}\r\n checked={ratingNumber === this.rating}\r\n onChange={(e) => this.handleChange(e)}\r\n />\r\n </label>\r\n </>\r\n );\r\n })}\r\n </div>\r\n <button type=\"submit\" class=\"dso-secondary\">\r\n <span>Antwoord verzenden</span>\r\n </button>\r\n </form>\r\n </dso-panel>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,qosBAAqosB;;MCQhpsB,YAAY,GAAA,MAAA;;;;;;AAef,IAAA,UAAU,CAAC,CAAQ,EAAA;QACzB,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;;AAGrF,IAAA,YAAY,CAAC,CAAQ,EAAA;AAC3B,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;QAC3C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB;AAED,QAAA,QACE,~~kEAAW~~,UAAU,EAAA,IAAA,~~EAAC~~,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,~~EACpF~~,~~CAAI~~,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAA~~,IAAI,EAAC,SAAS,~~EAAgC~~,EAAA,4BAAA,CAAA,~~EAClD~~,~~CAAyE~~,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,~~0DAAA~~,CAAA,~~EACzE~~,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,aAAA,EAAa,MAAM,EAAA,EAClD,CAA0B,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,eAAA,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,gBAAA,CAA2B,CACvB,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,YAAY,EAAA,EACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;AAC7B,YAAA,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC;AAE9B,YAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,OAAA,EAAA,EAAO,KAAK,EAAE,CAAA,cAAA,EAAiB,YAAY,CAAE,CAAA,EAAA,EAC1C,YAAY,EACb,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,CAAQ,EACrC,CAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP;AAEP,SAAC,CAAC,CACE,EACN,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAA,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,oBAAA,CAA+B,CACxB,CACJ,CACG;;;;;;;"}
1	+ {"version":3,"file":"dso-survey-rating.entry.js","sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n display: block;\r\n position: fixed;\r\n inset-block-end: units.$u2;\r\n inset-inline-start: units.$u2;\r\n inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n background-color: survey-rating-variables.$survey-rating-background-color;\r\n box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n z-index: zindex.$survey-rating;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n inset-block-end: 0;\r\n inset-inline-start: 0;\r\n\r\n --panel-heading-padding-inline-start: #{units.$u1};\r\n --panel-body-padding-inline: #{units.$u1};\r\n }\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.visual-rating-labels {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n appearance: none;\r\n cursor: pointer;\r\n position: absolute;\r\n margin-inline: 0;\r\n margin-block: 0;\r\n inset-block: units.$u1 0;\r\n inset-inline: 0;\r\n z-index: 1;\r\n}\r\n\r\nlabel {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n border-inline-end-width: 0;\r\n padding-block-start: units.$u1;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n }\r\n\r\n &:hover {\r\n background-color: survey-rating-variables.$survey-rating-color-hover;\r\n }\r\n\r\n &:active {\r\n background-color: survey-rating-variables.$survey-rating-color-active;\r\n }\r\n\r\n &:first-of-type {\r\n border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n survey-rating-variables.$survey-rating-border-radius;\r\n\r\n &::before {\r\n border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &:last-of-type {\r\n border-inline-end-width: 1px;\r\n border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n &::before {\r\n border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n inset-block-start: 0;\r\n block-size: units.$u1;\r\n inline-size: 100%;\r\n border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n }\r\n\r\n &:has(input:checked) {\r\n font-weight: bold;\r\n }\r\n\r\n @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n $color: map.get($survey-rating, color);\r\n\r\n &.survey-rating-#{$i} {\r\n &::before,\r\n &:has(input:checked) {\r\n @include set-colors.apply($color, survey-rating-variables.$survey-rating-border-color);\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n\r\n &.dso-secondary {\r\n @include button.secondary($base-styling: true);\r\n }\r\n\r\n margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-survey-rating\",\r\n styleUrl: \"survey-rating.scss\",\r\n shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n private rating: number \| undefined;\r\n\r\n /*\r\n Emitted when the user submits the Survey Rating.\r\n /\r\n @Event()\r\n dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n /\r\n Emitted when the user wants to close the Survey Rating.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n private handleForm(e: Event): void {\r\n e.preventDefault();\r\n this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n }\r\n\r\n private handleChange(e: Event): void {\r\n const target = e.target as HTMLInputElement;\r\n this.rating = Number(target.value);\r\n }\r\n\r\n render() {\r\n const ratings = [\r\n \"Heel moeilijk\",\r\n \"Moeilijk\",\r\n \"Redelijk moeilijk\",\r\n \"Neutraal\",\r\n \"Redelijk makkelijk\",\r\n \"Makkelijk\",\r\n \"Heel makkelijk\",\r\n ];\r\n\r\n return (\r\n <dso-panel\r\n emphasized\r\n onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n role=\"dialog\"\r\n aria-labelledby=\"panel-heading\"\r\n >\r\n <h2 id=\"panel-heading\" slot=\"heading\">\r\n Help ons met een onderzoek\r\n </h2>\r\n <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n <form onSubmit={(e) => this.handleForm(e)}>\r\n <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n <span>Heel moeilijk</span>\r\n <span>Heel makkelijk</span>\r\n </div>\r\n <div role=\"radiogroup\">\r\n {ratings.map((rating, index) => {\r\n const ratingNumber = index + 1;\r\n\r\n return (\r\n <>\r\n <label class={`survey-rating-${ratingNumber}`}>\r\n {ratingNumber}\r\n <span class=\"sr-only\">{rating}</span>\r\n <input\r\n type=\"radio\"\r\n name=\"rating\"\r\n value={ratingNumber}\r\n checked={ratingNumber === this.rating}\r\n onChange={(e) => this.handleChange(e)}\r\n />\r\n </label>\r\n </>\r\n );\r\n })}\r\n </div>\r\n <button type=\"submit\" class=\"dso-secondary\">\r\n <span>Antwoord verzenden</span>\r\n </button>\r\n </form>\r\n </dso-panel>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/dso-tab.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BzEnSYbR.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D2Jo0W7B.js';
 import { i as isModifiedEvent } from './is-modified-event-Hgv-pDpy.js';
 const tabCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px;inline-size:100%;text-align:start}}";

package/dist/esm/dso-tab.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-tab.entry.js","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"],"names":[],"mappings":";;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE;;MCYlwE,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,CACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,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,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJ,CAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;"}
1	+ {"version":3,"file":"dso-tab.entry.js","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/link\";\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 link.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"],"names":[],"mappings":";;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE;;MCYlwE,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,CACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,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,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJ,CAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;"}

package/dist/esm/dso-tabs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-BzEnSYbR.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-D2Jo0W7B.js';
 const tabsCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";
@@ -64,7 +64,7 @@ const Tabs = class {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'b9568d7dc32c55b0b54c37b28756274bb57cbacf' }, h("div", { key: '314522c3eba0fb007ce5d214d309ab20a4a9e53c', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '0ea47d9bd541ee8657b5c9be2f24b6f641051c17' })), h("div", { key: 'd7a531a6ee574d7deb3455c3f43d16f40a0faf1b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '65e458b46fcf351079f225fb49336ffcc5dd7982', name: "panel" }))));
+        return (h(Host, { key: 'ee52a51bd4dce360be086fe4ac9603c3b1e12255' }, h("div", { key: '7f9270557289a2d6a2d8e949cbf8ee7a8ba286a7', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '47ad707d1b2dc383074db54e70f85fdd60c8a3d4' })), h("div", { key: '5864caa924fcee7d74ef10410ee3b0d38d8af2c0', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'a01b5c9915c4385c713dea531eaccecd9757a940', name: "panel" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-tabs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-tabs.entry.js","sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\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@use \"~dso-toolkit/src/components/~~anchor~~\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.tabs {\r\n border-block-end: 1px solid colors.$grasgroen;\r\n display: flex;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n margin-block-end: units.$block-spacing-large;\r\n padding-inline-start: 0;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border: 0;\r\n display: block;\r\n }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/*\r\n @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n tag: \"dso-tabs\",\r\n styleUrl: \"tabs.scss\",\r\n shadow: true,\r\n})\r\nexport class Tabs {\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n host!: HTMLDsoTabsElement;\r\n\r\n private get enabledTabs() {\r\n // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n (tabs, tab) => {\r\n if (!tab.disabled) {\r\n tabs.push(tab);\r\n }\r\n\r\n return tabs;\r\n },\r\n [],\r\n );\r\n }\r\n\r\n private get firstTab() {\r\n return this.enabledTabs[0];\r\n }\r\n\r\n private get lastTab() {\r\n return this.enabledTabs[this.enabledTabs.length - 1];\r\n }\r\n\r\n private moveFocusToTab(tab: HTMLDsoTabElement \| undefined) {\r\n tab?._dsoFocus();\r\n }\r\n\r\n private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (!(e.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (e.key) {\r\n case \"ArrowRight\":\r\n case \"ArrowDown\":\r\n this.moveFocusToNextTab(e.target);\r\n break;\r\n case \"ArrowLeft\":\r\n case \"ArrowUp\":\r\n this.moveFocusToPreviousTab(e.target);\r\n break;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n <slot />\r\n </div>\r\n <div role=\"tabpanel\" tabindex=\"0\">\r\n <slot name=\"panel\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-tabs.entry.js","sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\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@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.tabs {\r\n border-block-end: 1px solid colors.$grasgroen;\r\n display: flex;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n margin-block-end: units.$block-spacing-large;\r\n padding-inline-start: 0;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border: 0;\r\n display: block;\r\n }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/*\r\n @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n tag: \"dso-tabs\",\r\n styleUrl: \"tabs.scss\",\r\n shadow: true,\r\n})\r\nexport class Tabs {\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n host!: HTMLDsoTabsElement;\r\n\r\n private get enabledTabs() {\r\n // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n (tabs, tab) => {\r\n if (!tab.disabled) {\r\n tabs.push(tab);\r\n }\r\n\r\n return tabs;\r\n },\r\n [],\r\n );\r\n }\r\n\r\n private get firstTab() {\r\n return this.enabledTabs[0];\r\n }\r\n\r\n private get lastTab() {\r\n return this.enabledTabs[this.enabledTabs.length - 1];\r\n }\r\n\r\n private moveFocusToTab(tab: HTMLDsoTabElement \| undefined) {\r\n tab?._dsoFocus();\r\n }\r\n\r\n private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (!(e.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (e.key) {\r\n case \"ArrowRight\":\r\n case \"ArrowDown\":\r\n this.moveFocusToNextTab(e.target);\r\n break;\r\n case \"ArrowLeft\":\r\n case \"ArrowUp\":\r\n this.moveFocusToPreviousTab(e.target);\r\n break;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n <slot />\r\n </div>\r\n <div role=\"tabpanel\" tabindex=\"0\">\r\n <slot name=\"panel\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/dso-toggletip.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-BzEnSYbR.js';
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-D2Jo0W7B.js';
 const toggletipCss = "*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;--tooltip-margin-block-start:0;--tooltip-margin-inline-start:3px;--tooltip-margin-inline-end:units.$u1 * -1 !important}:host(:focus){outline:none;z-index:410}";
@@ -48,7 +48,7 @@ const Toggletip = class {
         };
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: '0c95a99da4efdb1586d340556ed2a30e8639de6b', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: 'b9a89bf55642c6bf35bf87b4166e5958bc179529', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'da02438922da4d6cc6dcc2a10a143ea2c55d7493' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: '111128db00e6c05e29bdee109ccc04faddb86c66', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '42728fdc33b9c2994a6a3dc78ef487beb2c7acab', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '96d983d968250a2e81727d90990e3145fb2ed1fc' }))));
     }
     get host() { return getElement(this); }
 };