@dso-toolkit/core 62.19.0 → 62.20.1

package/dist/components/dso-highlight-box.js.map

@@ -1 +1 @@
-{"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,krBAAkrB,CAAC;AAC3sB,8BAAe,eAAe;;MCMjB,YAAY;;;;;;;;;;;IAkCvB,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAE5E,QACE,EAAC,IAAI,oEAAc,UAAU,IAC1B,UAAU,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, h, Prop, Element, Host } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,krBAAkrB,CAAC;AAC3sB,8BAAe,eAAe;;MCMjB,YAAY;;;;;;;;;;;IAkCvB,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAE5E,QACE,EAAC,IAAI,oEAAc,UAAU,IAC1B,UAAU,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,6DAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, h, Prop, Element, Host } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-input-range.js

@@ -21,13 +21,13 @@ const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends HTM
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { id: "description", hidden: true }, this.description)), h("span", { key: 'c97016f839c1f65e0dfbb574ba6b7be542da517d', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '171641fa35b0d5eae0e7d1d270cf63a61b7bb8da', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '829624123680fa59c806e0132b82eadf27dea57d', id: "description", hidden: true }, this.description)), h("span", { key: '2c6d87fccc090ea43c9dcdb14c095a6b5ed991bf', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '22fd3842ea717541d8bae1d0d394ec41fb62be26', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: 'd34b5523ca5904d5b4d17ff6b62ced39e4ce5b50', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '69bacfe004281c5aff9f269cc1b4e58fe5823673', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return this; }
     static get style() { return DsoInputRangeStyle0; }

package/dist/components/dso-input-range.js.map

@@ -1 +1 @@
-{"file":"dso-input-range.js","mappings":";;AAAA,MAAM,aAAa,GAAG,0nCAA0nC,CAAC;AACjpC,4BAAe,aAAa;;MCOf,UAAU;;;;;;;;;;;oBAmCN,EAAE;;;IAiBjB,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;QAE5B,QACE,kBACG,IAAI,CAAC,WAAW,KACf,YAAM,EAAE,EAAC,aAAa,EAAC,MAAM,UAC1B,IAAI,CAAC,WAAW,CACZ,CACR,EACD,6DAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,EACP,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,KAAK,sBACJ,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,SAAS;gBAC9F,GAAG;gBACH,GAAG;gBACH,IAAI;aACL,CAAC,GAEJ,EACF,6DAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,CACN,EACH;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n\r\n  padding: 0.5rem;\r\n\r\n  inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n  flex-shrink: 0;\r\n\r\n  min-inline-size: 5ch;\r\n\r\n  &.min {\r\n    text-align: end;\r\n  }\r\n\r\n  &.max {\r\n    text-align: start;\r\n  }\r\n}\r\n\r\n.input {\r\n  flex-grow: 1;\r\n\r\n  appearance: none;\r\n\r\n  background-color: transparent;\r\n\r\n  cursor: pointer;\r\n\r\n  &::-webkit-slider-runnable-track {\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-webkit-slider-thumb {\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.55rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-radius: 50%;\r\n  }\r\n\r\n  &::-moz-range-track {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-moz-range-thumb {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.5rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-color: transparent;\r\n    border-radius: 50%;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-input-range\",\r\n  styleUrl: \"input-range.scss\",\r\n  shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n  /**\r\n   * The minimum value of the range.\r\n   */\r\n  @Prop()\r\n  min?: number;\r\n\r\n  /**\r\n   * The maximum value of the range.\r\n   */\r\n  @Prop()\r\n  max?: number;\r\n\r\n  /**\r\n   * The value of the range.\r\n   */\r\n  @Prop()\r\n  value?: number;\r\n\r\n  /**\r\n   * The step to increment the value by.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  /**\r\n   * The label of the range.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The unit of the range.\r\n   */\r\n  @Prop()\r\n  unit: string = \"\";\r\n\r\n  /**\r\n   * The description of the range.\r\n   */\r\n  @Prop()\r\n  description?: string;\r\n\r\n  /**\r\n   * Emitted when the value has changed.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInputRangeElement;\r\n\r\n  render() {\r\n    const min = this.min || 0;\r\n    const max = this.max || 100;\r\n    const step = this.step || 1;\r\n\r\n    return (\r\n      <>\r\n        {this.description && (\r\n          <span id=\"description\" hidden>\r\n            {this.description}\r\n          </span>\r\n        )}\r\n        <span class=\"counter min\" aria-hidden=\"true\">\r\n          {min}\r\n          {this.unit}\r\n        </span>\r\n        <input\r\n          type=\"range\"\r\n          min={this.min}\r\n          max={this.max}\r\n          value={this.value}\r\n          class=\"input\"\r\n          aria-label={this.label}\r\n          aria-describedby={this.description ? \"description\" : undefined}\r\n          onChange={(event) =>\r\n            this.dsoChange.emit({\r\n              originalEvent: event,\r\n              value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n              max,\r\n              min,\r\n              step,\r\n            })\r\n          }\r\n        />\r\n        <span class=\"counter max\" aria-hidden=\"true\">\r\n          {max}\r\n          {this.unit}\r\n        </span>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-input-range.js","mappings":";;AAAA,MAAM,aAAa,GAAG,0nCAA0nC,CAAC;AACjpC,4BAAe,aAAa;;MCOf,UAAU;;;;;;;;;;;oBAmCN,EAAE;;;IAiBjB,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;QAE5B,QACE,kBACG,IAAI,CAAC,WAAW,KACf,6DAAM,EAAE,EAAC,aAAa,EAAC,MAAM,UAC1B,IAAI,CAAC,WAAW,CACZ,CACR,EACD,6DAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,EACP,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,KAAK,sBACJ,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,SAAS;gBAC9F,GAAG;gBACH,GAAG;gBACH,IAAI;aACL,CAAC,GAEJ,EACF,6DAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,CACN,EACH;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n\r\n  padding: 0.5rem;\r\n\r\n  inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n  flex-shrink: 0;\r\n\r\n  min-inline-size: 5ch;\r\n\r\n  &.min {\r\n    text-align: end;\r\n  }\r\n\r\n  &.max {\r\n    text-align: start;\r\n  }\r\n}\r\n\r\n.input {\r\n  flex-grow: 1;\r\n\r\n  appearance: none;\r\n\r\n  background-color: transparent;\r\n\r\n  cursor: pointer;\r\n\r\n  &::-webkit-slider-runnable-track {\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-webkit-slider-thumb {\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.55rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-radius: 50%;\r\n  }\r\n\r\n  &::-moz-range-track {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-moz-range-thumb {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.5rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-color: transparent;\r\n    border-radius: 50%;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-input-range\",\r\n  styleUrl: \"input-range.scss\",\r\n  shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n  /**\r\n   * The minimum value of the range.\r\n   */\r\n  @Prop()\r\n  min?: number;\r\n\r\n  /**\r\n   * The maximum value of the range.\r\n   */\r\n  @Prop()\r\n  max?: number;\r\n\r\n  /**\r\n   * The value of the range.\r\n   */\r\n  @Prop()\r\n  value?: number;\r\n\r\n  /**\r\n   * The step to increment the value by.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  /**\r\n   * The label of the range.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The unit of the range.\r\n   */\r\n  @Prop()\r\n  unit: string = \"\";\r\n\r\n  /**\r\n   * The description of the range.\r\n   */\r\n  @Prop()\r\n  description?: string;\r\n\r\n  /**\r\n   * Emitted when the value has changed.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInputRangeElement;\r\n\r\n  render() {\r\n    const min = this.min || 0;\r\n    const max = this.max || 100;\r\n    const step = this.step || 1;\r\n\r\n    return (\r\n      <>\r\n        {this.description && (\r\n          <span id=\"description\" hidden>\r\n            {this.description}\r\n          </span>\r\n        )}\r\n        <span class=\"counter min\" aria-hidden=\"true\">\r\n          {min}\r\n          {this.unit}\r\n        </span>\r\n        <input\r\n          type=\"range\"\r\n          min={this.min}\r\n          max={this.max}\r\n          value={this.value}\r\n          class=\"input\"\r\n          aria-label={this.label}\r\n          aria-describedby={this.description ? \"description\" : undefined}\r\n          onChange={(event) =>\r\n            this.dsoChange.emit({\r\n              originalEvent: event,\r\n              value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n              max,\r\n              min,\r\n              step,\r\n            })\r\n          }\r\n        />\r\n        <span class=\"counter max\" aria-hidden=\"true\">\r\n          {max}\r\n          {this.unit}\r\n        </span>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-legend-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoLegendItem extends Components.DsoLegendItem, HTMLElement {}
+export const DsoLegendItem: {
+    prototype: DsoLegendItem;
+    new (): DsoLegendItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-legend-item.js

@@ -0,0 +1,89 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './info-button.js';
+import { d as defineCustomElement$3 } from './toggletip.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const legendItemCss = ":host {\n  display: block;\n  padding: 4px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.legend-item {\n  display: flex;\n  position: relative;\n}\n.legend-item.legend-item-symbol + .body {\n  margin-inline-start: 38px;\n}\n.legend-item.legend-item-selectable + .body {\n  margin-inline-start: 32px;\n}\n.legend-item.legend-item-selectable.legend-item-symbol + .body {\n  margin-inline-start: 70px;\n}\n\nbutton {\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  position: absolute;\n  inset-inline-end: 0;\n}\nbutton:focus, button:focus-visible {\n  outline-offset: 2px;\n}\nbutton:active {\n  outline: 0;\n}\nbutton[disabled] {\n  color: #afcf9d;\n}\nbutton[disabled].dso-spinner-left, button[disabled].dso-spinner-right {\n  color: #39870c;\n}\nbutton:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton:not([disabled]):active {\n  color: #173521;\n}\nbutton.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\nbutton.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nbutton.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}\nbutton.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}\nbutton > span {\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}";
+const DsoLegendItemStyle0 = legendItemCss;
+
+const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoRemoveClick = createEvent(this, "dsoRemoveClick", 7);
+        this.dsoMouseEnter = createEvent(this, "dsoMouseEnter", 7);
+        this.dsoMouseLeave = createEvent(this, "dsoMouseLeave", 7);
+        this.disabled = false;
+        this.disabledMessage = undefined;
+        this.removable = undefined;
+        this.showBody = false;
+    }
+    get symbolSlottedElement() {
+        return this.host.querySelector("[slot='symbol']");
+    }
+    get selectableSlottedElement() {
+        return this.host.querySelector(":scope > dso-selectable");
+    }
+    get bodySlottedElement() {
+        return this.host.querySelector("[slot='body']");
+    }
+    render() {
+        const hasSymbol = this.symbolSlottedElement !== null;
+        const hasBody = this.bodySlottedElement !== null;
+        const isSelectable = this.selectableSlottedElement !== null;
+        return (h(Host, { key: 'e50f1d84ed48c4fc88ebdf2d473ee0f67bec22fe', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '98ccac5c97c900a0eefe58baa4d69747847b2fbf', class: clsx("legend-item", {
+                "legend-item-symbol": hasSymbol,
+                "legend-item-selectable": isSelectable,
+            }) }, h("div", { key: 'f73cdf97e65e6d50fd8c8e073c2abf902d148511', hidden: !hasSymbol }, h("slot", { key: 'd18b7efd00c137f3b9fe96b00eabbafe9f8c8ae1', name: "symbol" })), h("div", { key: '8a0a4212aa989367d869a949bba1984af4e3d2c1' }, h("slot", { key: '35285a0f129c3d0e64f5925b5e46e1d1246603fd' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '93727ab6ba53cd605b1a0df5a5d14b281653cef7', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: '5d72df7e74cc74cb2e5cdede86bace5129c97906', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: '6cb45e90d3e30e709f6bed348ae29e2931c34f11', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: '3ec5613fc71e021bcaca961ab4d858f7aeb408c2', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: '690784310b84fa49590680db6b7ab42aec5e34e8', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: 'df9051dcd36487f51cbfb6014e4921ce405db3e3', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: '8d047e9c90f888a5b3a60c41829845bd1bcd0538', icon: this.showBody ? "times" : "more" })))), h("div", { key: '8f90acc7de95c518749e0cdbd100f38195911dbb', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: '9d743680ea76b8daec3ef131ca244603eba4a996', name: "body" }))));
+    }
+    get host() { return this; }
+    static get style() { return DsoLegendItemStyle0; }
+}, [1, "dso-legend-item", {
+        "disabled": [516],
+        "disabledMessage": [1, "disabled-message"],
+        "removable": [4],
+        "showBody": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-legend-item", "dso-icon", "dso-info-button", "dso-toggletip", "dso-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-legend-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LegendItem);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "dso-info-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-toggletip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoLegendItem = LegendItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoLegendItem, defineCustomElement };
+
+//# sourceMappingURL=dso-legend-item.js.map

package/dist/components/dso-legend-item.js.map

@@ -0,0 +1 @@
+{"file":"dso-legend-item.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/components/dso-list-button.js

@@ -123,7 +123,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
     render() {
         const showButtonInputs = this.manualCount === undefined;
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'abb00eecb073bbdbf9946f0680413f8016fbbb57', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '9b4e286e31a96faeae6facddbdbfd395c03750a6', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: 'a09fc90a28eadad900cc8c548c93a5470dbc1095', class: "dso-selectable" }, h("input", { key: '4a2f352079712ea22f3083891081a4ad6b16f8e2', 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: '9c8aeb62c7f366672cc8cecf66fbfe830e569381', 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", { key: '2e443e92565e15f9b3c5059290b4540510a14a6f', 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")))))));
+        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 this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"dso-list-button.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.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/components/dso-logo.js

@@ -12,7 +12,7 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends HTMLElement {
         this.ribbon = undefined;
     }
     render() {
-        return (h(Host, { key: '7d963df6078fe26d426b724823c6d20ac2ecd93f', "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, h("svg", { key: '44344080efd6fb06474ae683d93ffa0dcfba87f9', fill: "none", viewBox: "0 0 48 48", height: "100%", class: "logo-target" }, h("path", { key: '28249a7cbe723deee785fb73e6932c4faf400255', class: "outer", d: "M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z" }), h("path", { key: 'fa62a33b745ae96b0587cb07b3dd49baa8a0df97', class: "middle", d: "M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z" }), h("path", { key: 'ee977aa7631f709552894c6900b79c0d0af3fbc7', class: "inner", d: "M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z" })), h("div", { key: 'de5b1bf4f71b308b1fdd91684bc54835338db8e7', class: "logo-wordmark" }, h("span", { key: '700b20c7ac65b93c7263b03f308362f3809d9833', class: "logo-wordmark-omgevings" }, "Omgevings"), h("span", { key: 'be5d651e4577c1c6d8957f32285f8a6c3075ba49', class: "logo-wordmark-loket" }, "loket")), this.label && h("span", { class: "logo-label" }, this.label), this.ribbon && h("div", { class: "logo-ribbon" }, this.ribbon)));
+        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)));
     }
     static get style() { return DsoLogoStyle0; }
 }, [1, "dso-logo", {

package/dist/components/dso-logo.js.map

@@ -1 +1 @@
-{"file":"dso-logo.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,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;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}
+{"file":"dso-logo.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/components/dso-map-base-layers.js

@@ -34,7 +34,7 @@ const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers exten
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '2c3eb77f06a5a6918a707c3fffc05832154bef12', class: "form-group dso-radios" }, h("legend", { key: '2461330d29840218a28a9245e86fa7bfdb70ff23', class: "sr-only" }, "Achtergrond"), h("div", { key: '161c6b20780e78eaee6c7e3b7ca22a553548df96', class: "dso-label-container" }, h("span", { key: '4590f83f5b52c509d46cf1327efa3fe45b12b292', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: '348a852299628632afa8c8237b136abe53494df5', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '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))))));
     }
     static get style() { return DsoMapBaseLayersStyle0; }
 }, [1, "dso-map-base-layers", {

package/dist/components/dso-map-controls.js

@@ -66,7 +66,7 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
         });
     }
     render() {
-        return (h(Host, { key: 'd5257802545ac7c3ce214c1d777a9046e4e4ed53' }, h("button", { key: '10c981feea6e98d70038b7e41eadcfcda69e561f', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'b0ad518b178e141183e940d4a93fb86cb7e669cb', icon: "layers" }), h("span", { key: '3a08741b4e7b68c1268563ab3b42437346250754' }, "Kaartlagen")), h("div", { key: 'a45cd401ca5dbaa8a1701f71020c08f9a1c12a3a', class: "zoom-buttons" }, h("button", { key: 'cffa9f861933fcca241882794bc38534255a0093', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '745758853f317c4d094a6ef0ec7548583d419075' }, "Zoom in"), h("dso-icon", { key: 'edf7d7b7cf782d192c913b03febdc1b0b7a5905b', icon: "plus" })), h("button", { key: 'a0d1b719f4811a7223d042b7c45fcc055e6a6ae0', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '942d4d278889974dc336ace6f885cbf12af55bc5' }, "Zoom uit"), h("dso-icon", { key: '59c74add8be0224ff1c16bd03e3bd3697b4db484', icon: "minus" }))), h("section", { key: 'd17562e23bd26af09fe618f00974e5b1a5c4086e', hidden: this.hideContent }, h("header", { key: '16bf4efe6dfbe09fa7dd53e0156733d23fff5f43' }, h("h2", { key: '6e2913bf9c56d4b3e40c7ce7d4f3e0b4e69c9d1c' }, this.panelTitle), h("button", { key: '1e1be94fea1cd8336552d490369f9c2c28ef1d21', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '135b23785f61713876fa8ba41767b4f423339573' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: '5221aa8c44ce86583c1fca8d30234df499046708', icon: "times" }))), h("dso-scrollable", { key: '9a0f92768fe2b9b55218187547757c14088da249' }, h("div", { key: 'd04dcd91a2553ce5568b2535e53206012efc7bf8', class: "content" }, h("slot", { key: 'e44aef4d314f64e66b3d192b7601eae462c7169f' }))))));
+        return (h(Host, { key: '6950f24986448fe7b9ad55e63a27c3435582078f' }, h("button", { key: '5b1fd3a10690d47db03b4e80fe30beffc4ab9658', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '364f0679306f247a5c6a589ad0885b014e0be5f5', icon: "layers" }), h("span", { key: '5409d0555edd3e7406b215fb430c9a4d71943460' }, "Kaartlagen")), h("div", { key: '0e9db2dca0b5065f86926232138933b402eb73df', class: "zoom-buttons" }, h("button", { key: 'd8bb302ba4d9a3719c6525cea58da8cc98620e34', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '3bdb813abd79cd05a2290068d0bd76410679f293' }, "Zoom in"), h("dso-icon", { key: '853a2cf598baf24e6d152611fe9b663a674db6e8', icon: "plus" })), h("button", { key: '909320d8ecd4edb12d0bb33e90300f36a2e49c6c', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '2b83cf1a9c8c869684c166f2faa5eaebaef965e4' }, "Zoom uit"), h("dso-icon", { key: '03145fbd10e9fa812984e0ec30bc36e015df61d7', icon: "minus" }))), h("section", { key: '3c2ade46c0f4d60f2e8cd983e549206ea8f71a62', hidden: this.hideContent }, h("header", { key: '80e7a2df9559af79525e8d5feb128a906c44c102' }, h("h2", { key: '1b68c5f1edc27316bd88aecdfb087f4b3d20ef94' }, this.panelTitle), h("button", { key: '9b99c5cd792825d6fcf1612394a762a4bb5780d3', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '218e01f23755c5ced6fc97fdbee6f4c5e53fb993' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: '9c296759f7088b175c64883fa6dfc489d66b4392', icon: "times" }))), h("dso-scrollable", { key: '9f1426e147a8a9904e55d4280194ae256c842d5d' }, h("div", { key: '2f9d201a4e1d20265297de0c7b9431ba368fff0a', class: "content" }, h("slot", { key: '6ad26388a3c216ff78395567597ddb93320f1223' }))))));
     }
     static get watchers() { return {
         "open": ["watchOpen"]

package/dist/components/dso-map-overlays.js

@@ -35,7 +35,7 @@ const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends H
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '922be44c70151498b93a9e860282660855ce6da2', class: "form-group dso-checkboxes" }, h("legend", { key: 'f76555b38b08fb94816434a298a9dc7d566722e8', class: "sr-only" }, "Kaartlagen"), h("div", { key: '13d611600240b497d9f1c0c35f2f431c64465ff4', class: "dso-label-container" }, h("span", { key: '046447606bf77abaf50f9959af64f60a028fcf34', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: '47126e80ffa9af8a5e33ae5e456cc043db1dfeb4', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '10c6cf654992a23a91582f496988e177c552e61d', class: "form-group dso-checkboxes" }, h("legend", { key: '237e7234834b820a80caa38b47cdc33be2dc4c85', class: "sr-only" }, "Kaartlagen"), h("div", { key: '944be0a8c38661e31d5f2d190d17ea9b9367bc2d', class: "dso-label-container" }, h("span", { key: '659a031232613acaefe79d54fed0365d1b19d20f', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: 'de713bcb3827c8df631e67fda81eb0b734fb8492', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get style() { return DsoMapOverlaysStyle0; }
 }, [1, "dso-map-overlays", {

package/dist/components/dso-mark-bar.js

@@ -54,7 +54,7 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends HTMLEleme
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: 'efdf7f83749340df8019025992167f5d85c3b345', class: "dso-mark-bar" }, h("div", { key: '0e80bcb1859584ba0ef3a77f7c1e1154886433d6', class: "dso-mark-bar-input" }, h("input", { key: 'fa7112771eec26a46b6b3723b1fead205d364835', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '91e2661d9926d1a022c199c6441f38bc51b297a9', htmlFor: "search-input" }, h("dso-icon", { key: '25d5ae45bacae6454510187fec58a4b6168bd037', class: "dso-search-icon", icon: "search" }), h("span", { key: 'd8591b4f24d9fa1f37d95b83c0d40859cb8bf4db', class: "label-text" }, this.label)), h("button", { key: 'b2cff0ce11313010ec20e16f972216901efb0c8a', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '9599e5ff9225d9549c2138a788665d232c77991b', icon: "times" }), h("span", { key: '4b0aeef7c3196f8cd8d1bfa815fdc68e26fbd2c8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '901be078c668f6386095df22efcd4d1760516e30', class: "dso-button-container" }, h("span", { key: '22616246e5c1e69caecc69ec5c13290fc4699835', class: "divider" }), h("button", { key: 'b8acc81707e87213fc77ca3858179ae46c939160', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: 'ae6eebabf4bcd7454c81f131e13649b85f0d8a24', icon: "chevron-up", class: "hydrated" }), h("span", { key: '4d437f856a43918075e110c99381705855eba8a2', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'c60458ada935126bd1908fb5b3adc616d3a86bde' }, current, "/", totalCount), h("button", { key: '212d6d2b04bf1023a6c3ce68e11e68e06e03149d', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '50dc0c18de000a9b128f70815425267bd7bfad4d', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'ae6835ce1e8b52d5a65e79f5711b51a4fbe08821', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: '24dc8038f3ee6abcc9f741d5eb47f9c2e0135efb', class: "dso-mark-bar" }, h("div", { key: 'abc17c6f14fea338d11ad733a755e5e6eeb1eb55', class: "dso-mark-bar-input" }, h("input", { key: '59c4971ea6b4b07344caa6c76971b3360196d792', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '2fc4531e3bf8541f1366d201b7ec7bf8b917687d', htmlFor: "search-input" }, h("dso-icon", { key: 'a9d9683f5f8522a5f9c0ce9e59ca23b811add5c4', class: "dso-search-icon", icon: "search" }), h("span", { key: '8b31e9004a25da808e3f93ef2344602533780014', class: "label-text" }, this.label)), h("button", { key: '43a739a7c5a1ee6f8f3334b61f5ef8c8638cfd49', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '99185e5c9156d6523cdbca83ffe8b2ba19c29e8b', icon: "times" }), h("span", { key: '3e4302d15330cf0c5b3fdd9bd6e4b1e7c31ca7de', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '9b18e0ec50751d65912a37482a82fb1cfad4b78d', class: "dso-button-container" }, h("span", { key: 'ea1a85c0d4a720ffe735533bcdc5e56008b6c02a', class: "divider" }), h("button", { key: '1cd2151bd34b81941719217223cef8585f8b19f2', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '2b13fb24497a4bc17919daa8212b1fefbc21d8ab', icon: "chevron-up", class: "hydrated" }), h("span", { key: '91a30e14a97470eaac9a926b8ab3a184e2fda3ad', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '20f4c22c90979c2355a84149d22bc4dc87952036' }, current, "/", totalCount), h("button", { key: '7133c71bf1d4711765ff2d98dd1622908416835e', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'ce73fa26896a6a713c3b33e7e92f7677b57bd21e', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'a5ecabff6c0256ef69afe697e4982f37e88d5e78', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get style() { return DsoMarkBarStyle0; }
 }, [1, "dso-mark-bar", {

package/dist/components/dso-modal.js

@@ -43,10 +43,10 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'f0ccbff21b54af2caccfc5a5a1749fa16ecdadc4', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: '6072654b30fb1d5d37a85e415cc8238d9737fb62', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: 'cfc5a8d6c6820353513ce8707c7b206d5f0d8873', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: 'b7fa1c5d7780c2b186823766c7f3ae838b979662' }, h("div", { key: '74234bf59cb07100cc0e4e28f39f5fb00488c1cf', class: "dso-body", tabIndex: 0 }, h("slot", { key: '88a8a67e2f89d673d8d6af6565660240d6f02e6c', name: "body" }))), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" }))))));
+            } }, h("div", { key: 'f1332e303c002cdc221237f69691c339fe6b629f', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: '8ada9f86ded3d0b35cfcc2df1edcd2c969864d00' }, h("div", { key: 'b3845f15bdb227ade9a13ef4e718c6a13b0e21b8', class: "dso-body", tabIndex: 0 }, h("slot", { key: '5b55389b43bcaa09eabef43e16cb2d298e9d47dd', name: "body" }))), this.hasFooter && (h("div", { key: '135742b97efe4617a4ec7f64b86461fa69b5ab4a', class: "dso-footer" }, h("slot", { key: '6ddd36972880b56bc98764da436872a38664ad44', name: "footer" }))))));
     }
     get host() { return this; }
     static get style() { return DsoModalStyle0; }

package/dist/components/dso-modal.js.map

@@ -1 +1 @@
-{"file":"dso-modal.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,23LAA23L,CAAC;AAC74L,uBAAe,QAAQ;;MCUV,KAAK;;;;;;sBAOP,EAAE,EAAE;;;oBAmBS,QAAQ;2BAUiB,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAED,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE;gBACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;aACzC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;SACpC;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;KACxD;IAED,MAAM;;QACJ,QACE,+DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;aAC1C,IAED,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAED,yEACE,4DAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  // eslint-disable-next-line @stencil-community/reserved-member-names\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.role ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-modal.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,23LAA23L,CAAC;AAC74L,uBAAe,QAAQ;;MCUV,KAAK;;;;;;sBAOP,EAAE,EAAE;;;oBAmBS,QAAQ;2BAUiB,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAED,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE;gBACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;aACzC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;SACpC;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;KACxD;IAED,MAAM;;QACJ,QACE,+DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;aAC1C,IAED,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAED,yEACE,4DAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  // eslint-disable-next-line @stencil-community/reserved-member-names\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.role ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-progress-bar.js

@@ -15,7 +15,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: 'd65d17f7bd14d9355071f8110fa59006617e2071', class: "progress" }, h("span", { key: 'ee775d899ebb50b153a5e320fe02e8bb8dd48f11', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '1077f6ec55f171d4dcae46c4523bd3a2fc470fbd', style: { width: `${progressPercentage}` } })), h("span", { key: '2f21a756f92355daf4bd9cd7f46133df7b60bf53', id: "progress-bar-label" }, h("slot", { key: '167774073516a519e5a787fcb7f4391ec0adf031' }))));
+        return (h("div", { key: '934db66813ae6a3e46bea91a27dc0186d895a730', class: "progress" }, h("span", { key: '04c069db44d12bfb25ffb8f4fb1ad694aa5f83d6', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: 'ea66a781d0c3c02c48623ea803c975ad2364f102', style: { width: `${progressPercentage}` } })), h("span", { key: '7e30b61ee45fe03728838ab0bbbd0b37d7125710', id: "progress-bar-label" }, h("slot", { key: '7a6a57446f74c97edb10635d49a318f0489a16db' }))));
     }
     static get style() { return DsoProgressBarStyle0; }
 }, [1, "dso-progress-bar", {

package/dist/components/dso-toggletip.js

@@ -1,89 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './info-button.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-
-const toggletipCss = "*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;--tooltip-margin-block-start:0;--tooltip-margin-inline-start:3px;--tooltip-margin-inline-end:units.$u1 * -1 !important}:host(:focus){outline:none;z-index:410}";
-const DsoToggletipStyle0 = toggletipCss;
-
-const Toggletip = /*@__PURE__*/ proxyCustomElement(class Toggletip extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.click = () => {
-            this.active ? this.close() : this.open();
-        };
-        this.open = () => {
-            this.active = true;
-            this.host.addEventListener("keydown", this.keyDownListener);
-            this.host.addEventListener("focusout", this.focusOutListener);
-        };
-        this.close = () => {
-            this.host.removeEventListener("focusout", this.focusOutListener);
-            this.host.removeEventListener("keydown", this.keyDownListener);
-            this.active = false;
-        };
-        this.focusOutListener = (event) => {
-            if (!this.host.contains(event.relatedTarget)) {
-                this.close();
-            }
-        };
-        this.keyDownListener = (event) => {
-            var _a;
-            if (!event.defaultPrevented && event.key === "Escape") {
-                this.close();
-                (_a = this.infoButton) === null || _a === void 0 ? void 0 : _a.setFocus();
-                event.preventDefault();
-            }
-            return;
-        };
-        this.active = false;
-        this.label = "Toelichting";
-        this.position = "right";
-        this.small = undefined;
-        this.secondary = undefined;
-    }
-    render() {
-        return (h(Fragment, null, h("dso-info-button", { key: 'd6932e06fbe2ab49cf838779eb538afe6c72584d', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '6238f181a61c02268f64fcecbb5b576fdf49cdf2', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '2379501cb521df7ca1ea1befff0c47ec1902d4be' }))));
-    }
-    get host() { return this; }
-    static get style() { return DsoToggletipStyle0; }
-}, [1, "dso-toggletip", {
-        "label": [1],
-        "position": [1],
-        "small": [4],
-        "secondary": [4],
-        "active": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-toggletip", "dso-icon", "dso-info-button", "dso-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-toggletip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Toggletip);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "dso-info-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { T as Toggletip, d as defineCustomElement$1 } from './toggletip.js';
 
 const DsoToggletip = Toggletip;
 const defineCustomElement = defineCustomElement$1;