@dso-toolkit/core 88.1.1 → 90.0.0

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

@@ -1,10 +1,24 @@
 'use strict';
 
-var index = require('./index-2aek-b9X.js');
+var index = require('./index-BKUr3Wdg.js');
 var clsx = require('./clsx-BtxeOLZW.js');
+var i18n = require('./i18n-CBaOSyHy.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
-const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dt-scrollable-container-border-end-start-radius:4px;--_dt-scrollable-container-border-end-end-radius:4px;--_dt-scrollable-container-padding-inline:16px;max-block-size:52vh;border-end-start-radius:4px;border-end-end-radius:4px}`;
+const translations = {
+    en: {
+        "dso-legend": {
+            closeLegend: "Close legend",
+        },
+    },
+    nl: {
+        "dso-legend": {
+            closeLegend: "Sluit legenda",
+        },
+    },
+};
+
+const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host ::slotted(dso-legend-group:last-child){margin-block-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dt-scrollable-container-border-end-start-radius:4px;--_dt-scrollable-container-border-end-end-radius:4px;--_dt-scrollable-container-padding-inline:16px;max-block-size:52vh;border-end-start-radius:4px;border-end-end-radius:4px}`;
 
 const Legend = class {
     constructor(hostRef) {
@@ -15,6 +29,7 @@ const Legend = class {
          * TabItems in the legend topbar
          */
         this.tabItems = [];
+        this.text = i18n.i18n(() => this.host, translations);
         this.keyUpHandler = (e) => {
             if (!(e.target instanceof HTMLElement)) {
                 return;
@@ -55,26 +70,23 @@ const Legend = class {
         return this.tabs[this.tabs.length - 1];
     }
     moveFocusToTab(tab) {
-        tab === null || tab === void 0 ? void 0 : tab.focus();
+        tab?.focus();
     }
     moveFocusToPreviousTab(focussedTab) {
-        var _a;
         const index = this.tabs.findIndex((tab) => tab === focussedTab);
-        const next = (_a = this.tabs[index - 1]) !== null && _a !== void 0 ? _a : this.lastTab;
+        const next = this.tabs[index - 1] ?? this.lastTab;
         this.moveFocusToTab(next);
     }
     moveFocusToNextTab(focussedTab) {
-        var _a;
         const index = this.tabs.findIndex((tab) => tab === focussedTab);
-        const next = (_a = this.tabs[index + 1]) !== null && _a !== void 0 ? _a : this.firstTab;
+        const next = this.tabs[index + 1] ?? this.firstTab;
         this.moveFocusToTab(next);
     }
     render() {
-        return (index.h(index.Host, { key: '4f1295cd75af42eeaf438cc7b92604054993bdeb' }, index.h("div", { key: 'f1473d16ec2b6b5035c9aa88dbad40a4233a1529', class: "topbar" }, index.h("div", { key: 'f33777d4ab012cecb17105abb8299426995c86d2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (index.h("button", Object.assign({ class: clsx.clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), index.h("dso-icon-button", { key: '8fc17eeefc63ca51e296212eeeadbfc8ab731d18', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), index.h("dso-scrollable", { key: '553566be6236dde866e739364e7a19aa918d32a8', class: "content" }, index.h("div", { key: '9348aad31e38e42f208301773d58fa784d71c751', role: "tabpanel", tabIndex: 0 }, index.h("slot", { key: '55fd88c643f65474bb691e4100e493c28b22a358' })))));
+        return (index.h(index.Host, { key: '18b65b8e93f592afbd4748e8f740b3e37c8f70ae' }, index.h("div", { key: '20c1927e8ccc27badc91122fcb39b243c1d9de71', class: "topbar" }, index.h("div", { key: 'dcd9a8c4cf7bcecdd10ba918e0df47ff6929a8fb', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (index.h("button", { class: clsx.clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), index.h("dso-icon-button", { key: 'fa3eb71f4bc538a1df4beda9d62260f9930c9651', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), index.h("dso-scrollable", { key: '3ebbfbba7d44ef9470bcc088fca6c799f1c81689', class: "content" }, index.h("div", { key: '071e22193cd0dd97ca1ba6d73427a5f29ee19d0f', role: "tabpanel", tabIndex: 0 }, index.h("slot", { key: '33342dceb976c0557e33baa77471621f3e565dea' })))));
     }
     get host() { return index.getElement(this); }
 };
 Legend.style = legendCss();
 
 exports.dso_legend = Legend;
-//# sourceMappingURL=dso-legend.entry.cjs.js.map

package/dist/cjs/dso-list-button.cjs.entry.js

@@ -1,372 +1,9 @@
 'use strict';
 
-var index = require('./index-2aek-b9X.js');
+var index = require('./index-BKUr3Wdg.js');
 var clsx = require('./clsx-BtxeOLZW.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 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 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;   } }`;
 
 const ListButton = class {
     constructor(hostRef) {
@@ -395,14 +32,12 @@ const ListButton = class {
         });
     }
     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");
+        if (!this.subcontentSlot?.hasAttribute("aria-hidden")) {
+            this.subcontentSlot?.setAttribute("aria-hidden", "true");
         }
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     stepValue(e, direction) {
@@ -438,11 +73,10 @@ const ListButton = class {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (index.h("div", { key: 'a155334345712bda3dd58924d60ccd467923f6fc', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: '1ac7dbc69f1e7b00fa8cd71b03ae0bbc7c3f98ee', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("dso-selectable", { key: '5f1430413821bc31c793b2ccaed2a00509a3cfc6', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && index.h("span", { key: '97302b35983f8659e51b7993619c5d007b9eadc5', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (index.h("span", { key: '8324e5ebf88187d5042e4074a7b5a12cd8eb1fb5', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", index.h("span", { key: '6e0fe1caffbfdfa878b904f558b695def1c18f6f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && index.h("span", { key: '9bfec93907458641755c109304a453ebf728b4ad', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (index.h("div", { key: 'e3feb6e6f3aa1f42efa2e632180459b61a22a7a0', class: "subcontent" }, index.h("slot", { key: '2971bc8037dabb734ecaf3faf1c338a3537fcac6', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (index.h("div", { key: '46543874c528b6db91fed7dd19249dc7547bb86b', class: "dso-input-number" }, this.count > 1 && (index.h(index.Fragment, { key: 'cf2305047c3bf6f8384829c694ef57642bdd9bbf' }, index.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") }), index.h("span", { key: 'e5c419497219f628e34bfdb997fe3b357a9331bd', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), index.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") })))));
+        return (index.h("div", { key: 'f690e4749d2c9ae0d26260e9b7954064ce819f66', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: '84a3c91317ca7638ab7a825cbf48f82a215eaf84', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("dso-selectable", { key: '9584f2d33413500d06cf9697618d86bf79c2bf41', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, index.h("span", { key: '24f581bced17e7ef4dc869c93f7a77d294f83913' }, this.label, this.sublabel && index.h("span", { key: '7862beff9b1a9fda69e0f56c8696e63974328c8f', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (index.h("span", { key: '42959be18105f323519c45cfde6a19521ebd9b0f', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", index.h("span", { key: 'ac71b57bbb9364081d27d8a490816b0d0bbdfd1e', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && index.h("span", { key: 'b6ff6812d7ca086e692c73cfaaa0a659afee8ad2', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (index.h("div", { key: '2e22c7b5c5791c935e28424207e179f0d380a100', class: "subcontent" }, index.h("slot", { key: '4a5348d41c36b72ea3f23ca3a882629374dc6fff', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (index.h("div", { key: '1dc4939e3e40d5e0c5128b474ed10f61ec405638', class: "dso-input-number" }, this.count > 1 && (index.h(index.Fragment, { key: 'c1b679d8e35c45b03f6b06998eca12604cf3867c' }, index.h("dso-icon-button", { key: '780b108ff249895a350ba12ea962a8dfe66f2a30', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), index.h("span", { key: 'd4560eab67b114980224567be80a3efa4abddb38', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), index.h("dso-icon-button", { key: '44a0fbc42f5fd080e0c2129169355de92d4e5549', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     get host() { return index.getElement(this); }
 };
 ListButton.style = listButtonCss();
 
 exports.dso_list_button = ListButton;
-//# sourceMappingURL=dso-list-button.entry.cjs.js.map

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

@@ -1,147 +1,9 @@
 'use strict';
 
-var index = require('./index-2aek-b9X.js');
+var index = require('./index-BKUr3Wdg.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
-const logoCss = () => `:host {
-  block-size: var(--_dso-logo-block-size, 3rem);
-  display: grid;
-  grid-template-areas: "target wordmark label";
-  grid-template-columns: repeat(3, max-content);
-  grid-template-rows: 100%;
-  gap: 16px;
-  font-size: 1.5rem;
-  font-weight: 500;
-  align-items: center;
-  container-type: size;
-  container-name: logo;
-}
-:host .logo-url,
-:host .logo-label-url {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  text-decoration: none;
-}
-:host .logo-url:hover, :host .logo-url:focus-visible, :host .logo-url:active,
-:host .logo-label-url:hover,
-:host .logo-label-url:focus-visible,
-:host .logo-label-url:active {
-  text-decoration: underline;
-}
-:host .logo-url, :host .logo-url:hover, :host .logo-url:focus, :host .logo-url:visited,
-:host .logo-label-url,
-:host .logo-label-url:hover,
-:host .logo-label-url:focus,
-:host .logo-label-url:visited {
-  color: #275937;
-}
-
-:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) {
-  grid-template-areas: "targetwordmark label";
-}
-:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-url,
-:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-ribbon {
-  grid-area: targetwordmark;
-}
-
-.logo-label-url {
-  grid-area: label;
-}
-
-.logo-target {
-  grid-area: target;
-  max-block-size: 48px;
-  max-inline-size: 48px;
-  inline-size: 100%;
-  display: block;
-  aspect-ratio: 1/1;
-}
-
-.logo-wordmark {
-  grid-area: wordmark;
-}
-
-@container logo (max-height: 47px) {
-  .logo-wordmark,
-  .logo-label {
-    font-size: 50cqb;
-    line-height: 1;
-  }
-}
-.logo-wordmark-omgevings {
-  color: #39870c;
-}
-
-.logo-wordmark-loket {
-  color: #275937;
-}
-
-.logo-label {
-  grid-area: label;
-  color: #275937;
-  margin-inline-start: 1rem;
-}
-
-.logo-ribbon {
-  grid-area: wordmark;
-  place-self: start end;
-  display: flex;
-  place-items: center;
-  background-color: #8b4a6a;
-  border-radius: 3px;
-  transform: rotate(3deg);
-  padding-block: 0;
-  padding-inline: 8px;
-  font-size: 0.75rem;
-  font-weight: normal;
-  text-transform: uppercase;
-  color: #fff;
-}
-@container logo (max-height: 47px) {
-  .logo-ribbon {
-    block-size: 28cqb;
-    font-size: 25cqb;
-  }
-}
-
-.inner {
-  fill: #e17000;
-}
-
-.middle {
-  fill: #275937;
-}
-
-.outer {
-  fill: #80bc00;
-}
-
-@media screen and (max-width: 767px) {
-  :host([label]) {
-    grid-template-areas: "target label";
-    grid-template-columns: max-content minmax(130px, max-content);
-  }
-  :host([label]) .logo-wordmark {
-    display: none;
-  }
-  :host([label]) .logo-ribbon {
-    grid-area: label;
-  }
-  :host([label]) .logo-label {
-    margin-inline-start: 0;
-    text-wrap: balance;
-    overflow-wrap: normal;
-  }
-  :host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {
-    grid-area: label;
-  }
-}
-@media screen and (max-width: 480px) {
-  .logo-ribbon {
-    transform: rotate(3deg) translateY(-7px);
-  }
-}`;
+const logoCss = () => `:host{block-size:var(--_dso-logo-block-size, 3rem);display:grid;grid-template-areas:"target wordmark label";grid-template-columns:repeat(3, max-content);grid-template-rows:100%;gap:16px;font-size:1.5rem;font-weight:500;align-items:center;container-type:size;container-name:logo}:host .logo-url,:host .logo-label-url{display:flex;align-items:center;gap:16px;text-decoration:none}:host .logo-url:hover,:host .logo-url:focus-visible,:host .logo-url:active,:host .logo-label-url:hover,:host .logo-label-url:focus-visible,:host .logo-label-url:active{text-decoration:underline}:host .logo-url,:host .logo-url:hover,:host .logo-url:focus,:host .logo-url:visited,:host .logo-label-url,:host .logo-label-url:hover,:host .logo-label-url:focus,:host .logo-label-url:visited{color:#275937}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])){grid-template-areas:"targetwordmark label"}:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-url,:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-ribbon{grid-area:targetwordmark}.logo-label-url{grid-area:label}.logo-target{grid-area:target;max-block-size:48px;max-inline-size:48px;inline-size:100%;display:block;aspect-ratio:1/1}.logo-wordmark{grid-area:wordmark}@container logo (max-height: 47px){.logo-wordmark,.logo-label{font-size:50cqb;line-height:1}}.logo-wordmark-omgevings{color:#39870c}.logo-wordmark-loket{color:#275937}.logo-label{grid-area:label;color:#275937;margin-inline-start:1rem}.logo-ribbon{grid-area:wordmark;place-self:start end;display:flex;place-items:center;background-color:#8b4a6a;border-radius:3px;transform:rotate(3deg);padding-block:0;padding-inline:8px;font-size:0.75rem;font-weight:normal;text-transform:uppercase;color:#fff}@container logo (max-height: 47px){.logo-ribbon{block-size:28cqb;font-size:25cqb}}.inner{fill:#e17000}.middle{fill:#275937}.outer{fill:#80bc00}@media screen and (max-width: 767px){:host([label]){grid-template-areas:"target label";grid-template-columns:max-content minmax(130px, max-content)}:host([label]) .logo-wordmark{display:none}:host([label]) .logo-ribbon{grid-area:label}:host([label]) .logo-label{margin-inline-start:0;text-wrap:balance;overflow-wrap:normal}:host([logo-url][ribbon]) .logo-label-url+.logo-ribbon{grid-area:label}}@media screen and (max-width: 480px){.logo-ribbon{transform:rotate(3deg) translateY(-7px)}}`;
 
 const DsoLogo = ({ name }) => {
     const splittedName = name.split("|");
@@ -169,10 +31,9 @@ const Logo = class {
     }
     render() {
         return (index.h(index.Fragment, null, this.logoUrl ? (index.h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, index.h(DsoLogo, { name: this.name }))) : (index.h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: 'e3dc493316f373195f1f8cf1c5e190282486796e', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: '609cde8cd31ab2b9591fae3ecebb31e44a8069a9', class: "logo-ribbon" }, this.ribbon)));
     }
 };
 Logo.style = logoCss();
 
 exports.dso_logo = Logo;
-//# sourceMappingURL=dso-logo.entry.cjs.js.map