@utrecht/web-component-library-stencil 1.0.0-alpha.511 → 1.0.0-alpha.512

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-f7fab6cb.js');
6
6
  const clsx_m = require('./clsx.m-b21b5592.js');
7
7
 
8
- const indexCss = ".utrecht-form-toggle{align-items:center;border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor);display:flex;height:var(--utrecht-form-toggle-height, 2em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none;width:var(--utrecht-form-toggle-width, 6em)}.utrecht-form-toggle--focus,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus{border-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;height:100%;width:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important;width:1px !important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus~.utrecht-form-toggle__track{outline-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));outline-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));outline-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}:host{display:inline-block}:host([hidden]){display:none !important}";
8
+ const indexCss = ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height, 2em);border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor);display:flex;inline-size:var(--utrecht-form-toggle-width, 6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width, 1px), 1px);}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div:disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}:host{display:inline-block}:host([hidden]){display:none !important}";
9
9
 
10
10
  const FormToggle = class {
11
11
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"utrecht-form-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,+rJAA+rJ;;MCansJ,UAAU;;;;;;;oBACwB,KAAK;mBACN,KAAK;;EAMjD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAEnC,MAAM,iBAAiB,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC/B;KACF,CAAC;IAEF,MAAM,WAAW,GAAG;MAClB,iBAAiB,EAAE,CAAC;KACrB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,GAAG;MACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;QAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;OACtB;KACF,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,GAAG;MACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;QAC3C,iBAAiB,EAAE,CAAC;OACrB;KACF,CAAC;IAEF,QACEA,iBACE,KAAK,EAAEC,WAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpBD,iBAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9EA,iBAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7EA,iBACE,KAAK,EAAEC,WAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAEDD,iBACE,KAAK,EAAEC,WAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;GACH;;;;;;","names":["h","clsx"],"sources":["./src/components/form-toggle/index.scss?tag=utrecht-form-toggle&encapsulation=shadow","./src/components/form-toggle/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-toggle/css\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'index.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"utrecht-form-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,wkKAAwkK;;MCa5kK,UAAU;;;;;;;oBACwB,KAAK;mBACN,KAAK;;EAMjD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAEnC,MAAM,iBAAiB,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC/B;KACF,CAAC;IAEF,MAAM,WAAW,GAAG;MAClB,iBAAiB,EAAE,CAAC;KACrB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,GAAG;MACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;QAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;OACtB;KACF,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,GAAG;MACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;QAC3C,iBAAiB,EAAE,CAAC;OACrB;KACF,CAAC;IAEF,QACEA,iBACE,KAAK,EAAEC,WAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpBD,iBAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9EA,iBAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7EA,iBACE,KAAK,EAAEC,WAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAEDD,iBACE,KAAK,EAAEC,WAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;GACH;;;;;;","names":["h","clsx"],"sources":["./src/components/form-toggle/index.scss?tag=utrecht-form-toggle&encapsulation=shadow","./src/components/form-toggle/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-toggle/css\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'index.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
@@ -6,8 +6,19 @@
6
6
  * @license EUPL-1.2
7
7
  * Copyright (c) 2021 Robbert Broersma
8
8
  */
9
+ /**
10
+ * @license EUPL-1.2
11
+ * Copyright (c) 2021 Robbert Broersma
12
+ */
13
+ /**
14
+ * @license EUPL-1.2
15
+ * Copyright (c) 2021 Gemeente Utrecht
16
+ * Copyright (c) 2021 Robbert Broersma
17
+ */
18
+ /* stylelint-disable-next-line block-no-empty */
9
19
  .utrecht-form-toggle {
10
20
  align-items: center;
21
+ block-size: var(--utrecht-form-toggle-height, 2em);
11
22
  border-color: var(--utrecht-form-toggle-border-color, currentColor);
12
23
  border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
13
24
  border-style: var(--utrecht-form-toggle-border-style, solid);
@@ -15,7 +26,7 @@
15
26
  color: var(--utrecht-form-toggle-color);
16
27
  cursor: var(--utrecht-action-activate-cursor);
17
28
  display: flex;
18
- height: var(--utrecht-form-toggle-height, 2em);
29
+ inline-size: var(--utrecht-form-toggle-width, 6em);
19
30
  padding-block-end: var(--utrecht-form-toggle-padding-block-end);
20
31
  padding-block-start: var(--utrecht-form-toggle-padding-block-start);
21
32
  padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
@@ -23,21 +34,42 @@
23
34
  position: relative;
24
35
  -webkit-user-select: none;
25
36
  user-select: none;
26
- width: var(--utrecht-form-toggle-width, 6em);
37
+ }
38
+ @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
39
+ .utrecht-form-toggle {
40
+ --utrecht-form-toggle-background-color: ButtonFace;
41
+ --utrecht-form-toggle-border-color: buttonborder;
42
+ --utrecht-form-toggle-border-width: 1px;
43
+ --utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
44
+ --utrecht-form-toggle-thumb-background-color: ButtonText;
45
+ --utrecht-form-toggle-thumb-disabled-background-color: GrayText;
46
+ /* TODO: Apply `GrayText` to the border-color */
47
+ border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
48
+ border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
49
+ /* TODO: Find a way to express the `pressed` state */
50
+ }
27
51
  }
28
52
 
29
- .utrecht-form-toggle--focus, .utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {
30
- border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
31
- border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
32
- border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
53
+ .utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div:focus-visible {
54
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
55
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
56
+ * can combine it with the focus ring box shadow.
57
+ */
58
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
59
+ var(--utrecht-focus-inverse-outline-color, transparent);
60
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
61
+ outline-color: var(--utrecht-focus-outline-color, revert);
62
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
63
+ outline-style: var(--utrecht-focus-outline-style, revert);
64
+ outline-width: var(--utrecht-focus-outline-width, revert);
33
65
  }
34
66
 
35
- .utrecht-form-toggle--hover, .utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {
67
+ .utrecht-form-toggle--hover, .utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div:disabled):hover {
36
68
  background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
37
69
  color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
38
70
  }
39
71
 
40
- .utrecht-form-toggle--disabled {
72
+ .utrecht-form-toggle--disabled, .utrecht-form-toggle--html-div:disabled {
41
73
  border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
42
74
  border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
43
75
  border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
@@ -72,10 +104,10 @@
72
104
  .utrecht-form-toggle__track {
73
105
  align-items: center;
74
106
  background-color: var(--utrecht-form-toggle-accent-color);
107
+ block-size: 100%;
75
108
  border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
76
109
  display: flex;
77
- height: 100%;
78
- width: 100%;
110
+ inline-size: 100%;
79
111
  }
80
112
 
81
113
  .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
@@ -89,11 +121,12 @@
89
121
 
90
122
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
91
123
  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
124
+ block-size: 1px !important;
92
125
  border: 0 !important;
93
126
  clip: rect(1px, 1px, 1px, 1px) !important;
94
127
  -webkit-clip-path: inset(50%) !important;
95
128
  clip-path: inset(50%) !important;
96
- height: 1px !important;
129
+ inline-size: 1px !important;
97
130
  /* stylelint-disable-next-line property-disallowed-list */
98
131
  margin: -1px !important;
99
132
  overflow: hidden !important;
@@ -101,12 +134,6 @@
101
134
  padding: 0 !important;
102
135
  position: absolute !important;
103
136
  white-space: nowrap !important;
104
- width: 1px !important;
105
- }
106
- .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
107
- outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
108
- outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
109
- outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
110
137
  }
111
138
  :host {
112
139
  display: inline-block;
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.m.js';
3
3
 
4
- const indexCss = ".utrecht-form-toggle{align-items:center;border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor);display:flex;height:var(--utrecht-form-toggle-height, 2em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none;width:var(--utrecht-form-toggle-width, 6em)}.utrecht-form-toggle--focus,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus{border-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;height:100%;width:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important;width:1px !important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus~.utrecht-form-toggle__track{outline-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));outline-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));outline-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}:host{display:inline-block}:host([hidden]){display:none !important}";
4
+ const indexCss = ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height, 2em);border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor);display:flex;inline-size:var(--utrecht-form-toggle-width, 6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width, 1px), 1px);}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div:disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}:host{display:inline-block}:host([hidden]){display:none !important}";
5
5
 
6
6
  const FormToggle = /*@__PURE__*/ proxyCustomElement(class FormToggle extends HTMLElement {
7
7
  constructor() {
@@ -1 +1 @@
1
- {"file":"utrecht-form-toggle.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+rJAA+rJ;;MCansJ,UAAU;;;;;;;;;oBACwB,KAAK;mBACN,KAAK;;EAMjD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAEnC,MAAM,iBAAiB,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC/B;KACF,CAAC;IAEF,MAAM,WAAW,GAAG;MAClB,iBAAiB,EAAE,CAAC;KACrB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,GAAG;MACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;QAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;OACtB;KACF,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,GAAG;MACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;QAC3C,iBAAiB,EAAE,CAAC;OACrB;KACF,CAAC;IAEF,QACE,WACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpB,WAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9E,WAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7E,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAED,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/form-toggle/index.scss?tag=utrecht-form-toggle&encapsulation=shadow","./src/components/form-toggle/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-toggle/css\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'index.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"utrecht-form-toggle.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,wkKAAwkK;;MCa5kK,UAAU;;;;;;;;;oBACwB,KAAK;mBACN,KAAK;;EAMjD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAEnC,MAAM,iBAAiB,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC/B;KACF,CAAC;IAEF,MAAM,WAAW,GAAG;MAClB,iBAAiB,EAAE,CAAC;KACrB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,GAAG;MACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;QAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;OACtB;KACF,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,GAAG;MACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;QAC3C,iBAAiB,EAAE,CAAC;OACrB;KACF,CAAC;IAEF,QACE,WACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpB,WAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9E,WAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7E,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAED,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/form-toggle/index.scss?tag=utrecht-form-toggle&encapsulation=shadow","./src/components/form-toggle/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-toggle/css\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'index.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-738f8f6d.js';
2
2
  import { c as clsx } from './clsx.m-9f200cc0.js';
3
3
 
4
- const indexCss = ".utrecht-form-toggle{align-items:center;border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor);display:flex;height:var(--utrecht-form-toggle-height, 2em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none;width:var(--utrecht-form-toggle-width, 6em)}.utrecht-form-toggle--focus,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus{border-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;height:100%;width:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important;width:1px !important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus~.utrecht-form-toggle__track{outline-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));outline-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));outline-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}:host{display:inline-block}:host([hidden]){display:none !important}";
4
+ const indexCss = ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height, 2em);border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor);display:flex;inline-size:var(--utrecht-form-toggle-width, 6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width, 1px), 1px);}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div:disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}:host{display:inline-block}:host([hidden]){display:none !important}";
5
5
 
6
6
  const FormToggle = class {
7
7
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"utrecht-form-toggle.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+rJAA+rJ;;MCansJ,UAAU;;;;;;;oBACwB,KAAK;mBACN,KAAK;;EAMjD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAEnC,MAAM,iBAAiB,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC/B;KACF,CAAC;IAEF,MAAM,WAAW,GAAG;MAClB,iBAAiB,EAAE,CAAC;KACrB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,GAAG;MACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;QAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;OACtB;KACF,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,GAAG;MACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;QAC3C,iBAAiB,EAAE,CAAC;OACrB;KACF,CAAC;IAEF,QACE,WACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpB,WAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9E,WAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7E,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAED,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;GACH;;;;;;","names":[],"sources":["./src/components/form-toggle/index.scss?tag=utrecht-form-toggle&encapsulation=shadow","./src/components/form-toggle/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-toggle/css\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'index.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"utrecht-form-toggle.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,wkKAAwkK;;MCa5kK,UAAU;;;;;;;oBACwB,KAAK;mBACN,KAAK;;EAMjD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAEnC,MAAM,iBAAiB,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC/B;KACF,CAAC;IAEF,MAAM,WAAW,GAAG;MAClB,iBAAiB,EAAE,CAAC;KACrB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,GAAG;MACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;QAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;OACtB;KACF,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,GAAG;MACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;QAC3C,iBAAiB,EAAE,CAAC;OACrB;KACF,CAAC;IAEF,QACE,WACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpB,WAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9E,WAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7E,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAED,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;GACH;;;;;;","names":[],"sources":["./src/components/form-toggle/index.scss?tag=utrecht-form-toggle&encapsulation=shadow","./src/components/form-toggle/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-toggle/css\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'index.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
@@ -0,0 +1,2 @@
1
+ import{r as t,c as r,h as o}from"./p-8c18a309.js";import{c as e}from"./p-4345d76d.js";const c=".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height, 2em);border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor);display:flex;inline-size:var(--utrecht-form-toggle-width, 6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width, 1px), 1px);}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div:disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}:host{display:inline-block}:host([hidden]){display:none !important}";const l=class{constructor(o){t(this,o);this.utrechtBlur=r(this,"utrechtBlur",7);this.utrechtChange=r(this,"utrechtChange",7);this.utrechtFocus=r(this,"utrechtFocus",7);this.utrechtInput=r(this,"utrechtInput",7);this.disabled=false;this.checked=false}render(){const{checked:t,disabled:r}=this;const c=()=>{if(!this.disabled){this.checked=!this.checked;this.utrechtInput.emit(this);this.utrechtChange.emit(this)}};const l=()=>{c()};const g=t=>{if(t.code==="Space"||t.key===" "){t.preventDefault()}};const h=t=>{if(t.code==="Space"||t.key===" "){c()}};return o("div",{class:e("utrecht-form-toggle",t&&"utrecht-form-toggle--checked",!t&&"utrecht-form-toggle--not-checked",r&&"utrecht-form-toggle--disabled"),tabIndex:r?null:0,role:"switch","aria-disabled":r?"true":null,onClick:l,onKeyPress:g,onKeyUp:h},o("div",{class:"utrecht-form-toggle__label utrecht-form-toggle__label--off"}),o("div",{class:"utrecht-form-toggle__label utrecht-form-toggle__label--on"}),o("div",{class:e("utrecht-form-toggle__track",t&&"utrecht-form-toggle__track--checked",!t&&"utrecht-form-toggle__track--not-checked",r&&"utrecht-form-toggle__track--disabled")},o("div",{class:e("utrecht-form-toggle__thumb",t&&"utrecht-form-toggle__thumb--checked",!t&&"utrecht-form-toggle__thumb--not-checked",r&&"utrecht-form-toggle__thumb--disabled")})))}};l.style=c;export{l as utrecht_form_toggle};
2
+ //# sourceMappingURL=p-6c217bd7.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["indexCss","FormToggle","render","checked","disabled","this","toggleInteraction","utrechtInput","emit","utrechtChange","handleClick","handleKeyPress","evt","code","key","preventDefault","handleKeyUp","h","class","clsx","tabIndex","role","onClick","onKeyPress","onKeyUp"],"sources":["./src/components/form-toggle/index.scss?tag=utrecht-form-toggle&encapsulation=shadow","./src/components/form-toggle/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-toggle/css\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'index.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAW,gsJ,MCaJC,EAAU,M,mNACwB,M,aACD,K,CAM5CC,SACE,MAAMC,QAAEA,EAAOC,SAAEA,GAAaC,KAE9B,MAAMC,EAAoB,KACxB,IAAKD,KAAKD,SAAU,CAClBC,KAAKF,SAAWE,KAAKF,QACrBE,KAAKE,aAAaC,KAAKH,MACvBA,KAAKI,cAAcD,KAAKH,K,GAI5B,MAAMK,EAAc,KAClBJ,GAAmB,EAGrB,MAAMK,EAAkBC,IACtB,GAAIA,EAAIC,OAAS,SAAWD,EAAIE,MAAQ,IAAK,CAE3CF,EAAIG,gB,GAIR,MAAMC,EAAeJ,IACnB,GAAIA,EAAIC,OAAS,SAAWD,EAAIE,MAAQ,IAAK,CAC3CR,G,GAIJ,OACEW,EAAA,OACEC,MAAOC,EACL,sBACAhB,GAAW,gCACVA,GAAW,mCACZC,GAAY,iCAEdgB,SAAUhB,EAAW,KAAO,EAC5BiB,KAAK,SAAQ,gBACEjB,EAAW,OAAS,KACnCkB,QAASZ,EACTa,WAAYZ,EACZa,QAASR,GAETC,EAAA,OAAKC,MAAM,+DACXD,EAAA,OAAKC,MAAM,8DACXD,EAAA,OACEC,MAAOC,EACL,6BACAhB,GAAW,uCACVA,GAAW,0CACZC,GAAY,yCAGda,EAAA,OACEC,MAAOC,EACL,6BACAhB,GAAW,uCACVA,GAAW,0CACZC,GAAY,2C"}
1
+ {"version":3,"names":["indexCss","FormToggle","render","checked","disabled","this","toggleInteraction","utrechtInput","emit","utrechtChange","handleClick","handleKeyPress","evt","code","key","preventDefault","handleKeyUp","h","class","clsx","tabIndex","role","onClick","onKeyPress","onKeyUp"],"sources":["./src/components/form-toggle/index.scss?tag=utrecht-form-toggle&encapsulation=shadow","./src/components/form-toggle/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-toggle/css\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'index.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAW,ykK,MCaJC,EAAU,M,mNACwB,M,aACD,K,CAM5CC,SACE,MAAMC,QAAEA,EAAOC,SAAEA,GAAaC,KAE9B,MAAMC,EAAoB,KACxB,IAAKD,KAAKD,SAAU,CAClBC,KAAKF,SAAWE,KAAKF,QACrBE,KAAKE,aAAaC,KAAKH,MACvBA,KAAKI,cAAcD,KAAKH,K,GAI5B,MAAMK,EAAc,KAClBJ,GAAmB,EAGrB,MAAMK,EAAkBC,IACtB,GAAIA,EAAIC,OAAS,SAAWD,EAAIE,MAAQ,IAAK,CAE3CF,EAAIG,gB,GAIR,MAAMC,EAAeJ,IACnB,GAAIA,EAAIC,OAAS,SAAWD,EAAIE,MAAQ,IAAK,CAC3CR,G,GAIJ,OACEW,EAAA,OACEC,MAAOC,EACL,sBACAhB,GAAW,gCACVA,GAAW,mCACZC,GAAY,iCAEdgB,SAAUhB,EAAW,KAAO,EAC5BiB,KAAK,SAAQ,gBACEjB,EAAW,OAAS,KACnCkB,QAASZ,EACTa,WAAYZ,EACZa,QAASR,GAETC,EAAA,OAAKC,MAAM,+DACXD,EAAA,OAAKC,MAAM,8DACXD,EAAA,OACEC,MAAOC,EACL,6BACAhB,GAAW,uCACVA,GAAW,0CACZC,GAAY,yCAGda,EAAA,OACEC,MAAOC,EACL,6BACAhB,GAAW,uCACVA,GAAW,0CACZC,GAAY,2C"}
@@ -1,2 +1,2 @@
1
- import{p as e,b as t}from"./p-8c18a309.js";export{s as setNonce}from"./p-8c18a309.js";const c=()=>{const t=import.meta.url;const c={};if(t!==""){c.resourcesUrl=new URL(".",t).href}return e(c)};c().then((e=>t(JSON.parse('[["p-457c2c8d",[[1,"utrecht-contact-card-template"]]],["p-72207964",[[1,"utrecht-digid-button",{"type":[1]}]]],["p-1e2144c8",[[1,"utrecht-backdrop",{"viewport":[4]}]]],["p-1a7bf84d",[[1,"utrecht-breadcrumb",{"json":[1],"variant":[1]}]]],["p-cc9af612",[[1,"utrecht-checkbox",{"disabled":[516],"readOnly":[516,"readonly"],"checked":[4],"value":[1]}]]],["p-c6d594d8",[[1,"utrecht-custom-checkbox",{"disabled":[4],"checked":[4],"indeterminate":[4],"invalid":[4],"required":[4]}]]],["p-445bf884",[[1,"utrecht-eherkenning-logo"]]],["p-646f05ff",[[1,"utrecht-eidas-logo"]]],["p-c68ef1a8",[[1,"utrecht-form-field-checkbox",{"label":[4],"disabled":[516],"checked":[516],"invalid":[516],"required":[516],"value":[32]}]]],["p-1b45a887",[[1,"utrecht-form-field-textarea",{"disabled":[516],"invalid":[516],"readOnly":[516,"readonly"],"placeholder":[1],"required":[516],"value":[1]}]]],["p-b02f2068",[[1,"utrecht-form-field-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["p-2a9d889f",[[1,"utrecht-form-toggle",{"disabled":[516],"checked":[516]}]]],["p-78b47153",[[4,"utrecht-html-content"]]],["p-31a8bbf7",[[1,"utrecht-icon-afspraak-maken"]]],["p-89ef1bf9",[[1,"utrecht-icon-afval"]]],["p-225e1376",[[1,"utrecht-icon-afval-container"]]],["p-f24b5beb",[[1,"utrecht-icon-afval-containerpas"]]],["p-896832c5",[[1,"utrecht-icon-afval-kalender"]]],["p-c86234ea",[[1,"utrecht-icon-afval-pmd"]]],["p-d787e083",[[1,"utrecht-icon-afval-scheiden"]]],["p-bed8fb44",[[1,"utrecht-icon-afvalkalender"]]],["p-805a5715",[[1,"utrecht-icon-alleen"]]],["p-41d1bf3d",[[1,"utrecht-icon-arrow"]]],["p-7383f4f3",[[1,"utrecht-icon-auto"]]],["p-db77c8ff",[[1,"utrecht-icon-begroting"]]],["p-452c9c00",[[1,"utrecht-icon-bestemmingsplan"]]],["p-051114db",[[1,"utrecht-icon-betaaldatum"]]],["p-5b184412",[[1,"utrecht-icon-bewijsstukken"]]],["p-f7536b50",[[1,"utrecht-icon-bijstand"]]],["p-a3e778a3",[[1,"utrecht-icon-blad"]]],["p-ac5c8c22",[[1,"utrecht-icon-bouwproject"]]],["p-67cc452e",[[1,"utrecht-icon-brandgevaar"]]],["p-8dead1b9",[[1,"utrecht-icon-brief-betalen"]]],["p-478febf2",[[1,"utrecht-icon-checkmark"]]],["p-659d6fff",[[1,"utrecht-icon-college-b-w"]]],["p-c5f81921",[[1,"utrecht-icon-container"]]],["p-fb69fc44",[[1,"utrecht-icon-container-bio"]]],["p-1aa51b1e",[[1,"utrecht-icon-container-glas"]]],["p-d14ee666",[[1,"utrecht-icon-container-groenafval"]]],["p-3a9cdcb6",[[1,"utrecht-icon-container-met-zak"]]],["p-3d3fba86",[[1,"utrecht-icon-container-papier"]]],["p-9053d7fc",[[1,"utrecht-icon-container-pmd"]]],["p-5617f96e",[[1,"utrecht-icon-container-restafval"]]],["p-4ad007f4",[[1,"utrecht-icon-container-textiel"]]],["p-56be259e",[[1,"utrecht-icon-cross"]]],["p-663dce0e",[[1,"utrecht-icon-dakloos"]]],["p-13ad528c",[[1,"utrecht-icon-dementie"]]],["p-256beaa9",[[1,"utrecht-icon-documenten"]]],["p-9794b9de",[[1,"utrecht-icon-duurzaam"]]],["p-16dd0d14",[[1,"utrecht-icon-eenzaamheid"]]],["p-c20baa02",[[1,"utrecht-icon-eikenprocessie"]]],["p-332b1348",[[1,"utrecht-icon-elektrisch-rijden"]]],["p-f3de09d9",[[1,"utrecht-icon-energie-vergoeding"]]],["p-692cf32c",[[1,"utrecht-icon-energietransitie"]]],["p-b09f94d1",[[1,"utrecht-icon-error"]]],["p-e537aa9c",[[1,"utrecht-icon-evenementen"]]],["p-baf01b95",[[1,"utrecht-icon-facebook"]]],["p-9d190790",[[1,"utrecht-icon-fiets"]]],["p-bd92f5f5",[[1,"utrecht-icon-filter"]]],["p-b9584b51",[[1,"utrecht-icon-geboorte"]]],["p-2d50dd4c",[[1,"utrecht-icon-gebruiker-centraal"]]],["p-a12621fe",[[1,"utrecht-icon-gebruiker-ingelogd"]]],["p-5ee30241",[[1,"utrecht-icon-gegevenswoordenboek"]]],["p-cc8add05",[[1,"utrecht-icon-geluid"]]],["p-b2cf8b5f",[[1,"utrecht-icon-gemeente-locatie"]]],["p-a39e5955",[[1,"utrecht-icon-gemeenteraad"]]],["p-b08fd0e0",[[1,"utrecht-icon-gereedschap"]]],["p-ed9c1095",[[1,"utrecht-icon-gezicht"]]],["p-d967b528",[[1,"utrecht-icon-gezin"]]],["p-57fd6e7e",[[1,"utrecht-icon-glas-afval"]]],["p-d7997511",[[1,"utrecht-icon-glijbaan"]]],["p-8a344027",[[1,"utrecht-icon-grafiek"]]],["p-f65db2ba",[[1,"utrecht-icon-grofvuil"]]],["p-0962c2e2",[[1,"utrecht-icon-grofvuil-ophalen"]]],["p-0dae8f2b",[[1,"utrecht-icon-herdenking"]]],["p-4123ac33",[[1,"utrecht-icon-hondenbelasting"]]],["p-80e63b28",[[1,"utrecht-icon-horeca"]]],["p-f8ec8f8c",[[1,"utrecht-icon-horecavergunning"]]],["p-77285a7f",[[1,"utrecht-icon-huis"]]],["p-1c5b2be1",[[1,"utrecht-icon-huis-en-omgeving"]]],["p-a9ac9bf8",[[1,"utrecht-icon-huishoudelijk-geweld"]]],["p-bea1a1cc",[[1,"utrecht-icon-hulp-huishouden"]]],["p-6322f347",[[1,"utrecht-icon-hulp-vervoer"]]],["p-9c189405",[[1,"utrecht-icon-hulp-zorg"]]],["p-2e536a2d",[[1,"utrecht-icon-hulpmiddelen-gezin"]]],["p-646d6c76",[[1,"utrecht-icon-hulpverlening"]]],["p-c5f8dd1a",[[1,"utrecht-icon-idee"]]],["p-5ce926d9",[[1,"utrecht-icon-informatie"]]],["p-5cf5ac80",[[1,"utrecht-icon-information"]]],["p-c7409e95",[[1,"utrecht-icon-innovatie"]]],["p-6bb57245",[[1,"utrecht-icon-inspraak-inwoners"]]],["p-5caf8baf",[[1,"utrecht-icon-instagram"]]],["p-fc6293f3",[[1,"utrecht-icon-kalender"]]],["p-15d8ed89",[[1,"utrecht-icon-kennis"]]],["p-bd932308",[[1,"utrecht-icon-kerstbomen"]]],["p-9d290f85",[[1,"utrecht-icon-klachten"]]],["p-b04bb607",[[1,"utrecht-icon-kroon"]]],["p-22e35d94",[[1,"utrecht-icon-laadpaal"]]],["p-feebe255",[[1,"utrecht-icon-lantaarnpaal"]]],["p-a4cd792a",[[1,"utrecht-icon-lantaarnpaal-oud"]]],["p-c5f9b943",[[1,"utrecht-icon-leren"]]],["p-01db966d",[[1,"utrecht-icon-let-op"]]],["p-84ecdb9a",[[1,"utrecht-icon-linkedin"]]],["p-3bc6abc6",[[1,"utrecht-icon-list"]]],["p-0212d215",[[1,"utrecht-icon-loupe"]]],["p-44fadcc7",[[1,"utrecht-icon-markt"]]],["p-cce85468",[[1,"utrecht-icon-melding"]]],["p-fa6743ca",[[1,"utrecht-icon-melding-boom"]]],["p-fbb9ac9f",[[1,"utrecht-icon-melding-klacht"]]],["p-bf84eb2e",[[1,"utrecht-icon-melding-openbareruimte"]]],["p-136958a4",[[1,"utrecht-icon-melding-verlichting"]]],["p-d605f3a3",[[1,"utrecht-icon-menselijk"]]],["p-af7eb7c5",[[1,"utrecht-icon-meterkast"]]],["p-8cc70e9b",[[1,"utrecht-icon-milieu-ontheffing"]]],["p-b921afc3",[[1,"utrecht-icon-milieu-zone"]]],["p-41bfa6c8",[[1,"utrecht-icon-mobiliteit"]]],["p-14b2ccd4",[[1,"utrecht-icon-natuur"]]],["p-e2089d37",[[1,"utrecht-icon-nieuw-huis"]]],["p-111a96db",[[1,"utrecht-icon-nummerbord"]]],["p-cbafded9",[[1,"utrecht-icon-om-het-huis"]]],["p-3bf3914e",[[1,"utrecht-icon-omgeving"]]],["p-eb364ded",[[1,"utrecht-icon-omgevingsvisie"]]],["p-a55f7566",[[1,"utrecht-icon-omgevingswet"]]],["p-90415ac0",[[1,"utrecht-icon-onderhoud"]]],["p-4dde89de",[[1,"utrecht-icon-ondernemen"]]],["p-d0affb8c",[[1,"utrecht-icon-openingstijden"]]],["p-e7cf25d8",[[1,"utrecht-icon-over-de-stad"]]],["p-0c06eb2b",[[1,"utrecht-icon-overlijden"]]],["p-073595b2",[[1,"utrecht-icon-panden"]]],["p-567b6749",[[1,"utrecht-icon-park"]]],["p-9a760473",[[1,"utrecht-icon-parkeerkaart"]]],["p-e2f79683",[[1,"utrecht-icon-parkeervergunning"]]],["p-5f326bf2",[[1,"utrecht-icon-parken"]]],["p-317f1c50",[[1,"utrecht-icon-parkeren"]]],["p-9ed3ff4a",[[1,"utrecht-icon-parkeren-bedrijven"]]],["p-d45b8b6a",[[1,"utrecht-icon-parkeren-betaalautomaat"]]],["p-df10fa18",[[1,"utrecht-icon-parkeren-betalen"]]],["p-031ac20a",[[1,"utrecht-icon-participatie-campagne"]]],["p-0da7c8f4",[[1,"utrecht-icon-participatie-like"]]],["p-151cb69e",[[1,"utrecht-icon-participatie-pitch"]]],["p-25248cd6",[[1,"utrecht-icon-paspoort"]]],["p-efc911b1",[[1,"utrecht-icon-presentatie"]]],["p-b88882d6",[[1,"utrecht-icon-prijskaartje"]]],["p-090f9a59",[[1,"utrecht-icon-rijbewijs"]]],["p-79f35861",[[1,"utrecht-icon-rioolheffing"]]],["p-e54b1539",[[1,"utrecht-icon-rolstoel"]]],["p-da8b972c",[[1,"utrecht-icon-schild-gemeente-utrecht"]]],["p-96f371cd",[[1,"utrecht-icon-shoppen"]]],["p-be2c8f12",[[1,"utrecht-icon-sinterklaas"]]],["p-69970d55",[[1,"utrecht-icon-slechtziende-hoordende"]]],["p-deb8b4ea",[[1,"utrecht-icon-sport"]]],["p-73362a3c",[[1,"utrecht-icon-sport-en-cultuur"]]],["p-5682ca8a",[[1,"utrecht-icon-sport-voetbal"]]],["p-1627847b",[[1,"utrecht-icon-stookverbod"]]],["p-8efff21d",[[1,"utrecht-icon-strand"]]],["p-c5590c02",[[1,"utrecht-icon-strooien"]]],["p-19ea6041",[[1,"utrecht-icon-subsidie"]]],["p-0647bee3",[[1,"utrecht-icon-subsidie-gezin"]]],["p-e4e0d33d",[[1,"utrecht-icon-t-shirt"]]],["p-15d566ff",[[1,"utrecht-icon-thuiswerken"]]],["p-8b356d74",[[1,"utrecht-icon-toeslag"]]],["p-4418bfee",[[1,"utrecht-icon-trein"]]],["p-f6c0f5a2",[[1,"utrecht-icon-trouwen"]]],["p-56465a53",[[1,"utrecht-icon-twitter"]]],["p-6664ea60",[[1,"utrecht-icon-uw-wijk"]]],["p-09c61a53",[[1,"utrecht-icon-vaccinatie"]]],["p-23777cc6",[[1,"utrecht-icon-veilige-wijk"]]],["p-f90a554b",[[1,"utrecht-icon-vergaderen"]]],["p-5f4bb8ee",[[1,"utrecht-icon-vergaderendigitaal"]]],["p-de57ec47",[[1,"utrecht-icon-vergoeding"]]],["p-a3d4818f",[[1,"utrecht-icon-verhuizen"]]],["p-69371606",[[1,"utrecht-icon-verkeerslicht"]]],["p-b08f224b",[[1,"utrecht-icon-verkiezingen"]]],["p-80d3aab5",[[1,"utrecht-icon-verslaving"]]],["p-91cc0ae6",[[1,"utrecht-icon-vervoersvoorziening"]]],["p-26195c4f",[[1,"utrecht-icon-virus"]]],["p-52cb005c",[[1,"utrecht-icon-vluchtelingen"]]],["p-2c17f52b",[[1,"utrecht-icon-voorzieningen-vervoer"]]],["p-c677d636",[[1,"utrecht-icon-vrijwilligerswerk"]]],["p-05a0dfea",[[1,"utrecht-icon-vuilnisbak"]]],["p-4491ec4c",[[1,"utrecht-icon-vuilniszak"]]],["p-327e2be1",[[1,"utrecht-icon-vuurwerk"]]],["p-2eaec37b",[[1,"utrecht-icon-wandelstok"]]],["p-02d0f64e",[[1,"utrecht-icon-warm"]]],["p-8ef697d0",[[1,"utrecht-icon-warning"]]],["p-1e71cf07",[[1,"utrecht-icon-werken"]]],["p-f1a6e17f",[[1,"utrecht-icon-werkzaamheden"]]],["p-3e0b1e2a",[[1,"utrecht-icon-whatsapp"]]],["p-6d0b1517",[[1,"utrecht-icon-wonen-kosten"]]],["p-7050fd6d",[[1,"utrecht-icon-woning-zoeken"]]],["p-553cba3b",[[1,"utrecht-icon-youtube"]]],["p-1259a9fc",[[1,"utrecht-icon-zelfstandig-wonen"]]],["p-00f1e150",[[1,"utrecht-icon-zoomin"]]],["p-59858e4f",[[1,"utrecht-icon-zoomout"]]],["p-7bda0e57",[[1,"utrecht-icon-zorg-huis"]]],["p-e02f6006",[[1,"utrecht-icon-zweefpaal"]]],["p-dad922cd",[[1,"utrecht-icon-zwemmen"]]],["p-5b10f0ee",[[1,"utrecht-logo-button"]]],["p-d40cd3d8",[[1,"utrecht-map-marker"]]],["p-918e0677",[[1,"utrecht-page-footer"]]],["p-b33a0505",[[1,"utrecht-pagination",{"links":[1],"next":[1],"prev":[1],"currentIndex":[2,"current-index"]}]]],["p-be19ad50",[[1,"utrecht-sidenav",{"json":[1]}]]],["p-b04137d4",[[1,"utrecht-table"]]],["p-c107edc8",[[1,"utrecht-table-body"]]],["p-20e71a51",[[1,"utrecht-table-caption"]]],["p-f53e325f",[[1,"utrecht-table-cell"]]],["p-8094463e",[[1,"utrecht-table-footer"]]],["p-0f75c75f",[[1,"utrecht-table-header"]]],["p-5bea1ba0",[[1,"utrecht-table-header-cell",{"scope":[1]}]]],["p-af711695",[[1,"utrecht-table-row"]]],["p-86d190ef",[[1,"utrecht-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["p-de3541c1",[[1,"utrecht-digid-logo"]]],["p-71ef7d75",[[1,"utrecht-alert",{"type":[1]}],[1,"utrecht-article"],[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}],[1,"utrecht-badge-data"],[1,"utrecht-badge-status",{"status":[1]}],[1,"utrecht-button",{"appearance":[1],"busy":[4],"disabled":[4],"type":[1]}],[1,"utrecht-button-group"],[1,"utrecht-button-link",{"appearance":[1],"external":[4],"href":[1],"placeholder":[4]}],[1,"utrecht-code"],[1,"utrecht-code-block"],[1,"utrecht-color-sample",{"color":[1]}],[1,"utrecht-document"],[1,"utrecht-emphasis"],[1,"utrecht-form-field-description",{"status":[513]}],[1,"utrecht-heading",{"level":[2]}],[1,"utrecht-heading-1"],[1,"utrecht-heading-4"],[1,"utrecht-heading-5"],[1,"utrecht-heading-6"],[1,"utrecht-heading-group"],[1,"utrecht-icon"],[1,"utrecht-link",{"href":[1]}],[1,"utrecht-link-button",{"disabled":[4],"type":[1],"inline":[4],"pressed":[4]}],[1,"utrecht-logo"],[1,"utrecht-mark"],[1,"utrecht-number-value",{"value":[8]}],[1,"utrecht-page"],[1,"utrecht-page-content"],[1,"utrecht-page-header"],[1,"utrecht-pre-heading"],[1,"utrecht-separator"],[1,"utrecht-skip-link",{"href":[1]}],[1,"utrecht-spotlight-section",{"appearance":[1]}],[1,"utrecht-url"],[1,"utrecht-heading-2"],[1,"utrecht-heading-3"],[1,"utrecht-paragraph",{"lead":[4]}]]]]'),e)));
1
+ import{p as e,b as t}from"./p-8c18a309.js";export{s as setNonce}from"./p-8c18a309.js";const c=()=>{const t=import.meta.url;const c={};if(t!==""){c.resourcesUrl=new URL(".",t).href}return e(c)};c().then((e=>t(JSON.parse('[["p-457c2c8d",[[1,"utrecht-contact-card-template"]]],["p-72207964",[[1,"utrecht-digid-button",{"type":[1]}]]],["p-1e2144c8",[[1,"utrecht-backdrop",{"viewport":[4]}]]],["p-1a7bf84d",[[1,"utrecht-breadcrumb",{"json":[1],"variant":[1]}]]],["p-cc9af612",[[1,"utrecht-checkbox",{"disabled":[516],"readOnly":[516,"readonly"],"checked":[4],"value":[1]}]]],["p-c6d594d8",[[1,"utrecht-custom-checkbox",{"disabled":[4],"checked":[4],"indeterminate":[4],"invalid":[4],"required":[4]}]]],["p-445bf884",[[1,"utrecht-eherkenning-logo"]]],["p-646f05ff",[[1,"utrecht-eidas-logo"]]],["p-c68ef1a8",[[1,"utrecht-form-field-checkbox",{"label":[4],"disabled":[516],"checked":[516],"invalid":[516],"required":[516],"value":[32]}]]],["p-1b45a887",[[1,"utrecht-form-field-textarea",{"disabled":[516],"invalid":[516],"readOnly":[516,"readonly"],"placeholder":[1],"required":[516],"value":[1]}]]],["p-b02f2068",[[1,"utrecht-form-field-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["p-6c217bd7",[[1,"utrecht-form-toggle",{"disabled":[516],"checked":[516]}]]],["p-78b47153",[[4,"utrecht-html-content"]]],["p-31a8bbf7",[[1,"utrecht-icon-afspraak-maken"]]],["p-89ef1bf9",[[1,"utrecht-icon-afval"]]],["p-225e1376",[[1,"utrecht-icon-afval-container"]]],["p-f24b5beb",[[1,"utrecht-icon-afval-containerpas"]]],["p-896832c5",[[1,"utrecht-icon-afval-kalender"]]],["p-c86234ea",[[1,"utrecht-icon-afval-pmd"]]],["p-d787e083",[[1,"utrecht-icon-afval-scheiden"]]],["p-bed8fb44",[[1,"utrecht-icon-afvalkalender"]]],["p-805a5715",[[1,"utrecht-icon-alleen"]]],["p-41d1bf3d",[[1,"utrecht-icon-arrow"]]],["p-7383f4f3",[[1,"utrecht-icon-auto"]]],["p-db77c8ff",[[1,"utrecht-icon-begroting"]]],["p-452c9c00",[[1,"utrecht-icon-bestemmingsplan"]]],["p-051114db",[[1,"utrecht-icon-betaaldatum"]]],["p-5b184412",[[1,"utrecht-icon-bewijsstukken"]]],["p-f7536b50",[[1,"utrecht-icon-bijstand"]]],["p-a3e778a3",[[1,"utrecht-icon-blad"]]],["p-ac5c8c22",[[1,"utrecht-icon-bouwproject"]]],["p-67cc452e",[[1,"utrecht-icon-brandgevaar"]]],["p-8dead1b9",[[1,"utrecht-icon-brief-betalen"]]],["p-478febf2",[[1,"utrecht-icon-checkmark"]]],["p-659d6fff",[[1,"utrecht-icon-college-b-w"]]],["p-c5f81921",[[1,"utrecht-icon-container"]]],["p-fb69fc44",[[1,"utrecht-icon-container-bio"]]],["p-1aa51b1e",[[1,"utrecht-icon-container-glas"]]],["p-d14ee666",[[1,"utrecht-icon-container-groenafval"]]],["p-3a9cdcb6",[[1,"utrecht-icon-container-met-zak"]]],["p-3d3fba86",[[1,"utrecht-icon-container-papier"]]],["p-9053d7fc",[[1,"utrecht-icon-container-pmd"]]],["p-5617f96e",[[1,"utrecht-icon-container-restafval"]]],["p-4ad007f4",[[1,"utrecht-icon-container-textiel"]]],["p-56be259e",[[1,"utrecht-icon-cross"]]],["p-663dce0e",[[1,"utrecht-icon-dakloos"]]],["p-13ad528c",[[1,"utrecht-icon-dementie"]]],["p-256beaa9",[[1,"utrecht-icon-documenten"]]],["p-9794b9de",[[1,"utrecht-icon-duurzaam"]]],["p-16dd0d14",[[1,"utrecht-icon-eenzaamheid"]]],["p-c20baa02",[[1,"utrecht-icon-eikenprocessie"]]],["p-332b1348",[[1,"utrecht-icon-elektrisch-rijden"]]],["p-f3de09d9",[[1,"utrecht-icon-energie-vergoeding"]]],["p-692cf32c",[[1,"utrecht-icon-energietransitie"]]],["p-b09f94d1",[[1,"utrecht-icon-error"]]],["p-e537aa9c",[[1,"utrecht-icon-evenementen"]]],["p-baf01b95",[[1,"utrecht-icon-facebook"]]],["p-9d190790",[[1,"utrecht-icon-fiets"]]],["p-bd92f5f5",[[1,"utrecht-icon-filter"]]],["p-b9584b51",[[1,"utrecht-icon-geboorte"]]],["p-2d50dd4c",[[1,"utrecht-icon-gebruiker-centraal"]]],["p-a12621fe",[[1,"utrecht-icon-gebruiker-ingelogd"]]],["p-5ee30241",[[1,"utrecht-icon-gegevenswoordenboek"]]],["p-cc8add05",[[1,"utrecht-icon-geluid"]]],["p-b2cf8b5f",[[1,"utrecht-icon-gemeente-locatie"]]],["p-a39e5955",[[1,"utrecht-icon-gemeenteraad"]]],["p-b08fd0e0",[[1,"utrecht-icon-gereedschap"]]],["p-ed9c1095",[[1,"utrecht-icon-gezicht"]]],["p-d967b528",[[1,"utrecht-icon-gezin"]]],["p-57fd6e7e",[[1,"utrecht-icon-glas-afval"]]],["p-d7997511",[[1,"utrecht-icon-glijbaan"]]],["p-8a344027",[[1,"utrecht-icon-grafiek"]]],["p-f65db2ba",[[1,"utrecht-icon-grofvuil"]]],["p-0962c2e2",[[1,"utrecht-icon-grofvuil-ophalen"]]],["p-0dae8f2b",[[1,"utrecht-icon-herdenking"]]],["p-4123ac33",[[1,"utrecht-icon-hondenbelasting"]]],["p-80e63b28",[[1,"utrecht-icon-horeca"]]],["p-f8ec8f8c",[[1,"utrecht-icon-horecavergunning"]]],["p-77285a7f",[[1,"utrecht-icon-huis"]]],["p-1c5b2be1",[[1,"utrecht-icon-huis-en-omgeving"]]],["p-a9ac9bf8",[[1,"utrecht-icon-huishoudelijk-geweld"]]],["p-bea1a1cc",[[1,"utrecht-icon-hulp-huishouden"]]],["p-6322f347",[[1,"utrecht-icon-hulp-vervoer"]]],["p-9c189405",[[1,"utrecht-icon-hulp-zorg"]]],["p-2e536a2d",[[1,"utrecht-icon-hulpmiddelen-gezin"]]],["p-646d6c76",[[1,"utrecht-icon-hulpverlening"]]],["p-c5f8dd1a",[[1,"utrecht-icon-idee"]]],["p-5ce926d9",[[1,"utrecht-icon-informatie"]]],["p-5cf5ac80",[[1,"utrecht-icon-information"]]],["p-c7409e95",[[1,"utrecht-icon-innovatie"]]],["p-6bb57245",[[1,"utrecht-icon-inspraak-inwoners"]]],["p-5caf8baf",[[1,"utrecht-icon-instagram"]]],["p-fc6293f3",[[1,"utrecht-icon-kalender"]]],["p-15d8ed89",[[1,"utrecht-icon-kennis"]]],["p-bd932308",[[1,"utrecht-icon-kerstbomen"]]],["p-9d290f85",[[1,"utrecht-icon-klachten"]]],["p-b04bb607",[[1,"utrecht-icon-kroon"]]],["p-22e35d94",[[1,"utrecht-icon-laadpaal"]]],["p-feebe255",[[1,"utrecht-icon-lantaarnpaal"]]],["p-a4cd792a",[[1,"utrecht-icon-lantaarnpaal-oud"]]],["p-c5f9b943",[[1,"utrecht-icon-leren"]]],["p-01db966d",[[1,"utrecht-icon-let-op"]]],["p-84ecdb9a",[[1,"utrecht-icon-linkedin"]]],["p-3bc6abc6",[[1,"utrecht-icon-list"]]],["p-0212d215",[[1,"utrecht-icon-loupe"]]],["p-44fadcc7",[[1,"utrecht-icon-markt"]]],["p-cce85468",[[1,"utrecht-icon-melding"]]],["p-fa6743ca",[[1,"utrecht-icon-melding-boom"]]],["p-fbb9ac9f",[[1,"utrecht-icon-melding-klacht"]]],["p-bf84eb2e",[[1,"utrecht-icon-melding-openbareruimte"]]],["p-136958a4",[[1,"utrecht-icon-melding-verlichting"]]],["p-d605f3a3",[[1,"utrecht-icon-menselijk"]]],["p-af7eb7c5",[[1,"utrecht-icon-meterkast"]]],["p-8cc70e9b",[[1,"utrecht-icon-milieu-ontheffing"]]],["p-b921afc3",[[1,"utrecht-icon-milieu-zone"]]],["p-41bfa6c8",[[1,"utrecht-icon-mobiliteit"]]],["p-14b2ccd4",[[1,"utrecht-icon-natuur"]]],["p-e2089d37",[[1,"utrecht-icon-nieuw-huis"]]],["p-111a96db",[[1,"utrecht-icon-nummerbord"]]],["p-cbafded9",[[1,"utrecht-icon-om-het-huis"]]],["p-3bf3914e",[[1,"utrecht-icon-omgeving"]]],["p-eb364ded",[[1,"utrecht-icon-omgevingsvisie"]]],["p-a55f7566",[[1,"utrecht-icon-omgevingswet"]]],["p-90415ac0",[[1,"utrecht-icon-onderhoud"]]],["p-4dde89de",[[1,"utrecht-icon-ondernemen"]]],["p-d0affb8c",[[1,"utrecht-icon-openingstijden"]]],["p-e7cf25d8",[[1,"utrecht-icon-over-de-stad"]]],["p-0c06eb2b",[[1,"utrecht-icon-overlijden"]]],["p-073595b2",[[1,"utrecht-icon-panden"]]],["p-567b6749",[[1,"utrecht-icon-park"]]],["p-9a760473",[[1,"utrecht-icon-parkeerkaart"]]],["p-e2f79683",[[1,"utrecht-icon-parkeervergunning"]]],["p-5f326bf2",[[1,"utrecht-icon-parken"]]],["p-317f1c50",[[1,"utrecht-icon-parkeren"]]],["p-9ed3ff4a",[[1,"utrecht-icon-parkeren-bedrijven"]]],["p-d45b8b6a",[[1,"utrecht-icon-parkeren-betaalautomaat"]]],["p-df10fa18",[[1,"utrecht-icon-parkeren-betalen"]]],["p-031ac20a",[[1,"utrecht-icon-participatie-campagne"]]],["p-0da7c8f4",[[1,"utrecht-icon-participatie-like"]]],["p-151cb69e",[[1,"utrecht-icon-participatie-pitch"]]],["p-25248cd6",[[1,"utrecht-icon-paspoort"]]],["p-efc911b1",[[1,"utrecht-icon-presentatie"]]],["p-b88882d6",[[1,"utrecht-icon-prijskaartje"]]],["p-090f9a59",[[1,"utrecht-icon-rijbewijs"]]],["p-79f35861",[[1,"utrecht-icon-rioolheffing"]]],["p-e54b1539",[[1,"utrecht-icon-rolstoel"]]],["p-da8b972c",[[1,"utrecht-icon-schild-gemeente-utrecht"]]],["p-96f371cd",[[1,"utrecht-icon-shoppen"]]],["p-be2c8f12",[[1,"utrecht-icon-sinterklaas"]]],["p-69970d55",[[1,"utrecht-icon-slechtziende-hoordende"]]],["p-deb8b4ea",[[1,"utrecht-icon-sport"]]],["p-73362a3c",[[1,"utrecht-icon-sport-en-cultuur"]]],["p-5682ca8a",[[1,"utrecht-icon-sport-voetbal"]]],["p-1627847b",[[1,"utrecht-icon-stookverbod"]]],["p-8efff21d",[[1,"utrecht-icon-strand"]]],["p-c5590c02",[[1,"utrecht-icon-strooien"]]],["p-19ea6041",[[1,"utrecht-icon-subsidie"]]],["p-0647bee3",[[1,"utrecht-icon-subsidie-gezin"]]],["p-e4e0d33d",[[1,"utrecht-icon-t-shirt"]]],["p-15d566ff",[[1,"utrecht-icon-thuiswerken"]]],["p-8b356d74",[[1,"utrecht-icon-toeslag"]]],["p-4418bfee",[[1,"utrecht-icon-trein"]]],["p-f6c0f5a2",[[1,"utrecht-icon-trouwen"]]],["p-56465a53",[[1,"utrecht-icon-twitter"]]],["p-6664ea60",[[1,"utrecht-icon-uw-wijk"]]],["p-09c61a53",[[1,"utrecht-icon-vaccinatie"]]],["p-23777cc6",[[1,"utrecht-icon-veilige-wijk"]]],["p-f90a554b",[[1,"utrecht-icon-vergaderen"]]],["p-5f4bb8ee",[[1,"utrecht-icon-vergaderendigitaal"]]],["p-de57ec47",[[1,"utrecht-icon-vergoeding"]]],["p-a3d4818f",[[1,"utrecht-icon-verhuizen"]]],["p-69371606",[[1,"utrecht-icon-verkeerslicht"]]],["p-b08f224b",[[1,"utrecht-icon-verkiezingen"]]],["p-80d3aab5",[[1,"utrecht-icon-verslaving"]]],["p-91cc0ae6",[[1,"utrecht-icon-vervoersvoorziening"]]],["p-26195c4f",[[1,"utrecht-icon-virus"]]],["p-52cb005c",[[1,"utrecht-icon-vluchtelingen"]]],["p-2c17f52b",[[1,"utrecht-icon-voorzieningen-vervoer"]]],["p-c677d636",[[1,"utrecht-icon-vrijwilligerswerk"]]],["p-05a0dfea",[[1,"utrecht-icon-vuilnisbak"]]],["p-4491ec4c",[[1,"utrecht-icon-vuilniszak"]]],["p-327e2be1",[[1,"utrecht-icon-vuurwerk"]]],["p-2eaec37b",[[1,"utrecht-icon-wandelstok"]]],["p-02d0f64e",[[1,"utrecht-icon-warm"]]],["p-8ef697d0",[[1,"utrecht-icon-warning"]]],["p-1e71cf07",[[1,"utrecht-icon-werken"]]],["p-f1a6e17f",[[1,"utrecht-icon-werkzaamheden"]]],["p-3e0b1e2a",[[1,"utrecht-icon-whatsapp"]]],["p-6d0b1517",[[1,"utrecht-icon-wonen-kosten"]]],["p-7050fd6d",[[1,"utrecht-icon-woning-zoeken"]]],["p-553cba3b",[[1,"utrecht-icon-youtube"]]],["p-1259a9fc",[[1,"utrecht-icon-zelfstandig-wonen"]]],["p-00f1e150",[[1,"utrecht-icon-zoomin"]]],["p-59858e4f",[[1,"utrecht-icon-zoomout"]]],["p-7bda0e57",[[1,"utrecht-icon-zorg-huis"]]],["p-e02f6006",[[1,"utrecht-icon-zweefpaal"]]],["p-dad922cd",[[1,"utrecht-icon-zwemmen"]]],["p-5b10f0ee",[[1,"utrecht-logo-button"]]],["p-d40cd3d8",[[1,"utrecht-map-marker"]]],["p-918e0677",[[1,"utrecht-page-footer"]]],["p-b33a0505",[[1,"utrecht-pagination",{"links":[1],"next":[1],"prev":[1],"currentIndex":[2,"current-index"]}]]],["p-be19ad50",[[1,"utrecht-sidenav",{"json":[1]}]]],["p-b04137d4",[[1,"utrecht-table"]]],["p-c107edc8",[[1,"utrecht-table-body"]]],["p-20e71a51",[[1,"utrecht-table-caption"]]],["p-f53e325f",[[1,"utrecht-table-cell"]]],["p-8094463e",[[1,"utrecht-table-footer"]]],["p-0f75c75f",[[1,"utrecht-table-header"]]],["p-5bea1ba0",[[1,"utrecht-table-header-cell",{"scope":[1]}]]],["p-af711695",[[1,"utrecht-table-row"]]],["p-86d190ef",[[1,"utrecht-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["p-de3541c1",[[1,"utrecht-digid-logo"]]],["p-71ef7d75",[[1,"utrecht-alert",{"type":[1]}],[1,"utrecht-article"],[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}],[1,"utrecht-badge-data"],[1,"utrecht-badge-status",{"status":[1]}],[1,"utrecht-button",{"appearance":[1],"busy":[4],"disabled":[4],"type":[1]}],[1,"utrecht-button-group"],[1,"utrecht-button-link",{"appearance":[1],"external":[4],"href":[1],"placeholder":[4]}],[1,"utrecht-code"],[1,"utrecht-code-block"],[1,"utrecht-color-sample",{"color":[1]}],[1,"utrecht-document"],[1,"utrecht-emphasis"],[1,"utrecht-form-field-description",{"status":[513]}],[1,"utrecht-heading",{"level":[2]}],[1,"utrecht-heading-1"],[1,"utrecht-heading-4"],[1,"utrecht-heading-5"],[1,"utrecht-heading-6"],[1,"utrecht-heading-group"],[1,"utrecht-icon"],[1,"utrecht-link",{"href":[1]}],[1,"utrecht-link-button",{"disabled":[4],"type":[1],"inline":[4],"pressed":[4]}],[1,"utrecht-logo"],[1,"utrecht-mark"],[1,"utrecht-number-value",{"value":[8]}],[1,"utrecht-page"],[1,"utrecht-page-content"],[1,"utrecht-page-header"],[1,"utrecht-pre-heading"],[1,"utrecht-separator"],[1,"utrecht-skip-link",{"href":[1]}],[1,"utrecht-spotlight-section",{"appearance":[1]}],[1,"utrecht-url"],[1,"utrecht-heading-2"],[1,"utrecht-heading-3"],[1,"utrecht-paragraph",{"lead":[4]}]]]]'),e)));
2
2
  //# sourceMappingURL=utrecht.esm.js.map
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.511",
2
+ "version": "1.0.0-alpha.512",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -32,8 +32,8 @@
32
32
  "@stencil/vue-output-target": "0.8.2",
33
33
  "@types/jest": "29.5.1",
34
34
  "@types/node": "18.16.3",
35
- "@utrecht/components": "1.0.0-alpha.473",
36
- "@utrecht/icon": "1.0.0-alpha.400",
35
+ "@utrecht/components": "1.0.0-alpha.474",
36
+ "@utrecht/icon": "1.0.0-alpha.401",
37
37
  "chokidar-cli": "3.0.0",
38
38
  "clsx": "1.2.1",
39
39
  "node-sass-package-importer": "5.3.2",
@@ -59,5 +59,5 @@
59
59
  "watch:build": "stencil build --watch",
60
60
  "generate": "stencil generate"
61
61
  },
62
- "gitHead": "a47f0c83f0f8a5f94d82d7332c8ce982eb499941"
62
+ "gitHead": "13a1963d17ddcdf0c74faea76f43b469f18d7e5b"
63
63
  }
@@ -1,2 +0,0 @@
1
- import{r as t,c as r,h as o}from"./p-8c18a309.js";import{c as e}from"./p-4345d76d.js";const c=".utrecht-form-toggle{align-items:center;border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor);display:flex;height:var(--utrecht-form-toggle-height, 2em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none;width:var(--utrecht-form-toggle-width, 6em)}.utrecht-form-toggle--focus,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus{border-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;height:100%;width:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important;width:1px !important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus~.utrecht-form-toggle__track{outline-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));outline-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));outline-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}:host{display:inline-block}:host([hidden]){display:none !important}";const l=class{constructor(o){t(this,o);this.utrechtBlur=r(this,"utrechtBlur",7);this.utrechtChange=r(this,"utrechtChange",7);this.utrechtFocus=r(this,"utrechtFocus",7);this.utrechtInput=r(this,"utrechtInput",7);this.disabled=false;this.checked=false}render(){const{checked:t,disabled:r}=this;const c=()=>{if(!this.disabled){this.checked=!this.checked;this.utrechtInput.emit(this);this.utrechtChange.emit(this)}};const l=()=>{c()};const g=t=>{if(t.code==="Space"||t.key===" "){t.preventDefault()}};const h=t=>{if(t.code==="Space"||t.key===" "){c()}};return o("div",{class:e("utrecht-form-toggle",t&&"utrecht-form-toggle--checked",!t&&"utrecht-form-toggle--not-checked",r&&"utrecht-form-toggle--disabled"),tabIndex:r?null:0,role:"switch","aria-disabled":r?"true":null,onClick:l,onKeyPress:g,onKeyUp:h},o("div",{class:"utrecht-form-toggle__label utrecht-form-toggle__label--off"}),o("div",{class:"utrecht-form-toggle__label utrecht-form-toggle__label--on"}),o("div",{class:e("utrecht-form-toggle__track",t&&"utrecht-form-toggle__track--checked",!t&&"utrecht-form-toggle__track--not-checked",r&&"utrecht-form-toggle__track--disabled")},o("div",{class:e("utrecht-form-toggle__thumb",t&&"utrecht-form-toggle__thumb--checked",!t&&"utrecht-form-toggle__thumb--not-checked",r&&"utrecht-form-toggle__thumb--disabled")})))}};l.style=c;export{l as utrecht_form_toggle};
2
- //# sourceMappingURL=p-2a9d889f.entry.js.map