@zooplus/zoo-web-components 10.4.0 → 10.4.1

package/dist/FormElement.js

@@ -1 +1 @@
-!function(t){class FormElement extends HTMLElement{constructor(){super()}static get observedAttributes(){return["invalid"]}registerElementForValidation(t){t.addEventListener("invalid",(()=>{this.setInvalid(),this.toggleInvalidAttribute(t)})),t.addEventListener("input",(()=>{t.checkValidity()?this.setValid():this.setInvalid(),this.toggleInvalidAttribute(t)}))}setInvalid(){this.setAttribute("invalid",""),this.setAttribute("aria-invalid","")}setValid(){this.removeAttribute("aria-invalid"),this.removeAttribute("invalid")}toggleInvalidAttribute(t){const e=this.shadowRoot.querySelector('zoo-info[role="alert"]');t.validity.valid?e.removeAttribute("invalid"):e.setAttribute("invalid","")}attributeChangedCallback(){const t=this.shadowRoot.querySelector('zoo-info[role="alert"]');this.hasAttribute("invalid")?t.setAttribute("invalid",""):t.removeAttribute("invalid")}}t.FormElement=FormElement,Object.defineProperty(t,"__esModule",{value:!0})}({});
+!function(t){class FormElement extends HTMLElement{constructor(){super()}static get observedAttributes(){return["invalid"]}registerElementForValidation(t){t.addEventListener("invalid",()=>{this.setInvalid(),this.toggleInvalidAttribute(t)}),t.addEventListener("input",()=>{t.checkValidity()?this.setValid():this.setInvalid(),this.toggleInvalidAttribute(t)})}setInvalid(){this.setAttribute("invalid",""),this.setAttribute("aria-invalid","")}setValid(){this.removeAttribute("aria-invalid"),this.removeAttribute("invalid")}toggleInvalidAttribute(t){const i=this.shadowRoot.querySelector('zoo-info[role="alert"]');t.validity.valid?i.removeAttribute("invalid"):i.setAttribute("invalid","")}attributeChangedCallback(){const t=this.shadowRoot.querySelector('zoo-info[role="alert"]');this.hasAttribute("invalid")?t.setAttribute("invalid",""):t.removeAttribute("invalid")}}t.FormElement=FormElement}({});

package/dist/arrow-icon.js

@@ -1 +1 @@
-!function(t){class ArrowDownIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--icon-width,24px);height:var(--icon-height,24px);fill:var(--icon-color,var(--primary-mid))}</style><svg viewBox="0 0 24 24"><title>Arrow icon</title><path d="M7.41 8.59L12 13l4.59-4.58L18 10l-6 6l-6-6 z"/></svg>'}static get observedAttributes(){return["title"]}attributeChangedCallback(t,o,e){this.shadowRoot.querySelector("svg title").textContent=e}}window.customElements.get("zoo-arrow-icon")||window.customElements.define("zoo-arrow-icon",ArrowDownIcon),t.ArrowDownIcon=ArrowDownIcon,Object.defineProperty(t,"__esModule",{value:!0})}({});
+!function(t){class ArrowDownIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--icon-width,24px);height:var(--icon-height,24px);fill:var(--icon-color,var(--primary-mid))}</style><svg viewBox="0 0 24 24"><title>Arrow icon</title><path d="M7.41 8.59L12 13l4.59-4.58L18 10l-6 6l-6-6 z"/></svg>'}static get observedAttributes(){return["title"]}attributeChangedCallback(t,o,e){this.shadowRoot.querySelector("svg title").textContent=e}}window.customElements.get("zoo-arrow-icon")||window.customElements.define("zoo-arrow-icon",ArrowDownIcon),t.ArrowDownIcon=ArrowDownIcon}({});

package/dist/attention-icon.js

@@ -1 +1 @@
-!function(t){class AttentionIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;padding-right:5px;width:var(--icon-width,18px);height:var(--icon-height,18px);fill:var(--icon-color,var(--info-mid))}</style><svg viewBox="0 0 25 25"><path d="M12 15.75a1.125 1.125 0 11.001 2.25A1.125 1.125 0 0112 15.75zm.75-2.25a.75.75 0 11-1.5 0V5.25a.75.75 0 111.5 0v8.25zm7.205-9.455l.53-.53c4.687 4.686 4.687 12.284 0 16.97-4.686 4.687-12.284 4.687-16.97 0-4.687-4.686-4.687-12.284 0-16.97 4.686-4.687 12.284-4.687 16.97 0l-.53.53zm0 0l-.53.53c-4.1-4.1-10.75-4.1-14.85 0s-4.1 10.75 0 14.85 10.75 4.1 14.85 0 4.1-10.75 0-14.85l.53-.53z"/></svg>'}}window.customElements.get("zoo-attention-icon")||window.customElements.define("zoo-attention-icon",AttentionIcon),t.AttentionIcon=AttentionIcon,Object.defineProperty(t,"__esModule",{value:!0})}({});
+!function(t){class AttentionIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;padding-right:5px;width:var(--icon-width,18px);height:var(--icon-height,18px);fill:var(--icon-color,var(--info-mid))}</style><svg viewBox="0 0 25 25"><path d="M12 15.75a1.125 1.125 0 11.001 2.25A1.125 1.125 0 0112 15.75zm.75-2.25a.75.75 0 11-1.5 0V5.25a.75.75 0 111.5 0v8.25zm7.205-9.455l.53-.53c4.687 4.686 4.687 12.284 0 16.97-4.686 4.687-12.284 4.687-16.97 0-4.687-4.686-4.687-12.284 0-16.97 4.686-4.687 12.284-4.687 16.97 0l-.53.53zm0 0l-.53.53c-4.1-4.1-10.75-4.1-14.85 0s-4.1 10.75 0 14.85 10.75 4.1 14.85 0 4.1-10.75 0-14.85l.53-.53z"/></svg>'}}window.customElements.get("zoo-attention-icon")||window.customElements.define("zoo-attention-icon",AttentionIcon),t.AttentionIcon=AttentionIcon}({});

package/dist/button-group.js

@@ -1 +1 @@
-!function(t){class Button extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;max-width:330px;min-height:36px;position:relative;--color-light:var(--primary-light);--color-mid:var(--primary-mid);--color-dark:var(--primary-dark);--text-normal:white;--text-active:white;--background:linear-gradient(to right, var(--color-mid), var(--color-light));--border:0}:host([type=secondary]){--color-light:var(--secondary-light);--color-mid:var(--secondary-mid);--color-dark:var(--secondary-dark)}:host([type=hollow]){--text-normal:var(--color-mid);--background:transparent;--border:2px solid var(--color-mid)}:host([type=grayscale]){--background:transparent;--color-mid:transparent;--color-dark:transparent;--border:0;--text-normal:#767676;--text-active:#9E9E9E}:host([type=transparent]){--text-normal:var(--color-mid);--background:transparent}::slotted(button){display:flex;align-items:center;justify-content:center;color:var(--text-normal);border:var(--border);border-radius:5px;cursor:pointer;width:100%;min-height:100%;font-size:14px;line-height:20px;font-weight:700;background:var(--background)}::slotted(button:focus),::slotted(button:hover){background:var(--color-mid);color:var(--text-active)}::slotted(button:active){background:var(--color-dark);color:var(--text-active)}::slotted(button:disabled){cursor:not-allowed;--background:var(--input-disabled, #F2F3F4);--color-mid:var(--input-disabled, #F2F3F4);--color-dark:var(--input-disabled, #F2F3F4);--text-normal:#767676;--text-active:#767676;--border:1px solid #E6E6E6}</style><slot></slot>"}}window.customElements.get("zoo-button")||window.customElements.define("zoo-button",Button);class ButtonGroup extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;opacity:0;border:1px solid #b8b8b8;border-radius:5px;padding:2px 0;justify-content:flex-end;width:fit-content}::slotted(zoo-button){min-width:50px;padding:0 2px}</style><slot></slot>",function(...t){!t&&console.error("Please register your components!")}(Button)}connectedCallback(){const t=this.shadowRoot.querySelector("slot");this.registerSlotChangeListener(t),this.registerButtonChangeHandler(t)}registerSlotChangeListener(t){t.addEventListener("slotchange",function(t,e){let o;return function(){clearTimeout(o),o=setTimeout((()=>{o=null,t.apply(this,arguments)}),e),o||t.apply(this,arguments)}}((()=>{t.assignedElements().forEach(((t,e)=>{this.handleButtonInitialState(t,e)})),this.style.opacity="1"})))}registerButtonChangeHandler(t){this.addEventListener("click",(e=>{const o=t.assignedElements().indexOf(e.target.parentNode);o>-1&&this.activeIndex!==o&&(this.deactivateButton(t.assignedElements()[this.activeIndex]),this.activateButton(e.target.parentNode,o))}))}handleButtonInitialState(t,e){t.hasAttribute("data-active")?this.activateButton(t,e):this.deactivateButton(t)}activateButton(t,e){const o=this.getAttribute("active-type");t.setAttribute("type",o),this.activeIndex=e}deactivateButton(t){const e=this.getAttribute("inactive-type");t.setAttribute("type",e)}}window.customElements.get("zoo-button-group")||window.customElements.define("zoo-button-group",ButtonGroup),t.ButtonGroup=ButtonGroup,Object.defineProperty(t,"__esModule",{value:!0})}({});
+!function(t){class Button extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;max-width:330px;min-height:36px;position:relative;--color-light:var(--primary-light);--color-mid:var(--primary-mid);--color-dark:var(--primary-dark);--text-normal:white;--text-active:white;--background:linear-gradient(to right, var(--color-mid), var(--color-light));--border:0}:host([type=secondary]){--color-light:var(--secondary-light);--color-mid:var(--secondary-mid);--color-dark:var(--secondary-dark)}:host([type=hollow]){--text-normal:var(--color-mid);--background:transparent;--border:2px solid var(--color-mid)}:host([type=grayscale]){--background:transparent;--color-mid:transparent;--color-dark:transparent;--border:0;--text-normal:#767676;--text-active:#9E9E9E}:host([type=transparent]){--text-normal:var(--color-mid);--background:transparent}::slotted(button){display:flex;align-items:center;justify-content:center;color:var(--text-normal);border:var(--border);border-radius:5px;cursor:pointer;width:100%;min-height:100%;font-size:14px;line-height:20px;font-weight:700;background:var(--background)}::slotted(button:focus),::slotted(button:hover){background:var(--color-mid);color:var(--text-active)}::slotted(button:active){background:var(--color-dark);color:var(--text-active)}::slotted(button:disabled){cursor:not-allowed;--background:var(--input-disabled, #F2F3F4);--color-mid:var(--input-disabled, #F2F3F4);--color-dark:var(--input-disabled, #F2F3F4);--text-normal:#767676;--text-active:#767676;--border:1px solid #E6E6E6}</style><slot></slot>"}}window.customElements.get("zoo-button")||window.customElements.define("zoo-button",Button);class ButtonGroup extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;opacity:0;border:1px solid #b8b8b8;border-radius:5px;padding:2px 0;justify-content:flex-end;width:fit-content}::slotted(zoo-button){min-width:50px;padding:0 2px}</style><slot></slot>",function(...t){!t&&console.error("Please register your components!")}(Button)}connectedCallback(){const t=this.shadowRoot.querySelector("slot");this.registerSlotChangeListener(t),this.registerButtonChangeHandler(t)}registerSlotChangeListener(t){t.addEventListener("slotchange",function(t,e){let o;return function(){clearTimeout(o),o=setTimeout(()=>{o=null,t.apply(this,arguments)},e),o||t.apply(this,arguments)}}(()=>{t.assignedElements().forEach((t,e)=>{this.handleButtonInitialState(t,e)}),this.style.opacity="1"}))}registerButtonChangeHandler(t){this.addEventListener("click",e=>{const o=t.assignedElements().indexOf(e.target.parentNode);o>-1&&this.activeIndex!==o&&(this.deactivateButton(t.assignedElements()[this.activeIndex]),this.activateButton(e.target.parentNode,o))})}handleButtonInitialState(t,e){t.hasAttribute("data-active")?this.activateButton(t,e):this.deactivateButton(t)}activateButton(t,e){const o=this.getAttribute("active-type");t.setAttribute("type",o),this.activeIndex=e}deactivateButton(t){const e=this.getAttribute("inactive-type");t.setAttribute("type",e)}}window.customElements.get("zoo-button-group")||window.customElements.define("zoo-button-group",ButtonGroup),t.ButtonGroup=ButtonGroup}({});

package/dist/button.js

@@ -1 +1 @@
-!function(t){class Button extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;max-width:330px;min-height:36px;position:relative;--color-light:var(--primary-light);--color-mid:var(--primary-mid);--color-dark:var(--primary-dark);--text-normal:white;--text-active:white;--background:linear-gradient(to right, var(--color-mid), var(--color-light));--border:0}:host([type=secondary]){--color-light:var(--secondary-light);--color-mid:var(--secondary-mid);--color-dark:var(--secondary-dark)}:host([type=hollow]){--text-normal:var(--color-mid);--background:transparent;--border:2px solid var(--color-mid)}:host([type=grayscale]){--background:transparent;--color-mid:transparent;--color-dark:transparent;--border:0;--text-normal:#767676;--text-active:#9E9E9E}:host([type=transparent]){--text-normal:var(--color-mid);--background:transparent}::slotted(button){display:flex;align-items:center;justify-content:center;color:var(--text-normal);border:var(--border);border-radius:5px;cursor:pointer;width:100%;min-height:100%;font-size:14px;line-height:20px;font-weight:700;background:var(--background)}::slotted(button:focus),::slotted(button:hover){background:var(--color-mid);color:var(--text-active)}::slotted(button:active){background:var(--color-dark);color:var(--text-active)}::slotted(button:disabled){cursor:not-allowed;--background:var(--input-disabled, #F2F3F4);--color-mid:var(--input-disabled, #F2F3F4);--color-dark:var(--input-disabled, #F2F3F4);--text-normal:#767676;--text-active:#767676;--border:1px solid #E6E6E6}</style><slot></slot>"}}window.customElements.get("zoo-button")||window.customElements.define("zoo-button",Button),t.Button=Button,Object.defineProperty(t,"__esModule",{value:!0})}({});
+!function(t){class Button extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;max-width:330px;min-height:36px;position:relative;--color-light:var(--primary-light);--color-mid:var(--primary-mid);--color-dark:var(--primary-dark);--text-normal:white;--text-active:white;--background:linear-gradient(to right, var(--color-mid), var(--color-light));--border:0}:host([type=secondary]){--color-light:var(--secondary-light);--color-mid:var(--secondary-mid);--color-dark:var(--secondary-dark)}:host([type=hollow]){--text-normal:var(--color-mid);--background:transparent;--border:2px solid var(--color-mid)}:host([type=grayscale]){--background:transparent;--color-mid:transparent;--color-dark:transparent;--border:0;--text-normal:#767676;--text-active:#9E9E9E}:host([type=transparent]){--text-normal:var(--color-mid);--background:transparent}::slotted(button){display:flex;align-items:center;justify-content:center;color:var(--text-normal);border:var(--border);border-radius:5px;cursor:pointer;width:100%;min-height:100%;font-size:14px;line-height:20px;font-weight:700;background:var(--background)}::slotted(button:focus),::slotted(button:hover){background:var(--color-mid);color:var(--text-active)}::slotted(button:active){background:var(--color-dark);color:var(--text-active)}::slotted(button:disabled){cursor:not-allowed;--background:var(--input-disabled, #F2F3F4);--color-mid:var(--input-disabled, #F2F3F4);--color-dark:var(--input-disabled, #F2F3F4);--text-normal:#767676;--text-active:#767676;--border:1px solid #E6E6E6}</style><slot></slot>"}}window.customElements.get("zoo-button")||window.customElements.define("zoo-button",Button),t.Button=Button}({});

package/dist/checkbox.js

@@ -1 +1 @@
-!function(e){class FormElement extends HTMLElement{constructor(){super()}static get observedAttributes(){return["invalid"]}registerElementForValidation(e){e.addEventListener("invalid",(()=>{this.setInvalid(),this.toggleInvalidAttribute(e)})),e.addEventListener("input",(()=>{e.checkValidity()?this.setValid():this.setInvalid(),this.toggleInvalidAttribute(e)}))}setInvalid(){this.setAttribute("invalid",""),this.setAttribute("aria-invalid","")}setValid(){this.removeAttribute("aria-invalid"),this.removeAttribute("invalid")}toggleInvalidAttribute(e){const t=this.shadowRoot.querySelector('zoo-info[role="alert"]');e.validity.valid?t.removeAttribute("invalid"):t.setAttribute("invalid","")}attributeChangedCallback(){const e=this.shadowRoot.querySelector('zoo-info[role="alert"]');this.hasAttribute("invalid")?e.setAttribute("invalid",""):e.removeAttribute("invalid")}}function t(...e){!e&&console.error("Please register your components!")}class AttentionIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;padding-right:5px;width:var(--icon-width,18px);height:var(--icon-height,18px);fill:var(--icon-color,var(--info-mid))}</style><svg viewBox="0 0 25 25"><path d="M12 15.75a1.125 1.125 0 11.001 2.25A1.125 1.125 0 0112 15.75zm.75-2.25a.75.75 0 11-1.5 0V5.25a.75.75 0 111.5 0v8.25zm7.205-9.455l.53-.53c4.687 4.686 4.687 12.284 0 16.97-4.686 4.687-12.284 4.687-16.97 0-4.687-4.686-4.687-12.284 0-16.97 4.686-4.687 12.284-4.687 16.97 0l-.53.53zm0 0l-.53.53c-4.1-4.1-10.75-4.1-14.85 0s-4.1 10.75 0 14.85 10.75 4.1 14.85 0 4.1-10.75 0-14.85l.53-.53z"/></svg>'}}window.customElements.get("zoo-attention-icon")||window.customElements.define("zoo-attention-icon",AttentionIcon);class InfoMessage extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;padding:2px;font-size:12px;line-height:16px;color:#555;align-items:center}:host([shown]){display:flex}:host([role=alert][shown]:not([invalid])){display:none}:host([role=alert][invalid][shown]){display:flex;--icon-color:var(--warning-mid)}zoo-attention-icon{align-self:flex-start}</style><zoo-attention-icon aria-hidden="true"></zoo-attention-icon><slot></slot>',t(AttentionIcon),this.shadowRoot.querySelector("slot").addEventListener("slotchange",(e=>{e.target.assignedElements({flatten:!0}).length>0?this.setAttribute("shown",""):this.removeAttribute("shown")}))}}window.customElements.get("zoo-info")||window.customElements.define("zoo-info",InfoMessage);class Checkbox extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.checkbox,svg{box-sizing:border-box}:host{display:flex;flex-direction:column;width:100%;font-size:14px;line-height:20px;position:relative;--border:0;--check-color:var(--primary-mid)}:host([disabled]){--check-color:#767676}:host([highlighted]){--border:1px solid var(--check-color)}:host([invalid]){--check-color:var(--warning-mid);--border:2px solid var(--warning-mid)}::slotted(input){width:100%;height:100%;top:0;left:0;position:absolute;display:flex;align-self:flex-start;appearance:none;cursor:pointer;margin:0;border-radius:3px;border:var(--border)}svg{border:1px solid var(--check-color);fill:var(--check-color);border-radius:3px;pointer-events:none;min-width:24px;z-index:1;padding:1px}svg path{display:none}.indeterminate{display:none;background:var(--check-color);fill:white}:host([checked]) svg path{display:flex}:host([checked][indeterminate]) .indeterminate{display:flex}:host([checked][indeterminate]) .checked{display:none}:host(:focus-within) svg{border-width:2px}::slotted(input:focus){border-width:2px}:host([checked]) ::slotted(input){border-width:2px}:host([disabled]) svg{background:var(--input-disabled,#f2f3f4)}.checkbox{display:flex;width:100%;cursor:pointer;align-items:baseline;position:relative}:host([highlighted]) .checkbox{padding:11px 15px}::slotted(label){display:flex;align-self:center;cursor:pointer;margin-left:5px;z-index:1}::slotted(input:disabled),:host([disabled]) ::slotted(label){cursor:not-allowed}</style><div class="checkbox"><slot name="checkbox"></slot><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="checked"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg> <svg viewBox="3 3 18 18" width="24" height="24" aria-hidden="true" class="indeterminate"><path d="M19 3H5a2 2 0 00-2 2v14c0 1.1.9 2 2 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-2 10H7v-2h10v2z"/></svg><slot name="label"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',t(InfoMessage),this.observer=new MutationObserver((e=>{for(let t of e)t.target.disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),t.target.hasAttribute("indeterminate")?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")})),this.shadowRoot.querySelector('slot[name="checkbox"]').addEventListener("slotchange",(e=>{let t=[...e.target.assignedElements()].find((e=>"INPUT"===e.tagName));t&&(t.addEventListener("change",(()=>{t.checked?this.setAttribute("checked",""):this.removeAttribute("checked")})),this.registerElementForValidation(t),t.disabled&&this.setAttribute("disabled",""),t.checked&&this.setAttribute("checked",""),t.hasAttribute("indeterminate")&&this.setAttribute("indeterminate",""),this.observer.observe(t,{attributes:!0,attributeFilter:["disabled","indeterminate"]}))}))}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-checkbox")||window.customElements.define("zoo-checkbox",Checkbox),e.Checkbox=Checkbox,Object.defineProperty(e,"__esModule",{value:!0})}({});
+!function(e){class FormElement extends HTMLElement{constructor(){super()}static get observedAttributes(){return["invalid"]}registerElementForValidation(e){e.addEventListener("invalid",()=>{this.setInvalid(),this.toggleInvalidAttribute(e)}),e.addEventListener("input",()=>{e.checkValidity()?this.setValid():this.setInvalid(),this.toggleInvalidAttribute(e)})}setInvalid(){this.setAttribute("invalid",""),this.setAttribute("aria-invalid","")}setValid(){this.removeAttribute("aria-invalid"),this.removeAttribute("invalid")}toggleInvalidAttribute(e){const t=this.shadowRoot.querySelector('zoo-info[role="alert"]');e.validity.valid?t.removeAttribute("invalid"):t.setAttribute("invalid","")}attributeChangedCallback(){const e=this.shadowRoot.querySelector('zoo-info[role="alert"]');this.hasAttribute("invalid")?e.setAttribute("invalid",""):e.removeAttribute("invalid")}}function t(...e){!e&&console.error("Please register your components!")}class AttentionIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;padding-right:5px;width:var(--icon-width,18px);height:var(--icon-height,18px);fill:var(--icon-color,var(--info-mid))}</style><svg viewBox="0 0 25 25"><path d="M12 15.75a1.125 1.125 0 11.001 2.25A1.125 1.125 0 0112 15.75zm.75-2.25a.75.75 0 11-1.5 0V5.25a.75.75 0 111.5 0v8.25zm7.205-9.455l.53-.53c4.687 4.686 4.687 12.284 0 16.97-4.686 4.687-12.284 4.687-16.97 0-4.687-4.686-4.687-12.284 0-16.97 4.686-4.687 12.284-4.687 16.97 0l-.53.53zm0 0l-.53.53c-4.1-4.1-10.75-4.1-14.85 0s-4.1 10.75 0 14.85 10.75 4.1 14.85 0 4.1-10.75 0-14.85l.53-.53z"/></svg>'}}window.customElements.get("zoo-attention-icon")||window.customElements.define("zoo-attention-icon",AttentionIcon);class InfoMessage extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;padding:2px;font-size:12px;line-height:16px;color:#555;align-items:center}:host([shown]){display:flex}:host([role=alert][shown]:not([invalid])){display:none}:host([role=alert][invalid][shown]){display:flex;--icon-color:var(--warning-mid)}zoo-attention-icon{align-self:flex-start}</style><zoo-attention-icon aria-hidden="true"></zoo-attention-icon><slot></slot>',t(AttentionIcon),this.shadowRoot.querySelector("slot").addEventListener("slotchange",e=>{e.target.assignedElements({flatten:!0}).length>0?this.setAttribute("shown",""):this.removeAttribute("shown")})}}window.customElements.get("zoo-info")||window.customElements.define("zoo-info",InfoMessage);class Checkbox extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;flex-direction:column;width:100%;font-size:14px;line-height:20px;position:relative;--border:0;--check-color:var(--primary-mid)}:host([disabled]){--check-color:#767676}:host([highlighted]){--border:1px solid var(--check-color)}:host([invalid]){--check-color:var(--warning-mid);--border:2px solid var(--warning-mid)}::slotted(input){width:100%;height:100%;top:0;left:0;position:absolute;display:flex;align-self:flex-start;appearance:none;cursor:pointer;margin:0;border-radius:3px;border:var(--border)}svg{border:1px solid var(--check-color);fill:var(--check-color);border-radius:3px;pointer-events:none;min-width:24px;z-index:1;padding:1px;box-sizing:border-box}svg path{display:none}.indeterminate{display:none;background:var(--check-color);fill:white}:host([checked]) svg path{display:flex}:host([checked][indeterminate]) .indeterminate{display:flex}:host([checked][indeterminate]) .checked{display:none}:host(:focus-within) svg{border-width:2px}::slotted(input:focus){border-width:2px}:host([checked]) ::slotted(input){border-width:2px}:host([disabled]) svg{background:var(--input-disabled,#f2f3f4)}.checkbox{display:flex;width:100%;box-sizing:border-box;cursor:pointer;align-items:baseline;position:relative}:host([highlighted]) .checkbox{padding:11px 15px}::slotted(label){display:flex;align-self:center;cursor:pointer;margin-left:5px;z-index:1}::slotted(input:disabled),:host([disabled]) ::slotted(label){cursor:not-allowed}</style><div class="checkbox"><slot name="checkbox"></slot><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="checked"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg> <svg viewBox="3 3 18 18" width="24" height="24" aria-hidden="true" class="indeterminate"><path d="M19 3H5a2 2 0 00-2 2v14c0 1.1.9 2 2 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-2 10H7v-2h10v2z"/></svg><slot name="label"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',t(InfoMessage),this.observer=new MutationObserver(e=>{for(let t of e)t.target.disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),t.target.hasAttribute("indeterminate")?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}),this.shadowRoot.querySelector('slot[name="checkbox"]').addEventListener("slotchange",e=>{let t=[...e.target.assignedElements()].find(e=>"INPUT"===e.tagName);t&&(t.addEventListener("change",()=>{t.checked?this.setAttribute("checked",""):this.removeAttribute("checked")}),this.registerElementForValidation(t),t.disabled&&this.setAttribute("disabled",""),t.checked&&this.setAttribute("checked",""),t.hasAttribute("indeterminate")&&this.setAttribute("indeterminate",""),this.observer.observe(t,{attributes:!0,attributeFilter:["disabled","indeterminate"]}))})}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-checkbox")||window.customElements.define("zoo-checkbox",Checkbox),e.Checkbox=Checkbox}({});

package/dist/collapsable-list-item.js

@@ -1 +1 @@
-!function(e){class CollapsableListItem extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{padding:0 10px;display:flex;flex-direction:column}:host([border-visible]){margin:8px 0}details{padding:10px}:host([border-visible]) details{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}details[open]{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}summary{cursor:pointer;color:var(--primary-mid);font-weight:700}</style><details><summary><slot name="header"></slot></summary><slot name="content"></slot></details>',this.details=this.shadowRoot.querySelector("details"),this.details.addEventListener("toggle",(e=>{this.shadowRoot.host.dispatchEvent(new CustomEvent("toggle",{detail:e.target.open,composed:!0}))}))}close(){this.details.open=!1}}window.customElements.get("zoo-collapsable-list-item")||window.customElements.define("zoo-collapsable-list-item",CollapsableListItem),e.CollapsableListItem=CollapsableListItem,Object.defineProperty(e,"__esModule",{value:!0})}({});
+!function(e){class CollapsableListItem extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{padding:0 10px;display:flex;flex-direction:column}:host([border-visible]){margin:8px 0}details{padding:10px}:host([border-visible]) details{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}details[open]{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}summary{cursor:pointer;color:var(--primary-mid);font-weight:700}</style><details><summary><slot name="header"></slot></summary><slot name="content"></slot></details>',this.details=this.shadowRoot.querySelector("details"),this.details.addEventListener("toggle",e=>{this.shadowRoot.host.dispatchEvent(new CustomEvent("toggle",{detail:e.target.open,composed:!0}))})}close(){this.details.open=!1}}window.customElements.get("zoo-collapsable-list-item")||window.customElements.define("zoo-collapsable-list-item",CollapsableListItem),e.CollapsableListItem=CollapsableListItem}({});

package/dist/collapsable-list.js

@@ -1 +1 @@
-!function(e){class CollapsableListItem extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{padding:0 10px;display:flex;flex-direction:column}:host([border-visible]){margin:8px 0}details{padding:10px}:host([border-visible]) details{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}details[open]{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}summary{cursor:pointer;color:var(--primary-mid);font-weight:700}</style><details><summary><slot name="header"></slot></summary><slot name="content"></slot></details>',this.details=this.shadowRoot.querySelector("details"),this.details.addEventListener("toggle",(e=>{this.shadowRoot.host.dispatchEvent(new CustomEvent("toggle",{detail:e.target.open,composed:!0}))}))}close(){this.details.open=!1}}window.customElements.get("zoo-collapsable-list-item")||window.customElements.define("zoo-collapsable-list-item",CollapsableListItem);class CollapsableList extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;flex-direction:column}</style><slot></slot>",function(...e){!e&&console.error("Please register your components!")}(CollapsableListItem);const e=this.shadowRoot.querySelector("slot");e.addEventListener("slotchange",(()=>{const t=e.assignedElements();t.forEach((e=>e.addEventListener("toggle",(o=>{o.detail&&!this.hasAttribute("disable-autoclose")&&t.forEach((t=>!t.isEqualNode(e)&&t.close()))})))),t.forEach((e=>{e.hasAttribute("opened-by-default")&&(e.details.open=!0)}))}))}}window.customElements.get("zoo-collapsable-list")||window.customElements.define("zoo-collapsable-list",CollapsableList),e.CollapsableList=CollapsableList,Object.defineProperty(e,"__esModule",{value:!0})}({});
+!function(e){class CollapsableListItem extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{padding:0 10px;display:flex;flex-direction:column}:host([border-visible]){margin:8px 0}details{padding:10px}:host([border-visible]) details{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}details[open]{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}summary{cursor:pointer;color:var(--primary-mid);font-weight:700}</style><details><summary><slot name="header"></slot></summary><slot name="content"></slot></details>',this.details=this.shadowRoot.querySelector("details"),this.details.addEventListener("toggle",e=>{this.shadowRoot.host.dispatchEvent(new CustomEvent("toggle",{detail:e.target.open,composed:!0}))})}close(){this.details.open=!1}}window.customElements.get("zoo-collapsable-list-item")||window.customElements.define("zoo-collapsable-list-item",CollapsableListItem);class CollapsableList extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;flex-direction:column}</style><slot></slot>",function(...e){!e&&console.error("Please register your components!")}(CollapsableListItem);const e=this.shadowRoot.querySelector("slot");e.addEventListener("slotchange",()=>{const t=e.assignedElements();t.forEach(e=>e.addEventListener("toggle",s=>{s.detail&&!this.hasAttribute("disable-autoclose")&&t.forEach(t=>!t.isEqualNode(e)&&t.close())})),t.forEach(e=>{e.hasAttribute("opened-by-default")&&(e.details.open=!0)})})}}window.customElements.get("zoo-collapsable-list")||window.customElements.define("zoo-collapsable-list",CollapsableList),e.CollapsableList=CollapsableList}({});

package/dist/cross-icon.js

@@ -1 +1 @@
-!function(t){class CrossIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--icon-width,18px);height:var(--icon-height,18px);fill:var(--icon-color,black)}</style><svg viewBox="0 0 24 24"><title></title><path d="M19 6l-1-1-6 6-6-6-1 1 6 6-6 6 1 1 6-6 6 6 1-1-6-6z"/></svg>'}static get observedAttributes(){return["title"]}attributeChangedCallback(t,e,o){this.shadowRoot.querySelector("svg title").textContent=o}}window.customElements.get("zoo-cross-icon")||window.customElements.define("zoo-cross-icon",CrossIcon),t.CrossIcon=CrossIcon,Object.defineProperty(t,"__esModule",{value:!0})}({});
+!function(t){class CrossIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--icon-width,18px);height:var(--icon-height,18px);fill:var(--icon-color,black)}</style><svg viewBox="0 0 24 24"><title></title><path d="M19 6l-1-1-6 6-6-6-1 1 6 6-6 6 1 1 6-6 6 6 1-1-6-6z"/></svg>'}static get observedAttributes(){return["title"]}attributeChangedCallback(t,o,e){this.shadowRoot.querySelector("svg title").textContent=e}}window.customElements.get("zoo-cross-icon")||window.customElements.define("zoo-cross-icon",CrossIcon),t.CrossIcon=CrossIcon}({});

package/dist/date-range.js

@@ -1 +1 @@
-!function(t){function e(...t){!t&&console.error("Please register your components!")}class FormElement extends HTMLElement{constructor(){super()}static get observedAttributes(){return["invalid"]}registerElementForValidation(t){t.addEventListener("invalid",(()=>{this.setInvalid(),this.toggleInvalidAttribute(t)})),t.addEventListener("input",(()=>{t.checkValidity()?this.setValid():this.setInvalid(),this.toggleInvalidAttribute(t)}))}setInvalid(){this.setAttribute("invalid",""),this.setAttribute("aria-invalid","")}setValid(){this.removeAttribute("aria-invalid"),this.removeAttribute("invalid")}toggleInvalidAttribute(t){const e=this.shadowRoot.querySelector('zoo-info[role="alert"]');t.validity.valid?e.removeAttribute("invalid"):e.setAttribute("invalid","")}attributeChangedCallback(){const t=this.shadowRoot.querySelector('zoo-info[role="alert"]');this.hasAttribute("invalid")?t.setAttribute("invalid",""):t.removeAttribute("invalid")}}class AttentionIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;padding-right:5px;width:var(--icon-width,18px);height:var(--icon-height,18px);fill:var(--icon-color,var(--info-mid))}</style><svg viewBox="0 0 25 25"><path d="M12 15.75a1.125 1.125 0 11.001 2.25A1.125 1.125 0 0112 15.75zm.75-2.25a.75.75 0 11-1.5 0V5.25a.75.75 0 111.5 0v8.25zm7.205-9.455l.53-.53c4.687 4.686 4.687 12.284 0 16.97-4.686 4.687-12.284 4.687-16.97 0-4.687-4.686-4.687-12.284 0-16.97 4.686-4.687 12.284-4.687 16.97 0l-.53.53zm0 0l-.53.53c-4.1-4.1-10.75-4.1-14.85 0s-4.1 10.75 0 14.85 10.75 4.1 14.85 0 4.1-10.75 0-14.85l.53-.53z"/></svg>'}}window.customElements.get("zoo-attention-icon")||window.customElements.define("zoo-attention-icon",AttentionIcon);class InfoMessage extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;padding:2px;font-size:12px;line-height:16px;color:#555;align-items:center}:host([shown]){display:flex}:host([role=alert][shown]:not([invalid])){display:none}:host([role=alert][invalid][shown]){display:flex;--icon-color:var(--warning-mid)}zoo-attention-icon{align-self:flex-start}</style><zoo-attention-icon aria-hidden="true"></zoo-attention-icon><slot></slot>',e(AttentionIcon),this.shadowRoot.querySelector("slot").addEventListener("slotchange",(t=>{t.target.assignedElements({flatten:!0}).length>0?this.setAttribute("shown",""):this.removeAttribute("shown")}))}}window.customElements.get("zoo-info")||window.customElements.define("zoo-info",InfoMessage);class Label extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{font-size:14px;line-height:20px;font-weight:700;color:#555;text-align:left}</style><slot></slot>"}}window.customElements.get("zoo-label")||window.customElements.define("zoo-label",Label);class Link extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:relative;padding:0 5px;font-size:14px;line-height:20px;--color-normal:var(--primary-mid);--color-active:var(--primary-dark)}:host([type=negative]){--color-normal:white;--color-active:var(--primary-dark)}:host([type=grey]){--color-normal:#767676;--color-active:var(--primary-dark)}:host([type=warning]){--color-normal:var(--warning-mid);--color-active:var(--warning-dark)}:host([size=large]){font-size:18px;line-height:22px;font-weight:700}::slotted(a){text-decoration:none;padding:0 2px;color:var(--color-normal);width:100%}::slotted(a:active),::slotted(a:focus),::slotted(a:hover){color:var(--color-active)}</style><slot name="pre"></slot><slot name="anchor"></slot><slot name="post"></slot>'}}window.customElements.get("zoo-link")||window.customElements.define("zoo-link",Link);class Input extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.content,zoo-info{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}::slotted(input),::slotted(textarea){width:100%;font-size:14px;line-height:20px;padding:13px 15px;margin:0;border:1px solid #767676;border-radius:5px;color:#555;outline:0;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}:host([invalid]) ::slotted(input),:host([invalid]) ::slotted(textarea){border:2px solid var(--warning-mid);padding:12px 14px}::slotted(input[type=date]),::slotted(input[type=time]){-webkit-logical-height:48px;max-height:48px}::slotted(input::placeholder),::slotted(textarea::placeholder){color:#767676}::slotted(input:disabled),::slotted(textarea:disabled){border:1px solid #e6e6e6;background:var(--input-disabled,#f2f3f4);color:#767676;cursor:not-allowed}::slotted(input:focus),::slotted(textarea:focus){border:2px solid #555;padding:12px 14px}.content{display:flex}zoo-link{text-align:right;max-width:max-content;justify-self:flex-end;padding:0}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) .content,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><div class="content"><slot name="input"></slot><slot name="additional"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',e(InfoMessage,Label,Link),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",(t=>{let e=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));e&&this.registerElementForValidation(e)}))}}window.customElements.get("zoo-input")||window.customElements.define("zoo-input",Input);class DateRange extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.content,zoo-info{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}fieldset{border:0;padding:0;margin:0;position:relative}:host([invalid]) ::slotted(input){border:2px solid var(--warning-mid);padding:12px 14px}.content{display:flex;justify-content:space-between}.content zoo-input{width:49%}</style><fieldset><legend><zoo-label><slot name="label"></slot></zoo-label></legend><div class="content"><zoo-input><slot slot="input" name="date-from"></slot></zoo-input><zoo-input><slot slot="input" name="date-to"></slot></zoo-input></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info></fieldset>',e(InfoMessage,Label,Input);const t={};this.shadowRoot.querySelector('slot[name="date-from"]').addEventListener("slotchange",(e=>this.handleAndSaveSlottedInputAs(e,"dateFrom",t))),this.shadowRoot.querySelector('slot[name="date-to"]').addEventListener("slotchange",(e=>this.handleAndSaveSlottedInputAs(e,"dateTo",t))),this.addEventListener("input",(()=>{const e=t.dateFrom,o=t.dateTo;e.value&&o.value&&e.value>o.value?this.setInvalid():e.validity.valid&&o.validity.valid&&this.setValid()}))}handleAndSaveSlottedInputAs(t,e,o){const n=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));o[e]=n,n&&this.registerElementForValidation(n)}}window.customElements.get("zoo-date-range")||window.customElements.define("zoo-date-range",DateRange),t.DateRange=DateRange,Object.defineProperty(t,"__esModule",{value:!0})}({});
+!function(t){function e(...t){!t&&console.error("Please register your components!")}class FormElement extends HTMLElement{constructor(){super()}static get observedAttributes(){return["invalid"]}registerElementForValidation(t){t.addEventListener("invalid",()=>{this.setInvalid(),this.toggleInvalidAttribute(t)}),t.addEventListener("input",()=>{t.checkValidity()?this.setValid():this.setInvalid(),this.toggleInvalidAttribute(t)})}setInvalid(){this.setAttribute("invalid",""),this.setAttribute("aria-invalid","")}setValid(){this.removeAttribute("aria-invalid"),this.removeAttribute("invalid")}toggleInvalidAttribute(t){const e=this.shadowRoot.querySelector('zoo-info[role="alert"]');t.validity.valid?e.removeAttribute("invalid"):e.setAttribute("invalid","")}attributeChangedCallback(){const t=this.shadowRoot.querySelector('zoo-info[role="alert"]');this.hasAttribute("invalid")?t.setAttribute("invalid",""):t.removeAttribute("invalid")}}class AttentionIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;padding-right:5px;width:var(--icon-width,18px);height:var(--icon-height,18px);fill:var(--icon-color,var(--info-mid))}</style><svg viewBox="0 0 25 25"><path d="M12 15.75a1.125 1.125 0 11.001 2.25A1.125 1.125 0 0112 15.75zm.75-2.25a.75.75 0 11-1.5 0V5.25a.75.75 0 111.5 0v8.25zm7.205-9.455l.53-.53c4.687 4.686 4.687 12.284 0 16.97-4.686 4.687-12.284 4.687-16.97 0-4.687-4.686-4.687-12.284 0-16.97 4.686-4.687 12.284-4.687 16.97 0l-.53.53zm0 0l-.53.53c-4.1-4.1-10.75-4.1-14.85 0s-4.1 10.75 0 14.85 10.75 4.1 14.85 0 4.1-10.75 0-14.85l.53-.53z"/></svg>'}}window.customElements.get("zoo-attention-icon")||window.customElements.define("zoo-attention-icon",AttentionIcon);class InfoMessage extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;padding:2px;font-size:12px;line-height:16px;color:#555;align-items:center}:host([shown]){display:flex}:host([role=alert][shown]:not([invalid])){display:none}:host([role=alert][invalid][shown]){display:flex;--icon-color:var(--warning-mid)}zoo-attention-icon{align-self:flex-start}</style><zoo-attention-icon aria-hidden="true"></zoo-attention-icon><slot></slot>',e(AttentionIcon),this.shadowRoot.querySelector("slot").addEventListener("slotchange",t=>{t.target.assignedElements({flatten:!0}).length>0?this.setAttribute("shown",""):this.removeAttribute("shown")})}}window.customElements.get("zoo-info")||window.customElements.define("zoo-info",InfoMessage);class Label extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{font-size:14px;line-height:20px;font-weight:700;color:#555;text-align:left}</style><slot></slot>"}}window.customElements.get("zoo-label")||window.customElements.define("zoo-label",Label);class Link extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:relative;padding:0 5px;font-size:14px;line-height:20px;--color-normal:var(--primary-mid);--color-active:var(--primary-dark)}:host([type=negative]){--color-normal:white;--color-active:var(--primary-dark)}:host([type=grey]){--color-normal:#767676;--color-active:var(--primary-dark)}:host([type=warning]){--color-normal:var(--warning-mid);--color-active:var(--warning-dark)}:host([size=large]){font-size:18px;line-height:22px;font-weight:700}::slotted(a){text-decoration:none;padding:0 2px;color:var(--color-normal);width:100%}::slotted(a:active),::slotted(a:focus),::slotted(a:hover){color:var(--color-active)}</style><slot name="pre"></slot><slot name="anchor"></slot><slot name="post"></slot>'}}window.customElements.get("zoo-link")||window.customElements.define("zoo-link",Link);class Input extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}::slotted(input),::slotted(textarea){width:100%;font-size:14px;line-height:20px;padding:13px 15px;margin:0;border:1px solid #767676;border-radius:5px;color:#555;outline:0;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}:host([invalid]) ::slotted(input),:host([invalid]) ::slotted(textarea){border:2px solid var(--warning-mid);padding:12px 14px}::slotted(input[type=date]),::slotted(input[type=time]){-webkit-logical-height:48px;max-height:48px}::slotted(input::placeholder),::slotted(textarea::placeholder){color:#767676}::slotted(input:disabled),::slotted(textarea:disabled){border:1px solid #e6e6e6;background:var(--input-disabled,#f2f3f4);color:#767676;cursor:not-allowed}::slotted(input:focus),::slotted(textarea:focus){border:2px solid #555;padding:12px 14px}.content{display:flex;grid-column:span 2}zoo-info{grid-column:span 2}zoo-link{text-align:right;max-width:max-content;justify-self:flex-end;padding:0}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) .content,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><div class="content"><slot name="input"></slot><slot name="additional"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',e(InfoMessage,Label,Link),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",t=>{let e=[...t.target.assignedElements()].find(t=>"INPUT"===t.tagName);e&&this.registerElementForValidation(e)})}}window.customElements.get("zoo-input")||window.customElements.define("zoo-input",Input);class DateRange extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}fieldset{border:0;padding:0;margin:0;position:relative}:host([invalid]) ::slotted(input){border:2px solid var(--warning-mid);padding:12px 14px}.content{display:flex;justify-content:space-between;grid-column:span 2}.content zoo-input{width:49%}zoo-info{grid-column:span 2}</style><fieldset><legend><zoo-label><slot name="label"></slot></zoo-label></legend><div class="content"><zoo-input><slot slot="input" name="date-from"></slot></zoo-input><zoo-input><slot slot="input" name="date-to"></slot></zoo-input></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info></fieldset>',e(InfoMessage,Label,Input);const t={};this.shadowRoot.querySelector('slot[name="date-from"]').addEventListener("slotchange",e=>this.handleAndSaveSlottedInputAs(e,"dateFrom",t)),this.shadowRoot.querySelector('slot[name="date-to"]').addEventListener("slotchange",e=>this.handleAndSaveSlottedInputAs(e,"dateTo",t)),this.addEventListener("input",()=>{const e=t.dateFrom,o=t.dateTo;e.value&&o.value&&e.value>o.value?this.setInvalid():e.validity.valid&&o.validity.valid&&this.setValid()})}handleAndSaveSlottedInputAs(t,e,o){const i=[...t.target.assignedElements()].find(t=>"INPUT"===t.tagName);o[e]=i,i&&this.registerElementForValidation(i)}}window.customElements.get("zoo-date-range")||window.customElements.define("zoo-date-range",DateRange),t.DateRange=DateRange}({});

package/dist/debounce.js

@@ -1 +1 @@
-var e;(e={}).debounce=function(e,t){let u;return function(){clearTimeout(u),u=setTimeout((()=>{u=null,e.apply(this,arguments)}),t),u||e.apply(this,arguments)}},Object.defineProperty(e,"__esModule",{value:!0});
+var t;(t={}).debounce=function(t,e){let n;return function(){clearTimeout(n),n=setTimeout(()=>{n=null,t.apply(this,arguments)},e),n||t.apply(this,arguments)}};

package/dist/esm/zoo-modules/form/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-import{FormElement as e}from"../common/FormElement.js";import{InfoMessage as t}from"../info/info.js";import{registerComponents as i}from"../../common/register-components.js";class Checkbox extends e{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.checkbox,svg{box-sizing:border-box}:host{display:flex;flex-direction:column;width:100%;font-size:14px;line-height:20px;position:relative;--border:0;--check-color:var(--primary-mid)}:host([disabled]){--check-color:#767676}:host([highlighted]){--border:1px solid var(--check-color)}:host([invalid]){--check-color:var(--warning-mid);--border:2px solid var(--warning-mid)}::slotted(input){width:100%;height:100%;top:0;left:0;position:absolute;display:flex;align-self:flex-start;appearance:none;cursor:pointer;margin:0;border-radius:3px;border:var(--border)}svg{border:1px solid var(--check-color);fill:var(--check-color);border-radius:3px;pointer-events:none;min-width:24px;z-index:1;padding:1px}svg path{display:none}.indeterminate{display:none;background:var(--check-color);fill:white}:host([checked]) svg path{display:flex}:host([checked][indeterminate]) .indeterminate{display:flex}:host([checked][indeterminate]) .checked{display:none}:host(:focus-within) svg{border-width:2px}::slotted(input:focus){border-width:2px}:host([checked]) ::slotted(input){border-width:2px}:host([disabled]) svg{background:var(--input-disabled,#f2f3f4)}.checkbox{display:flex;width:100%;cursor:pointer;align-items:baseline;position:relative}:host([highlighted]) .checkbox{padding:11px 15px}::slotted(label){display:flex;align-self:center;cursor:pointer;margin-left:5px;z-index:1}::slotted(input:disabled),:host([disabled]) ::slotted(label){cursor:not-allowed}</style><div class="checkbox"><slot name="checkbox"></slot><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="checked"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg> <svg viewBox="3 3 18 18" width="24" height="24" aria-hidden="true" class="indeterminate"><path d="M19 3H5a2 2 0 00-2 2v14c0 1.1.9 2 2 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-2 10H7v-2h10v2z"/></svg><slot name="label"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',i(t),this.observer=new MutationObserver((e=>{for(let t of e)t.target.disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),t.target.hasAttribute("indeterminate")?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")})),this.shadowRoot.querySelector('slot[name="checkbox"]').addEventListener("slotchange",(e=>{let t=[...e.target.assignedElements()].find((e=>"INPUT"===e.tagName));t&&(t.addEventListener("change",(()=>{t.checked?this.setAttribute("checked",""):this.removeAttribute("checked")})),this.registerElementForValidation(t),t.disabled&&this.setAttribute("disabled",""),t.checked&&this.setAttribute("checked",""),t.hasAttribute("indeterminate")&&this.setAttribute("indeterminate",""),this.observer.observe(t,{attributes:!0,attributeFilter:["disabled","indeterminate"]}))}))}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-checkbox")||window.customElements.define("zoo-checkbox",Checkbox);export{Checkbox};
+import{FormElement as e}from"../common/FormElement.js";import{InfoMessage as t}from"../info/info.js";import{registerComponents as i}from"../../common/register-components.js";class Checkbox extends e{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;flex-direction:column;width:100%;font-size:14px;line-height:20px;position:relative;--border:0;--check-color:var(--primary-mid)}:host([disabled]){--check-color:#767676}:host([highlighted]){--border:1px solid var(--check-color)}:host([invalid]){--check-color:var(--warning-mid);--border:2px solid var(--warning-mid)}::slotted(input){width:100%;height:100%;top:0;left:0;position:absolute;display:flex;align-self:flex-start;appearance:none;cursor:pointer;margin:0;border-radius:3px;border:var(--border)}svg{border:1px solid var(--check-color);fill:var(--check-color);border-radius:3px;pointer-events:none;min-width:24px;z-index:1;padding:1px;box-sizing:border-box}svg path{display:none}.indeterminate{display:none;background:var(--check-color);fill:white}:host([checked]) svg path{display:flex}:host([checked][indeterminate]) .indeterminate{display:flex}:host([checked][indeterminate]) .checked{display:none}:host(:focus-within) svg{border-width:2px}::slotted(input:focus){border-width:2px}:host([checked]) ::slotted(input){border-width:2px}:host([disabled]) svg{background:var(--input-disabled,#f2f3f4)}.checkbox{display:flex;width:100%;box-sizing:border-box;cursor:pointer;align-items:baseline;position:relative}:host([highlighted]) .checkbox{padding:11px 15px}::slotted(label){display:flex;align-self:center;cursor:pointer;margin-left:5px;z-index:1}::slotted(input:disabled),:host([disabled]) ::slotted(label){cursor:not-allowed}</style><div class="checkbox"><slot name="checkbox"></slot><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="checked"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg> <svg viewBox="3 3 18 18" width="24" height="24" aria-hidden="true" class="indeterminate"><path d="M19 3H5a2 2 0 00-2 2v14c0 1.1.9 2 2 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-2 10H7v-2h10v2z"/></svg><slot name="label"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',i(t),this.observer=new MutationObserver(e=>{for(let t of e)t.target.disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),t.target.hasAttribute("indeterminate")?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}),this.shadowRoot.querySelector('slot[name="checkbox"]').addEventListener("slotchange",e=>{let t=[...e.target.assignedElements()].find(e=>"INPUT"===e.tagName);t&&(t.addEventListener("change",()=>{t.checked?this.setAttribute("checked",""):this.removeAttribute("checked")}),this.registerElementForValidation(t),t.disabled&&this.setAttribute("disabled",""),t.checked&&this.setAttribute("checked",""),t.hasAttribute("indeterminate")&&this.setAttribute("indeterminate",""),this.observer.observe(t,{attributes:!0,attributeFilter:["disabled","indeterminate"]}))})}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-checkbox")||window.customElements.define("zoo-checkbox",Checkbox);export{Checkbox};
 //# sourceMappingURL=checkbox.js.map

package/dist/esm/zoo-modules/form/common/FormElement.js

@@ -1,2 +1,2 @@
-class FormElement extends HTMLElement{constructor(){super()}static get observedAttributes(){return["invalid"]}registerElementForValidation(t){t.addEventListener("invalid",(()=>{this.setInvalid(),this.toggleInvalidAttribute(t)})),t.addEventListener("input",(()=>{t.checkValidity()?this.setValid():this.setInvalid(),this.toggleInvalidAttribute(t)}))}setInvalid(){this.setAttribute("invalid",""),this.setAttribute("aria-invalid","")}setValid(){this.removeAttribute("aria-invalid"),this.removeAttribute("invalid")}toggleInvalidAttribute(t){const i=this.shadowRoot.querySelector('zoo-info[role="alert"]');t.validity.valid?i.removeAttribute("invalid"):i.setAttribute("invalid","")}attributeChangedCallback(){const t=this.shadowRoot.querySelector('zoo-info[role="alert"]');this.hasAttribute("invalid")?t.setAttribute("invalid",""):t.removeAttribute("invalid")}}export{FormElement};
+class FormElement extends HTMLElement{constructor(){super()}static get observedAttributes(){return["invalid"]}registerElementForValidation(t){t.addEventListener("invalid",()=>{this.setInvalid(),this.toggleInvalidAttribute(t)}),t.addEventListener("input",()=>{t.checkValidity()?this.setValid():this.setInvalid(),this.toggleInvalidAttribute(t)})}setInvalid(){this.setAttribute("invalid",""),this.setAttribute("aria-invalid","")}setValid(){this.removeAttribute("aria-invalid"),this.removeAttribute("invalid")}toggleInvalidAttribute(t){const i=this.shadowRoot.querySelector('zoo-info[role="alert"]');t.validity.valid?i.removeAttribute("invalid"):i.setAttribute("invalid","")}attributeChangedCallback(){const t=this.shadowRoot.querySelector('zoo-info[role="alert"]');this.hasAttribute("invalid")?t.setAttribute("invalid",""):t.removeAttribute("invalid")}}export{FormElement};
 //# sourceMappingURL=FormElement.js.map

package/dist/esm/zoo-modules/form/date-range/date-range.js

@@ -1,2 +1,2 @@
-import{registerComponents as t}from"../../common/register-components.js";import{FormElement as e}from"../common/FormElement.js";import{InfoMessage as o}from"../info/info.js";import{Label as n}from"../label/label.js";import{Input as i}from"../input/input.js";class DateRange extends e{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.content,zoo-info{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}fieldset{border:0;padding:0;margin:0;position:relative}:host([invalid]) ::slotted(input){border:2px solid var(--warning-mid);padding:12px 14px}.content{display:flex;justify-content:space-between}.content zoo-input{width:49%}</style><fieldset><legend><zoo-label><slot name="label"></slot></zoo-label></legend><div class="content"><zoo-input><slot slot="input" name="date-from"></slot></zoo-input><zoo-input><slot slot="input" name="date-to"></slot></zoo-input></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info></fieldset>',t(o,n,i);const e={};this.shadowRoot.querySelector('slot[name="date-from"]').addEventListener("slotchange",(t=>this.handleAndSaveSlottedInputAs(t,"dateFrom",e))),this.shadowRoot.querySelector('slot[name="date-to"]').addEventListener("slotchange",(t=>this.handleAndSaveSlottedInputAs(t,"dateTo",e))),this.addEventListener("input",(()=>{const t=e.dateFrom,o=e.dateTo;t.value&&o.value&&t.value>o.value?this.setInvalid():t.validity.valid&&o.validity.valid&&this.setValid()}))}handleAndSaveSlottedInputAs(t,e,o){const n=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));o[e]=n,n&&this.registerElementForValidation(n)}}window.customElements.get("zoo-date-range")||window.customElements.define("zoo-date-range",DateRange);export{DateRange};
+import{registerComponents as t}from"../../common/register-components.js";import{FormElement as o}from"../common/FormElement.js";import{InfoMessage as e}from"../info/info.js";import{Label as n}from"../label/label.js";import{Input as i}from"../input/input.js";class DateRange extends o{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}fieldset{border:0;padding:0;margin:0;position:relative}:host([invalid]) ::slotted(input){border:2px solid var(--warning-mid);padding:12px 14px}.content{display:flex;justify-content:space-between;grid-column:span 2}.content zoo-input{width:49%}zoo-info{grid-column:span 2}</style><fieldset><legend><zoo-label><slot name="label"></slot></zoo-label></legend><div class="content"><zoo-input><slot slot="input" name="date-from"></slot></zoo-input><zoo-input><slot slot="input" name="date-to"></slot></zoo-input></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info></fieldset>',t(e,n,i);const o={};this.shadowRoot.querySelector('slot[name="date-from"]').addEventListener("slotchange",t=>this.handleAndSaveSlottedInputAs(t,"dateFrom",o)),this.shadowRoot.querySelector('slot[name="date-to"]').addEventListener("slotchange",t=>this.handleAndSaveSlottedInputAs(t,"dateTo",o)),this.addEventListener("input",()=>{const t=o.dateFrom,e=o.dateTo;t.value&&e.value&&t.value>e.value?this.setInvalid():t.validity.valid&&e.validity.valid&&this.setValid()})}handleAndSaveSlottedInputAs(t,o,e){const n=[...t.target.assignedElements()].find(t=>"INPUT"===t.tagName);e[o]=n,n&&this.registerElementForValidation(n)}}window.customElements.get("zoo-date-range")||window.customElements.define("zoo-date-range",DateRange);export{DateRange};
 //# sourceMappingURL=date-range.js.map

package/dist/esm/zoo-modules/form/info/info.js

@@ -1,2 +1,2 @@
-import{registerComponents as o}from"../../common/register-components.js";import{AttentionIcon as t}from"../../icon/attention-icon/attention-icon.js";class InfoMessage extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;padding:2px;font-size:12px;line-height:16px;color:#555;align-items:center}:host([shown]){display:flex}:host([role=alert][shown]:not([invalid])){display:none}:host([role=alert][invalid][shown]){display:flex;--icon-color:var(--warning-mid)}zoo-attention-icon{align-self:flex-start}</style><zoo-attention-icon aria-hidden="true"></zoo-attention-icon><slot></slot>',o(t),this.shadowRoot.querySelector("slot").addEventListener("slotchange",(o=>{o.target.assignedElements({flatten:!0}).length>0?this.setAttribute("shown",""):this.removeAttribute("shown")}))}}window.customElements.get("zoo-info")||window.customElements.define("zoo-info",InfoMessage);export{InfoMessage};
+import{registerComponents as o}from"../../common/register-components.js";import{AttentionIcon as t}from"../../icon/attention-icon/attention-icon.js";class InfoMessage extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;padding:2px;font-size:12px;line-height:16px;color:#555;align-items:center}:host([shown]){display:flex}:host([role=alert][shown]:not([invalid])){display:none}:host([role=alert][invalid][shown]){display:flex;--icon-color:var(--warning-mid)}zoo-attention-icon{align-self:flex-start}</style><zoo-attention-icon aria-hidden="true"></zoo-attention-icon><slot></slot>',o(t),this.shadowRoot.querySelector("slot").addEventListener("slotchange",o=>{o.target.assignedElements({flatten:!0}).length>0?this.setAttribute("shown",""):this.removeAttribute("shown")})}}window.customElements.get("zoo-info")||window.customElements.define("zoo-info",InfoMessage);export{InfoMessage};
 //# sourceMappingURL=info.js.map

package/dist/esm/zoo-modules/form/input/input.js

@@ -1,2 +1,2 @@
-import{FormElement as o}from"../common/FormElement.js";import{registerComponents as t}from"../../common/register-components.js";import{InfoMessage as e}from"../info/info.js";import{Label as i}from"../label/label.js";import{Link as l}from"../../misc/link/link.js";class Input extends o{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.content,zoo-info{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}::slotted(input),::slotted(textarea){width:100%;font-size:14px;line-height:20px;padding:13px 15px;margin:0;border:1px solid #767676;border-radius:5px;color:#555;outline:0;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}:host([invalid]) ::slotted(input),:host([invalid]) ::slotted(textarea){border:2px solid var(--warning-mid);padding:12px 14px}::slotted(input[type=date]),::slotted(input[type=time]){-webkit-logical-height:48px;max-height:48px}::slotted(input::placeholder),::slotted(textarea::placeholder){color:#767676}::slotted(input:disabled),::slotted(textarea:disabled){border:1px solid #e6e6e6;background:var(--input-disabled,#f2f3f4);color:#767676;cursor:not-allowed}::slotted(input:focus),::slotted(textarea:focus){border:2px solid #555;padding:12px 14px}.content{display:flex}zoo-link{text-align:right;max-width:max-content;justify-self:flex-end;padding:0}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) .content,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><div class="content"><slot name="input"></slot><slot name="additional"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',t(e,i,l),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",(o=>{let t=[...o.target.assignedElements()].find((o=>"INPUT"===o.tagName));t&&this.registerElementForValidation(t)}))}}window.customElements.get("zoo-input")||window.customElements.define("zoo-input",Input);export{Input};
+import{FormElement as o}from"../common/FormElement.js";import{registerComponents as t}from"../../common/register-components.js";import{InfoMessage as e}from"../info/info.js";import{Label as i}from"../label/label.js";import{Link as l}from"../../misc/link/link.js";class Input extends o{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}::slotted(input),::slotted(textarea){width:100%;font-size:14px;line-height:20px;padding:13px 15px;margin:0;border:1px solid #767676;border-radius:5px;color:#555;outline:0;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}:host([invalid]) ::slotted(input),:host([invalid]) ::slotted(textarea){border:2px solid var(--warning-mid);padding:12px 14px}::slotted(input[type=date]),::slotted(input[type=time]){-webkit-logical-height:48px;max-height:48px}::slotted(input::placeholder),::slotted(textarea::placeholder){color:#767676}::slotted(input:disabled),::slotted(textarea:disabled){border:1px solid #e6e6e6;background:var(--input-disabled,#f2f3f4);color:#767676;cursor:not-allowed}::slotted(input:focus),::slotted(textarea:focus){border:2px solid #555;padding:12px 14px}.content{display:flex;grid-column:span 2}zoo-info{grid-column:span 2}zoo-link{text-align:right;max-width:max-content;justify-self:flex-end;padding:0}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) .content,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><div class="content"><slot name="input"></slot><slot name="additional"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',t(e,i,l),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",o=>{let t=[...o.target.assignedElements()].find(o=>"INPUT"===o.tagName);t&&this.registerElementForValidation(t)})}}window.customElements.get("zoo-input")||window.customElements.define("zoo-input",Input);export{Input};
 //# sourceMappingURL=input.js.map

package/dist/esm/zoo-modules/form/input-tag/input-tag.js

@@ -1,2 +1,2 @@
-import{registerComponents as t}from"../../common/register-components.js";import{InputTagOption as e}from"./input-tag-option.js";import{FormElement as i}from"../common/FormElement.js";import{CrossIcon as o}from"../../icon/cross-icon/cross-icon.js";import{InfoMessage as a}from"../info/info.js";import{Label as n}from"../label/label.js";import{debounce as s}from"../../helpers/debounce.js";class InputTag extends i{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>#input-wrapper,zoo-info{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box;--input-tag-padding-top-bottom-default:13px;--input-tag-padding-left-right-default:15px;--input-tag-padding-reduced:calc(var(--input-tag-padding-top-bottom, var(--input-tag-padding-top-bottom-default)) - 1px) calc(var(--input-tag-padding-left-right, var(--input-tag-padding-left-right-default)) - 1px)}#input-wrapper{display:flex;flex-wrap:wrap;align-items:center;height:max-content;gap:5px;font-size:14px;line-height:20px;padding:var(--input-tag-padding-top-bottom,var(--input-tag-padding-top-bottom-default)) var(--input-tag-padding-left-right,var(--input-tag-padding-left-right-default));border:1px solid #767676;border-radius:5px;color:#555;box-sizing:border-box;position:relative;overflow:visible}:host(:focus-within) #input-wrapper{border:2px solid #555;padding:var(--input-tag-padding-reduced)}:host([show-tags]) #input-wrapper{z-index:2}:host([invalid]) #input-wrapper{border:2px solid var(--warning-mid);padding:var(--input-tag-padding-reduced)}::slotted(input){border:0;min-width:50px;flex:1 0 auto;outline:0;font-size:14px;line-height:20px;color:#555}zoo-label{grid-row:1}#tag-options{display:none;position:absolute;flex-wrap:wrap;background:#fff;padding:5px var(--input-tag-padding-left-right,var(--input-tag-padding-left-right-default));border:1px solid #555;border-radius:0 0 3px 3px;left:-1px;top:calc(90% + 2px);border-top:0;width:calc(100% + 2px);box-sizing:border-box;max-height:var(--input-tag-options-max-height,fit-content);overflow:var(--input-tag-options-overflow,auto)}:host(:focus-within) #tag-options,:host([invalid]) #tag-options{border-width:2px;width:calc(100% + 4px);left:-2px;padding-left:calc(var(--input-tag-padding-left-right,var(--input-tag-padding-left-right-default)) - 1px);padding-right:calc(var(--input-tag-padding-left-right,var(--input-tag-padding-left-right-default)) - 1px)}:host([invalid]) #tag-options{border-color:var(--warning-mid)}:host([show-tags]) #tag-options{display:flex}::slotted([slot=select]){display:none}zoo-cross-icon{cursor:pointer;--icon-color:var(--primary-mid)}::slotted(zoo-input-tag-option){box-sizing:border-box;width:100%}::slotted(zoo-input-tag-option:hover),::slotted(zoo-input-tag-option[selected]:hover){background:var(--item-hovered,#e6e6e6)}::slotted(zoo-input-tag-option[selected]){background:var(--primary-ultralight)}</style><zoo-label><slot name="label"></slot></zoo-label><div id="input-wrapper"><slot name="input"></slot><div id="tag-options"><slot name="tag-option"></slot><slot name="no-results"></slot></div></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info><slot name="select"></slot>',t(n,a,e,o),this.inputSlot=this.shadowRoot.querySelector('slot[name="input"]'),this.inputSlot.addEventListener("slotchange",(t=>{const e=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));e&&(this.input=e,this.input.addEventListener("input",(t=>{t.target.value?this.setAttribute("show-tags",""):this.removeAttribute("show-tags")})))})),this.tagOptionSlot=this.shadowRoot.querySelector('slot[name="tag-option"]'),this.tagOptionSlot.addEventListener("slotchange",s((()=>{this.handleInitialValues()}))),this.addEventListener("keydown",(t=>{" "!==t.key&&"Enter"!==t.key||"ZOO-TAG"!==t.target.tagName&&"ZOO-INPUT-TAG-OPTION"!==t.target.tagName||(t.preventDefault(),this.toggleOptionSelect(t))})),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",(t=>{this.select=[...t.target.assignedElements()].find((t=>"SELECT"===t.tagName)),this.select&&this.registerElementForValidation(this.select)})),this.shadowRoot.querySelector('slot[name="tag-option"]').addEventListener("click",(t=>{this.toggleOptionSelect(t,!0)}))}static get observedAttributes(){return[...super.observedAttributes,"data-initial-value"]}attributeChangedCallback(t,e){"invalid"===t?super.attributeChangedCallback():"data-initial-value"===t&&null!=e&&this.handleInitialValues()}toggleOptionSelect(t,e=!1){const i=this.getElAsParentBySlotName(t.target,"tag-option");if(i&&i.hasAttribute("selected")){const t=i.querySelector("[data-value]");this.shadowRoot.querySelector(`zoo-tag[data-value="${t.getAttribute("data-value")}"] zoo-cross-icon`).dispatchEvent(new Event("click"))}else i&&this.handleTagSelect(i);e&&this.input.focus()}handleTagSelect(t){const e=t.querySelector("zoo-tag, [data-option-content]"),i=e.getAttribute("data-value"),o=[...this.select.querySelectorAll("option")].findIndex((t=>t.value===i)),a=!this.hasAttribute("show-tags-after-select");if(o>-1&&!this.select.options[o].selected){this.select.options[o].selected=!0,this.select.options[o].setAttribute("selected",""),this.select.dispatchEvent(new Event("input")),a&&(this.input.value=""),e.parentElement.setAttribute("selected",""),e.parentElement.setAttribute("aria-selected","true");let t=this.createSelectedTagElement(e,o);this.inputSlot.before(t)}a&&this.removeAttribute("show-tags")}createSelectedTagElement(t,e){let i;const o=t.getAttribute("data-value");"ZOO-TAG"===t.tagName?i=t.cloneNode(!0):(i=document.createElement("ZOO-TAG"),i.setAttribute("slot","tag"),i.setAttribute("type","tag"),i.setAttribute("data-value",o),i.setAttribute("tabindex","0"),i.insertAdjacentHTML("beforeend",`<span slot="content">${o}</span>`));const a=document.createElement("zoo-cross-icon");return a.setAttribute("tabindex","0"),a.setAttribute("slot","post"),a.setAttribute("role","button"),a.setAttribute("aria-label","Deselect "+o),a.addEventListener("click",(()=>this.deselectOption(i,e,t))),a.addEventListener("keydown",(o=>{" "!==o.key&&"Enter"!==o.key||(o.preventDefault(),this.deselectOption(i,e,t))})),i.appendChild(a),i}handleInitialValues(){let t=[];[].push.apply(t,this.children),t=t.filter((t=>"ZOO-INPUT-TAG-OPTION"===t.tagName));const e=this.hasAttribute("data-initial-value")?this.getAttribute("data-initial-value").split(",").map((t=>t.trim())).filter((t=>!!t)):null;t&&e&&e.length&&t.forEach((t=>{!t.hasAttribute("selected")&&e.includes([...t.children][0].getAttribute("data-value"))&&this.handleTagSelect(t)}))}deselectOption(t,e,i){t.remove(),this.select.options[e].selected=!1,this.select.options[e].removeAttribute("selected"),this.select.dispatchEvent(new Event("input")),i&&(i.parentElement.removeAttribute("selected"),i.parentElement.setAttribute("aria-selected","false"))}clearSelection(){this.shadowRoot.querySelectorAll("#input-wrapper > zoo-tag").forEach((t=>t.remove())),this.select.querySelectorAll(":checked").forEach((t=>{t.selected=!1,t.removeAttribute("selected")})),this.shadowRoot.querySelectorAll('slot[name="tag-option"]').forEach((t=>t.assignedElements().forEach((t=>{t.removeAttribute("selected"),t.setAttribute("aria-selected","false")})))),this.input.value="",this.select.dispatchEvent(new Event("input")),this.input.dispatchEvent(new Event("input")),this.input.focus()}getElAsParentBySlotName(t,e){if(t.getAttribute("slot")===e)return t;let i=t.parentElement;for(;i&&i.getAttribute("slot")!==e;)i=i.parentElement;return i}}window.customElements.get("zoo-input-tag")||window.customElements.define("zoo-input-tag",InputTag);export{InputTag};
+import{registerComponents as t}from"../../common/register-components.js";import{InputTagOption as e}from"./input-tag-option.js";import{FormElement as i}from"../common/FormElement.js";import{CrossIcon as o}from"../../icon/cross-icon/cross-icon.js";import{InfoMessage as a}from"../info/info.js";import{Label as n}from"../label/label.js";import{debounce as s}from"../../helpers/debounce.js";class InputTag extends i{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box;--input-tag-padding-top-bottom-default:13px;--input-tag-padding-left-right-default:15px;--input-tag-padding-reduced:calc(var(--input-tag-padding-top-bottom, var(--input-tag-padding-top-bottom-default)) - 1px) calc(var(--input-tag-padding-left-right, var(--input-tag-padding-left-right-default)) - 1px)}#input-wrapper{display:flex;flex-wrap:wrap;align-items:center;height:max-content;gap:5px;font-size:14px;line-height:20px;padding:var(--input-tag-padding-top-bottom,var(--input-tag-padding-top-bottom-default)) var(--input-tag-padding-left-right,var(--input-tag-padding-left-right-default));border:1px solid #767676;border-radius:5px;color:#555;box-sizing:border-box;grid-column:span 2;position:relative;overflow:visible}:host(:focus-within) #input-wrapper{border:2px solid #555;padding:var(--input-tag-padding-reduced)}:host([show-tags]) #input-wrapper{z-index:2}:host([invalid]) #input-wrapper{border:2px solid var(--warning-mid);padding:var(--input-tag-padding-reduced)}::slotted(input){border:0;min-width:50px;flex:1 0 auto;outline:0;font-size:14px;line-height:20px;color:#555}zoo-label{grid-row:1}#tag-options{display:none;position:absolute;flex-wrap:wrap;background:#fff;padding:5px var(--input-tag-padding-left-right,var(--input-tag-padding-left-right-default));border:1px solid #555;border-radius:0 0 3px 3px;left:-1px;top:calc(90% + 2px);border-top:0;width:calc(100% + 2px);box-sizing:border-box;max-height:var(--input-tag-options-max-height,fit-content);overflow:var(--input-tag-options-overflow,auto)}:host(:focus-within) #tag-options,:host([invalid]) #tag-options{border-width:2px;width:calc(100% + 4px);left:-2px;padding-left:calc(var(--input-tag-padding-left-right,var(--input-tag-padding-left-right-default)) - 1px);padding-right:calc(var(--input-tag-padding-left-right,var(--input-tag-padding-left-right-default)) - 1px)}:host([invalid]) #tag-options{border-color:var(--warning-mid)}:host([show-tags]) #tag-options{display:flex}::slotted([slot=select]){display:none}zoo-info{grid-column:span 2}zoo-cross-icon{cursor:pointer;--icon-color:var(--primary-mid)}::slotted(zoo-input-tag-option){box-sizing:border-box;width:100%}::slotted(zoo-input-tag-option:hover),::slotted(zoo-input-tag-option[selected]:hover){background:var(--item-hovered,#e6e6e6)}::slotted(zoo-input-tag-option[selected]){background:var(--primary-ultralight)}</style><zoo-label><slot name="label"></slot></zoo-label><div id="input-wrapper"><slot name="input"></slot><div id="tag-options"><slot name="tag-option"></slot><slot name="no-results"></slot></div></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info><slot name="select"></slot>',t(n,a,e,o),this.inputSlot=this.shadowRoot.querySelector('slot[name="input"]'),this.inputSlot.addEventListener("slotchange",t=>{const e=[...t.target.assignedElements()].find(t=>"INPUT"===t.tagName);e&&(this.input=e,this.input.addEventListener("input",t=>{t.target.value?this.setAttribute("show-tags",""):this.removeAttribute("show-tags")}))}),this.tagOptionSlot=this.shadowRoot.querySelector('slot[name="tag-option"]'),this.tagOptionSlot.addEventListener("slotchange",s(()=>{this.handleInitialValues()})),this.addEventListener("keydown",t=>{" "!==t.key&&"Enter"!==t.key||"ZOO-TAG"!==t.target.tagName&&"ZOO-INPUT-TAG-OPTION"!==t.target.tagName||(t.preventDefault(),this.toggleOptionSelect(t))}),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",t=>{this.select=[...t.target.assignedElements()].find(t=>"SELECT"===t.tagName),this.select&&this.registerElementForValidation(this.select)}),this.shadowRoot.querySelector('slot[name="tag-option"]').addEventListener("click",t=>{this.toggleOptionSelect(t,!0)})}static get observedAttributes(){return[...super.observedAttributes,"data-initial-value"]}attributeChangedCallback(t,e){"invalid"===t?super.attributeChangedCallback():"data-initial-value"===t&&null!=e&&this.handleInitialValues()}toggleOptionSelect(t,e=!1){const i=this.getElAsParentBySlotName(t.target,"tag-option");if(i&&i.hasAttribute("selected")){const t=i.querySelector("[data-value]");this.shadowRoot.querySelector(`zoo-tag[data-value="${t.getAttribute("data-value")}"] zoo-cross-icon`).dispatchEvent(new Event("click"))}else i&&this.handleTagSelect(i);e&&this.input.focus()}handleTagSelect(t){const e=t.querySelector("zoo-tag, [data-option-content]"),i=e.getAttribute("data-value"),o=[...this.select.querySelectorAll("option")].findIndex(t=>t.value===i),a=!this.hasAttribute("show-tags-after-select");if(o>-1&&!this.select.options[o].selected){this.select.options[o].selected=!0,this.select.options[o].setAttribute("selected",""),this.select.dispatchEvent(new Event("input")),a&&(this.input.value=""),e.parentElement.setAttribute("selected",""),e.parentElement.setAttribute("aria-selected","true");let t=this.createSelectedTagElement(e,o);this.inputSlot.before(t)}a&&this.removeAttribute("show-tags")}createSelectedTagElement(t,e){let i;const o=t.getAttribute("data-value");"ZOO-TAG"===t.tagName?i=t.cloneNode(!0):(i=document.createElement("ZOO-TAG"),i.setAttribute("slot","tag"),i.setAttribute("type","tag"),i.setAttribute("data-value",o),i.setAttribute("tabindex","0"),i.insertAdjacentHTML("beforeend",`<span slot="content">${o}</span>`));const a=document.createElement("zoo-cross-icon");return a.setAttribute("tabindex","0"),a.setAttribute("slot","post"),a.setAttribute("role","button"),a.setAttribute("aria-label","Deselect "+o),a.addEventListener("click",()=>this.deselectOption(i,e,t)),a.addEventListener("keydown",o=>{" "!==o.key&&"Enter"!==o.key||(o.preventDefault(),this.deselectOption(i,e,t))}),i.appendChild(a),i}handleInitialValues(){let t=[];[].push.apply(t,this.children),t=t.filter(t=>"ZOO-INPUT-TAG-OPTION"===t.tagName);const e=this.hasAttribute("data-initial-value")?this.getAttribute("data-initial-value").split(",").map(t=>t.trim()).filter(t=>!!t):null;t&&e&&e.length&&t.forEach(t=>{!t.hasAttribute("selected")&&e.includes([...t.children][0].getAttribute("data-value"))&&this.handleTagSelect(t)})}deselectOption(t,e,i){t.remove(),this.select.options[e].selected=!1,this.select.options[e].removeAttribute("selected"),this.select.dispatchEvent(new Event("input")),i&&(i.parentElement.removeAttribute("selected"),i.parentElement.setAttribute("aria-selected","false"))}clearSelection(){this.shadowRoot.querySelectorAll("#input-wrapper > zoo-tag").forEach(t=>t.remove()),this.select.querySelectorAll(":checked").forEach(t=>{t.selected=!1,t.removeAttribute("selected")}),this.shadowRoot.querySelectorAll('slot[name="tag-option"]').forEach(t=>t.assignedElements().forEach(t=>{t.removeAttribute("selected"),t.setAttribute("aria-selected","false")})),this.input.value="",this.select.dispatchEvent(new Event("input")),this.input.dispatchEvent(new Event("input")),this.input.focus()}getElAsParentBySlotName(t,e){if(t.getAttribute("slot")===e)return t;let i=t.parentElement;for(;i&&i.getAttribute("slot")!==e;)i=i.parentElement;return i}}window.customElements.get("zoo-input-tag")||window.customElements.define("zoo-input-tag",InputTag);export{InputTag};
 //# sourceMappingURL=input-tag.js.map

package/dist/esm/zoo-modules/form/quantity-control/quantity-control.js

@@ -1,2 +1,2 @@
-import{FormElement as t}from"../common/FormElement.js";import{registerComponents as e}from"../../common/register-components.js";import{InfoMessage as o}from"../info/info.js";import{Label as i}from"../label/label.js";class QuantityControl extends t{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{--input-length:1ch}div{height:36px;display:flex}::slotted(button){border-width:0;min-width:30px;min-height:30px;background:var(--primary-mid);display:flex;align-items:center;justify-content:center;padding:4px;cursor:pointer;stroke-width:1.5;stroke:#FFF}::slotted(button[slot=decrease]){border-radius:5px 0 0 5px}::slotted(button[slot=increase]){border-radius:0 5px 5px 0}::slotted(button:disabled){background:var(--input-disabled,#f2f3f4);cursor:not-allowed}::slotted(input){width:var(--input-length);min-width:30px;font-size:14px;line-height:20px;margin:0;border:none;color:#555;outline:0;box-sizing:border-box;appearance:textfield;text-align:center}:host([labelposition=left]){display:grid;grid-gap:3px;height:max-content}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) div,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:1}:host([labelposition=left]) zoo-info[role=status]{grid-row:2;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:3;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><div><slot name="decrease"></slot><slot name="input"></slot><slot name="increase"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',e(o,i),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",(t=>{this.input=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName)),this.input&&(this.registerElementForValidation(this.input),this.setInputWidth())})),this.shadowRoot.querySelector('slot[name="increase"]').addEventListener("slotchange",(t=>this.handleClick(!0,t.target.assignedElements()[0]))),this.shadowRoot.querySelector('slot[name="decrease"]').addEventListener("slotchange",(t=>this.handleClick(!1,t.target.assignedElements()[0])))}setInputWidth(){const t=this.input.value&&this.input.value.length||1;this.style.setProperty("--input-length",t+1+"ch")}handleClick(t,e){e&&e.addEventListener("click",(()=>{const e=this.input.step||1;this.input.value=this.input.value||0,this.input.value-=t?-e:e,this.input.dispatchEvent(new Event("change")),this.setInputWidth()}))}}window.customElements.get("zoo-quantity-control")||window.customElements.define("zoo-quantity-control",QuantityControl);export{QuantityControl};
+import{FormElement as t}from"../common/FormElement.js";import{registerComponents as e}from"../../common/register-components.js";import{InfoMessage as o}from"../info/info.js";import{Label as i}from"../label/label.js";class QuantityControl extends t{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{--input-length:1ch}div{height:36px;display:flex}::slotted(button){border-width:0;min-width:30px;min-height:30px;background:var(--primary-mid);display:flex;align-items:center;justify-content:center;padding:4px;cursor:pointer;stroke-width:1.5;stroke:#FFF}::slotted(button[slot=decrease]){border-radius:5px 0 0 5px}::slotted(button[slot=increase]){border-radius:0 5px 5px 0}::slotted(button:disabled){background:var(--input-disabled,#f2f3f4);cursor:not-allowed}::slotted(input){width:var(--input-length);min-width:30px;font-size:14px;line-height:20px;margin:0;border:none;color:#555;outline:0;box-sizing:border-box;appearance:textfield;text-align:center}:host([labelposition=left]){display:grid;grid-gap:3px;height:max-content}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) div,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:1}:host([labelposition=left]) zoo-info[role=status]{grid-row:2;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:3;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><div><slot name="decrease"></slot><slot name="input"></slot><slot name="increase"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',e(o,i),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",t=>{this.input=[...t.target.assignedElements()].find(t=>"INPUT"===t.tagName),this.input&&(this.registerElementForValidation(this.input),this.setInputWidth())}),this.shadowRoot.querySelector('slot[name="increase"]').addEventListener("slotchange",t=>this.handleClick(!0,t.target.assignedElements()[0])),this.shadowRoot.querySelector('slot[name="decrease"]').addEventListener("slotchange",t=>this.handleClick(!1,t.target.assignedElements()[0]))}setInputWidth(){const t=this.input.value&&this.input.value.length||1;this.style.setProperty("--input-length",t+1+"ch")}handleClick(t,e){e&&e.addEventListener("click",()=>{const e=this.input.step||1;this.input.value=this.input.value||0,this.input.value-=t?-e:e,this.input.dispatchEvent(new Event("change")),this.setInputWidth()})}}window.customElements.get("zoo-quantity-control")||window.customElements.define("zoo-quantity-control",QuantityControl);export{QuantityControl};
 //# sourceMappingURL=quantity-control.js.map

package/dist/esm/zoo-modules/form/radio/radio.js

@@ -1,2 +1,2 @@
-import{registerComponents as o}from"../../common/register-components.js";import{FormElement as i}from"../common/FormElement.js";import{InfoMessage as t}from"../info/info.js";import{Label as e}from"../label/label.js";class Radio extends i{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;flex-direction:column;font-size:14px;line-height:20px;--box-shadow-color:#767676;--box-shadow-width:1px;--box-shadow-color2:transparent;--box-shadow-width2:1px}fieldset{border:0;padding:0;margin:0;position:relative}.radio-group{display:flex;padding:11px 0}:host([invalid]){color:var(--warning-mid)}::slotted(input){position:relative;min-width:24px;height:24px;border-radius:50%;margin:0 2px 0 0;padding:4px;background-clip:content-box;appearance:none;outline:0;cursor:pointer;box-shadow:inset 0 0 0 var(--box-shadow-width) var(--box-shadow-color),inset 0 0 0 var(--box-shadow-width2) var(--box-shadow-color2)}:host([invalid]) ::slotted(input){--box-shadow-color:var(--warning-mid)}::slotted(input:focus){--box-shadow-color:var(--primary-mid);--box-shadow-width:2px}::slotted(input:checked){background-color:var(--primary-mid);--box-shadow-color:var(--primary-mid);--box-shadow-width:2px;--box-shadow-width2:4px;--box-shadow-color2:white}:host([invalid]) ::slotted(input:checked){background-color:var(--warning-mid)}::slotted(input:disabled){cursor:not-allowed;background-color:#555;--box-shadow-width:2px;--box-shadow-width2:5px;--box-shadow-color:#555!important}::slotted(label){cursor:pointer;margin:0 5px;align-self:center}:host([labelposition=left]) fieldset{display:grid;grid-gap:3px}:host([labelposition=left]) .radio-group{grid-column:2}:host([labelposition=left]) .radio-group,:host([labelposition=left]) legend{grid-row:1;display:flex;align-items:center}:host([labelposition=left]) legend{display:contents}:host([labelposition=left]) legend zoo-label{display:flex;align-items:center}:host([labelposition=left]) zoo-info[role=status]{grid-row:2;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:3;grid-column:2}</style><fieldset><legend><zoo-label><slot name="label"></slot></zoo-label></legend><div class="radio-group"><slot></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info></fieldset>',o(t,e),this.shadowRoot.querySelector(".radio-group slot").addEventListener("slotchange",(o=>{o.target.assignedElements().forEach((o=>"INPUT"===o.tagName&&this.registerElementForValidation(o)))}))}}window.customElements.get("zoo-radio")||window.customElements.define("zoo-radio",Radio);export{Radio};
+import{registerComponents as o}from"../../common/register-components.js";import{FormElement as i}from"../common/FormElement.js";import{InfoMessage as t}from"../info/info.js";import{Label as e}from"../label/label.js";class Radio extends i{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;flex-direction:column;font-size:14px;line-height:20px;--box-shadow-color:#767676;--box-shadow-width:1px;--box-shadow-color2:transparent;--box-shadow-width2:1px}fieldset{border:0;padding:0;margin:0;position:relative}.radio-group{display:flex;padding:11px 0}:host([invalid]){color:var(--warning-mid)}::slotted(input){position:relative;min-width:24px;height:24px;border-radius:50%;margin:0 2px 0 0;padding:4px;background-clip:content-box;appearance:none;outline:0;cursor:pointer;box-shadow:inset 0 0 0 var(--box-shadow-width) var(--box-shadow-color),inset 0 0 0 var(--box-shadow-width2) var(--box-shadow-color2)}:host([invalid]) ::slotted(input){--box-shadow-color:var(--warning-mid)}::slotted(input:focus){--box-shadow-color:var(--primary-mid);--box-shadow-width:2px}::slotted(input:checked){background-color:var(--primary-mid);--box-shadow-color:var(--primary-mid);--box-shadow-width:2px;--box-shadow-width2:4px;--box-shadow-color2:white}:host([invalid]) ::slotted(input:checked){background-color:var(--warning-mid)}::slotted(input:disabled){cursor:not-allowed;background-color:#555;--box-shadow-width:2px;--box-shadow-width2:5px;--box-shadow-color:#555!important}::slotted(label){cursor:pointer;margin:0 5px;align-self:center}:host([labelposition=left]) fieldset{display:grid;grid-gap:3px}:host([labelposition=left]) .radio-group{grid-column:2}:host([labelposition=left]) .radio-group,:host([labelposition=left]) legend{grid-row:1;display:flex;align-items:center}:host([labelposition=left]) legend{display:contents}:host([labelposition=left]) legend zoo-label{display:flex;align-items:center}:host([labelposition=left]) zoo-info[role=status]{grid-row:2;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:3;grid-column:2}</style><fieldset><legend><zoo-label><slot name="label"></slot></zoo-label></legend><div class="radio-group"><slot></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info></fieldset>',o(t,e),this.shadowRoot.querySelector(".radio-group slot").addEventListener("slotchange",o=>{o.target.assignedElements().forEach(o=>"INPUT"===o.tagName&&this.registerElementForValidation(o))})}}window.customElements.get("zoo-radio")||window.customElements.define("zoo-radio",Radio);export{Radio};
 //# sourceMappingURL=radio.js.map

package/dist/esm/zoo-modules/form/searchable-select/searchable-select.js

@@ -1,2 +1,2 @@
-import{registerComponents as t}from"../../common/register-components.js";import{CrossIcon as e}from"../../icon/cross-icon/cross-icon.js";import{FormElement as o}from"../common/FormElement.js";import{Input as s}from"../input/input.js";import{Select as i}from"../select/select.js";import{Preloader as l}from"../../misc/preloader/preloader.js";import{Tooltip as n}from"../../misc/tooltip/tooltip.js";class SearchableSelect extends o{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.cross,zoo-select{display:none;position:absolute}zoo-info,zoo-input{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}.cross{top:12px;right:14px;cursor:pointer;border:0;padding:0;background:0 0}.cross.hidden,:host([value-selected]) .cross.hidden{display:none}:host([value-selected]) .cross{display:flex}slot[name=selectlabel],zoo-preloader,zoo-tooltip{display:none}:host(:focus) zoo-tooltip,:host(:hover) zoo-tooltip{display:grid}zoo-select{border-top:none;z-index:2;top:59%;--icons-display:none}:host(:focus-within) zoo-select{display:grid}:host(:focus-within) slot[name=selectlabel]{display:block}:host(:focus-within) ::slotted(select){border-top-left-radius:0;border-top-right-radius:0;border:2px solid #555;border-top:none!important}:host([invalid]) ::slotted(select){border:2px solid var(--warning-mid)}:host([loading]) zoo-preloader{display:flex}::slotted([slot=inputlabel]),::slotted([slot=selectlabel]){position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}zoo-link{align-items:flex-start;text-align:right;max-width:max-content;justify-self:flex-end;padding:0}zoo-label,zoo-link{grid-row:1}zoo-input{grid-gap:0;position:relative}:host(:focus-within) ::slotted(input){border:2px solid #555;padding:12px 14px}:host([invalid]) ::slotted(input){border:2px solid var(--warning-mid);padding:12px 14px}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) zoo-input,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}</style><zoo-label><slot name="legend"><slot name="label"></slot></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><zoo-input><zoo-preloader slot="additional"></zoo-preloader><slot slot="input" name="input"></slot><button slot="additional" class="cross" type="button"><zoo-cross-icon></zoo-cross-icon></button><slot name="inputlabel" slot="additional"></slot><zoo-select slot="additional"><slot name="select" slot="select"></slot></zoo-select></zoo-input><slot name="selectlabel"></slot><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',t(s,i,l,e,n),this.observer=new MutationObserver((t=>{for(let e of t){this.input.disabled=e.target.disabled;const t=this.shadowRoot.querySelector(".cross");e.target.disabled?t.classList.add("hidden"):t.classList.remove("hidden")}})),this.shadowRoot.querySelector(".cross").addEventListener("click",(()=>{this.select.disabled||(this.select.value=null,this.select.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!1})))})),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",(t=>{this.select=[...t.target.assignedElements()].find((t=>"SELECT"===t.tagName)),this.select&&(this.registerElementForValidation(this.select),this.select.addEventListener("change",(()=>{this.handleOptionChange(),this.valueChange()})),this.select.size=4,this.observer.observe(this.select,{attributes:!0,attributeFilter:["disabled"]}),this.valueChange(),this.slotChange())})),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",(t=>{this.input=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName)),this.input&&(this.inputPlaceholderFallback=this.input.placeholder,this.input.addEventListener("input",(()=>this.handleSearchChange())),this.slotChange())}))}static get observedAttributes(){return["closeicontitle"]}slotChange(){this.input&&this.select&&(this.handleOptionChange(),this.input.disabled=this.select.disabled)}valueChange(){this.select.value?this.setAttribute("value-selected",""):this.removeAttribute("value-selected")}attributeChangedCallback(t,e,o){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",o)}handleSearchChange(){const t=this.input.value.toLowerCase();this.select.querySelectorAll("option").forEach((e=>{e.text.toLowerCase().indexOf(t)>-1?e.style.display="block":e.style.display="none"}))}handleOptionChange(){let t=[...this.select.selectedOptions].map((t=>t.text)).join(", \n");this.input.placeholder=t||this.inputPlaceholderFallback,t?(this.input.value=null,this.tooltip=this.tooltip||this.createTooltip(),this.tooltip.textContent=t,this.shadowRoot.querySelector("zoo-input").appendChild(this.tooltip)):this.tooltip&&this.tooltip.remove()}createTooltip(){const t=document.createElement("zoo-tooltip");return t.slot="additional",t.setAttribute("position","right"),t}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-searchable-select")||window.customElements.define("zoo-searchable-select",SearchableSelect);export{SearchableSelect};
+import{registerComponents as t}from"../../common/register-components.js";import{CrossIcon as e}from"../../icon/cross-icon/cross-icon.js";import{FormElement as o}from"../common/FormElement.js";import{Input as s}from"../input/input.js";import{Select as i}from"../select/select.js";import{Preloader as l}from"../../misc/preloader/preloader.js";import{Tooltip as n}from"../../misc/tooltip/tooltip.js";class SearchableSelect extends o{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}.cross{display:none;position:absolute;top:12px;right:14px;cursor:pointer;border:0;padding:0;background:0 0}.cross.hidden,:host([value-selected]) .cross.hidden{display:none}:host([value-selected]) .cross{display:flex}zoo-tooltip{display:none}:host(:focus) zoo-tooltip,:host(:hover) zoo-tooltip{display:grid}zoo-select{border-top:none;position:absolute;z-index:2;top:59%;display:none;--icons-display:none}:host(:focus-within) zoo-select{display:grid}slot[name=selectlabel]{display:none}:host(:focus-within) slot[name=selectlabel]{display:block}:host(:focus-within) ::slotted(select){border-top-left-radius:0;border-top-right-radius:0;border:2px solid #555;border-top:none!important}:host([invalid]) ::slotted(select){border:2px solid var(--warning-mid)}zoo-preloader{display:none}:host([loading]) zoo-preloader{display:flex}::slotted([slot=inputlabel]),::slotted([slot=selectlabel]){position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}zoo-link{align-items:flex-start;text-align:right;max-width:max-content;justify-self:flex-end;padding:0}zoo-label,zoo-link{grid-row:1}zoo-input{grid-gap:0;grid-column:span 2;position:relative}:host(:focus-within) ::slotted(input){border:2px solid #555;padding:12px 14px}:host([invalid]) ::slotted(input){border:2px solid var(--warning-mid);padding:12px 14px}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) zoo-input,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}zoo-info{grid-column:span 2}</style><zoo-label><slot name="legend"><slot name="label"></slot></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><zoo-input><zoo-preloader slot="additional"></zoo-preloader><slot slot="input" name="input"></slot><button slot="additional" class="cross" type="button"><zoo-cross-icon></zoo-cross-icon></button><slot name="inputlabel" slot="additional"></slot><zoo-select slot="additional"><slot name="select" slot="select"></slot></zoo-select></zoo-input><slot name="selectlabel"></slot><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',t(s,i,l,e,n),this.observer=new MutationObserver(t=>{for(let e of t){this.input.disabled=e.target.disabled;const t=this.shadowRoot.querySelector(".cross");e.target.disabled?t.classList.add("hidden"):t.classList.remove("hidden")}}),this.shadowRoot.querySelector(".cross").addEventListener("click",()=>{this.select.disabled||(this.select.value=null,this.select.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!1})))}),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",t=>{this.select=[...t.target.assignedElements()].find(t=>"SELECT"===t.tagName),this.select&&(this.registerElementForValidation(this.select),this.select.addEventListener("change",()=>{this.handleOptionChange(),this.valueChange()}),this.select.size=4,this.observer.observe(this.select,{attributes:!0,attributeFilter:["disabled"]}),this.valueChange(),this.slotChange())}),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",t=>{this.input=[...t.target.assignedElements()].find(t=>"INPUT"===t.tagName),this.input&&(this.inputPlaceholderFallback=this.input.placeholder,this.input.addEventListener("input",()=>this.handleSearchChange()),this.slotChange())})}static get observedAttributes(){return["closeicontitle"]}slotChange(){this.input&&this.select&&(this.handleOptionChange(),this.input.disabled=this.select.disabled)}valueChange(){this.select.value?this.setAttribute("value-selected",""):this.removeAttribute("value-selected")}attributeChangedCallback(t,e,o){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",o)}handleSearchChange(){const t=this.input.value.toLowerCase();this.select.querySelectorAll("option").forEach(e=>{e.text.toLowerCase().indexOf(t)>-1?e.style.display="block":e.style.display="none"})}handleOptionChange(){let t=[...this.select.selectedOptions].map(t=>t.text).join(", \n");this.input.placeholder=t||this.inputPlaceholderFallback,t?(this.input.value=null,this.tooltip=this.tooltip||this.createTooltip(),this.tooltip.textContent=t,this.shadowRoot.querySelector("zoo-input").appendChild(this.tooltip)):this.tooltip&&this.tooltip.remove()}createTooltip(){const t=document.createElement("zoo-tooltip");return t.slot="additional",t.setAttribute("position","right"),t}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-searchable-select")||window.customElements.define("zoo-searchable-select",SearchableSelect);export{SearchableSelect};
 //# sourceMappingURL=searchable-select.js.map

package/dist/esm/zoo-modules/form/select/select.js

@@ -1,2 +1,2 @@
-import{registerComponents as o}from"../../common/register-components.js";import{ArrowDownIcon as e}from"../../icon/arrow-icon/arrow-icon.js";import{Link as t}from"../../misc/link/link.js";import{Preloader as i}from"../../misc/preloader/preloader.js";import{FormElement as l}from"../common/FormElement.js";import{InfoMessage as r}from"../info/info.js";import{Label as s}from"../label/label.js";class Select extends l{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.content,zoo-info{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box;--icons-display:flex}zoo-arrow-icon{position:absolute;right:10px;display:var(--icons-display);pointer-events:none}:host([invalid]) zoo-arrow-icon{--icon-color:var(--warning-mid)}:host([disabled]) zoo-arrow-icon{--icon-color:#666}::slotted(select){appearance:none;width:100%;font-size:14px;line-height:20px;padding:13px 25px 13px 15px;border:1px solid #767676;border-radius:5px;color:#555;outline:0;box-sizing:border-box}::slotted(select:disabled){border:1px solid #e6e6e6;background:var(--input-disabled,#f2f3f4);color:#666}::slotted(select:disabled:hover){cursor:not-allowed}::slotted(select:focus){border:2px solid #555;padding:12px 24px 12px 14px}:host([invalid]) ::slotted(select){border:2px solid var(--warning-mid);padding:12px 24px 12px 14px}.content{display:flex;justify-content:stretch;align-items:center;position:relative}:host([multiple]) zoo-arrow-icon{display:none}zoo-link{text-align:right;max-width:max-content;justify-self:flex-end;padding:0}zoo-preloader{display:none}:host([loading]) zoo-preloader{display:flex}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) .content,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><div class="content"><zoo-preloader></zoo-preloader><slot name="select"></slot><zoo-arrow-icon aria-hidden="true"></zoo-arrow-icon></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',o(r,s,t,i,e),this.observer=new MutationObserver((o=>{for(let e of o){const o=e.attributeName;e.target[o]?this.setAttribute(o,""):this.removeAttribute(o)}})),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",(o=>{let e=[...o.target.assignedElements()].find((o=>"SELECT"===o.tagName));e&&(e.multiple&&this.setAttribute("multiple",""),e.disabled&&this.setAttribute("disabled",""),this.registerElementForValidation(e),this.observer.observe(e,{attributes:!0,attributeFilter:["disabled","multiple"]}))}))}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-select")||window.customElements.define("zoo-select",Select);export{Select};
+import{registerComponents as o}from"../../common/register-components.js";import{ArrowDownIcon as e}from"../../icon/arrow-icon/arrow-icon.js";import{Link as t}from"../../misc/link/link.js";import{Preloader as i}from"../../misc/preloader/preloader.js";import{FormElement as l}from"../common/FormElement.js";import{InfoMessage as r}from"../info/info.js";import{Label as s}from"../label/label.js";class Select extends l{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box;--icons-display:flex}zoo-arrow-icon{position:absolute;right:10px;display:var(--icons-display);pointer-events:none}:host([invalid]) zoo-arrow-icon{--icon-color:var(--warning-mid)}:host([disabled]) zoo-arrow-icon{--icon-color:#666}::slotted(select){appearance:none;width:100%;font-size:14px;line-height:20px;padding:13px 25px 13px 15px;border:1px solid #767676;border-radius:5px;color:#555;outline:0;box-sizing:border-box}::slotted(select:disabled){border:1px solid #e6e6e6;background:var(--input-disabled,#f2f3f4);color:#666}::slotted(select:disabled:hover){cursor:not-allowed}::slotted(select:focus){border:2px solid #555;padding:12px 24px 12px 14px}:host([invalid]) ::slotted(select){border:2px solid var(--warning-mid);padding:12px 24px 12px 14px}.content{display:flex;justify-content:stretch;align-items:center;position:relative;grid-column:span 2}zoo-info{grid-column:span 2}:host([multiple]) zoo-arrow-icon{display:none}zoo-link{text-align:right;max-width:max-content;justify-self:flex-end;padding:0}zoo-preloader{display:none}:host([loading]) zoo-preloader{display:flex}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) .content,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><div class="content"><zoo-preloader></zoo-preloader><slot name="select"></slot><zoo-arrow-icon aria-hidden="true"></zoo-arrow-icon></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',o(r,s,t,i,e),this.observer=new MutationObserver(o=>{for(let e of o){const o=e.attributeName;e.target[o]?this.setAttribute(o,""):this.removeAttribute(o)}}),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",o=>{let e=[...o.target.assignedElements()].find(o=>"SELECT"===o.tagName);e&&(e.multiple&&this.setAttribute("multiple",""),e.disabled&&this.setAttribute("disabled",""),this.registerElementForValidation(e),this.observer.observe(e,{attributes:!0,attributeFilter:["disabled","multiple"]}))})}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-select")||window.customElements.define("zoo-select",Select);export{Select};
 //# sourceMappingURL=select.js.map

package/dist/esm/zoo-modules/form/toggle-switch/toggle-switch.js

@@ -1,2 +1,2 @@
-import{registerComponents as o}from"../../common/register-components.js";import{FormElement as t}from"../common/FormElement.js";import{InfoMessage as e}from"../info/info.js";import{Label as i}from"../label/label.js";class ToggleSwitch extends t{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{height:100%;width:100%}div{display:flex;align-items:center;position:relative;height:17px;width:40px;background:#e6e6e6;border-radius:10px;border-width:0;margin:5px 0}::slotted(input){transition:transform .2s;transform:translateX(-30%);width:60%;height:24px;border:1px solid #e6e6e6;border-radius:50%;display:flex;appearance:none;outline:0;cursor:pointer;background:#fff}::slotted(input:checked){transform:translateX(80%);background:var(--primary-mid)}::slotted(input:focus){border:1px solid #767676}::slotted(input:disabled){background:var(--input-disabled,#f2f3f4);cursor:not-allowed}:host([labelposition=left]){display:grid;grid-gap:3px;height:max-content}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) div,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:1}:host([labelposition=left]) zoo-info[role=status]{grid-row:2;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:3;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><div class="toggle-wrapper"><slot name="input"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',o(e,i),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",(o=>{const t=[...o.target.assignedElements()].find((o=>"INPUT"===o.tagName));t&&(this.registerElementForValidation(t),o.target.parentNode.addEventListener("click",(o=>{o.target.classList.contains("toggle-wrapper")&&t.click()})))}))}}window.customElements.get("zoo-toggle-switch")||window.customElements.define("zoo-toggle-switch",ToggleSwitch);export{ToggleSwitch};
+import{registerComponents as o}from"../../common/register-components.js";import{FormElement as t}from"../common/FormElement.js";import{InfoMessage as e}from"../info/info.js";import{Label as i}from"../label/label.js";class ToggleSwitch extends t{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{height:100%;width:100%}div{display:flex;align-items:center;position:relative;height:17px;width:40px;background:#e6e6e6;border-radius:10px;border-width:0;margin:5px 0}::slotted(input){transition:transform .2s;transform:translateX(-30%);width:60%;height:24px;border:1px solid #e6e6e6;border-radius:50%;display:flex;appearance:none;outline:0;cursor:pointer;background:#fff}::slotted(input:checked){transform:translateX(80%);background:var(--primary-mid)}::slotted(input:focus){border-width:2px;border:1px solid #767676}::slotted(input:disabled){background:var(--input-disabled,#f2f3f4);cursor:not-allowed}:host([labelposition=left]){display:grid;grid-gap:3px;height:max-content}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) div,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:1}:host([labelposition=left]) zoo-info[role=status]{grid-row:2;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:3;grid-column:2}</style><zoo-label><slot name="label"></slot></zoo-label><div class="toggle-wrapper"><slot name="input"></slot></div><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',o(e,i),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",o=>{const t=[...o.target.assignedElements()].find(o=>"INPUT"===o.tagName);t&&(this.registerElementForValidation(t),o.target.parentNode.addEventListener("click",o=>{o.target.classList.contains("toggle-wrapper")&&t.click()}))})}}window.customElements.get("zoo-toggle-switch")||window.customElements.define("zoo-toggle-switch",ToggleSwitch);export{ToggleSwitch};
 //# sourceMappingURL=toggle-switch.js.map

package/dist/esm/zoo-modules/grid/grid/grid.js

@@ -1,2 +1,2 @@
-import{debounce as e}from"../../helpers/debounce.js";import{Paginator as t}from"../../misc/paginator/paginator.js";import{GridHeader as r}from"../grid-header/grid-header.js";import{GridRow as o}from"../grid-row/grid-row.js";import{registerComponents as s}from"../../common/register-components.js";class ZooGrid extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout;position:relative;display:block}.loading-shade{display:none;position:absolute;left:0;top:0;right:0;z-index:var(--zoo-grid-z-index,9998);justify-content:center;height:100%;background:rgb(0 0 0 / 15%);pointer-events:none}.footer,.header-row{z-index:2;background:#fff;box-sizing:border-box}:host([loading]) .loading-shade{display:flex}.header-row{min-width:inherit;font-weight:600;color:#555}.header-row,::slotted([slot=row]){display:grid;grid-template-columns:var(--grid-column-sizes,repeat(var(--grid-column-num),minmax(50px,1fr)));padding:5px 10px;border-bottom:1px solid;min-height:50px;font-size:14px;line-height:20px}::slotted([slot=row]){overflow:visible;align-items:center;box-sizing:border-box}:host([resizable]){--zoo-grid-row-display:flex}:host([resizable]) .header-row,:host([resizable]) ::slotted([slot=row]){display:flex}:host([resizable]) ::slotted([slot=headercell]){overflow:auto;resize:horizontal;height:inherit}::slotted(.drag-over){box-shadow:inset 0 0 1px 1px rgb(0 0 0 / 40%)}:host([stickyheader]) .header-row{top:var(--grid-stickyheader-position-top,0);position:sticky}::slotted([slot=row]:nth-child(odd)){background:#f2f3f4}::slotted([slot=row]:focus),::slotted([slot=row]:hover){background:var(--item-hovered,#e6e6e6)}::slotted([slot=norecords]){color:var(--warning-dark);grid-column:span var(--grid-column-num);text-align:center;padding:10px 0}.footer{display:flex;position:sticky;bottom:0;width:100%;border-top:1px solid #e6e6e6;padding:10px}slot[name=footer-content]{display:flex;flex-grow:1}::slotted([slot=footer-content]){justify-self:flex-start}zoo-paginator{position:sticky;right:10px;justify-content:flex-end}slot[name=pagesizeselector]{display:block;margin-right:20px}</style><div class="loading-shade"><zoo-spinner></zoo-spinner></div><div class="header-row" role="row"><slot name="headercell"></slot></div><slot name="row" role="rowgroup"></slot><slot name="norecords"></slot><div class="footer"><slot name="footer-content"></slot><zoo-paginator><slot name="pagesizeselector" slot="pagesizeselector"></slot></zoo-paginator></div>',s(t,r,o);const a=this.shadowRoot.querySelector('slot[name="headercell"]');a.addEventListener("slotchange",e((()=>{const e=a.assignedElements();this.style.setProperty("--grid-column-num",e.length),e.forEach(((e,t)=>{e.setAttribute("column",t+1),e.setAttribute("role","columnheader")})),this.hasAttribute("reorderable")&&e.forEach((e=>this.handleDraggableHeader(e))),this.hasAttribute("resizable")&&this.handleResizableAttributeChange()})));const i=this.shadowRoot.querySelector('slot[name="row"]');i.addEventListener("slotchange",e((()=>{i.assignedElements().forEach((e=>{e.setAttribute("role","row"),"ZOO-GRID-ROW"===e.tagName?[...e.querySelector('*[slot="row-details"]').children].forEach(((e,t)=>{e.setAttribute("column",t+1),e.setAttribute("role","cell")})):[...e.children].forEach(((e,t)=>{e.setAttribute("column",t+1),e.setAttribute("role","cell")}))}))}))),this.addEventListener("sortChange",(e=>{this.prevSortedHeader&&!e.target.isEqualNode(this.prevSortedHeader)&&this.prevSortedHeader.removeAttribute("sortstate"),this.prevSortedHeader=e.target}))}static get observedAttributes(){return["currentpage","maxpages","resizable","reorderable","prev-page-title","next-page-title"]}attributeChangedCallback(e,t,r){"resizable"==e?this.handleResizableAttributeChange():"reorderable"==e&&this.hasAttribute("reorderable")?this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((e=>this.handleDraggableHeader(e))):["maxpages","currentpage","prev-page-title","next-page-title"].includes(e)&&this.shadowRoot.querySelector("zoo-paginator").setAttribute(e,r)}resizeCallback(e){e.forEach((e=>{const t=e.target.getAttribute("column"),r=e.contentRect.width;this.querySelectorAll(`[column="${t}"]`).forEach((e=>e.style.width=`${r}px`))}))}handleResizableAttributeChange(){this.hasAttribute("resizable")&&(this.resizeObserver=this.resizeObserver||new ResizeObserver(e(this.resizeCallback.bind(this))),this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((e=>this.resizeObserver.observe(e))))}handleDraggableHeader(t){t.hasAttribute("reorderable")||(t.setAttribute("reorderable",""),t.setAttribute("ondragover","event.preventDefault()"),t.setAttribute("ondrop","event.preventDefault()"),t.addEventListener("dragstart",(e=>e.dataTransfer.setData("text/plain",t.getAttribute("column")))),t.addEventListener("dragenter",e((()=>{t.classList.add("drag-over"),this.prevDraggedOverHeader=t}))),t.addEventListener("dragleave",(()=>t.classList.remove("drag-over"))),t.addEventListener("drop",(e=>this.handleDrop(e))))}handleDrop(e){this.prevDraggedOverHeader&&this.prevDraggedOverHeader.classList.remove("drag-over");const t=e.dataTransfer.getData("text"),r=e.target.getAttribute("column");r!=t&&(this.querySelectorAll(`[column="${t}"]`).forEach((e=>{const o=e.parentElement.querySelector(`[column="${r}"]`);r>t?o.after(e):o.before(e)})),this.shadowRoot.querySelector('slot[name="row"]').assignedElements().forEach((e=>{"ZOO-GRID-ROW"===e.tagName?[...e.shadowRoot.querySelector('slot[name="row-details"]').assignedElements()[0].children].forEach(((e,t)=>e.setAttribute("column",t+1))):[...e.children].forEach(((e,t)=>e.setAttribute("column",t+1)))})))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}}window.customElements.get("zoo-grid")||window.customElements.define("zoo-grid",ZooGrid);export{ZooGrid};
+import{debounce as e}from"../../helpers/debounce.js";import{Paginator as t}from"../../misc/paginator/paginator.js";import{GridHeader as r}from"../grid-header/grid-header.js";import{GridRow as o}from"../grid-row/grid-row.js";import{registerComponents as s}from"../../common/register-components.js";class ZooGrid extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout;position:relative;display:block}.loading-shade{display:none;position:absolute;left:0;top:0;right:0;z-index:var(--zoo-grid-z-index,9998);justify-content:center;height:100%;background:rgb(0 0 0 / 15%);pointer-events:none}:host([loading]) .loading-shade{display:flex}.header-row{min-width:inherit;font-weight:600;color:#555;box-sizing:border-box;z-index:2;background:#fff}.header-row,::slotted([slot=row]){display:grid;grid-template-columns:var(--grid-column-sizes,repeat(var(--grid-column-num),minmax(50px,1fr)));padding:5px 10px;border-bottom:1px solid rgb(0 0 0 / 20%);min-height:50px;font-size:14px;line-height:20px}::slotted([slot=row]){overflow:visible;align-items:center;box-sizing:border-box}:host([resizable]){--zoo-grid-row-display:flex}:host([resizable]) .header-row,:host([resizable]) ::slotted([slot=row]){display:flex}:host([resizable]) ::slotted([slot=headercell]){overflow:auto;resize:horizontal;height:inherit}::slotted(.drag-over){box-shadow:inset 0 0 1px 1px rgb(0 0 0 / 40%)}:host([stickyheader]) .header-row{top:var(--grid-stickyheader-position-top,0);position:sticky}::slotted([slot=row]:nth-child(odd)){background:#f2f3f4}::slotted([slot=row]:focus),::slotted([slot=row]:hover){background:var(--item-hovered,#e6e6e6)}::slotted([slot=norecords]){color:var(--warning-dark);grid-column:span var(--grid-column-num);text-align:center;padding:10px 0}.footer{display:flex;position:sticky;bottom:0;z-index:2;width:100%;background:#fff;border-top:1px solid #e6e6e6;box-sizing:border-box;padding:10px}slot[name=footer-content]{display:flex;flex-grow:1}::slotted([slot=footer-content]){justify-self:flex-start}zoo-paginator{position:sticky;right:10px;justify-content:flex-end}slot[name=pagesizeselector]{display:block;margin-right:20px}</style><div class="loading-shade"><zoo-spinner></zoo-spinner></div><div class="header-row" role="row"><slot name="headercell"></slot></div><slot name="row" role="rowgroup"></slot><slot name="norecords"></slot><div class="footer"><slot name="footer-content"></slot><zoo-paginator><slot name="pagesizeselector" slot="pagesizeselector"></slot></zoo-paginator></div>',s(t,r,o);const a=this.shadowRoot.querySelector('slot[name="headercell"]');a.addEventListener("slotchange",e(()=>{const e=a.assignedElements();this.style.setProperty("--grid-column-num",e.length),e.forEach((e,t)=>{e.setAttribute("column",t+1),e.setAttribute("role","columnheader")}),this.hasAttribute("reorderable")&&e.forEach(e=>this.handleDraggableHeader(e)),this.hasAttribute("resizable")&&this.handleResizableAttributeChange()}));const i=this.shadowRoot.querySelector('slot[name="row"]');i.addEventListener("slotchange",e(()=>{i.assignedElements().forEach(e=>{e.setAttribute("role","row"),"ZOO-GRID-ROW"===e.tagName?[...e.querySelector('*[slot="row-details"]').children].forEach((e,t)=>{e.setAttribute("column",t+1),e.setAttribute("role","cell")}):[...e.children].forEach((e,t)=>{e.setAttribute("column",t+1),e.setAttribute("role","cell")})})})),this.addEventListener("sortChange",e=>{this.prevSortedHeader&&!e.target.isEqualNode(this.prevSortedHeader)&&this.prevSortedHeader.removeAttribute("sortstate"),this.prevSortedHeader=e.target})}static get observedAttributes(){return["currentpage","maxpages","resizable","reorderable","prev-page-title","next-page-title"]}attributeChangedCallback(e,t,r){"resizable"==e?this.handleResizableAttributeChange():"reorderable"==e&&this.hasAttribute("reorderable")?this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach(e=>this.handleDraggableHeader(e)):["maxpages","currentpage","prev-page-title","next-page-title"].includes(e)&&this.shadowRoot.querySelector("zoo-paginator").setAttribute(e,r)}resizeCallback(e){e.forEach(e=>{const t=e.target.getAttribute("column"),r=e.contentRect.width;this.querySelectorAll(`[column="${t}"]`).forEach(e=>e.style.width=`${r}px`)})}handleResizableAttributeChange(){this.hasAttribute("resizable")&&(this.resizeObserver=this.resizeObserver||new ResizeObserver(e(this.resizeCallback.bind(this))),this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach(e=>this.resizeObserver.observe(e)))}handleDraggableHeader(t){t.hasAttribute("reorderable")||(t.setAttribute("reorderable",""),t.setAttribute("ondragover","event.preventDefault()"),t.setAttribute("ondrop","event.preventDefault()"),t.addEventListener("dragstart",e=>e.dataTransfer.setData("text/plain",t.getAttribute("column"))),t.addEventListener("dragenter",e(()=>{t.classList.add("drag-over"),this.prevDraggedOverHeader=t})),t.addEventListener("dragleave",()=>t.classList.remove("drag-over")),t.addEventListener("drop",e=>this.handleDrop(e)))}handleDrop(e){this.prevDraggedOverHeader&&this.prevDraggedOverHeader.classList.remove("drag-over");const t=e.dataTransfer.getData("text"),r=e.target.getAttribute("column");r!=t&&(this.querySelectorAll(`[column="${t}"]`).forEach(e=>{const o=e.parentElement.querySelector(`[column="${r}"]`);r>t?o.after(e):o.before(e)}),this.shadowRoot.querySelector('slot[name="row"]').assignedElements().forEach(e=>{"ZOO-GRID-ROW"===e.tagName?[...e.shadowRoot.querySelector('slot[name="row-details"]').assignedElements()[0].children].forEach((e,t)=>e.setAttribute("column",t+1)):[...e.children].forEach((e,t)=>e.setAttribute("column",t+1))}))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}}window.customElements.get("zoo-grid")||window.customElements.define("zoo-grid",ZooGrid);export{ZooGrid};
 //# sourceMappingURL=grid.js.map

package/dist/esm/zoo-modules/grid/grid-header/grid-header.js

@@ -1,2 +1,2 @@
-import{ArrowDownIcon as t}from"../../icon/arrow-icon/arrow-icon.js";import{registerComponents as e}from"../../common/register-components.js";class GridHeader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;align-items:center;width:100%;height:100%}button{display:none;width:24px;opacity:0;transition:opacity .1s;margin-left:5px;padding:0;border:0;cursor:pointer;border-radius:5px;background:var(--input-disabled,#f2f3f4);--icon-color:black}button:active{opacity:.5;transform:translateY(1px)}button:focus{opacity:1}:host(:hover) button{opacity:1}.swap{cursor:grab}.swap:active{cursor:grabbing}:host([reorderable]) .swap,:host([sortable]) .sort{display:flex}:host([sortstate=asc]) .sort{transform:rotate(180deg)}:host([sortstate]) .sort{opacity:1;background:#f2f3f4}</style><slot></slot><button type="button" class="sort"><zoo-arrow-icon title="sort icon"></zoo-arrow-icon></button> <button type="button" class="swap"><svg viewBox="0 0 24 24" width="24" height="24"><title>swap icon</title><path d="M7 11l-4 4 4 4v-3h7v-2H7v-3zm14-2l-4-4v3h-7v2h7v3l4-4z"/></svg></button>',e(t),this.addEventListener("dragend",(()=>this.removeAttribute("draggable"))),this.shadowRoot.querySelector(".swap").addEventListener("mousedown",(()=>this.setAttribute("draggable",!0))),this.shadowRoot.querySelector(".sort").addEventListener("click",(()=>this.handleSortClick()))}static get observedAttributes(){return["sort-title","swap-title"]}handleSortClick(){this.hasAttribute("sortstate")?"desc"==this.getAttribute("sortstate")?this.setAttribute("sortstate","asc"):"asc"==this.getAttribute("sortstate")&&this.removeAttribute("sortstate"):this.setAttribute("sortstate","desc");const t=this.hasAttribute("sortstate")?{property:this.getAttribute("sortableproperty"),direction:this.getAttribute("sortstate")}:void 0;this.dispatchEvent(new CustomEvent("sortChange",{detail:t,bubbles:!0,composed:!0}))}attributeChangedCallback(t,e,o){"sort-title"===t?this.shadowRoot.querySelector("zoo-arrow-icon").setAttribute("title",o):"swap-title"===t&&(this.shadowRoot.querySelector(".swap title").textContent=o,this.shadowRoot.querySelector(".swap").setAttribute("title",o))}}window.customElements.get("zoo-grid-header")||window.customElements.define("zoo-grid-header",GridHeader);export{GridHeader};
+import{ArrowDownIcon as t}from"../../icon/arrow-icon/arrow-icon.js";import{registerComponents as e}from"../../common/register-components.js";class GridHeader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;align-items:center;width:100%;height:100%}button{display:none;width:24px;opacity:0;transition:opacity .1s;margin-left:5px;padding:0;border:0;cursor:pointer;border-radius:5px;background:var(--input-disabled,#f2f3f4);--icon-color:black}button:active{opacity:.5;transform:translateY(1px)}button:focus{opacity:1}:host(:hover) button{opacity:1}.swap{cursor:grab}.swap:active{cursor:grabbing}:host([reorderable]) .swap,:host([sortable]) .sort{display:flex}:host([sortstate=asc]) .sort{transform:rotate(180deg)}:host([sortstate]) .sort{opacity:1;background:#f2f3f4}</style><slot></slot><button type="button" class="sort"><zoo-arrow-icon title="sort icon"></zoo-arrow-icon></button> <button type="button" class="swap"><svg viewBox="0 0 24 24" width="24" height="24"><title>swap icon</title><path d="M7 11l-4 4 4 4v-3h7v-2H7v-3zm14-2l-4-4v3h-7v2h7v3l4-4z"/></svg></button>',e(t),this.addEventListener("dragend",()=>this.removeAttribute("draggable")),this.shadowRoot.querySelector(".swap").addEventListener("mousedown",()=>this.setAttribute("draggable",!0)),this.shadowRoot.querySelector(".sort").addEventListener("click",()=>this.handleSortClick())}static get observedAttributes(){return["sort-title","swap-title"]}handleSortClick(){this.hasAttribute("sortstate")?"desc"==this.getAttribute("sortstate")?this.setAttribute("sortstate","asc"):"asc"==this.getAttribute("sortstate")&&this.removeAttribute("sortstate"):this.setAttribute("sortstate","desc");const t=this.hasAttribute("sortstate")?{property:this.getAttribute("sortableproperty"),direction:this.getAttribute("sortstate")}:void 0;this.dispatchEvent(new CustomEvent("sortChange",{detail:t,bubbles:!0,composed:!0}))}attributeChangedCallback(t,e,o){"sort-title"===t?this.shadowRoot.querySelector("zoo-arrow-icon").setAttribute("title",o):"swap-title"===t&&(this.shadowRoot.querySelector(".swap title").textContent=o,this.shadowRoot.querySelector(".swap").setAttribute("title",o))}}window.customElements.get("zoo-grid-header")||window.customElements.define("zoo-grid-header",GridHeader);export{GridHeader};
 //# sourceMappingURL=grid-header.js.map

package/dist/esm/zoo-modules/grid/grid-row/grid-row.js

@@ -1,2 +1,2 @@
-class GridRow extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout;position:relative;flex-wrap:wrap;--grid-column-sizes:1fr}::slotted([slot=row-details]){display:var(--zoo-grid-row-display,grid);grid-template-columns:var(--grid-details-column-sizes,repeat(var(--grid-column-num),minmax(50px,1fr)));min-height:50px;align-items:center;flex:1 0 100%}::slotted([slot=row-content]){height:0;overflow:hidden;background-color:#fff;padding:0 10px;width:100%}::slotted([slot=row-content][expanded]){height:var(--grid-row-content-height,auto);border-bottom:2px solid;padding:10px;margin:4px}</style><slot name="row-details"></slot><slot name="row-content"></slot>'}}window.customElements.get("zoo-grid-row")||window.customElements.define("zoo-grid-row",GridRow);export{GridRow};
+class GridRow extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout;position:relative;flex-wrap:wrap;--grid-column-sizes:1fr}::slotted([slot=row-details]){display:var(--zoo-grid-row-display,grid);grid-template-columns:var(--grid-details-column-sizes,repeat(var(--grid-column-num),minmax(50px,1fr)));min-height:50px;align-items:center;flex:1 0 100%}::slotted([slot=row-content]){height:0;overflow:hidden;background-color:#fff;padding:0 10px;width:100%}::slotted([slot=row-content][expanded]){height:var(--grid-row-content-height,auto);border-bottom:2px solid rgb(0 0 0 / 20%);padding:10px;margin:4px}</style><slot name="row-details"></slot><slot name="row-content"></slot>'}}window.customElements.get("zoo-grid-row")||window.customElements.define("zoo-grid-row",GridRow);export{GridRow};
 //# sourceMappingURL=grid-row.js.map

package/dist/esm/zoo-modules/helpers/debounce.js

@@ -1,2 +1,2 @@
-function t(t,e){let i;return function(){clearTimeout(i),i=setTimeout((()=>{i=null,t.apply(this,arguments)}),e),i||t.apply(this,arguments)}}export{t as debounce};
+function t(t,e){let i;return function(){clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,arguments)},e),i||t.apply(this,arguments)}}export{t as debounce};
 //# sourceMappingURL=debounce.js.map

package/dist/esm/zoo-modules/icon/paw-icon/paw-icon.js

@@ -1,2 +1,2 @@
-class PawIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--icon-width,44px);height:var(--icon-height,44px);fill:var(--icon-color,white)}.fade-in{opacity:0;animation:2.2s ease-in-out infinite toes-fade-in-animation}.fade-in-two{animation-delay:.4s}.fade-in-three{animation-delay:.7s}.fade-in-four{animation-delay:1s}@keyframes toes-fade-in-animation{0%,100%{opacity:0}50%{opacity:1}}</style><svg viewBox="0 -2 55 75"><title>Loading paw icon</title><path d="M30.7 53.3c-.8 3.7-1.4 5.6-2.6 7-2.5 2.4-5.6 1.8-8.1-.7a8.9 8.9 0 01-2.7-4.6s0-2.2-3-4.8c-2.6-3-4.8-3-4.8-3-2.7-.9-3.4-1.6-4.5-2.7-2.5-2.5-3.2-5.5-.7-8 1.3-1.3 3.2-1.8 7-2.7 0 0 7.2-1.8 11.8-1.5a10 10 0 015.7 2.6l.8.8s2.6 2.6 2.7 5.8c0 4.5-1.6 11.8-1.6 11.8z"/><path class="fade-in" d="M14.5 28.8c2.8 1 6.4-1.7 8-6s.6-8.9-2.2-10-6.4 1.8-8 6.1c-1.6 4.4-.7 8.8 2.2 9.9z"/><path class="fade-in fade-in-two" d="M26.1 26.2c2.7 2.6 8 1.4 12.2-2.7s5.2-9.5 2.6-12.1-8-1.4-12.1 2.6-5.3 9.6-2.7 12.2z"/><path class="fade-in fade-in-three" d="M37.2 37.2c2.6 2.6 8 1.4 12-2.7s5.3-9.5 2.7-12S44 21 39.8 25c-4 4-5.3 9.5-2.6 12z"/><path class="fade-in fade-in-four" d="M50.4 43c-1-2.8-5.4-3.8-9.8-2.2s-7 5.3-6 8c1 2.9 5.4 3.9 9.8 2.2s7-5.2 6-8z"/></svg>'}static get observedAttributes(){return["title"]}attributeChangedCallback(t,e,a){this.shadowRoot.querySelector("svg title").textContent=a}}window.customElements.get("zoo-paw-icon")||window.customElements.define("zoo-paw-icon",PawIcon);export{PawIcon};
+class PawIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--icon-width,44px);height:var(--icon-height,44px);fill:var(--icon-color,white)}.fade-in{opacity:0;animation:toes-fade-in-animation 2.2s infinite ease-in-out}.fade-in-two{animation-delay:.4s}.fade-in-three{animation-delay:.7s}.fade-in-four{animation-delay:1s}@keyframes toes-fade-in-animation{0%{opacity:0}50%{opacity:1}100%{opacity:0}}</style><svg viewBox="0 -2 55 75"><title>Loading paw icon</title><path d="M30.7 53.3c-.8 3.7-1.4 5.6-2.6 7-2.5 2.4-5.6 1.8-8.1-.7a8.9 8.9 0 01-2.7-4.6s0-2.2-3-4.8c-2.6-3-4.8-3-4.8-3-2.7-.9-3.4-1.6-4.5-2.7-2.5-2.5-3.2-5.5-.7-8 1.3-1.3 3.2-1.8 7-2.7 0 0 7.2-1.8 11.8-1.5a10 10 0 015.7 2.6l.8.8s2.6 2.6 2.7 5.8c0 4.5-1.6 11.8-1.6 11.8z"/><path class="fade-in" d="M14.5 28.8c2.8 1 6.4-1.7 8-6s.6-8.9-2.2-10-6.4 1.8-8 6.1c-1.6 4.4-.7 8.8 2.2 9.9z"/><path class="fade-in fade-in-two" d="M26.1 26.2c2.7 2.6 8 1.4 12.2-2.7s5.2-9.5 2.6-12.1-8-1.4-12.1 2.6-5.3 9.6-2.7 12.2z"/><path class="fade-in fade-in-three" d="M37.2 37.2c2.6 2.6 8 1.4 12-2.7s5.3-9.5 2.7-12S44 21 39.8 25c-4 4-5.3 9.5-2.6 12z"/><path class="fade-in fade-in-four" d="M50.4 43c-1-2.8-5.4-3.8-9.8-2.2s-7 5.3-6 8c1 2.9 5.4 3.9 9.8 2.2s7-5.2 6-8z"/></svg>'}static get observedAttributes(){return["title"]}attributeChangedCallback(t,a,e){this.shadowRoot.querySelector("svg title").textContent=e}}window.customElements.get("zoo-paw-icon")||window.customElements.define("zoo-paw-icon",PawIcon);export{PawIcon};
 //# sourceMappingURL=paw-icon.js.map

package/dist/esm/zoo-modules/misc/button-group/button-group.js

@@ -1,2 +1,2 @@
-import{debounce as t}from"../../helpers/debounce.js";import{Button as e}from"../button/button.js";import{registerComponents as n}from"../../common/register-components.js";class ButtonGroup extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;opacity:0;border:1px solid #b8b8b8;border-radius:5px;padding:2px 0;justify-content:flex-end;width:fit-content}::slotted(zoo-button){min-width:50px;padding:0 2px}</style><slot></slot>",n(e)}connectedCallback(){const t=this.shadowRoot.querySelector("slot");this.registerSlotChangeListener(t),this.registerButtonChangeHandler(t)}registerSlotChangeListener(e){e.addEventListener("slotchange",t((()=>{e.assignedElements().forEach(((t,e)=>{this.handleButtonInitialState(t,e)})),this.style.opacity="1"})))}registerButtonChangeHandler(t){this.addEventListener("click",(e=>{const n=t.assignedElements().indexOf(e.target.parentNode);n>-1&&this.activeIndex!==n&&(this.deactivateButton(t.assignedElements()[this.activeIndex]),this.activateButton(e.target.parentNode,n))}))}handleButtonInitialState(t,e){t.hasAttribute("data-active")?this.activateButton(t,e):this.deactivateButton(t)}activateButton(t,e){const n=this.getAttribute("active-type");t.setAttribute("type",n),this.activeIndex=e}deactivateButton(t){const e=this.getAttribute("inactive-type");t.setAttribute("type",e)}}window.customElements.get("zoo-button-group")||window.customElements.define("zoo-button-group",ButtonGroup);export{ButtonGroup};
+import{debounce as t}from"../../helpers/debounce.js";import{Button as e}from"../button/button.js";import{registerComponents as n}from"../../common/register-components.js";class ButtonGroup extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;opacity:0;border:1px solid #b8b8b8;border-radius:5px;padding:2px 0;justify-content:flex-end;width:fit-content}::slotted(zoo-button){min-width:50px;padding:0 2px}</style><slot></slot>",n(e)}connectedCallback(){const t=this.shadowRoot.querySelector("slot");this.registerSlotChangeListener(t),this.registerButtonChangeHandler(t)}registerSlotChangeListener(e){e.addEventListener("slotchange",t(()=>{e.assignedElements().forEach((t,e)=>{this.handleButtonInitialState(t,e)}),this.style.opacity="1"}))}registerButtonChangeHandler(t){this.addEventListener("click",e=>{const n=t.assignedElements().indexOf(e.target.parentNode);n>-1&&this.activeIndex!==n&&(this.deactivateButton(t.assignedElements()[this.activeIndex]),this.activateButton(e.target.parentNode,n))})}handleButtonInitialState(t,e){t.hasAttribute("data-active")?this.activateButton(t,e):this.deactivateButton(t)}activateButton(t,e){const n=this.getAttribute("active-type");t.setAttribute("type",n),this.activeIndex=e}deactivateButton(t){const e=this.getAttribute("inactive-type");t.setAttribute("type",e)}}window.customElements.get("zoo-button-group")||window.customElements.define("zoo-button-group",ButtonGroup);export{ButtonGroup};
 //# sourceMappingURL=button-group.js.map

package/dist/esm/zoo-modules/misc/collapsable-list/collapsable-list.js

@@ -1,2 +1,2 @@
-import{CollapsableListItem as e}from"../collapsable-list-item/collapsable-list-item.js";import{registerComponents as t}from"../../common/register-components.js";class CollapsableList extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;flex-direction:column}</style><slot></slot>",t(e);const s=this.shadowRoot.querySelector("slot");s.addEventListener("slotchange",(()=>{const e=s.assignedElements();e.forEach((t=>t.addEventListener("toggle",(s=>{s.detail&&!this.hasAttribute("disable-autoclose")&&e.forEach((e=>!e.isEqualNode(t)&&e.close()))})))),e.forEach((e=>{e.hasAttribute("opened-by-default")&&(e.details.open=!0)}))}))}}window.customElements.get("zoo-collapsable-list")||window.customElements.define("zoo-collapsable-list",CollapsableList);export{CollapsableList};
+import{CollapsableListItem as e}from"../collapsable-list-item/collapsable-list-item.js";import{registerComponents as t}from"../../common/register-components.js";class CollapsableList extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;flex-direction:column}</style><slot></slot>",t(e);const s=this.shadowRoot.querySelector("slot");s.addEventListener("slotchange",()=>{const e=s.assignedElements();e.forEach(t=>t.addEventListener("toggle",s=>{s.detail&&!this.hasAttribute("disable-autoclose")&&e.forEach(e=>!e.isEqualNode(t)&&e.close())})),e.forEach(e=>{e.hasAttribute("opened-by-default")&&(e.details.open=!0)})})}}window.customElements.get("zoo-collapsable-list")||window.customElements.define("zoo-collapsable-list",CollapsableList);export{CollapsableList};
 //# sourceMappingURL=collapsable-list.js.map

package/dist/esm/zoo-modules/misc/collapsable-list-item/collapsable-list-item.js

@@ -1,2 +1,2 @@
-class CollapsableListItem extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{padding:0 10px;display:flex;flex-direction:column}:host([border-visible]){margin:8px 0}details{padding:10px}:host([border-visible]) details{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}details[open]{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}summary{cursor:pointer;color:var(--primary-mid);font-weight:700}</style><details><summary><slot name="header"></slot></summary><slot name="content"></slot></details>',this.details=this.shadowRoot.querySelector("details"),this.details.addEventListener("toggle",(e=>{this.shadowRoot.host.dispatchEvent(new CustomEvent("toggle",{detail:e.target.open,composed:!0}))}))}close(){this.details.open=!1}}window.customElements.get("zoo-collapsable-list-item")||window.customElements.define("zoo-collapsable-list-item",CollapsableListItem);export{CollapsableListItem};
+class CollapsableListItem extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{padding:0 10px;display:flex;flex-direction:column}:host([border-visible]){margin:8px 0}details{padding:10px}:host([border-visible]) details{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}details[open]{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}summary{cursor:pointer;color:var(--primary-mid);font-weight:700}</style><details><summary><slot name="header"></slot></summary><slot name="content"></slot></details>',this.details=this.shadowRoot.querySelector("details"),this.details.addEventListener("toggle",e=>{this.shadowRoot.host.dispatchEvent(new CustomEvent("toggle",{detail:e.target.open,composed:!0}))})}close(){this.details.open=!1}}window.customElements.get("zoo-collapsable-list-item")||window.customElements.define("zoo-collapsable-list-item",CollapsableListItem);export{CollapsableListItem};
 //# sourceMappingURL=collapsable-list-item.js.map

package/dist/esm/zoo-modules/misc/modal/modal.js

@@ -1,2 +1,2 @@
-import{CrossIcon as t}from"../../icon/cross-icon/cross-icon.js";import{registerComponents as o}from"../../common/register-components.js";class Modal extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;contain:style}.box{position:fixed;width:100%;height:100%;background:rgb(0 0 0 / var(--zoo-modal-opacity,.8));opacity:0;transition:opacity .3s;z-index:var(--zoo-modal-z-index,9999);left:0;top:0;display:flex;justify-content:center;align-items:center;will-change:opacity;transform:translateZ(0)}.dialog-content{padding:0 20px 20px;box-sizing:border-box;background:#fff;overflow-y:auto;max-height:95%;border-radius:5px;animation-name:anim-show;animation-duration:.3s;animation-fill-mode:forwards}@media only screen and (width <= 544px){.dialog-content{padding:25px}}@media only screen and (width <= 375px){.dialog-content{width:100%;height:100%;top:0;left:0;transform:none}}.heading{display:flex;align-items:flex-start}::slotted([slot=header]){font-size:24px;line-height:29px;font-weight:700;margin:30px 0}.close{cursor:pointer;background:0 0;border:0;padding:0;margin:30px 0 30px auto;--icon-color:var(--primary-mid)}.show{opacity:1}.hide .dialog-content{animation-name:anim-hide}@keyframes anim-show{0%{opacity:0;transform:scale3d(.9,.9,1)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes anim-hide{0%{opacity:1}100%{opacity:0;transform:scale3d(.9,.9,1)}}</style><div class="box"><div class="dialog-content"><div class="heading"><slot name="header"></slot><button type="button" class="close"><zoo-cross-icon></zoo-cross-icon></button></div><div class="content"><slot></slot></div></div></div>',o(t),this.shadowRoot.querySelector(".close").addEventListener("click",(()=>this.closeModal()));const e=this.shadowRoot.querySelector(".box");this.closeModalOnClickHandler=t=>{t.target==e&&this.closeModal()},e.addEventListener("click",this.closeModalOnClickHandler),this.focusableSelectors=['a[href]:not([tabindex^="-"]):not([inert])','area[href]:not([tabindex^="-"]):not([inert])',"input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])",'iframe:not([tabindex^="-"]):not([inert])','audio[controls]:not([tabindex^="-"]):not([inert])','video[controls]:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'],this.keyUpEventHandler=t=>{"Escape"===t.key&&this.closeModal(),"Tab"===t.key&&this.maintainFocus(t.shiftKey)}}connectedCallback(){this.hidden=!0}static get observedAttributes(){return["closelabel","button-closeable"]}attributeChangedCallback(t,o,e){if("button-closeable"===t)if(this.hasAttribute("button-closeable")){this.shadowRoot.querySelector(".box").removeEventListener("click",this.closeModalOnClickHandler)}else this.shadowRoot.querySelector(".box").addEventListener("click",this.closeModalOnClickHandler);else"closelabel"===t&&this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",e)}openModal(){this.style.display="block",this.toggleModalClass(),this.shadowRoot.querySelector("button").focus(),document.addEventListener("keyup",this.keyUpEventHandler)}maintainFocus(t){const o=this.shadowRoot.querySelector("button"),e=[...this.querySelectorAll(this.focusableSelectors.join(","))],i=!e.some((t=>t.isEqualNode(document.activeElement))),s=!o.isEqualNode(this.shadowRoot.activeElement);i&&s&&(t?e[e.length-1].focus():o.focus())}closeModal(){this.timeoutVar||(this.hidden=!this.hidden,this.toggleModalClass(),this.timeoutVar=setTimeout((()=>{this.style.display="none",this.dispatchEvent(new Event("modalClosed")),this.hidden=!this.hidden,this.timeoutVar=void 0}),300))}toggleModalClass(){const t=this.shadowRoot.querySelector(".box");this.hidden?(t.classList.add("show"),t.classList.remove("hide")):(t.classList.add("hide"),t.classList.remove("show"))}}window.customElements.get("zoo-modal")||window.customElements.define("zoo-modal",Modal);export{Modal};
+import{CrossIcon as t}from"../../icon/cross-icon/cross-icon.js";import{registerComponents as o}from"../../common/register-components.js";class Modal extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;contain:style}.box{position:fixed;width:100%;height:100%;background:rgb(0 0 0 / var(--zoo-modal-opacity,.8));opacity:0;transition:opacity .3s;z-index:var(--zoo-modal-z-index,9999);left:0;top:0;display:flex;justify-content:center;align-items:center;will-change:opacity;transform:translateZ(0)}.dialog-content{padding:0 20px 20px;box-sizing:border-box;background:#fff;overflow-y:auto;max-height:95%;border-radius:5px;animation-name:anim-show;animation-duration:.3s;animation-fill-mode:forwards}@media only screen and (width <= 544px){.dialog-content{padding:25px}}@media only screen and (width <= 375px){.dialog-content{width:100%;height:100%;top:0;left:0;transform:none}}.heading{display:flex;align-items:flex-start}::slotted([slot=header]){font-size:24px;line-height:29px;font-weight:700;margin:30px 0}.close{cursor:pointer;background:0 0;border:0;padding:0;margin:30px 0 30px auto;--icon-color:var(--primary-mid)}.show{opacity:1}.hide .dialog-content{animation-name:anim-hide}@keyframes anim-show{0%{opacity:0;transform:scale3d(.9,.9,1)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes anim-hide{0%{opacity:1}100%{opacity:0;transform:scale3d(.9,.9,1)}}</style><div class="box"><div class="dialog-content"><div class="heading"><slot name="header"></slot><button type="button" class="close"><zoo-cross-icon></zoo-cross-icon></button></div><div class="content"><slot></slot></div></div></div>',o(t),this.shadowRoot.querySelector(".close").addEventListener("click",()=>this.closeModal());const e=this.shadowRoot.querySelector(".box");this.closeModalOnClickHandler=t=>{t.target==e&&this.closeModal()},e.addEventListener("click",this.closeModalOnClickHandler),this.focusableSelectors=['a[href]:not([tabindex^="-"]):not([inert])','area[href]:not([tabindex^="-"]):not([inert])',"input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])",'iframe:not([tabindex^="-"]):not([inert])','audio[controls]:not([tabindex^="-"]):not([inert])','video[controls]:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'],this.keyUpEventHandler=t=>{"Escape"===t.key&&this.closeModal(),"Tab"===t.key&&this.maintainFocus(t.shiftKey)}}connectedCallback(){this.hidden=!0}static get observedAttributes(){return["closelabel","button-closeable"]}attributeChangedCallback(t,o,e){if("button-closeable"===t)if(this.hasAttribute("button-closeable")){this.shadowRoot.querySelector(".box").removeEventListener("click",this.closeModalOnClickHandler)}else this.shadowRoot.querySelector(".box").addEventListener("click",this.closeModalOnClickHandler);else"closelabel"===t&&this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",e)}openModal(){this.style.display="block",this.toggleModalClass(),this.shadowRoot.querySelector("button").focus(),document.addEventListener("keyup",this.keyUpEventHandler)}maintainFocus(t){const o=this.shadowRoot.querySelector("button"),e=[...this.querySelectorAll(this.focusableSelectors.join(","))],i=!e.some(t=>t.isEqualNode(document.activeElement)),s=!o.isEqualNode(this.shadowRoot.activeElement);i&&s&&(t?e[e.length-1].focus():o.focus())}closeModal(){this.timeoutVar||(this.hidden=!this.hidden,this.toggleModalClass(),this.timeoutVar=setTimeout(()=>{this.style.display="none",this.dispatchEvent(new Event("modalClosed")),this.hidden=!this.hidden,this.timeoutVar=void 0},300))}toggleModalClass(){const t=this.shadowRoot.querySelector(".box");this.hidden?(t.classList.add("show"),t.classList.remove("hide")):(t.classList.add("hide"),t.classList.remove("show"))}}window.customElements.get("zoo-modal")||window.customElements.define("zoo-modal",Modal);export{Modal};
 //# sourceMappingURL=modal.js.map

package/dist/esm/zoo-modules/misc/paginator/paginator.js

@@ -1,2 +1,2 @@
-import{ArrowDownIcon as t}from"../../icon/arrow-icon/arrow-icon.js";import{registerComponents as e}from"../../common/register-components.js";class Paginator extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.box,button,nav{display:flex}:host{min-width:inherit;display:none}.box{align-items:center;font-size:14px;width:max-content;position:var(--paginator-position, \'initial\');right:var(--right, \'unset\')}:host([currentpage]){display:flex}nav{align-items:center;border:1px solid #e6e6e6;border-radius:5px;padding:15px}button{cursor:pointer;opacity:1;transition:opacity .1s;background:0 0;border:0;padding:0;font-size:inherit;border-radius:5px;margin:0 2px}button:active{opacity:.5}button:focus,button:hover{background:#f2f3f4}button.hidden{display:none}.page-element{padding:4px 8px}.page-element.active{background:var(--primary-ultralight);color:var(--primary-dark)}zoo-arrow-icon{pointer-events:none}.prev zoo-arrow-icon{transform:rotate(90deg)}.next zoo-arrow-icon{transform:rotate(-90deg)}</style><div class="box"><slot name="pagesizeselector"></slot><nav><button type="button" class="prev"><zoo-arrow-icon title="prev page"></zoo-arrow-icon></button> <button type="button" class="next"><zoo-arrow-icon title="next page"></zoo-arrow-icon></button></nav></div><template id="dots"><div class="page-element-dots">...</div></template><template id="pages"><button type="button" class="page-element"></button></template>',e(t),this.prev=this.shadowRoot.querySelector(".prev"),this.next=this.shadowRoot.querySelector(".next"),this.dots=this.shadowRoot.querySelector("#dots").content,this.pages=this.shadowRoot.querySelector("#pages").content,this.shadowRoot.addEventListener("click",(t=>{const e=t.target.getAttribute("page");e?this.goToPage(e):t.target.classList.contains("prev")?this.goToPage(+this.getAttribute("currentpage")-1):t.target.classList.contains("next")&&this.goToPage(+this.getAttribute("currentpage")+1)}))}goToPage(t){this.setAttribute("currentpage",t),this.dispatchEvent(new CustomEvent("pageChange",{detail:{pageNumber:t},bubbles:!0,composed:!0}))}static get observedAttributes(){return["maxpages","currentpage","prev-page-title","next-page-title"]}handleHideShowArrows(){1==this.getAttribute("currentpage")?this.prev.classList.add("hidden"):this.prev.classList.remove("hidden"),+this.getAttribute("currentpage")>=+this.getAttribute("maxpages")?this.next.classList.add("hidden"):this.next.classList.remove("hidden")}rerenderPageButtons(){this.shadowRoot.querySelectorAll('*[class^="page-element"]').forEach((t=>t.remove()));const t=+this.getAttribute("currentpage"),e=this.getAttribute("maxpages");for(let o=e;o>0;o--)if(1==o||o==t-1||o==t||o==t+1||o==e){const e=this.pages.cloneNode(!0).firstElementChild;e.setAttribute("page",o),e.setAttribute("title",o),t==o&&e.classList.add("active"),e.textContent=o,this.prev.after(e)}else o!=t-2&&t+2!=o||this.prev.after(this.dots.cloneNode(!0))}attributeChangedCallback(t,e,o){"currentpage"==t||"maxpages"==t?(this.handleHideShowArrows(),this.rerenderPageButtons()):"prev-page-title"===t?this.shadowRoot.querySelector(".prev zoo-arrow-icon").setAttribute("title",o):"next-page-title"===t&&this.shadowRoot.querySelector(".next zoo-arrow-icon").setAttribute("title",o)}}window.customElements.get("zoo-paginator")||window.customElements.define("zoo-paginator",Paginator);export{Paginator};
+import{ArrowDownIcon as t}from"../../icon/arrow-icon/arrow-icon.js";import{registerComponents as e}from"../../common/register-components.js";class Paginator extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{min-width:inherit;display:none}.box{display:flex;align-items:center;font-size:14px;width:max-content;position:var(--paginator-position, \'initial\');right:var(--right, \'unset\')}:host([currentpage]){display:flex}nav{display:flex;align-items:center;border:1px solid #e6e6e6;border-radius:5px;padding:15px}button{display:flex;cursor:pointer;opacity:1;transition:opacity .1s;background:0 0;border:0;padding:0;font-size:inherit;border-radius:5px;margin:0 2px}button:active{opacity:.5}button:focus,button:hover{background:#f2f3f4}button.hidden{display:none}.page-element{padding:4px 8px}.page-element.active{background:var(--primary-ultralight);color:var(--primary-dark)}zoo-arrow-icon{pointer-events:none}.prev zoo-arrow-icon{transform:rotate(90deg)}.next zoo-arrow-icon{transform:rotate(-90deg)}</style><div class="box"><slot name="pagesizeselector"></slot><nav><button type="button" class="prev"><zoo-arrow-icon title="prev page"></zoo-arrow-icon></button> <button type="button" class="next"><zoo-arrow-icon title="next page"></zoo-arrow-icon></button></nav></div><template id="dots"><div class="page-element-dots">...</div></template><template id="pages"><button type="button" class="page-element"></button></template>',e(t),this.prev=this.shadowRoot.querySelector(".prev"),this.next=this.shadowRoot.querySelector(".next"),this.dots=this.shadowRoot.querySelector("#dots").content,this.pages=this.shadowRoot.querySelector("#pages").content,this.shadowRoot.addEventListener("click",t=>{const e=t.target.getAttribute("page");e?this.goToPage(e):t.target.classList.contains("prev")?this.goToPage(+this.getAttribute("currentpage")-1):t.target.classList.contains("next")&&this.goToPage(+this.getAttribute("currentpage")+1)})}goToPage(t){this.setAttribute("currentpage",t),this.dispatchEvent(new CustomEvent("pageChange",{detail:{pageNumber:t},bubbles:!0,composed:!0}))}static get observedAttributes(){return["maxpages","currentpage","prev-page-title","next-page-title"]}handleHideShowArrows(){1==this.getAttribute("currentpage")?this.prev.classList.add("hidden"):this.prev.classList.remove("hidden"),+this.getAttribute("currentpage")>=+this.getAttribute("maxpages")?this.next.classList.add("hidden"):this.next.classList.remove("hidden")}rerenderPageButtons(){this.shadowRoot.querySelectorAll('*[class^="page-element"]').forEach(t=>t.remove());const t=+this.getAttribute("currentpage"),e=this.getAttribute("maxpages");for(let o=e;o>0;o--)if(1==o||o==t-1||o==t||o==t+1||o==e){const e=this.pages.cloneNode(!0).firstElementChild;e.setAttribute("page",o),e.setAttribute("title",o),t==o&&e.classList.add("active"),e.textContent=o,this.prev.after(e)}else o!=t-2&&t+2!=o||this.prev.after(this.dots.cloneNode(!0))}attributeChangedCallback(t,e,o){"currentpage"==t||"maxpages"==t?(this.handleHideShowArrows(),this.rerenderPageButtons()):"prev-page-title"===t?this.shadowRoot.querySelector(".prev zoo-arrow-icon").setAttribute("title",o):"next-page-title"===t&&this.shadowRoot.querySelector(".next zoo-arrow-icon").setAttribute("title",o)}}window.customElements.get("zoo-paginator")||window.customElements.define("zoo-paginator",Paginator);export{Paginator};
 //# sourceMappingURL=paginator.js.map