@dso-toolkit/core 72.0.0 → 72.2.0

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

@@ -25,7 +25,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: '7ff86866a9d77df22b05998c9ab88e9b44a3037f', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'fe3211c16c38e99ee8aecef786dd546e7c8a059f', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '771ac2486522b8e2bb130d7bb4e0779fe0adbe45', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '9856f027ca31cfd9732774c7440eb07ef749c4d0', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '65ea5eba7b1e850822b2bf57537739547bc19a52', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'e140104191700dbdb0e8c1061f78617217e459d8', htmlFor: this.identifier }, h("slot", { key: 'a2f1b30ad79f1ab9c47b28e2e4814a5198919bde' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: '9998feb9ab9de5a90688ec1c4c437e099c71bce8', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'bc761b84d0c94aa0b3c7f14858a8809f6f565f34', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '5fb96fdd754cf0281df897ae5fa4186d7228606d', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'a1ef646ad0c14eef2053a61dddaac5bc97fcb2c6', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '5b283aa09bf71007263e26dc103ad8f373de5e7c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'd76771061d5f36cab2b1c312f2014140746d6c6d', htmlFor: this.identifier }, h("slot", { key: '799f7bb5d225c8d6eebb80d3659e247d93ce3a7e' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -43,6 +43,7 @@ export class SlideToggle {
         return {
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -57,12 +58,12 @@ export class SlideToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -77,12 +78,12 @@ export class SlideToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -97,11 +98,11 @@ export class SlideToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "labelledbyId": {
                 "type": "string",
+                "attribute": "labelledby-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -116,11 +117,11 @@ export class SlideToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "labelledby-id",
                 "reflect": false
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -135,7 +136,6 @@ export class SlideToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "v4()"
             }

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

@@ -285,9 +285,9 @@ button.dso-secondary.extern::after, button.dso-secondary.download::after {
   margin-inline-start: 8px;
 }
 button.dso-secondary {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
+  background-color: var(--_dso-button-secondary-background-color, #fff);
+  border-color: var(--_dso-button-secondary-border-color, #39870c);
+  color: var(--_dso-button-secondary-color, #39870c);
 }
 button.dso-secondary {
   border-width: 1px;
@@ -299,19 +299,19 @@ button.dso-secondary {
   padding-inline: 15px;
 }
 button.dso-secondary:hover {
-  background-color: #d7e7ce;
-  border-color: #39870c;
-  color: #39870c;
+  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
+  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);
+  color: var(--_dso-button-secondary-hover-color, #39870c);
 }
 button.dso-secondary:active {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
+  background-color: var(--_dso-button-secondary-active-background-color, #39870c);
+  border-color: var(--_dso-button-secondary-active-border-color, #39870c);
+  color: var(--_dso-button-secondary-active-color, #fff);
 }
 button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {
-  background-color: #fff;
-  border-color: #afcf9d;
-  color: #afcf9d;
+  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
+  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
+  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
 }
 button.dso-secondary.dso-small {
   line-height: 1rem;

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

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '6fc9ee08dd30db6aa3d69d97c2ca0301925aead8', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("h2", { key: 'bbb4670c28e25abbfc173460ce3f68222890fe83', slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '06cd4142e76f971ce0295de633b4b50829ee25da' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren"), h("form", { key: '28fa667cc36b6e5195e89ca5a367db1f78c1b594', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '64da63f3d3fa3c184d170294c0881b0706384c12', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '43ae48b3d6cb72029401854d4e775e9039483b1c' }, "Heel moeilijk"), h("span", { key: 'f77fb4f6d9618f1f854548edf8b02b3462737805' }, "Heel makkelijk")), h("div", { key: '1558bdd1bf03f620c9e78d77c0b0a5a64c36351c', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: 'ae987cd2279ea8e62cbd2f7928077987f94e7494', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '99e64e45b6c23d392f60b1740790b551dbffa238', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '9088f73166e948d76d8b3418696ee6a096c33fc3' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '38f1e7bcd2011d5285d4080bfdf4b6d6dd72b3b6', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '4270a5ca3008ea816987450b635d737a0a0a6f3f', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '43d56266891a0f5accf0d1d59ca7ca1eb976a459' }, "Heel moeilijk"), h("span", { key: '48987dc8811aa9bdff083628b1e0e3f498c311b8' }, "Heel makkelijk")), h("div", { key: '2487fb24622acb4d57a623e9669dfb671b13d847', 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: 'eba1c066912dcb627aa64c65e6855b2d8193c4c5', type: "submit", class: "dso-secondary" }, h("span", { key: '8d748fc6a39c343c949808c070eb68aa4e4ba1b9' }, "Antwoord verzenden")))));
+        })), h("button", { key: '333e476073c4b5d65a81066b0eec4960bfd8a3e0', type: "submit", class: "dso-secondary" }, h("span", { key: '090bfe99bc32b779296fa65065d65e4e507fc2e6' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }
@@ -44,7 +44,7 @@ export class SurveyRating {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when user submits the Survey Rating."
+                    "text": "Emitted when the user submits the Survey Rating."
                 },
                 "complexType": {
                     "original": "SurveyRatingSubmitEvent",

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

@@ -1 +1 @@
-{"version":3,"file":"survey-rating.js","sourceRoot":"","sources":["../../../../src/components/survey-rating/survey-rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,QAAQ,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;IAef,UAAU,CAAC,CAAQ;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,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,CAAC;IAC9F,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB,CAAC;QAEF,OAAO,CACL,kEAAW,UAAU,QAAC,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;YACpF,2DAAI,IAAI,EAAC,SAAS,iCAAgC;YAClD,4HAAyE;YACzE,6DAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBACvC,4DAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;oBAClD,+EAA0B;oBAC1B,gFAA2B,CACvB;gBACN,4DAAK,IAAI,EAAC,YAAY,IACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;oBAE/B,OAAO,CACL;wBACE,aAAO,KAAK,EAAE,iBAAiB,YAAY,EAAE;4BAC1C,YAAY;4BACb,YAAM,KAAK,EAAC,SAAS,IAAE,MAAM,CAAQ;4BACrC,aACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP,CACJ,CAAC;gBACJ,CAAC,CAAC,CACE;gBACN,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;oBACzC,oFAA+B,CACxB,CACJ,CACG,CACb,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
+{"version":3,"file":"survey-rating.js","sourceRoot":"","sources":["../../../../src/components/survey-rating/survey-rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,QAAQ,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;IAef,UAAU,CAAC,CAAQ;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,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,CAAC;IAC9F,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB,CAAC;QAEF,OAAO,CACL,kEACE,UAAU,QACV,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAChE,IAAI,EAAC,QAAQ,qBACG,eAAe;YAE/B,2DAAI,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,iCAEhC;YACL,6HAA0E;YAC1E,6DAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBACvC,4DAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;oBAClD,+EAA0B;oBAC1B,gFAA2B,CACvB;gBACN,4DAAK,IAAI,EAAC,YAAY,IACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;oBAE/B,OAAO,CACL;wBACE,aAAO,KAAK,EAAE,iBAAiB,YAAY,EAAE;4BAC1C,YAAY;4BACb,YAAM,KAAK,EAAC,SAAS,IAAE,MAAM,CAAQ;4BACrC,aACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP,CACJ,CAAC;gBACJ,CAAC,CAAC,CACE;gBACN,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;oBACzC,oFAA+B,CACxB,CACJ,CACG,CACb,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -55,9 +55,9 @@ label.dso-primary.download::after {
 a.dso-primary,
 button.dso-primary,
 label.dso-primary {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
+  background-color: var(--_dso-button-primary-background-color, #39870c);
+  border-color: var(--_dso-button-primary-border-color, #39870c);
+  color: var(--_dso-button-primary-color, #fff);
 }
 a.dso-primary,
 button.dso-primary,
@@ -73,25 +73,25 @@ label.dso-primary {
 a.dso-primary:hover,
 button.dso-primary:hover,
 label.dso-primary:hover {
-  background-color: #275937;
-  border-color: #275937;
-  color: #fff;
+  background-color: var(--_dso-button-primary-hover-background-color, #275937);
+  border-color: var(--_dso-button-primary-hover-border-color, #275937);
+  color: var(--_dso-button-primary-hover-color, #fff);
 }
 a.dso-primary:active,
 button.dso-primary:active,
 label.dso-primary:active {
-  background-color: #173521;
-  border-color: #173521;
-  color: #fff;
+  background-color: var(--_dso-button-primary-active-background-color, #173521);
+  border-color: var(--_dso-button-primary-active-border-color, #173521);
+  color: var(--_dso-button-primary-active-color, #fff);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
 button.dso-primary[disabled]:hover,
 label.dso-primary[disabled],
 label.dso-primary[disabled]:hover {
-  background-color: #afcf9d;
-  border-color: #afcf9d;
-  color: #fff;
+  background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
+  border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
+  color: var(--_dso-button-primary-disabled-color, #fff);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -238,9 +238,9 @@ label.dso-secondary.download::after {
 a.dso-secondary,
 button.dso-secondary,
 label.dso-secondary {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
+  background-color: var(--_dso-button-secondary-background-color, #fff);
+  border-color: var(--_dso-button-secondary-border-color, #39870c);
+  color: var(--_dso-button-secondary-color, #39870c);
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -256,25 +256,25 @@ label.dso-secondary {
 a.dso-secondary:hover,
 button.dso-secondary:hover,
 label.dso-secondary:hover {
-  background-color: #d7e7ce;
-  border-color: #39870c;
-  color: #39870c;
+  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
+  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);
+  color: var(--_dso-button-secondary-hover-color, #39870c);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
 label.dso-secondary:active {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
+  background-color: var(--_dso-button-secondary-active-background-color, #39870c);
+  border-color: var(--_dso-button-secondary-active-border-color, #39870c);
+  color: var(--_dso-button-secondary-active-color, #fff);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
 button.dso-secondary[disabled]:hover,
 label.dso-secondary[disabled],
 label.dso-secondary[disabled]:hover {
-  background-color: #fff;
-  border-color: #afcf9d;
-  color: #afcf9d;
+  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
+  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
+  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,

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

@@ -35,7 +35,7 @@ export class Table {
     render() {
         var _a, _b;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: 'c465f5014e591ec4a8fcab7eed909818f2dde6f8' }, this.modalActive && this.placeholderHeight && (h("div", { key: '94fa4854b3bd1cfed2087e416f823033bb1fc3de', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '5c9e703a74f0c8f221042b219599315e0932f864', class: "dso-modal-overlay" }), h("div", { key: 'cccfcba87f32b6fdf2ed41a030d99304d06ac218', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'bad4aa92cb36d34395f6c68d698e20ba79aad188', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'b9c3cec6bfb473adb41d05fdfa96fa167b3e481b', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'ca72148aa35da17df4eaf05519e1871052becf96', class: "dso-responsive-message" }, h("span", { key: '8b94652d99b6370d8db1c46d8834d604c35806e8' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '30c50f4f75494b32e3bf874db54dd5bd95514eb1', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'af210675eb92a25f3304f5649de20f923c465d50', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '49e46c6efa13a6393de4828c1d9e326dc426597d' }, "vergroten"), h("dso-icon", { key: '3d24a2606d42540e456eaa8c8b54b9da76c22026', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'bb26849d9c55403cbbae07e135b8752e5ea87a60', class: "dso-header" }, h("h2", { key: 'cdefb7cf4a9057f0f0706f175e0966c827b387ff', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: 'f5dea929569c09b8d39eaeddd8e5d067371f4a80', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'a329ba6dcf831b752a532c840d41f7cc9265a156', icon: "times" }), h("span", { key: '851e7ba83fce8691b0ca60b4de4681513d978fea', class: "sr-only" }, "Sluiten")))), h("div", { key: '5bb60f54d200a0cb86209114e8e41f3e25c556b1', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'd84032333756cf618b7e534e0e8e4a246f5c3446' }))))));
+        return (h(Host, { key: '2d8279e20e37f0ed6b7b76a33860b382d6bb182d' }, this.modalActive && this.placeholderHeight && (h("div", { key: 'd19ec4b21f0c745a12aafe4049985e2863252d3c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '3ad7b95965002b0dc007255f72b62326f46f4405', class: "dso-modal-overlay" }), h("div", { key: '80693b6b28986f0320f3cb994b8fc4e85e878153', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '9e29c09eb082f9afc6216efb210a66dc82589539', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '9cee36736c5d50fdb6a688c2b8f10e557f0b18cf', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '47f4580644f9f7c4b1d6e8944de2225de0768f4e', class: "dso-responsive-message" }, h("span", { key: '0792867bae569f0b2747e102632e086cb622f0c0' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '771efe05ecf2850ae508a81eb0c0809dc255e51b', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '9a0cc472ee93fcabff0856458dc523ed32543d06', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'd61d3c2846d7d0166db3e0810c00ff420de3161b' }, "vergroten"), h("dso-icon", { key: '9a41c4e1237f717014353571ec229fad3b60aac6', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'c770c1f32736501f4c3a7a171f8a9ca2075ff03f', class: "dso-header" }, h("h2", { key: 'f86a5d2641de96890c20eb7a7430c820290aa261', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '62d186fd947e4be99522ffad036ed4c39f33959d', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '3e4ee7a70851e7f4b4f77225a07d88a4d244839b', icon: "times" }), h("span", { key: 'efdf2657b62839591efee36fad9b8c157374fe15', class: "sr-only" }, "Sluiten")))), h("div", { key: '35db2e64a1e4d16e1b0d752b06546764c410dc6a', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'a6dd9bed411f23bc771d1470e4c9f36cea990920' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;
@@ -95,6 +95,7 @@ export class Table {
         return {
             "noModal": {
                 "type": "boolean",
+                "attribute": "no-modal",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -109,12 +110,12 @@ export class Table {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-modal",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "isResponsive": {
                 "type": "boolean",
+                "attribute": "is-responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,7 +130,6 @@ export class Table {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-responsive",
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -51,6 +51,7 @@ export class Tab {
         return {
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -65,11 +66,11 @@ export class Tab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -84,11 +85,11 @@ export class Tab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -103,7 +104,6 @@ export class Tab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false
             }
         };

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

@@ -64,7 +64,7 @@ export class Tabs {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '0908aaf68c69e5becbb8e51be5b29280e6e37d9d' }, h("div", { key: '4f1242d80bdc8680d3e345e3ebb47bc1fbf4bed5', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '71b5f5df423c8c43e833f4442eb112c97d81eed3' })), h("div", { key: '3e3274a4f7a956f1b73dad5e90a50e9e23c3876d', role: "tabpanel", tabindex: "0" }, h("slot", { key: '25aa9b64552fdf89712841c64f13e47f03c1ed35', name: "panel" }))));
+        return (h(Host, { key: 'b9568d7dc32c55b0b54c37b28756274bb57cbacf' }, h("div", { key: '314522c3eba0fb007ce5d214d309ab20a4a9e53c', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '0ea47d9bd541ee8657b5c9be2f24b6f641051c17' })), h("div", { key: 'd7a531a6ee574d7deb3455c3f43d16f40a0faf1b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '65e458b46fcf351079f225fb49336ffcc5dd7982', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,7 +44,7 @@ export class Toggletip {
         };
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: '56448cd72645ca4372713cc713c85c2724d68048', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '1fe9d6199e80133307ed7509ae1486a833d704e8', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '90feff1177e112d29d129abb4aa97d4a349ad30b' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: '0c95a99da4efdb1586d340556ed2a30e8639de6b', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: 'b9a89bf55642c6bf35bf87b4166e5958bc179529', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'da02438922da4d6cc6dcc2a10a143ea2c55d7493' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }
@@ -62,6 +62,7 @@ export class Toggletip {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -76,12 +77,12 @@ export class Toggletip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Toelichting\""
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -102,12 +103,12 @@ export class Toggletip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "\"right\""
             },
             "small": {
                 "type": "boolean",
+                "attribute": "small",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -122,11 +123,11 @@ export class Toggletip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "small",
                 "reflect": false
             },
             "secondary": {
                 "type": "boolean",
+                "attribute": "secondary",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -141,7 +142,6 @@ export class Toggletip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "secondary",
                 "reflect": false
             }
         };

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

@@ -189,7 +189,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '836f13fccf86ac71deb466b29edc72ea2d22c5d8', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '9777b2d9ca6883fe0b4d365714cc679bfe09e1b3', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '0c7ffb603babe03c01f705a36dd416c37bb9b9e1', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '282540f7d97bfce6879cf2ef3192d63f3df5231a', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '77b3e4b82a87bd812b0919086defbf36daeb651a' })))));
+        return (h(Host, { key: 'bc5eaedc2be16fb8d3ca4d42b80eb9e66315309a', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'da0bfa98b1f90755a23d3a41fdc75fd1d7bd3aab', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'edd01d28a24600426d5077b5b0332b2385db96fa', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'b15b8aed681ddc57092d9df49df4cd71902b14f8', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '2ec8c909476afe42a71d05c012ba8e0de6b674e0' })))));
     }
     activatePopper() {
         var _a;
@@ -248,6 +248,7 @@ export class Tooltip {
         return {
             "descriptive": {
                 "type": "boolean",
+                "attribute": "descriptive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -262,12 +263,12 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "descriptive",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -288,12 +289,12 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "strategy": {
                 "type": "string",
+                "attribute": "strategy",
                 "mutable": false,
                 "complexType": {
                     "original": "\"auto\" | \"absolute\" | \"fixed\"",
@@ -308,12 +309,12 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "strategy",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "noArrow": {
                 "type": "boolean",
+                "attribute": "no-arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -328,12 +329,12 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-arrow",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "stateless": {
                 "type": "boolean",
+                "attribute": "stateless",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -348,11 +349,11 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "stateless",
                 "reflect": false
             },
             "small": {
                 "type": "boolean",
+                "attribute": "small",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -367,11 +368,11 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "small",
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -386,7 +387,6 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             }

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

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