@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/components/dso-list-button.js

@@ -1,513 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Fragment, transformTag } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.js';
-import { d as defineCustomElement$7 } from './icon.js';
-import { d as defineCustomElement$6 } from './icon-button.js';
-import { d as defineCustomElement$5 } from './info.js';
-import { d as defineCustomElement$4 } from './info-button.js';
-import { d as defineCustomElement$3 } from './scrollable.js';
-import { d as defineCustomElement$2 } from './selectable.js';
-
-const listButtonCss = () => `*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
-
-:host {
-  display: block;
-}
-
-.sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  border: 0;
-  overflow: hidden;
-  clip-path: rect(0 0 0 0);
-}
-
-.dso-tertiary {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: start;
-  user-select: none;
-  vertical-align: middle;
-  background-clip: padding-box;
-}
-.dso-tertiary:focus, .dso-tertiary:focus-visible {
-  outline-offset: 2px;
-}
-.dso-tertiary:active {
-  outline: 0;
-}
-.dso-tertiary {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: start;
-  user-select: none;
-  vertical-align: middle;
-  background-clip: padding-box;
-}
-.dso-tertiary:focus, .dso-tertiary:focus-visible {
-  outline-offset: 2px;
-}
-.dso-tertiary:active {
-  outline: 0;
-}
-.dso-tertiary {
-  background-color: var(--_dso-button-tertiary-background-color, );
-  border-color: var(--_dso-button-tertiary-border-color, );
-  color: var(--_dso-button-tertiary-color, #39870c);
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: auto;
-  padding-block: 11px;
-  padding-inline: 15px;
-}
-.dso-tertiary:hover {
-  background-color: var(--_dso-button-tertiary-hover-background-color, );
-  border-color: var(--_dso-button-tertiary-hover-border-color, );
-  color: var(--_dso-button-tertiary-hover-color, #275937);
-}
-.dso-tertiary:active {
-  background-color: var(--_dso-button-tertiary-active-background-color, );
-  border-color: var(--_dso-button-tertiary-active-border-color, );
-  color: var(--_dso-button-tertiary-active-color, #173521);
-}
-.dso-tertiary[disabled], .dso-tertiary[disabled]:hover {
-  background-color: var(--_dso-button-tertiary-disabled-background-color, );
-  border-color: var(--_dso-button-tertiary-disabled-border-color, );
-  color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
-}
-.dso-tertiary.dso-small {
-  line-height: 1rem;
-}
-.dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-.dso-tertiary.dso-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.dso-tertiary.dso-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.dso-tertiary.dso-extra-small {
-  line-height: 1rem;
-}
-.dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-.dso-tertiary.dso-extra-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.dso-tertiary.dso-extra-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.dso-tertiary.dso-extra-small {
-  padding-block: 9px;
-}
-.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
-  margin-inline-start: -8px;
-}
-.dso-tertiary span:not(.sr-only) + dso-icon {
-  margin-inline-start: 8px;
-  margin-inline-end: -8px;
-}
-.dso-tertiary dso-icon + span:not(.sr-only) {
-  margin-inline-start: 8px;
-}
-.dso-tertiary {
-  border: 0;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
-}
-.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
-  color: #39870c;
-}
-.dso-tertiary:not([disabled]):hover {
-  text-decoration: underline;
-  text-underline-position: under;
-}
-.dso-tertiary.dso-align {
-  line-height: calc(1.5em - 1px);
-  padding-block: 11px;
-  padding-inline: 0;
-  position: relative;
-}
-.dso-tertiary.dso-truncate {
-  max-inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.dso-tertiary.dso-spinner-left::before {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-.dso-tertiary.dso-spinner-right::after {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-.dso-tertiary dso-icon + span:not(.sr-only),
-.dso-tertiary span:not(.sr-only) + dso-icon {
-  margin-inline-start: 8px;
-}
-.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-inline-start: 0;
-}
-.dso-tertiary dso-icon,
-.dso-tertiary span {
-  vertical-align: middle;
-}
-.dso-tertiary {
-  cursor: pointer;
-}
-
-.dso-input-number {
-  align-items: center;
-  display: flex;
-}
-.dso-input-number .dso-input-step-counter {
-  text-align: center;
-  inline-size: 1.5rem;
-  font-size: 14px;
-}
-
-.dso-button-group {
-  display: flex;
-  flex-direction: row;
-}
-.dso-button-group.dso-disabled > * {
-  background-color: #fff;
-  border-color: #e5e5e5;
-  color: #666;
-  pointer-events: none;
-}
-.dso-button-group > * {
-  border-radius: 0;
-}
-.dso-button-group > *:first-child {
-  border-radius: 4px 0 0 4px;
-}
-.dso-button-group > *:not(:first-child) {
-  border-inline-start-style: none !important;
-}
-.dso-button-group > *:last-child {
-  border-radius: 0 4px 4px 0;
-}
-.dso-button-group > *:only-child {
-  border-radius: 4px;
-}
-.dso-button-group > .dso-input-number {
-  border-style: solid;
-  border-width: 1px;
-  flex-wrap: nowrap;
-  padding-block: 0;
-  padding-inline: 16px;
-  background-color: #fff;
-  border-color: #ccc;
-  color: #191919;
-}
-@media screen and (max-width: 767px) {
-  .dso-button-group > .dso-input-number {
-    justify-content: center;
-  }
-}
-.dso-button-group > *:hover + .dso-input-number,
-.dso-button-group > *:focus + .dso-input-number {
-  background-color: #fff;
-  border-color: #d7e7ce;
-  color: #191919;
-}
-.dso-button-group > *.dso-selected + .dso-input-number {
-  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
-  background-color: #fff;
-  border-color: #39870c;
-  color: #191919;
-}
-.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,
-.dso-button-group > *.active + .dso-input-number,
-.dso-button-group > *.active + .dso-input-number:hover {
-  background-color: #fff;
-  border-color: #d7e7ce;
-  color: #191919;
-}
-.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,
-.dso-button-group > *[disabled] + .dso-input-number,
-.dso-button-group > *[disabled] + .dso-input-number:hover {
-  opacity: 1;
-  background-color: #fff;
-  border-color: #ccc;
-  color: #666;
-}
-.dso-button-group .dso-list-button {
-  padding-inline-end: 15px;
-}
-
-.dso-list-button {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: start;
-  user-select: none;
-  vertical-align: middle;
-  background-clip: padding-box;
-}
-.dso-list-button:focus, .dso-list-button:focus-visible {
-  outline-offset: 2px;
-}
-.dso-list-button:active {
-  outline: 0;
-}
-.dso-list-button {
-  background-color: #fff;
-  border-color: #ccc;
-  color: #191919;
-  border-radius: 4px;
-  border-width: 1px;
-  border-style: solid;
-  font-weight: 600;
-  padding-block: 15px;
-  padding-inline: 15px 47px;
-  position: relative;
-  text-align: start;
-  white-space: normal;
-  inline-size: 100%;
-  cursor: pointer;
-}
-.dso-list-button:hover, .dso-list-button:focus {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #191919;
-}
-.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {
-  background-color: #fff;
-  border-color: #d7e7ce;
-  color: #191919;
-}
-.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {
-  background-color: #fff;
-  border-color: #ccc;
-  color: #666;
-  opacity: 1;
-}
-.dso-list-button dso-selectable:not(:last-child) {
-  margin-block-end: 0;
-}
-.dso-list-button .dso-selectable-container label {
-  font-weight: 700;
-}
-.dso-list-button.dso-selected {
-  border-color: #39870c;
-  border-width: 1px;
-  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;
-}
-@media screen and (min-width: 768px) {
-  .dso-list-button.dso-selected.dso-single-count {
-    border-inline-end: 0;
-    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;
-  }
-}
-.dso-list-button label {
-  cursor: inherit;
-}
-.dso-list-button > span {
-  display: block;
-}
-.dso-list-button .dso-sublabel,
-.dso-list-button .subcontent {
-  font-weight: 400;
-  inline-size: 100%;
-  padding-inline-start: 32px;
-}
-.dso-list-button dso-icon {
-  block-size: 24px;
-  color: #39870c;
-  inset-block-start: 15px;
-  inset-inline-end: 15px;
-  inline-size: 24px;
-  break-before: page;
-  position: absolute;
-}
-@media screen and (max-width: 767px) {
-  .dso-list-button.dso-selected.dso-single-count::after {
-    inline-size: 0;
-  }
-}`;
-
-const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsoCountChange = createEvent(this, "dsoCountChange", 7);
-        this.dsoSelectedChange = createEvent(this, "dsoSelectedChange", 7);
-        /**
-         * Whether the List Button is checked.
-         */
-        this.checked = false;
-        /**
-         * Whether the List Button is disabled.
-         */
-        this.disabled = false;
-    }
-    get subcontentSlot() {
-        return this.host.querySelector("[slot='subcontent']");
-    }
-    connectedCallback() {
-        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
-        this.mutationObserver.observe(this.host, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-            attributes: true,
-        });
-    }
-    componentDidRender() {
-        var _a, _b;
-        if (!((_a = this.subcontentSlot) === null || _a === void 0 ? void 0 : _a.hasAttribute("aria-hidden"))) {
-            (_b = this.subcontentSlot) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        delete this.mutationObserver;
-    }
-    stepValue(e, direction) {
-        if (typeof this.count === "number") {
-            const newValue = direction === "increment" ? this.count + 1 : this.count - 1;
-            if (!this.isNewCountValid(newValue)) {
-                return;
-            }
-            this.dsoCountChange.emit({
-                originalEvent: e,
-                count: newValue,
-            });
-        }
-    }
-    handleSelectClick(e) {
-        e.preventDefault();
-        if (this.count !== undefined) {
-            this.dsoCountChange.emit({
-                originalEvent: e,
-                count: this.count > 0 ? 0 : 1,
-            });
-            return;
-        }
-        this.dsoSelectedChange.emit({
-            originalEvent: e,
-            checked: !this.checked,
-        });
-    }
-    isNewCountValid(newValue) {
-        return !(this.min !== undefined &&
-            this.max !== undefined &&
-            (newValue < Number(this.min) || newValue > Number(this.max)));
-    }
-    render() {
-        const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'a155334345712bda3dd58924d60ccd467923f6fc', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '1ac7dbc69f1e7b00fa8cd71b03ae0bbc7c3f98ee', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '5f1430413821bc31c793b2ccaed2a00509a3cfc6', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '97302b35983f8659e51b7993619c5d007b9eadc5', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '8324e5ebf88187d5042e4074a7b5a12cd8eb1fb5', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '6e0fe1caffbfdfa878b904f558b695def1c18f6f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '9bfec93907458641755c109304a453ebf728b4ad', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'e3feb6e6f3aa1f42efa2e632180459b61a22a7a0', class: "subcontent" }, h("slot", { key: '2971bc8037dabb734ecaf3faf1c338a3537fcac6', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '46543874c528b6db91fed7dd19249dc7547bb86b', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'cf2305047c3bf6f8384829c694ef57642bdd9bbf' }, h("dso-icon-button", { key: '6170297a6ce2a60762ba4bf96e59f49097e80d38', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'e5c419497219f628e34bfdb997fe3b357a9331bd', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '225eed4514828a7f1afa06f2c6de8af19ada8b8d', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
-    }
-    get host() { return this; }
-    static get style() { return listButtonCss(); }
-}, [257, "dso-list-button", {
-        "label": [1],
-        "sublabel": [1],
-        "count": [2],
-        "min": [8],
-        "max": [8],
-        "checked": [516],
-        "disabled": [516],
-        "subcontentPrefix": [1, "subcontent-prefix"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-list-button", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button", "dso-scrollable", "dso-selectable"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-list-button":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), ListButton);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "dso-info":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "dso-info-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "dso-scrollable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-selectable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsoListButton = ListButton;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoListButton, defineCustomElement };
-//# sourceMappingURL=dso-list-button.js.map
-
-//# sourceMappingURL=dso-list-button.js.map
+import{proxyCustomElement as o,HTMLElement as t,createEvent as e,forceUpdate as s,h as r,Fragment as i,transformTag as n}from"@stencil/core/internal/client";import{c as a}from"./clsx.js";import{d}from"./icon.js";import{d as l}from"./icon-button.js";import{d as c}from"./info.js";import{d as b}from"./info-button.js";import{d as u}from"./scrollable.js";import{d as p}from"./selectable.js";const f=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoCountChange=e(this,"dsoCountChange",7),this.dsoSelectedChange=e(this,"dsoSelectedChange",7),this.checked=!1,this.disabled=!1}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{characterData:!0,childList:!0,subtree:!0,attributes:!0})}componentDidRender(){this.subcontentSlot?.hasAttribute("aria-hidden")||this.subcontentSlot?.setAttribute("aria-hidden","true")}disconnectedCallback(){this.mutationObserver?.disconnect(),delete this.mutationObserver}stepValue(o,t){if("number"==typeof this.count){const e="increment"===t?this.count+1:this.count-1;if(!this.isNewCountValid(e))return;this.dsoCountChange.emit({originalEvent:o,count:e})}}handleSelectClick(o){o.preventDefault(),void 0===this.count?this.dsoSelectedChange.emit({originalEvent:o,checked:!this.checked}):this.dsoCountChange.emit({originalEvent:o,count:this.count>0?0:1})}isNewCountValid(o){return!(void 0!==this.min&&void 0!==this.max&&(o<Number(this.min)||o>Number(this.max)))}render(){const o=this.checked||void 0!==this.count&&this.count>0;return r("div",{key:"f690e4749d2c9ae0d26260e9b7954064ce819f66",class:a(["dso-button-group",{"dso-disabled":this.disabled}])},r("div",{key:"84a3c91317ca7638ab7a825cbf48f82a215eaf84",class:a(["dso-list-button",{"dso-selected":o,"dso-single-count":1===this.count}]),onClick:o=>this.handleSelectClick(o)},r("dso-selectable",{key:"9584f2d33413500d06cf9697618d86bf79c2bf41",type:"checkbox",value:"list-button",name:"naam",checked:o,disabled:this.disabled},r("span",{key:"24f581bced17e7ef4dc869c93f7a77d294f83913"},this.label,this.sublabel&&r("span",{key:"7862beff9b1a9fda69e0f56c8696e63974328c8f",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&r("span",{key:"42959be18105f323519c45cfde6a19521ebd9b0f",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",r("span",{key:"ac71b57bbb9364081d27d8a490816b0d0bbdfd1e",innerHTML:this.subcontentSlot.innerHTML})))),this.sublabel&&r("span",{key:"b6ff6812d7ca086e692c73cfaaa0a659afee8ad2",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&r("div",{key:"2e22c7b5c5791c935e28424207e179f0d380a100",class:"subcontent"},r("slot",{key:"4a5348d41c36b72ea3f23ca3a882629374dc6fff",name:"subcontent"}))),void 0!==this.count&&this.count>0&&r("div",{key:"1dc4939e3e40d5e0c5128b474ed10f61ec405638",class:"dso-input-number"},this.count>1&&r(i,{key:"c1b679d8e35c45b03f6b06998eca12604cf3867c"},r("dso-icon-button",{key:"780b108ff249895a350ba12ea962a8dfe66f2a30",label:"Aantal verlagen",variant:"tertiary",icon:"minus-circle-outline",disabled:this.count===Number(this.min)||this.disabled,onDsoClick:o=>this.stepValue(o,"decrement")}),r("span",{key:"d4560eab67b114980224567be80a3efa4abddb38",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),r("dso-icon-button",{key:"44a0fbc42f5fd080e0c2129169355de92d4e5549",label:"Aantal verhogen",variant:"tertiary",icon:"plus-circle-outline",disabled:this.count===Number(this.max)||this.disabled,onDsoClick:o=>this.stepValue(o,"increment")})))}get host(){return this}static get style(){return"*, *::after, *::before {   box-sizing: border-box; }  :host {   display: block; }  .sr-only {   position: absolute;   inline-size: 1px;   block-size: 1px;   padding: 0;   margin: -1px;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 0); }  .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: start;   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: start;   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary {   background-color: var(--_dso-button-tertiary-background-color, );   border-color: var(--_dso-button-tertiary-border-color, );   color: var(--_dso-button-tertiary-color, #39870c);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: auto;   padding-block: 11px;   padding-inline: 15px; } .dso-tertiary:hover {   background-color: var(--_dso-button-tertiary-hover-background-color, );   border-color: var(--_dso-button-tertiary-hover-border-color, );   color: var(--_dso-button-tertiary-hover-color, #275937); } .dso-tertiary:active {   background-color: var(--_dso-button-tertiary-active-background-color, );   border-color: var(--_dso-button-tertiary-active-border-color, );   color: var(--_dso-button-tertiary-active-color, #173521); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {   background-color: var(--_dso-button-tertiary-disabled-background-color, );   border-color: var(--_dso-button-tertiary-disabled-border-color, );   color: var(--_dso-button-tertiary-disabled-color, #afcf9d); } .dso-tertiary.dso-small {   line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small {   line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-tertiary.dso-extra-small {   padding-block: 9px; } .dso-tertiary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } .dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } .dso-tertiary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } .dso-tertiary {   border: 0;   line-height: 1;   padding: 0;   background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {   color: #39870c; } .dso-tertiary:not([disabled]):hover {   text-decoration: underline;   text-underline-position: under; } .dso-tertiary.dso-align {   line-height: calc(1.5em - 1px);   padding-block: 11px;   padding-inline: 0;   position: relative; } .dso-tertiary.dso-truncate {   max-inline-size: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } .dso-tertiary.dso-spinner-left::before {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: middle;   inline-size: 24px;   margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after {   background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\");   background-repeat: no-repeat;   content: \"\";   display: inline-block;   block-size: 24px;   vertical-align: middle;   inline-size: 24px;   margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px; } .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only), .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left], .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {   margin-inline-start: 0; } .dso-tertiary dso-icon, .dso-tertiary span {   vertical-align: middle; } .dso-tertiary {   cursor: pointer; }  .dso-input-number {   align-items: center;   display: flex; } .dso-input-number .dso-input-step-counter {   text-align: center;   inline-size: 1.5rem;   font-size: 14px; }  .dso-button-group {   display: flex;   flex-direction: row; } .dso-button-group.dso-disabled > * {   background-color: #fff;   border-color: #e5e5e5;   color: #666;   pointer-events: none; } .dso-button-group > * {   border-radius: 0; } .dso-button-group > *:first-child {   border-radius: 4px 0 0 4px; } .dso-button-group > *:not(:first-child) {   border-inline-start-style: none !important; } .dso-button-group > *:last-child {   border-radius: 0 4px 4px 0; } .dso-button-group > *:only-child {   border-radius: 4px; } .dso-button-group > .dso-input-number {   border-style: solid;   border-width: 1px;   flex-wrap: nowrap;   padding-block: 0;   padding-inline: 16px;   background-color: #fff;   border-color: #ccc;   color: #191919; } @media screen and (max-width: 767px) {   .dso-button-group > .dso-input-number {     justify-content: center;   } } .dso-button-group > *:hover + .dso-input-number, .dso-button-group > *:focus + .dso-input-number {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-button-group > *.dso-selected + .dso-input-number {   box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;   background-color: #fff;   border-color: #39870c;   color: #191919; } .dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover, .dso-button-group > *.active + .dso-input-number, .dso-button-group > *.active + .dso-input-number:hover {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover, .dso-button-group > *[disabled] + .dso-input-number, .dso-button-group > *[disabled] + .dso-input-number:hover {   opacity: 1;   background-color: #fff;   border-color: #ccc;   color: #666; } .dso-button-group .dso-list-button {   padding-inline-end: 15px; }  .dso-list-button {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: start;   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-list-button:focus, .dso-list-button:focus-visible {   outline-offset: 2px; } .dso-list-button:active {   outline: 0; } .dso-list-button {   background-color: #fff;   border-color: #ccc;   color: #191919;   border-radius: 4px;   border-width: 1px;   border-style: solid;   font-weight: 600;   padding-block: 15px;   padding-inline: 15px 47px;   position: relative;   text-align: start;   white-space: normal;   inline-size: 100%;   cursor: pointer; } .dso-list-button:hover, .dso-list-button:focus {   background-color: #fff;   border-color: #39870c;   color: #191919; } .dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {   background-color: #fff;   border-color: #d7e7ce;   color: #191919; } .dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {   background-color: #fff;   border-color: #ccc;   color: #666;   opacity: 1; } .dso-list-button dso-selectable:not(:last-child) {   margin-block-end: 0; } .dso-list-button .dso-selectable-container label {   font-weight: 700; } .dso-list-button.dso-selected {   border-color: #39870c;   border-width: 1px;   box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c; } @media screen and (min-width: 768px) {   .dso-list-button.dso-selected.dso-single-count {     border-inline-end: 0;     box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;   } } .dso-list-button label {   cursor: inherit; } .dso-list-button > span {   display: block; } .dso-list-button .dso-sublabel, .dso-list-button .subcontent {   font-weight: 400;   inline-size: 100%;   padding-inline-start: 32px; } .dso-list-button dso-icon {   block-size: 24px;   color: #39870c;   inset-block-start: 15px;   inset-inline-end: 15px;   inline-size: 24px;   break-before: page;   position: absolute; } @media screen and (max-width: 767px) {   .dso-list-button.dso-selected.dso-single-count::after {     inline-size: 0;   } }"}},[257,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],subcontentPrefix:[1,"subcontent-prefix"]}]),h=f,g=function(){"undefined"!=typeof customElements&&["dso-list-button","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((o=>{switch(o){case"dso-list-button":customElements.get(n(o))||customElements.define(n(o),f);break;case"dso-icon":customElements.get(n(o))||d();break;case"dso-icon-button":customElements.get(n(o))||l();break;case"dso-info":customElements.get(n(o))||c();break;case"dso-info-button":customElements.get(n(o))||b();break;case"dso-scrollable":customElements.get(n(o))||u();break;case"dso-selectable":customElements.get(n(o))||p()}}))};export{h as DsoListButton,g as defineCustomElement}