@dso-toolkit/core 62.18.0 → 62.20.0

package/dist/esm/dso-legend-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-legend-item.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,ygHAAygH,CAAC;AAChiH,4BAAe,aAAa;;MCaf,UAAU;;;;;;wBAQV,KAAK;;;wBAiCL,KAAK;;IAEhB,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KACnD;IAED,IAAI,wBAAwB;QAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;KAC3D;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACjD;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QACrD,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC;QACjD,MAAM,YAAY,GAAG,IAAI,CAAC,wBAAwB,KAAK,IAAI,CAAC;QAE5D,QACE,EAAC,IAAI,qDAAC,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAChG,4DACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;gBACzB,oBAAoB,EAAE,SAAS;gBAC/B,wBAAwB,EAAE,YAAY;aACvC,CAAC,IAEF,4DAAK,MAAM,EAAE,CAAC,SAAS,IACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,8DACE,8DAAa,CACT,EACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,KACpC,sEAAe,QAAQ,EAAC,QAAQ,IAAE,IAAI,CAAC,eAAe,CAAiB,CACxE,EACA,IAAI,CAAC,SAAS,KACb,+DAAQ,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IACrG,6DAAM,KAAK,EAAC,SAAS,+BAAgC,EACrD,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACV,EAEA,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,KACxB,+DAAQ,EAAE,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IACpF,6DAAM,KAAK,EAAC,SAAS,6BAA8B,EACnD,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAI,CAC7C,CACV,CACG,EACN,4DAAK,MAAM,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,IACpE,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n  display: flex;\r\n  position: relative;\r\n\r\n  &.legend-item-symbol {\r\n    + .body {\r\n      margin-inline-start: legend-item-variables.$symbol-width + units.$u1;\r\n    }\r\n  }\r\n\r\n  &.legend-item-selectable {\r\n    + .body {\r\n      margin-inline-start: legend-item-variables.$selectable-width;\r\n    }\r\n\r\n    &.legend-item-symbol {\r\n      + .body {\r\n        margin-inline-start: legend-item-variables.$symbol-width + units.$u1 + legend-item-variables.$selectable-width;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n  position: absolute;\r\n  inset-inline-end: 0;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showBody = false;\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\":scope > dso-selectable\");\r\n  }\r\n\r\n  get bodySlottedElement() {\r\n    return this.host.querySelector(\"[slot='body']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasBody = this.bodySlottedElement !== null;\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div\r\n          class={clsx(\"legend-item\", {\r\n            \"legend-item-symbol\": hasSymbol,\r\n            \"legend-item-selectable\": isSelectable,\r\n          })}\r\n        >\r\n          <div hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div>\r\n            <slot></slot>\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n          {this.removable && (\r\n            <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n              <span class=\"sr-only\">Legenda item verwijderen</span>\r\n              <dso-icon icon=\"trash\"></dso-icon>\r\n            </button>\r\n          )}\r\n\r\n          {hasBody && !this.disabled && (\r\n            <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n              <span class=\"sr-only\">Legenda item aanpassen</span>\r\n              <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n            </button>\r\n          )}\r\n        </div>\r\n        <div hidden={!hasBody || this.disabled || !this.showBody} class=\"body\">\r\n          <slot name=\"body\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,133 +1,134 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getElement } from './index-528d5213.js';
-import { c as createFocusTrap } from './focus-trap.esm-d8deb1f0.js';
-import { c as clsx } from './clsx-93f1b68e.js';
-import './index.esm-7e16e884.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getElement } from './index-2e1b7388.js';
+import { c as createFocusTrap } from './focus-trap.esm-f16e876b.js';
+import { c as clsx } from './clsx-297c1ffe.js';
+import './index.esm-7a561c35.js';
 
 const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding: 0 0 0 32px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n  cursor: pointer;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
+const DsoListButtonStyle0 = listButtonCss;
 
 const ListButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dsoCountChange = createEvent(this, "dsoCountChange", 7);
-    this.dsoSelectedChange = createEvent(this, "dsoSelectedChange", 7);
-    this.manualInputWrapperElement = undefined;
-    this.manualCount = undefined;
-    this.label = undefined;
-    this.sublabel = undefined;
-    this.count = undefined;
-    this.min = undefined;
-    this.max = undefined;
-    this.checked = false;
-    this.disabled = false;
-    this.subcontentPrefix = undefined;
-    this.manual = true;
-  }
-  get subcontentSlot() {
-    return this.host.querySelector("[slot='subcontent']");
-  }
-  watchManualCallback() {
-    if (!this.manual && this.manualCount) {
-      this.stopManualCountInput();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoCountChange = createEvent(this, "dsoCountChange", 7);
+        this.dsoSelectedChange = createEvent(this, "dsoSelectedChange", 7);
+        this.manualInputWrapperElement = undefined;
+        this.manualCount = undefined;
+        this.label = undefined;
+        this.sublabel = undefined;
+        this.count = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.checked = false;
+        this.disabled = false;
+        this.subcontentPrefix = undefined;
+        this.manual = true;
     }
-  }
-  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 (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {
-      this.trap = createFocusTrap(this.manualInputWrapperElement, {
-        escapeDeactivates: true,
-        setReturnFocus: false,
-        clickOutsideDeactivates: (e) => {
-          this.setCount(e);
-          return true;
-        },
-        onDeactivate: () => this.stopManualCountInput(),
-        onPostDeactivate: () => { var _a; return (_a = this.manualInputButtonElement) === null || _a === void 0 ? void 0 : _a.focus(); },
-      }).activate();
+    get subcontentSlot() {
+        return this.host.querySelector("[slot='subcontent']");
     }
-    else if (this.manualCount === undefined && this.trap) {
-      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-      delete this.trap;
+    watchManualCallback() {
+        if (!this.manual && this.manualCount) {
+            this.stopManualCountInput();
+        }
     }
-    (_b = this.subcontentSlot) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
-  }
-  disconnectedCallback() {
-    var _a, _b;
-    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-    (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    delete this.mutationObserver;
-  }
-  handleOnChange({ target }) {
-    if (target instanceof HTMLInputElement) {
-      this.manualCount = target.valueAsNumber;
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+        this.mutationObserver.observe(this.host, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
     }
-  }
-  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,
-      });
+    componentDidRender() {
+        var _a, _b;
+        if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {
+            this.trap = createFocusTrap(this.manualInputWrapperElement, {
+                escapeDeactivates: true,
+                setReturnFocus: false,
+                clickOutsideDeactivates: (e) => {
+                    this.setCount(e);
+                    return true;
+                },
+                onDeactivate: () => this.stopManualCountInput(),
+                onPostDeactivate: () => { var _a; return (_a = this.manualInputButtonElement) === null || _a === void 0 ? void 0 : _a.focus(); },
+            }).activate();
+        }
+        else if (this.manualCount === undefined && this.trap) {
+            (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+            delete this.trap;
+        }
+        (_b = this.subcontentSlot) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
     }
-  }
-  setCount(e) {
-    e.preventDefault();
-    if (typeof this.manualCount === "number" && this.isNewCountValid(this.manualCount)) {
-      this.dsoCountChange.emit({
-        originalEvent: e,
-        count: this.manualCount,
-      });
-      this.stopManualCountInput();
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+        (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        delete this.mutationObserver;
     }
-  }
-  handleSelectClick(e) {
-    e.preventDefault();
-    if (this.count !== undefined) {
-      this.dsoCountChange.emit({
-        originalEvent: e,
-        count: this.count > 0 ? 0 : 1,
-      });
-      return;
+    handleOnChange({ target }) {
+        if (target instanceof HTMLInputElement) {
+            this.manualCount = target.valueAsNumber;
+        }
     }
-    this.dsoSelectedChange.emit({
-      originalEvent: e,
-      checked: !this.checked,
-    });
-  }
-  startManualCountInput() {
-    this.manualCount = this.count;
-  }
-  stopManualCountInput() {
-    this.manualCount = undefined;
-  }
-  isNewCountValid(newValue) {
-    return !(this.min !== undefined &&
-      this.max !== undefined &&
-      (newValue < Number(this.min) || newValue > Number(this.max)));
-  }
-  render() {
-    const showButtonInputs = this.manualCount === undefined;
-    const selected = this.checked || (this.count !== undefined && this.count > 0);
-    return (h("div", { class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { class: "dso-selectable" }, h("input", { id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { icon: "minus-circle" }), h("span", { class: "sr-only" }, "Aantal verlagen"))), h("div", { class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { onSubmit: (e) => this.setCount(e) }, h("div", { ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (h("button", { class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { icon: "plus-circle" }), h("span", { class: "sr-only" }, "Aantal verhogen")))))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "manual": ["watchManualCallback"]
-  }; }
+    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,
+            });
+        }
+    }
+    setCount(e) {
+        e.preventDefault();
+        if (typeof this.manualCount === "number" && this.isNewCountValid(this.manualCount)) {
+            this.dsoCountChange.emit({
+                originalEvent: e,
+                count: this.manualCount,
+            });
+            this.stopManualCountInput();
+        }
+    }
+    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,
+        });
+    }
+    startManualCountInput() {
+        this.manualCount = this.count;
+    }
+    stopManualCountInput() {
+        this.manualCount = undefined;
+    }
+    isNewCountValid(newValue) {
+        return !(this.min !== undefined &&
+            this.max !== undefined &&
+            (newValue < Number(this.min) || newValue > Number(this.max)));
+    }
+    render() {
+        const showButtonInputs = this.manualCount === undefined;
+        const selected = this.checked || (this.count !== undefined && this.count > 0);
+        return (h("div", { key: '595469d188c512dc1b34eda805e41c564e29ba4a', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '5111da2a36969b0acae7190c2613124d9217ed8b', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: '4db309ba5edc6caaccc40ce6016bea0fa4997df4', class: "dso-selectable" }, h("input", { key: '6f4f46ee4fd6705e169ee622b4134e0ad561a505', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: '9fedd5d531c56983b5c89d7bf65a47fa0aca3523', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '002a567fe3d9504f27be61bf801a8ae48decd5d1', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: '432d4922ddcc649daa4f1c9311250748b39b89f5', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '894a6fa32ca6edeab9dd436d50c7b063a1a5273b', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: 'da5f033e670f95b2893df0301f3a23f37c0df382', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '7b4384dc1b1eaeb9255eb3e2937a95635c2567a5', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { key: '479bab779cc2e589289a6fbb694c71a62194019b', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '5cff6d05687291a9bf52940a93358fe0f25a8305', icon: "minus-circle" }), h("span", { key: '5e7295c692372eba158405fdebc5c02bcc361b2f', class: "sr-only" }, "Aantal verlagen"))), h("div", { key: '057f3e693f7c5f07cef6e5d606e91b8096bb1ed8', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { key: '9497f8c030c2dbb6c9cc59965c83d0ea854a3e21', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { key: '1d8f5e6bdc517a893f78ce9af3175190321a82f3', onSubmit: (e) => this.setCount(e) }, h("div", { key: '80e89a920948228037750489f28a341c7eda82d2', ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { key: '7540fa096742a46fe53504f08a2786d720b49a04', class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (h("button", { key: 'e6f3b0761e87577626308b192332adfe95771601', class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { key: '8834a819b42cfe8b7d2f701927c39a2215ec86c7', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'cf26acf0a0eb6150ac6b6e76b4e1a479b5ff7516', icon: "plus-circle" }), h("span", { key: '3db09a5efa814148c99e38a181aa8d188479742c', class: "sr-only" }, "Aantal verhogen")))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "manual": ["watchManualCallback"]
+    }; }
 };
-ListButton.style = listButtonCss;
+ListButton.style = DsoListButtonStyle0;
 
 export { ListButton as dso_list_button };
 

package/dist/esm/dso-list-button.entry.js.map

@@ -1 +1 @@
-{"file":"dso-list-button.entry.js","mappings":"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","names":[],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n  cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n  @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n  @include selectable.root(\"dso-info\");\r\n\r\n  label {\r\n    font-weight: 700;\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include list-button.root();\r\n\r\n  .dso-sublabel {\r\n    padding-left: selectable.$size + units.$u1;\r\n  }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n  + .dso-list-button,\r\n  + .dso-button-group {\r\n    @include list-button.sibling();\r\n  }\r\n}\r\n\r\n.dso-input-wrapper {\r\n  position: relative;\r\n\r\n  .form-control {\r\n    width: 9ch;\r\n  }\r\n}\r\n\r\n.form-control {\r\n  @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n  background-color: transparent;\r\n  border: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n\r\n.hidden {\r\n  display: none !important;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  h,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  @State()\r\n  private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n  private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n  @State()\r\n  manualCount?: number;\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Allow user to directly input a value.\r\n   *\r\n   * Set to `false` to force users to use plus/minus buttons.\r\n   */\r\n  @Prop()\r\n  manual = true;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  @Watch(\"manual\")\r\n  watchManualCallback() {\r\n    if (!this.manual && this.manualCount) {\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n        escapeDeactivates: true,\r\n        setReturnFocus: false,\r\n\r\n        clickOutsideDeactivates: (e) => {\r\n          this.setCount(e);\r\n\r\n          return true;\r\n        },\r\n        onDeactivate: () => this.stopManualCountInput(),\r\n        onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n      }).activate();\r\n    } else if (this.manualCount === undefined && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n\r\n    this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate();\r\n\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private handleOnChange({ target }: Event): void {\r\n    if (target instanceof HTMLInputElement) {\r\n      this.manualCount = target.valueAsNumber;\r\n    }\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private setCount(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.manualCount,\r\n      });\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private startManualCountInput(): void {\r\n    this.manualCount = this.count;\r\n  }\r\n\r\n  private stopManualCountInput(): void {\r\n    this.manualCount = undefined;\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const showButtonInputs = this.manualCount === undefined;\r\n\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              aria-describedby={\r\n                [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n              }\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n            {this.subcontentSlot && (\r\n              <div class=\"sr-only\" id=\"description\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n                <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.sublabel && (\r\n            <span class=\"dso-sublabel\" id=\"sublabel\">\r\n              {this.sublabel}\r\n            </span>\r\n          )}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.manualCount === undefined && this.count > 1 && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.min) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"decrement\")}\r\n              >\r\n                <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verlagen</span>\r\n              </button>\r\n            )}\r\n\r\n            <div class=\"dso-input-wrapper\">\r\n              {this.manualCount === undefined && this.count > 1 && (\r\n                <input\r\n                  class=\"dso-input-step-counter\"\r\n                  type=\"number\"\r\n                  tabIndex={-1}\r\n                  aria-label=\"Aantal\"\r\n                  value={this.count}\r\n                  readOnly\r\n                />\r\n              )}\r\n\r\n              <form onSubmit={(e) => this.setCount(e)}>\r\n                <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n                  <input\r\n                    class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n                    type=\"number\"\r\n                    aria-label=\"Aantal\"\r\n                    value={this.manualCount}\r\n                    min={this.min}\r\n                    max={this.max}\r\n                    onInput={(e) => this.handleOnChange(e)}\r\n                  />\r\n                </div>\r\n\r\n                {this.manual && (\r\n                  <button\r\n                    class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n                    type={!showButtonInputs ? \"submit\" : \"button\"}\r\n                    disabled={this.disabled}\r\n                    onClick={() => showButtonInputs && this.startManualCountInput()}\r\n                  >\r\n                    {showButtonInputs ? (\r\n                      <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n                    ) : (\r\n                      <span class=\"sr-only\">Zet waarde</span>\r\n                    )}\r\n                  </button>\r\n                )}\r\n              </form>\r\n            </div>\r\n\r\n            {showButtonInputs && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.max) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"increment\")}\r\n              >\r\n                <dso-icon icon=\"plus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verhogen</span>\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-list-button.entry.js","mappings":"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","names":[],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n  cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n  @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n  @include selectable.root(\"dso-info\");\r\n\r\n  label {\r\n    font-weight: 700;\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include list-button.root();\r\n\r\n  .dso-sublabel {\r\n    padding-left: selectable.$size + units.$u1;\r\n  }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n  + .dso-list-button,\r\n  + .dso-button-group {\r\n    @include list-button.sibling();\r\n  }\r\n}\r\n\r\n.dso-input-wrapper {\r\n  position: relative;\r\n\r\n  .form-control {\r\n    width: 9ch;\r\n  }\r\n}\r\n\r\n.form-control {\r\n  @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n  background-color: transparent;\r\n  border: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n\r\n.hidden {\r\n  display: none !important;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  h,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  @State()\r\n  private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n  private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n  @State()\r\n  manualCount?: number;\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Allow user to directly input a value.\r\n   *\r\n   * Set to `false` to force users to use plus/minus buttons.\r\n   */\r\n  @Prop()\r\n  manual = true;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  @Watch(\"manual\")\r\n  watchManualCallback() {\r\n    if (!this.manual && this.manualCount) {\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n        escapeDeactivates: true,\r\n        setReturnFocus: false,\r\n\r\n        clickOutsideDeactivates: (e) => {\r\n          this.setCount(e);\r\n\r\n          return true;\r\n        },\r\n        onDeactivate: () => this.stopManualCountInput(),\r\n        onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n      }).activate();\r\n    } else if (this.manualCount === undefined && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n\r\n    this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate();\r\n\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private handleOnChange({ target }: Event): void {\r\n    if (target instanceof HTMLInputElement) {\r\n      this.manualCount = target.valueAsNumber;\r\n    }\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private setCount(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.manualCount,\r\n      });\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private startManualCountInput(): void {\r\n    this.manualCount = this.count;\r\n  }\r\n\r\n  private stopManualCountInput(): void {\r\n    this.manualCount = undefined;\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const showButtonInputs = this.manualCount === undefined;\r\n\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              aria-describedby={\r\n                [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n              }\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n            {this.subcontentSlot && (\r\n              <div class=\"sr-only\" id=\"description\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n                <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.sublabel && (\r\n            <span class=\"dso-sublabel\" id=\"sublabel\">\r\n              {this.sublabel}\r\n            </span>\r\n          )}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.manualCount === undefined && this.count > 1 && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.min) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"decrement\")}\r\n              >\r\n                <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verlagen</span>\r\n              </button>\r\n            )}\r\n\r\n            <div class=\"dso-input-wrapper\">\r\n              {this.manualCount === undefined && this.count > 1 && (\r\n                <input\r\n                  class=\"dso-input-step-counter\"\r\n                  type=\"number\"\r\n                  tabIndex={-1}\r\n                  aria-label=\"Aantal\"\r\n                  value={this.count}\r\n                  readOnly\r\n                />\r\n              )}\r\n\r\n              <form onSubmit={(e) => this.setCount(e)}>\r\n                <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n                  <input\r\n                    class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n                    type=\"number\"\r\n                    aria-label=\"Aantal\"\r\n                    value={this.manualCount}\r\n                    min={this.min}\r\n                    max={this.max}\r\n                    onInput={(e) => this.handleOnChange(e)}\r\n                  />\r\n                </div>\r\n\r\n                {this.manual && (\r\n                  <button\r\n                    class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n                    type={!showButtonInputs ? \"submit\" : \"button\"}\r\n                    disabled={this.disabled}\r\n                    onClick={() => showButtonInputs && this.startManualCountInput()}\r\n                  >\r\n                    {showButtonInputs ? (\r\n                      <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n                    ) : (\r\n                      <span class=\"sr-only\">Zet waarde</span>\r\n                    )}\r\n                  </button>\r\n                )}\r\n              </form>\r\n            </div>\r\n\r\n            {showButtonInputs && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.max) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"increment\")}\r\n              >\r\n                <dso-icon icon=\"plus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verhogen</span>\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,18 +1,19 @@
-import { r as registerInstance, h, H as Host } from './index-528d5213.js';
+import { r as registerInstance, h, H as Host } from './index-2e1b7388.js';
 
 const logoCss = ":host {\n  max-block-size: 3rem;\n  block-size: 3rem;\n  display: grid;\n  grid-template-areas: \"target wordmark label\";\n  grid-template-columns: repeat(3, max-content);\n  grid-template-rows: 100%;\n  gap: 16px;\n  font-size: 1.5625rem;\n  font-weight: 500;\n  align-items: center;\n  container-type: size;\n  container-name: logo;\n}\n\n.logo-target {\n  grid-area: target;\n  max-block-size: 48px;\n  max-inline-size: 48px;\n  inline-size: 100%;\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo-wordmark {\n  grid-area: wordmark;\n  font-size: 1.5625rem;\n}\n\n@container logo (max-height: 47px) {\n  .logo-wordmark,\n  .logo-label {\n    font-size: 50cqb;\n    line-height: 1;\n  }\n}\n.logo-wordmark-omgevings {\n  color: #39870c;\n}\n\n.logo-wordmark-loket {\n  color: #275937;\n}\n\n.logo-label {\n  grid-area: label;\n  color: #275937;\n  margin-inline-start: 1rem;\n}\n\n.logo-ribbon {\n  grid-area: wordmark;\n  place-self: start end;\n  display: flex;\n  place-items: center;\n  background-color: #8b4a6a;\n  border-radius: 3px;\n  transform: rotate(3deg);\n  padding: 0 8px;\n  font-size: 0.75rem;\n  font-weight: normal;\n  text-transform: uppercase;\n  color: #fff;\n}\n@container logo (max-height: 47px) {\n  .logo-ribbon {\n    block-size: 28cqb;\n    font-size: 25cqb;\n  }\n}\n\n.inner {\n  fill: #e17000;\n}\n\n.middle {\n  fill: #275937;\n}\n\n.outer {\n  fill: #80bc00;\n}\n\n@media screen and (max-width: 767px) {\n  .logo-wordmark {\n    font-size: initial;\n  }\n  :host([label]) {\n    grid-template-areas: \"target label\";\n    grid-template-columns: max-content minmax(130px, max-content);\n  }\n  :host([label]) .logo-wordmark {\n    display: none;\n  }\n  :host([label]) .logo-ribbon {\n    grid-area: label;\n  }\n  :host([label]) .logo-label {\n    margin-inline-start: 0;\n    font-size: initial;\n    text-wrap: balance;\n    overflow-wrap: normal;\n  }\n}\n@media screen and (max-width: 480px) {\n  .logo-ribbon {\n    transform: rotate(3deg) translateY(-7px);\n  }\n}";
+const DsoLogoStyle0 = logoCss;
 
 const Logo = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.label = undefined;
-    this.ribbon = undefined;
-  }
-  render() {
-    return (h(Host, { "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, h("svg", { fill: "none", viewBox: "0 0 48 48", height: "100%", class: "logo-target" }, h("path", { class: "outer", d: "M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z" }), h("path", { class: "middle", d: "M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z" }), h("path", { class: "inner", d: "M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z" })), h("div", { class: "logo-wordmark" }, h("span", { class: "logo-wordmark-omgevings" }, "Omgevings"), h("span", { class: "logo-wordmark-loket" }, "loket")), this.label && h("span", { class: "logo-label" }, this.label), this.ribbon && h("div", { class: "logo-ribbon" }, this.ribbon)));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.label = undefined;
+        this.ribbon = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'af3e148d5fd223144d72c846976442e016f1da95', "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, h("svg", { key: '636c66dfbc9ba81c24db337ae9827e9703080da7', fill: "none", viewBox: "0 0 48 48", height: "100%", class: "logo-target" }, h("path", { key: 'a96d2501cef73c91f6862e7f7d61e895104924ed', class: "outer", d: "M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z" }), h("path", { key: 'fc0bfede97df907f8aa774d63b4dbc8f9ab0aac2', class: "middle", d: "M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z" }), h("path", { key: '7922d7a863ac62e71564d18bf329f6ebda55f29c', class: "inner", d: "M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z" })), h("div", { key: '988ba3831261216e3b5c1b9a5647480bc9d7b817', class: "logo-wordmark" }, h("span", { key: '84388d709db2ecb31be51cbe1736d03e59cdf1e7', class: "logo-wordmark-omgevings" }, "Omgevings"), h("span", { key: '8b0718c57cfb095972c2a5c4edb87f411896bdd4', class: "logo-wordmark-loket" }, "loket")), this.label && h("span", { key: '36ba8516b43749b5b0a53c00dcdfe6e6ce2f7b02', class: "logo-label" }, this.label), this.ribbon && h("div", { key: 'c86c6c5df017f3297f9f7a775bcd746a9fe8893b', class: "logo-ribbon" }, this.ribbon)));
+    }
 };
-Logo.style = logoCss;
+Logo.style = DsoLogoStyle0;
 
 export { Logo as dso_logo };
 

package/dist/esm/dso-logo.entry.js.map

@@ -1 +1 @@
-{"file":"dso-logo.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,49DAA49D;;MCO/9D,IAAI;;;;;;EAgBf,MAAM;IACJ,QACE,EAAC,IAAI,kBAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAC9G,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,IACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG,EACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG,EACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D,EAEN,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,KAAK,EAAC,yBAAyB,gBAAiB,EACtD,YAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C,EAEL,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1D,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,EACP;GACH;;;;;;","names":[],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding: 0 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   *\r\n   */\r\n  @Prop()\r\n  ribbon?: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n          <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n          <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n          <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n        </svg>\r\n\r\n        <div class=\"logo-wordmark\">\r\n          <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n          <span class=\"logo-wordmark-loket\">loket</span>\r\n        </div>\r\n\r\n        {this.label && <span class=\"logo-label\">{this.label}</span>}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-logo.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,49DAA49D,CAAC;AAC7+D,sBAAe,OAAO;;MCMT,IAAI;;;;;;IAgBf,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAC9G,4DAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,IACpE,6DAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG,EACrE,6DAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG,EACpE,6DAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D,EAEN,4DAAK,KAAK,EAAC,eAAe,IACxB,6DAAM,KAAK,EAAC,yBAAyB,gBAAiB,EACtD,6DAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C,EAEL,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1D,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,EACP;KACH;;;;;;","names":[],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding: 0 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   *\r\n   */\r\n  @Prop()\r\n  ribbon?: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n          <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n          <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n          <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n        </svg>\r\n\r\n        <div class=\"logo-wordmark\">\r\n          <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n          <span class=\"logo-wordmark-loket\">loket</span>\r\n        </div>\r\n\r\n        {this.label && <span class=\"logo-label\">{this.label}</span>}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,36 +1,37 @@
-import { r as registerInstance, c as createEvent, h } from './index-528d5213.js';
+import { r as registerInstance, c as createEvent, h } from './index-2e1b7388.js';
 import { v as v4 } from './v4-23648a96.js';
 
 const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
+const DsoMapBaseLayersStyle0 = mapBaseLayersCss;
 
 const MapBaseLayers = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dsoBaseLayerChange = createEvent(this, "dsoBaseLayerChange", 7);
-    this.selectableRefs = {};
-    this.group = v4();
-    this.baseLayers = undefined;
-  }
-  baseLayerChangeHandler(baseLayer) {
-    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });
-  }
-  componentDidRender() {
-    this.baseLayers
-      .filter((l) => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
-      .forEach((o) => {
-      var _a;
-      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
-    });
-    this.previousBaselayers = this.baseLayers;
-  }
-  render() {
-    for (const ref in this.selectableRefs) {
-      delete this.selectableRefs[ref];
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoBaseLayerChange = createEvent(this, "dsoBaseLayerChange", 7);
+        this.selectableRefs = {};
+        this.group = v4();
+        this.baseLayers = undefined;
+    }
+    baseLayerChangeHandler(baseLayer) {
+        this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });
+    }
+    componentDidRender() {
+        this.baseLayers
+            .filter((l) => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+            .forEach((o) => {
+            var _a;
+            (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+        });
+        this.previousBaselayers = this.baseLayers;
+    }
+    render() {
+        for (const ref in this.selectableRefs) {
+            delete this.selectableRefs[ref];
+        }
+        return (h("fieldset", { key: 'de1069481148768ce882022e2439d10c78dea353', class: "form-group dso-radios" }, h("legend", { key: 'c26522cddd21cfb5d35f8ccd7a4d39951b3e1e79', class: "sr-only" }, "Achtergrond"), h("div", { key: '81ad22334e84f5bda6b1987f62ed95d89c269872', class: "dso-label-container" }, h("span", { key: 'f982b307e6b7bff5f97658cf9b7be43aa4d9ca3f', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: '4c8562c76ecb35a7a16b08580c0d0b032a93048f', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
-    return (h("fieldset", { class: "form-group dso-radios" }, h("legend", { class: "sr-only" }, "Achtergrond"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
-  }
 };
-MapBaseLayers.style = mapBaseLayersCss;
+MapBaseLayers.style = DsoMapBaseLayersStyle0;
 
 export { MapBaseLayers as dso_map_base_layers };
 

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

@@ -1 +1 @@
-{"file":"dso-map-base-layers.entry.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,4WAA4W;;MCUxX,aAAa;;;;IAEhB,mBAAc,GAA+C,EAAE,CAAC;iBAYhEA,EAAM,EAAE;;;EAQR,sBAAsB,CAAC,SAAoB;IACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;GAC9D;EAED,kBAAkB;IAChB,IAAI,CAAC,UAAU;OACZ,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;OACpG,OAAO,CAAC,CAAC,CAAC;;MACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC,CAAC;IAEL,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;GAC3C;EAED,MAAM;IACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;MACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;KACjC;IAED,QACE,gBAAU,KAAK,EAAC,uBAAuB,IACrC,cAAQ,KAAK,EAAC,SAAS,kBAAqB,EAC5C,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,kBAEvC,CACH,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,MAC7B,sBACE,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC9D,WAAW,EAAE,MAAM,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,IAExD,SAAS,CAAC,IAAI,EACd,SAAS,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,SAAS,CAAC,IAAI,CAAK,GAAG,IAAI,CAC7C,CAClB,CAAC,CACE,CACG,EACX;GACH;;;;;;","names":["uuidv4"],"sources":["src/components/map-base-layers/map-base-layers.scss?tag=dso-map-base-layers&encapsulation=shadow","src/components/map-base-layers/map-base-layers.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { BaseLayer, BaseLayerChangeEvent } from \"./map-base-layers.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-base-layers\",\r\n  styleUrl: \"./map-base-layers.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n  private previousBaselayers: BaseLayer[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks a base layer.\r\n   */\r\n  @Event()\r\n  dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The base layers.\r\n   */\r\n  @Prop()\r\n  baseLayers!: BaseLayer[];\r\n\r\n  private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.baseLayers\r\n      .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousBaselayers = this.baseLayers;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-radios\">\r\n        <legend class=\"sr-only\">Achtergrond</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Achtergrond\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.baseLayers.map((baseLayer) => (\r\n            <dso-selectable\r\n              key={baseLayer.id}\r\n              type=\"radio\"\r\n              value={baseLayer.name}\r\n              checked={baseLayer.checked}\r\n              disabled={baseLayer.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n              onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n            >\r\n              {baseLayer.name}\r\n              {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-base-layers.entry.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,4WAA4W,CAAC;AACtY,+BAAe,gBAAgB;;MCSlB,aAAa;;;;QAEhB,mBAAc,GAA+C,EAAE,CAAC;qBAYhEA,EAAM,EAAE;;;IAQR,sBAAsB,CAAC,SAAoB;QACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;KAC9D;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU;aACZ,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aACpG,OAAO,CAAC,CAAC,CAAC;;YACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SAC9C,CAAC,CAAC;QAEL,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;KAC3C;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;SACjC;QAED,QACE,iEAAU,KAAK,EAAC,uBAAuB,IACrC,+DAAQ,KAAK,EAAC,SAAS,kBAAqB,EAC5C,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,kBAEvC,CACH,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,MAC7B,sBACE,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC9D,WAAW,EAAE,MAAM,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,IAExD,SAAS,CAAC,IAAI,EACd,SAAS,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,SAAS,CAAC,IAAI,CAAK,GAAG,IAAI,CAC7C,CAClB,CAAC,CACE,CACG,EACX;KACH;;;;;;","names":["uuidv4"],"sources":["src/components/map-base-layers/map-base-layers.scss?tag=dso-map-base-layers&encapsulation=shadow","src/components/map-base-layers/map-base-layers.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { BaseLayer, BaseLayerChangeEvent } from \"./map-base-layers.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-base-layers\",\r\n  styleUrl: \"./map-base-layers.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n  private previousBaselayers: BaseLayer[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks a base layer.\r\n   */\r\n  @Event()\r\n  dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The base layers.\r\n   */\r\n  @Prop()\r\n  baseLayers!: BaseLayer[];\r\n\r\n  private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.baseLayers\r\n      .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousBaselayers = this.baseLayers;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-radios\">\r\n        <legend class=\"sr-only\">Achtergrond</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Achtergrond\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.baseLayers.map((baseLayer) => (\r\n            <dso-selectable\r\n              key={baseLayer.id}\r\n              type=\"radio\"\r\n              value={baseLayer.name}\r\n              checked={baseLayer.checked}\r\n              disabled={baseLayer.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n              onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n            >\r\n              {baseLayer.name}\r\n              {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}