@dso-toolkit/core 68.3.0 → 68.4.0

package/dist/dso-toolkit/p-1ad6315b.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as r,F as i,c as o,a as l}from"./p-abc59cdf.js";import{v as d}from"./p-82796232.js";const s='ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}ins a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}ins a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}del a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}del a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}:host{display:inline}*,*::after,*::before{box-sizing:border-box}.text{text-decoration:var(--_dso-renvooi-text-decoration)}';const t=s;const a=({value:e})=>{if(typeof e==="string"||!e){return r("span",{class:"text"},e)}if(Array.isArray(e)){return r(i,null,e.map(((e,o,{length:l})=>r(i,null,r(a,{value:e}),o<l-1?", ":""))))}if("toegevoegd"in e){return r("ins",null,e.toegevoegd)}if("verwijderd"in e){return r("del",null,e.verwijderd)}return r(i,null,r("del",null,e.was)," ",r("ins",null,e.wordt))};const n=class{constructor(r){e(this,r)}render(){return r(a,{key:"36c91038b0c2213d537e02f78d2a7111ed91cd77",value:this.value})}};n.style=t;const c="button.dso-slider{border:0;padding:0}button.dso-slider:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider svg rect{fill:#999;transition:fill 0.25s}button.dso-slider svg circle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true] svg rect{fill:#275937}button.dso-slider[aria-checked=true] svg circle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled] svg rect{fill:#ccc}button.dso-slider[disabled] svg circle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true] svg rect{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true] svg circle{fill:#e5e5e5}.dso-slider{border-radius:24px;display:inline-flex}.dso-slider:hover{cursor:pointer}";const u=c;const b=class{constructor(r){e(this,r);this.dsoActiveChange=o(this,"dsoActiveChange",5);this.checked=false;this.disabled=false;this.identifier=d()}handleSwitch(e){this.dsoActiveChange.emit({originalEvent:e,checked:!this.checked})}componentWillLoad(){this.hasVisibleLabel=this.host.querySelector("*")!==null}render(){return r(i,null,r("button",Object.assign({key:"b4e792d5b5da7e55ee691680e1d7670d5ad140f0",id:this.identifier,role:"switch",class:"dso-slider","aria-checked":""+this.checked,disabled:this.disabled,onClick:e=>this.handleSwitch(e)},this.accessibleLabel?{"aria-label":this.accessibleLabel}:{},this.labelledbyId?{"aria-labelledby":this.labelledbyId}:{}),r("svg",{key:"97d26db6d04bb136b61ea6c91851160803bd441c",xmlns:"http://www.w3.org/2000/svg",width:"40",height:"20",viewBox:"0 0 40 20"},r("g",{key:"4b824930909c33ac240f0bf18f417177436ce04d",fill:"none","fill-rule":"evenodd"},r("rect",{key:"42c9afdc4cb9a46bb0fc1d41956aa17dc0b209eb",width:"40",height:"20",fill:"currentColor",rx:"10"}),r("circle",{key:"f648a22fdb75d53435745fb7a0d02a44320bad0b",cy:"10",r:"8",fill:"currentColor"})))),this.hasVisibleLabel&&r("label",{key:"5333ebcc702e130794200ce5dd7efee0b4f7b735",htmlFor:this.identifier},r("slot",{key:"332653663797842e97924145c9b7d461d86f826f"})))}get host(){return l(this)}};b.style=u;export{n as dso_renvooi,b as dso_slide_toggle};
-//# sourceMappingURL=p-1ad6315b.entry.js.map

package/dist/dso-toolkit/p-1ad6315b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["renvooiCss","DsoRenvooiStyle0","RenvooiRender","value","h","class","Array","isArray","Fragment","map","v","i","length","toegevoegd","verwijderd","was","wordt","Renvooi","render","key","this","slideToggleCss","DsoSlideToggleStyle0","SlideToggle","constructor","hostRef","checked","disabled","identifier","v4","handleSwitch","e","dsoActiveChange","emit","originalEvent","componentWillLoad","hasVisibleLabel","host","querySelector","Object","assign","id","role","onClick","accessibleLabel","labelledbyId","xmlns","width","height","viewBox","fill","rx","cy","r","htmlFor"],"sources":["src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n:host {\r\n  display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n  text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Fragment, FunctionalComponent, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n  value: RenvooiValue | RenvooiValue[] | undefined;\r\n}\r\n\r\nconst RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value }) => {\r\n  if (typeof value === \"string\" || !value) {\r\n    // This element is used for --_dso-renvooi-text-decoration\r\n    return <span class=\"text\">{value}</span>;\r\n  }\r\n\r\n  if (Array.isArray(value)) {\r\n    return (\r\n      <>\r\n        {value.map((v, i, { length }) => (\r\n          <>\r\n            <RenvooiRender value={v} />\r\n            {i < length - 1 ? \", \" : \"\"}\r\n          </>\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n\r\n  if (\"toegevoegd\" in value) {\r\n    return <ins>{value.toegevoegd}</ins>;\r\n  }\r\n\r\n  if (\"verwijderd\" in value) {\r\n    return <del>{value.verwijderd}</del>;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n    </>\r\n  );\r\n};\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  render() {\r\n    return <RenvooiRender value={this.value} />;\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oGAAA,MAAMA,EAAa,qxDACnB,MAAAC,EAAeD,ECOf,MAAME,EAAyD,EAAGC,YAChE,UAAWA,IAAU,WAAaA,EAAO,CAEvC,OAAOC,EAAA,QAAMC,MAAM,QAAQF,E,CAG7B,GAAIG,MAAMC,QAAQJ,GAAQ,CACxB,OACEC,EAAAI,EAAA,KACGL,EAAMM,KAAI,CAACC,EAAGC,GAAKC,YAClBR,EAAAI,EAAA,KACEJ,EAACF,EAAa,CAACC,MAAOO,IACrBC,EAAIC,EAAS,EAAI,KAAO,M,CAOnC,GAAI,eAAgBT,EAAO,CACzB,OAAOC,EAAA,WAAMD,EAAMU,W,CAGrB,GAAI,eAAgBV,EAAO,CACzB,OAAOC,EAAA,WAAMD,EAAMW,W,CAGrB,OACEV,EAAAI,EAAA,KACEJ,EAAA,WAAMD,EAAMY,KAAU,IAACX,EAAA,WAAMD,EAAMa,OAClC,E,MAYMC,EAAO,M,yBAOlB,MAAAC,GACE,OAAOd,EAACF,EAAa,CAAAiB,IAAA,2CAAChB,MAAOiB,KAAKjB,O,aC1DtC,MAAMkB,EAAiB,6vBACvB,MAAAC,EAAeD,E,MCQFE,EAAW,MALxB,WAAAC,CAAAC,G,2DAaEL,KAAAM,QAAU,MAMVN,KAAAO,SAAW,MAqBXP,KAAAQ,WAAaC,G,CAQL,YAAAC,CAAaC,GACnBX,KAAKY,gBAAgBC,KAAK,CACxBC,cAAeH,EACfL,SAAUN,KAAKM,S,CAInB,iBAAAS,GACEf,KAAKgB,gBAAkBhB,KAAKiB,KAAKC,cAAc,OAAS,I,CAG1D,MAAApB,GACE,OACEd,EAAAI,EAAA,KACEJ,EAAA,SAAAmC,OAAAC,OAAA,CAAArB,IAAA,2CACEsB,GAAIrB,KAAKQ,WACTc,KAAK,SACLrC,MAAM,aAAY,eACJ,GAAKe,KAAKM,QACxBC,SAAUP,KAAKO,SACfgB,QAAUZ,GAAMX,KAAKU,aAAaC,IAC7BX,KAAKwB,gBAAkB,CAAE,aAAcxB,KAAKwB,iBAAoB,GAChExB,KAAKyB,aAAe,CAAE,kBAAmBzB,KAAKyB,cAAiB,IAEpEzC,EAAA,OAAAe,IAAA,2CAAK2B,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,aACrE7C,EAAA,KAAAe,IAAA,2CAAG+B,KAAK,OAAM,YAAW,WACvB9C,EAAA,QAAAe,IAAA,2CAAM4B,MAAM,KAAKC,OAAO,KAAKE,KAAK,eAAeC,GAAG,OACpD/C,EAAA,UAAAe,IAAA,2CAAQiC,GAAG,KAAKC,EAAE,IAAIH,KAAK,oBAIhC9B,KAAKgB,iBACJhC,EAAA,SAAAe,IAAA,2CAAOmC,QAASlC,KAAKQ,YACnBxB,EAAA,QAAAe,IAAA,8C","ignoreList":[]}

package/dist/dso-toolkit/p-acfb9f16.entry.js

@@ -1,2 +0,0 @@
-import{r as e,f as t,h as s,H as a,a as r}from"./p-abc59cdf.js";const i="*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";const o=i;const d=class{constructor(t){e(this,t);this.keyUpHandler=e=>{if(!(e.target instanceof HTMLElement)){return}switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}}}get enabledTabs(){return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce(((e,t)=>{if(!t.disabled){e.push(t)}return e}),[])}get firstTab(){return this.enabledTabs[0]}get lastTab(){return this.enabledTabs[this.enabledTabs.length-1]}moveFocusToTab(e){e===null||e===void 0?void 0:e._dsoFocus()}moveFocusToPreviousTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s-1])!==null&&t!==void 0?t:this.lastTab;this.moveFocusToTab(a)}moveFocusToNextTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s+1])!==null&&t!==void 0?t:this.firstTab;this.moveFocusToTab(a)}connectedCallback(){var e;(e=this.mutationObserver)!==null&&e!==void 0?e:this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){return s(a,{key:"b6060f192bc977ee552374818ef550d5ee72ae65"},s("div",{key:"dcd0e804fe23cfb403a13d2c6b368a30e91d0b4a",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},s("slot",{key:"39a49bfbd811053f2ef18ffd71887aaf6140300e"})),s("div",{key:"cb472cefde18dd4833c5ff47855aa584a9a142b9",role:"tabpanel",tabindex:"0"},s("slot",{key:"29d41ec7045e3a271aee5b612fd4f25ced544e76",name:"panel"})))}get host(){return r(this)}};d.style=o;export{d as dso_tabs};
-//# sourceMappingURL=p-acfb9f16.entry.js.map