@zooplus/zoo-web-components 10.3.3 → 10.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/arrow-icon.js +1 -1
- package/dist/attention-icon.js +1 -1
- package/dist/button-group.js +1 -1
- package/dist/button.js +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/cross-icon.js +1 -1
- package/dist/date-range.js +1 -1
- package/dist/debounce.js +1 -1
- package/dist/esm/zoo-modules/form/checkbox/checkbox.js +1 -1
- package/dist/esm/zoo-modules/form/input/input.js +1 -1
- package/dist/esm/zoo-modules/form/input-tag/input-tag-option.js +1 -1
- package/dist/esm/zoo-modules/form/input-tag/input-tag.js +1 -1
- package/dist/esm/zoo-modules/form/quantity-control/quantity-control.js +1 -1
- package/dist/esm/zoo-modules/form/radio/radio.js +1 -1
- package/dist/esm/zoo-modules/form/select/select.js +1 -1
- package/dist/esm/zoo-modules/form/toggle-switch/toggle-switch.js +1 -1
- package/dist/esm/zoo-modules/grid/grid/grid.js +1 -1
- package/dist/esm/zoo-modules/grid/grid-header/grid-header.js +1 -1
- package/dist/esm/zoo-modules/grid/grid-row/grid-row.js +1 -1
- package/dist/esm/zoo-modules/helpers/debounce.js +1 -1
- package/dist/esm/zoo-modules/icon/arrow-icon/arrow-icon.js +1 -1
- package/dist/esm/zoo-modules/icon/attention-icon/attention-icon.js +1 -1
- package/dist/esm/zoo-modules/icon/cross-icon/cross-icon.js +1 -1
- package/dist/esm/zoo-modules/icon/paw-icon/paw-icon.js +1 -1
- package/dist/esm/zoo-modules/misc/button/button.js +1 -1
- package/dist/esm/zoo-modules/misc/modal/modal.js +1 -1
- package/dist/esm/zoo-modules/misc/navigation/navigation.js +1 -1
- package/dist/esm/zoo-modules/misc/spinner/spinner.js +1 -1
- package/dist/esm/zoo-modules/misc/tag/tag.js +1 -1
- package/dist/esm/zoo-modules/misc/toast/toast.js +1 -1
- package/dist/esm/zoo-modules/misc/tooltip/tooltip.js +1 -1
- package/dist/feedback.js +1 -1
- package/dist/grid-header.js +1 -1
- package/dist/grid-row.js +1 -1
- package/dist/grid.js +1 -1
- package/dist/info.js +1 -1
- package/dist/input-tag-option.js +1 -1
- package/dist/input-tag.js +1 -1
- package/dist/input.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/navigation.js +1 -1
- package/dist/paginator.js +1 -1
- package/dist/paw-icon.js +1 -1
- package/dist/quantity-control.js +1 -1
- package/dist/radio.js +1 -1
- package/dist/searchable-select.js +1 -1
- package/dist/select.js +1 -1
- package/dist/spinner.js +1 -1
- package/dist/tag.js +1 -1
- package/dist/toast.js +1 -1
- package/dist/toggle-switch.js +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/zoo-web-components.js +1 -1
- package/package.json +8 -7
package/dist/arrow-icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t){class ArrowDownIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--width,24px);height:var(--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,e
|
|
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})}({});
|
package/dist/attention-icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t){class AttentionIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;padding-right:5px;width:var(--width,18px);height:var(--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})}({});
|
|
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})}({});
|
package/dist/button-group.js
CHANGED
|
@@ -1 +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
|
|
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})}({});
|
package/dist/button.js
CHANGED
|
@@ -1 +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
|
|
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})}({});
|
package/dist/checkbox.js
CHANGED
|
@@ -1 +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(--width,18px);height:var(--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
|
|
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})}({});
|
package/dist/cross-icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t){class CrossIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--width,
|
|
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})}({});
|
package/dist/date-range.js
CHANGED
|
@@ -1 +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(--width,18px);height:var(--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
|
|
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})}({});
|
package/dist/debounce.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e;(e={}).debounce=function(e,t){let
|
|
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});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=input.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class InputTagOption extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;flex-direction:column;cursor:pointer;padding:5px;overflow:auto;font-size:12px;gap:3px}
|
|
1
|
+
class InputTagOption extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;flex-direction:column;cursor:pointer;padding:5px;overflow:auto;font-size:12px;gap:3px}</style><slot name="tag"></slot><slot name="description"></slot>'}}window.customElements.get("zoo-input-tag-option")||window.customElements.define("zoo-input-tag-option",InputTagOption);export{InputTagOption};
|
|
2
2
|
//# sourceMappingURL=input-tag-option.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{registerComponents as t}from"../../common/register-components.js";import{InputTagOption as e}from"./input-tag-option.js";import{FormElement as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=input-tag.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=quantity-control.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{registerComponents as o}from"../../common/register-components.js";import{FormElement as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=radio.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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){
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=select.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=toggle-switch.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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:9998;justify-content:center;height:100%;background:
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=grid.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=grid-header.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=grid-row.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function t(t,e){let
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=debounce.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class ArrowDownIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--width,24px);height:var(--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);export{ArrowDownIcon};
|
|
1
|
+
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);export{ArrowDownIcon};
|
|
2
2
|
//# sourceMappingURL=arrow-icon.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class AttentionIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;padding-right:5px;width:var(--width,18px);height:var(--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);export{AttentionIcon};
|
|
1
|
+
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);export{AttentionIcon};
|
|
2
2
|
//# sourceMappingURL=attention-icon.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class CrossIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--width,
|
|
1
|
+
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);export{CrossIcon};
|
|
2
2
|
//# sourceMappingURL=cross-icon.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class PawIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--width,44px);height:var(--height,44px);fill:var(--icon-color,white)}.fade-in{opacity:0;animation:2.2s ease-in-out infinite toes-fade-in-animation}.fade-in
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=paw-icon.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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);export{Button};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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:
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class Navigation extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;height:56px}nav{display:flex;width:100%;padding:0 20px;background:linear-gradient(to right,var(--primary-mid),var(--primary-light))}:host([direction=vertical]) nav{flex-direction:column;height:auto;width:max-content;background:0 0;padding:0}::slotted(*){cursor:pointer;display:inline-flex;text-decoration:none;align-items:center;height:100%;color:#fff;padding:0 15px;font-weight:700;font-size:14px;line-height:20px}::slotted(:focus),::slotted(:hover){background:
|
|
1
|
+
class Navigation extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;height:56px}nav{display:flex;width:100%;padding:0 20px;background:linear-gradient(to right,var(--primary-mid),var(--primary-light))}:host([direction=vertical]) nav{flex-direction:column;height:auto;width:max-content;background:0 0;padding:0}::slotted(*){cursor:pointer;display:inline-flex;text-decoration:none;align-items:center;height:100%;color:#fff;padding:0 15px;font-weight:700;font-size:14px;line-height:20px}::slotted(:focus),::slotted(:hover){background:rgb(255 255 255 / 20%)}:host([direction=vertical]) ::slotted(*){padding:10px 5px;color:initial;box-sizing:border-box}:host([direction=vertical]) ::slotted(:focus),:host([direction=vertical]) ::slotted(:hover){background:rgb(0 0 0 / 7%)}</style><nav><slot></slot></nav>"}}window.customElements.get("zoo-navigation")||window.customElements.define("zoo-navigation",Navigation);export{Navigation};
|
|
2
2
|
//# sourceMappingURL=navigation.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class Spinner extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout}svg{position:absolute;
|
|
1
|
+
class Spinner extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout}svg{position:absolute;inset:calc(50% - 60px) 0 0 calc(50% - 60px);height:120px;width:120px;transform-origin:center center;animation:2s linear infinite rotate;z-index:var(--zoo-spinner-z-index,10002)}svg circle{animation:1.5s ease-in-out infinite dash;stroke:var(--primary-mid);stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}</style><svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2.5" stroke-miterlimit="10"/></svg>'}}window.customElements.get("zoo-spinner")||window.customElements.define("zoo-spinner",Spinner);export{Spinner};
|
|
2
2
|
//# sourceMappingURL=spinner.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class Tag extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;box-sizing:border-box;padding:0 10px;align-items:center;width:max-content;color:var(--color);border-color:var(--color);max-width:100px}:host(:hover){background:var(--primary-ultralight);color:var(--primary-dark)}:host([type=info]){min-height:20px;border-radius:10px;border:1px solid}:host([type=cloud]){min-height:46px;border-radius:3px;border:1px solid #d3d3d3}:host([type=tag]){border:1px solid #d3d3d3}::slotted([slot=content]){font-size:12px;
|
|
1
|
+
class Tag extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:flex;box-sizing:border-box;padding:0 10px;align-items:center;width:max-content;color:var(--color);border-color:var(--color);max-width:var(--zoo-tag-max-width,100px);border-radius:3px}:host(:hover){background:var(--primary-ultralight);color:var(--primary-dark)}:host([type=info]){min-height:20px;border-radius:10px;border:1px solid}:host([type=cloud]){min-height:46px;border-radius:3px;border:1px solid #d3d3d3}:host([type=tag]){border:1px solid #d3d3d3}::slotted([slot=content]){font-size:12px;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}::slotted([slot=pre]){margin-right:5px}::slotted([slot=post]){margin-left:5px}</style><slot name="pre"></slot><slot name="content"></slot><slot name="post"></slot>'}}window.customElements.get("zoo-tag")||window.customElements.define("zoo-tag",Tag);export{Tag};
|
|
2
2
|
//# sourceMappingURL=tag.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class Toast extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;top:20px;right:20px;position:fixed;z-index:10001;contain:layout;--color-ultralight:var(--info-ultralight);--color-mid:var(--info-mid);--svg-padding:0}:host([type=error]){--color-ultralight:var(--warning-ultralight);--color-mid:var(--warning-mid)}:host([type=success]){--color-ultralight:var(--primary-ultralight);--color-mid:var(--primary-mid)}div{max-width:330px;min-height:50px;box-shadow:0 5px 5px -3px
|
|
1
|
+
class Toast extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{display:none;top:20px;right:20px;position:fixed;z-index:var(--zoo-toast-z-index,10001);contain:layout;--color-ultralight:var(--info-ultralight);--color-mid:var(--info-mid);--svg-padding:0}:host([type=error]){--color-ultralight:var(--warning-ultralight);--color-mid:var(--warning-mid)}:host([type=success]){--color-ultralight:var(--primary-ultralight);--color-mid:var(--primary-mid)}div{max-width:330px;min-height:50px;box-shadow:0 5px 5px -3px rgb(0 0 0 / 20%),0 8px 10px 1px rgb(0 0 0 / 14%),0 3px 14px 2px rgb(0 0 0 / 12%);border-left:3px solid var(--color-mid);display:flex;align-items:center;word-break:break-word;font-size:14px;line-height:20px;padding:15px;transition:transform .3s,opacity .4s;opacity:0;transform:translate3d(100%,0,0);background:var(--color-ultralight);border-radius:5px}svg{padding-right:10px;min-width:48px;fill:var(--color-mid)}.show{opacity:1;transform:translate3d(0,0,0)}</style><div><svg width="30" height="30" viewBox="0 0 24 24"><path d="M14.2 21c.4.1.6.6.5 1a2.8 2.8 0 01-5.4 0 .7.7 0 111.4-.5 1.3 1.3 0 002.6 0c.1-.4.5-.6 1-.5zM12 0c.4 0 .8.3.8.8v1.5c4.2.4 7.4 3.9 7.4 8.2 0 3 .3 5.1.8 6.5l.4 1v.2c.6.4.3 1.3-.4 1.3H3c-.6 0-1-.7-.6-1.2.1-.2.4-.6.6-1.5.5-1.5.7-3.6.7-6.3 0-4.3 3.3-7.8 7.6-8.2V.8c0-.5.3-.8.7-.8zm0 3.8c-3.7 0-6.7 3-6.8 6.7a24.2 24.2 0 01-1 7.5h15.5l-.2-.5c-.5-1.6-.8-3.8-.8-7 0-3.7-3-6.8-6.7-6.8z"/></svg><slot name="content"></slot></div>'}connectedCallback(){this.hidden=!0,this.timeout=this.getAttribute("timeout")||3,this.setAttribute("role","alert")}show(){this.hidden&&(this.style.display="block",this.timeoutVar=setTimeout((()=>{this.hidden=!this.hidden,this.toggleToastClass(),this.timeoutVar=setTimeout((()=>{this&&!this.hidden&&(this.hidden=!this.hidden,this.timeoutVar=setTimeout((()=>{this.style.display="none"}),300),this.toggleToastClass())}),1e3*this.timeout)}),30))}close(){this.hidden||(clearTimeout(this.timeoutVar),setTimeout((()=>{this&&!this.hidden&&(this.hidden=!this.hidden,setTimeout((()=>{this.style.display="none"}),300),this.toggleToastClass())}),30))}toggleToastClass(){this.shadowRoot.querySelector("div").classList.toggle("show")}}window.customElements.get("zoo-toast")||window.customElements.define("zoo-toast",Toast);export{Toast};
|
|
2
2
|
//# sourceMappingURL=toast.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class Tooltip extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.tip,.tooltip-content{background:#fff;box-shadow:0 4px 15px 0
|
|
1
|
+
class Tooltip extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.tip,.tooltip-content{background:#fff;box-shadow:0 4px 15px 0 rgb(0 0 0 / 10%)}:host{display:grid;position:absolute;width:max-content;z-index:var(--zoo-tooltip-z-index,9997);pointer-events:none;color:#000;--tip-bottom:0;--tip-right:unset;--tip-justify:center}:host([position=top]){bottom:170%;--tip-bottom:calc(0% - 8px)}:host([position=right]){justify-content:end;left:102%;bottom:25%;--tip-bottom:unset;--tip-justify:start;--tip-right:calc(100% - 8px)}:host([position=bottom]){bottom:-130%;--tip-bottom:calc(100% - 8px)}:host([position=left]){justify-content:start;left:-101%;bottom:25%;--tip-bottom:unset;--tip-justify:end;--tip-right:-8px}.tip{justify-self:var(--tip-justify);align-self:center;position:absolute;width:16px;height:16px;transform:rotate(45deg);z-index:-1;right:var(--tip-right);bottom:var(--tip-bottom)}.tooltip-content{display:grid;padding:10px;font-size:12px;line-height:16px;font-weight:initial;position:relative;border-radius:5px;pointer-events:initial}.tooltip-content span{white-space:pre}</style><div class="tooltip-content"><slot></slot><div class="tip"></div></div>'}}window.customElements.get("zoo-tooltip")||window.customElements.define("zoo-tooltip",Tooltip);export{Tooltip};
|
|
2
2
|
//# sourceMappingURL=tooltip.js.map
|
package/dist/feedback.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(
|
|
1
|
+
!function(o){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 Feedback extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;align-items:center;box-sizing:border-box;font-size:14px;line-height:20px;border-left:3px solid var(--info-mid);width:100%;height:100%;padding:5px 0;background:var(--info-ultralight);border-radius:5px;--svg-fill:var(--info-mid)}:host([type=error]){background:var(--warning-ultralight);border-color:var(--warning-mid);--svg-fill:var(--warning-mid)}:host([type=success]){background:var(--primary-ultralight);border-color:var(--primary-mid);--svg-fill:var(--primary-mid)}zoo-attention-icon{padding:0 10px 0 15px;--icon-color:var(--svg-fill);--width:30px;--height:30px}::slotted(*){display:flex;align-items:center;height:100%;overflow:auto;box-sizing:border-box;padding:5px 5px 5px 0}</style><zoo-attention-icon></zoo-attention-icon><slot></slot>",function(...o){!o&&console.error("Please register your components!")}(AttentionIcon)}}window.customElements.get("zoo-feedback")||window.customElements.define("zoo-feedback",Feedback),o.Feedback=Feedback,Object.defineProperty(o,"__esModule",{value:!0})}({});
|
package/dist/grid-header.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t){class ArrowDownIcon extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>svg{display:flex;width:var(--width,24px);height:var(--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,e,o){this.shadowRoot.querySelector("svg title").textContent=o}}window.customElements.get("zoo-arrow-icon")||window.customElements.define("zoo-arrow-icon",ArrowDownIcon);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
|
|
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,e,o){this.shadowRoot.querySelector("svg title").textContent=o}}window.customElements.get("zoo-arrow-icon")||window.customElements.define("zoo-arrow-icon",ArrowDownIcon);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>',function(...t){!t&&console.error("Please register your components!")}(ArrowDownIcon),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),t.GridHeader=GridHeader,Object.defineProperty(t,"__esModule",{value:!0})}({});
|
package/dist/grid-row.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(o){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
|
|
1
|
+
!function(o){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),o.GridRow=GridRow,Object.defineProperty(o,"__esModule",{value:!0})}({});
|