@zooplus/zoo-web-components 10.3.1 → 10.3.3
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/LICENSE +20 -20
- package/README.md +84 -84
- package/dist/esm/zoo-modules/grid/grid/grid.js +1 -1
- package/dist/esm/zoo-modules/misc/modal/modal.js +1 -1
- package/dist/grid.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/zoo-web-components.js +1 -1
- package/package.json +57 -57
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
The MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2019-2020 Zooplus AG.
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in
|
|
13
|
-
all copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
1
|
+
The MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2019-2020 Zooplus AG.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
|
13
|
+
all copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
21
21
|
THE SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
# Zoo Web Components
|
|
2
|
-
|
|
3
|
-
| **Dependencies** |
|
|
4
|
-
| :-----------------------------------------------------------------------: |
|
|
5
|
-
|  |
|
|
6
|
-
|  |
|
|
7
|
-
|
|
8
|
-
- Set of extendable, reusable web-components which can be used in any modern UI framework (or without any).
|
|
9
|
-
- 0 dependencies, built with [Vanilla JS](http://vanilla-js.com/)
|
|
10
|
-
- Doesn't hide native HTML elements behind multiple levels of abstraction but rather enhances them via composition.
|
|
11
|
-
|
|
12
|
-
## Installation
|
|
13
|
-
|
|
14
|
-
To use this library install it by running:
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
npm i @zooplus/zoo-web-components --save
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
When there is a tree-shaking mechanism in your build pipeline, you can import only the components that you need, for example:
|
|
21
|
-
|
|
22
|
-
```JS
|
|
23
|
-
import { Input, Select, registerComponents } from '@zooplus/zoo-web-components';
|
|
24
|
-
registerComponents(Input, Select);
|
|
25
|
-
|
|
26
|
-
// or to import everything
|
|
27
|
-
|
|
28
|
-
import * as zooComponents from '@zooplus/zoo-web-components';
|
|
29
|
-
zooComponents.registerComponents(zooComponents);
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
All dependencies needed by the components should be pulled automatically, so you don't have to worry about importing classes for `zoo-info`, `zoo-label` etc.
|
|
33
|
-
|
|
34
|
-
Your build tool should remove all of the components that are not imported automatically (when using rollup, for example).
|
|
35
|
-
|
|
36
|
-
In case you don't use any framework and/or any build tool you can import the whole library with the following:
|
|
37
|
-
|
|
38
|
-
```HTML
|
|
39
|
-
<script src="path-to-zooplus-lib/zoo-web-components.js"></script>
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
or only the components that you need, for example:
|
|
43
|
-
|
|
44
|
-
```HTML
|
|
45
|
-
<script src="path-to-zooplus-lib/checkbox.js"></script>
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
Note, that IIFE components already include all sub-dependencies needed by the component. For example, the above `zoo-checkbox` requires also a `zoo-info` component, it is already in the same bundle as the checkbox.
|
|
49
|
-
Other components that might also use `zoo-info` will not throw an error, since care is taken to not redefine same elements in the custom elements registry.
|
|
50
|
-
|
|
51
|
-
Currently, we recommend to use ESM bundle only when you're using some kind of a bundler, which transforms your code into some js module format that is not ESM, since using pure ESM might trigger FOUC, and we do not want that.
|
|
52
|
-
|
|
53
|
-
Remember to add CSS custom properties to your main styles file:
|
|
54
|
-
|
|
55
|
-
```CSS
|
|
56
|
-
:root {
|
|
57
|
-
--primary-mid: #3C9700;
|
|
58
|
-
--primary-light: #66B100;
|
|
59
|
-
--primary-dark: #286400;
|
|
60
|
-
--primary-ultralight: #EBF4E5;
|
|
61
|
-
--secondary-mid: #FF6200;
|
|
62
|
-
--secondary-light: #F80;
|
|
63
|
-
--secondary-dark: #CC4E00;
|
|
64
|
-
--info-ultralight: #ECF5FA;
|
|
65
|
-
--info-mid: #459FD0;
|
|
66
|
-
--warning-ultralight: #FDE8E9;
|
|
67
|
-
--warning-mid: #ED1C24;
|
|
68
|
-
}
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## Examples integrating with various frameworks
|
|
72
|
-
|
|
73
|
-
- [VueJS](https://github.com/GeorgeTailor/vue-wc-integration)
|
|
74
|
-
- [Angular](https://github.com/GeorgeTailor/angular-wc-integration)
|
|
75
|
-
- [React](https://github.com/GeorgeTailor/react-wc-integration)
|
|
76
|
-
|
|
77
|
-
## Documentation
|
|
78
|
-
|
|
79
|
-
Landing page is available here: <https://zooplus.github.io/zoo-web-components>
|
|
80
|
-
Documentation page is here: <https://zooplus.github.io/zoo-web-components-docs>
|
|
81
|
-
|
|
82
|
-
## Note
|
|
83
|
-
|
|
84
|
-
This library relies on attributes and/or slots. Usage of properties is not supported for simplicity.
|
|
1
|
+
# Zoo Web Components
|
|
2
|
+
|
|
3
|
+
| **Dependencies** |
|
|
4
|
+
| :-----------------------------------------------------------------------: |
|
|
5
|
+
|  |
|
|
6
|
+
|  |
|
|
7
|
+
|
|
8
|
+
- Set of extendable, reusable web-components which can be used in any modern UI framework (or without any).
|
|
9
|
+
- 0 dependencies, built with [Vanilla JS](http://vanilla-js.com/)
|
|
10
|
+
- Doesn't hide native HTML elements behind multiple levels of abstraction but rather enhances them via composition.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
To use this library install it by running:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm i @zooplus/zoo-web-components --save
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
When there is a tree-shaking mechanism in your build pipeline, you can import only the components that you need, for example:
|
|
21
|
+
|
|
22
|
+
```JS
|
|
23
|
+
import { Input, Select, registerComponents } from '@zooplus/zoo-web-components';
|
|
24
|
+
registerComponents(Input, Select);
|
|
25
|
+
|
|
26
|
+
// or to import everything
|
|
27
|
+
|
|
28
|
+
import * as zooComponents from '@zooplus/zoo-web-components';
|
|
29
|
+
zooComponents.registerComponents(zooComponents);
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
All dependencies needed by the components should be pulled automatically, so you don't have to worry about importing classes for `zoo-info`, `zoo-label` etc.
|
|
33
|
+
|
|
34
|
+
Your build tool should remove all of the components that are not imported automatically (when using rollup, for example).
|
|
35
|
+
|
|
36
|
+
In case you don't use any framework and/or any build tool you can import the whole library with the following:
|
|
37
|
+
|
|
38
|
+
```HTML
|
|
39
|
+
<script src="path-to-zooplus-lib/zoo-web-components.js"></script>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
or only the components that you need, for example:
|
|
43
|
+
|
|
44
|
+
```HTML
|
|
45
|
+
<script src="path-to-zooplus-lib/checkbox.js"></script>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Note, that IIFE components already include all sub-dependencies needed by the component. For example, the above `zoo-checkbox` requires also a `zoo-info` component, it is already in the same bundle as the checkbox.
|
|
49
|
+
Other components that might also use `zoo-info` will not throw an error, since care is taken to not redefine same elements in the custom elements registry.
|
|
50
|
+
|
|
51
|
+
Currently, we recommend to use ESM bundle only when you're using some kind of a bundler, which transforms your code into some js module format that is not ESM, since using pure ESM might trigger FOUC, and we do not want that.
|
|
52
|
+
|
|
53
|
+
Remember to add CSS custom properties to your main styles file:
|
|
54
|
+
|
|
55
|
+
```CSS
|
|
56
|
+
:root {
|
|
57
|
+
--primary-mid: #3C9700;
|
|
58
|
+
--primary-light: #66B100;
|
|
59
|
+
--primary-dark: #286400;
|
|
60
|
+
--primary-ultralight: #EBF4E5;
|
|
61
|
+
--secondary-mid: #FF6200;
|
|
62
|
+
--secondary-light: #F80;
|
|
63
|
+
--secondary-dark: #CC4E00;
|
|
64
|
+
--info-ultralight: #ECF5FA;
|
|
65
|
+
--info-mid: #459FD0;
|
|
66
|
+
--warning-ultralight: #FDE8E9;
|
|
67
|
+
--warning-mid: #ED1C24;
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Examples integrating with various frameworks
|
|
72
|
+
|
|
73
|
+
- [VueJS](https://github.com/GeorgeTailor/vue-wc-integration)
|
|
74
|
+
- [Angular](https://github.com/GeorgeTailor/angular-wc-integration)
|
|
75
|
+
- [React](https://github.com/GeorgeTailor/react-wc-integration)
|
|
76
|
+
|
|
77
|
+
## Documentation
|
|
78
|
+
|
|
79
|
+
Landing page is available here: <https://zooplus.github.io/zoo-web-components>
|
|
80
|
+
Documentation page is here: <https://zooplus.github.io/zoo-web-components-docs>
|
|
81
|
+
|
|
82
|
+
## Note
|
|
83
|
+
|
|
84
|
+
This library relies on attributes and/or slots. Usage of properties is not supported for simplicity.
|
|
@@ -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:rgba(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 rgba(0,0,0,.2);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 rgba(0,0,0,.4)}:host([stickyheader]) .header-row{top:0;position:sticky}::slotted([slot=row]:nth-child(odd)){background:#f2f3f4}::slotted([slot=row]:focus),::slotted([slot=row]:hover){background:#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};
|
|
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:rgba(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 rgba(0,0,0,.2);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 rgba(0,0,0,.4)}: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:#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{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:rgba(0,0,0,.8);opacity:0;transition:opacity .3s;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 (max-width:544px){.dialog-content{padding:25px}}@media only screen and (max-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");e.addEventListener("click",(t=>{t.target==e&&this.closeModal()})),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])']}connectedCallback(){this.hidden=!0}static get observedAttributes(){return["closelabel"]}attributeChangedCallback(t,o,e){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",e)}openModal(){this.style.display="block",this.toggleModalClass(),this.shadowRoot.querySelector("button").focus(),document.addEventListener("keyup",(t=>{"Escape"===t.key&&this.closeModal(),"Tab"===t.key&&this.maintainFocus(t.shiftKey)}))}maintainFocus(t){const o=this.shadowRoot.querySelector("button"),e=[...this.querySelectorAll(this.focusableSelectors.join(","))],i=!e.some((t=>t.isEqualNode(document.activeElement))),n=!o.isEqualNode(this.shadowRoot.activeElement);i&&n&&(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};
|
|
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:rgba(0,0,0,var(--zoo-modal-opacity,.8));opacity:0;transition:opacity .3s;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 (max-width:544px){.dialog-content{padding:25px}}@media only screen and (max-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");e.addEventListener("click",(t=>{t.target==e&&this.closeModal()})),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])']}connectedCallback(){this.hidden=!0}static get observedAttributes(){return["closelabel"]}attributeChangedCallback(t,o,e){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",e)}openModal(){this.style.display="block",this.toggleModalClass(),this.shadowRoot.querySelector("button").focus(),document.addEventListener("keyup",(t=>{"Escape"===t.key&&this.closeModal(),"Tab"===t.key&&this.maintainFocus(t.shiftKey)}))}maintainFocus(t){const o=this.shadowRoot.querySelector("button"),e=[...this.querySelectorAll(this.focusableSelectors.join(","))],i=!e.some((t=>t.isEqualNode(document.activeElement))),n=!o.isEqualNode(this.shadowRoot.activeElement);i&&n&&(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
|
package/dist/grid.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t){function e(t,e){let o;return function(){const r=()=>{o=null,t.apply(this,arguments)};clearTimeout(o),o=setTimeout(r,e),o||t.apply(this,arguments)}}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}}function o(...t){!t&&console.error("Please register your components!")}window.customElements.get("zoo-arrow-icon")||window.customElements.define("zoo-arrow-icon",ArrowDownIcon);class Paginator extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.box,button,nav{display:flex}:host{min-width:inherit;display:none}.box{align-items:center;font-size:14px;width:max-content;position:var(--paginator-position, \'initial\');right:var(--right, \'unset\')}:host([currentpage]){display:flex}nav{align-items:center;border:1px solid #e6e6e6;border-radius:5px;padding:15px}button{cursor:pointer;opacity:1;transition:opacity .1s;background:0 0;border:0;padding:0;font-size:inherit;border-radius:5px;margin:0 2px}button:active{opacity:.5}button:focus,button:hover{background:#f2f3f4}button.hidden{display:none}.page-element{padding:4px 8px}.page-element.active{background:var(--primary-ultralight);color:var(--primary-dark)}zoo-arrow-icon{pointer-events:none}.prev zoo-arrow-icon{transform:rotate(90deg)}.next zoo-arrow-icon{transform:rotate(-90deg)}</style><div class="box"><slot name="pagesizeselector"></slot><nav><button type="button" class="prev"><zoo-arrow-icon title="prev page"></zoo-arrow-icon></button> <button type="button" class="next"><zoo-arrow-icon title="next page"></zoo-arrow-icon></button></nav></div><template id="dots"><div class="page-element-dots">...</div></template><template id="pages"><button type="button" class="page-element"></button></template>',o(ArrowDownIcon),this.prev=this.shadowRoot.querySelector(".prev"),this.next=this.shadowRoot.querySelector(".next"),this.dots=this.shadowRoot.querySelector("#dots").content,this.pages=this.shadowRoot.querySelector("#pages").content,this.shadowRoot.addEventListener("click",(t=>{const e=t.target.getAttribute("page");e?this.goToPage(e):t.target.classList.contains("prev")?this.goToPage(+this.getAttribute("currentpage")-1):t.target.classList.contains("next")&&this.goToPage(+this.getAttribute("currentpage")+1)}))}goToPage(t){this.setAttribute("currentpage",t),this.dispatchEvent(new CustomEvent("pageChange",{detail:{pageNumber:t},bubbles:!0,composed:!0}))}static get observedAttributes(){return["maxpages","currentpage","prev-page-title","next-page-title"]}handleHideShowArrows(){1==this.getAttribute("currentpage")?this.prev.classList.add("hidden"):this.prev.classList.remove("hidden"),+this.getAttribute("currentpage")>=+this.getAttribute("maxpages")?this.next.classList.add("hidden"):this.next.classList.remove("hidden")}rerenderPageButtons(){this.shadowRoot.querySelectorAll('*[class^="page-element"]').forEach((t=>t.remove()));const t=+this.getAttribute("currentpage"),e=this.getAttribute("maxpages");for(let o=e;o>0;o--)if(1==o||o==t-1||o==t||o==t+1||o==e){const e=this.pages.cloneNode(!0).firstElementChild;e.setAttribute("page",o),e.setAttribute("title",o),t==o&&e.classList.add("active"),e.textContent=o,this.prev.after(e)}else o!=t-2&&t+2!=o||this.prev.after(this.dots.cloneNode(!0))}attributeChangedCallback(t,e,o){"currentpage"==t||"maxpages"==t?(this.handleHideShowArrows(),this.rerenderPageButtons()):"prev-page-title"===t?this.shadowRoot.querySelector(".prev zoo-arrow-icon").setAttribute("title",o):"next-page-title"===t&&this.shadowRoot.querySelector(".next zoo-arrow-icon").setAttribute("title",o)}}window.customElements.get("zoo-paginator")||window.customElements.define("zoo-paginator",Paginator);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:#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>',o(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);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 rgba(0,0,0,.2);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);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:rgba(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 rgba(0,0,0,.2);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 rgba(0,0,0,.4)}:host([stickyheader]) .header-row{top:0;position:sticky}::slotted([slot=row]:nth-child(odd)){background:#f2f3f4}::slotted([slot=row]:focus),::slotted([slot=row]:hover){background:#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>',o(Paginator,GridHeader,GridRow);const t=this.shadowRoot.querySelector('slot[name="headercell"]');t.addEventListener("slotchange",e((()=>{const e=t.assignedElements();this.style.setProperty("--grid-column-num",e.length),e.forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","columnheader")})),this.hasAttribute("reorderable")&&e.forEach((t=>this.handleDraggableHeader(t))),this.hasAttribute("resizable")&&this.handleResizableAttributeChange()})));const r=this.shadowRoot.querySelector('slot[name="row"]');r.addEventListener("slotchange",e((()=>{r.assignedElements().forEach((t=>{t.setAttribute("role","row"),"ZOO-GRID-ROW"===t.tagName?[...t.querySelector('*[slot="row-details"]').children].forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","cell")})):[...t.children].forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","cell")}))}))}))),this.addEventListener("sortChange",(t=>{this.prevSortedHeader&&!t.target.isEqualNode(this.prevSortedHeader)&&this.prevSortedHeader.removeAttribute("sortstate"),this.prevSortedHeader=t.target}))}static get observedAttributes(){return["currentpage","maxpages","resizable","reorderable","prev-page-title","next-page-title"]}attributeChangedCallback(t,e,o){"resizable"==t?this.handleResizableAttributeChange():"reorderable"==t&&this.hasAttribute("reorderable")?this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((t=>this.handleDraggableHeader(t))):["maxpages","currentpage","prev-page-title","next-page-title"].includes(t)&&this.shadowRoot.querySelector("zoo-paginator").setAttribute(t,o)}resizeCallback(t){t.forEach((t=>{const e=t.target.getAttribute("column"),o=t.contentRect.width;this.querySelectorAll(`[column="${e}"]`).forEach((t=>t.style.width=`${o}px`))}))}handleResizableAttributeChange(){this.hasAttribute("resizable")&&(this.resizeObserver=this.resizeObserver||new ResizeObserver(e(this.resizeCallback.bind(this))),this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((t=>this.resizeObserver.observe(t))))}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",(t=>this.handleDrop(t))))}handleDrop(t){this.prevDraggedOverHeader&&this.prevDraggedOverHeader.classList.remove("drag-over");const e=t.dataTransfer.getData("text"),o=t.target.getAttribute("column");o!=e&&(this.querySelectorAll(`[column="${e}"]`).forEach((t=>{const r=t.parentElement.querySelector(`[column="${o}"]`);o>e?r.after(t):r.before(t)})),this.shadowRoot.querySelector('slot[name="row"]').assignedElements().forEach((t=>{"ZOO-GRID-ROW"===t.tagName?[...t.shadowRoot.querySelector('slot[name="row-details"]').assignedElements()[0].children].forEach(((t,e)=>t.setAttribute("column",e+1))):[...t.children].forEach(((t,e)=>t.setAttribute("column",e+1)))})))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}}window.customElements.get("zoo-grid")||window.customElements.define("zoo-grid",ZooGrid),t.ZooGrid=ZooGrid,Object.defineProperty(t,"__esModule",{value:!0})}({});
|
|
1
|
+
!function(t){function e(t,e){let o;return function(){const r=()=>{o=null,t.apply(this,arguments)};clearTimeout(o),o=setTimeout(r,e),o||t.apply(this,arguments)}}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}}function o(...t){!t&&console.error("Please register your components!")}window.customElements.get("zoo-arrow-icon")||window.customElements.define("zoo-arrow-icon",ArrowDownIcon);class Paginator extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.box,button,nav{display:flex}:host{min-width:inherit;display:none}.box{align-items:center;font-size:14px;width:max-content;position:var(--paginator-position, \'initial\');right:var(--right, \'unset\')}:host([currentpage]){display:flex}nav{align-items:center;border:1px solid #e6e6e6;border-radius:5px;padding:15px}button{cursor:pointer;opacity:1;transition:opacity .1s;background:0 0;border:0;padding:0;font-size:inherit;border-radius:5px;margin:0 2px}button:active{opacity:.5}button:focus,button:hover{background:#f2f3f4}button.hidden{display:none}.page-element{padding:4px 8px}.page-element.active{background:var(--primary-ultralight);color:var(--primary-dark)}zoo-arrow-icon{pointer-events:none}.prev zoo-arrow-icon{transform:rotate(90deg)}.next zoo-arrow-icon{transform:rotate(-90deg)}</style><div class="box"><slot name="pagesizeselector"></slot><nav><button type="button" class="prev"><zoo-arrow-icon title="prev page"></zoo-arrow-icon></button> <button type="button" class="next"><zoo-arrow-icon title="next page"></zoo-arrow-icon></button></nav></div><template id="dots"><div class="page-element-dots">...</div></template><template id="pages"><button type="button" class="page-element"></button></template>',o(ArrowDownIcon),this.prev=this.shadowRoot.querySelector(".prev"),this.next=this.shadowRoot.querySelector(".next"),this.dots=this.shadowRoot.querySelector("#dots").content,this.pages=this.shadowRoot.querySelector("#pages").content,this.shadowRoot.addEventListener("click",(t=>{const e=t.target.getAttribute("page");e?this.goToPage(e):t.target.classList.contains("prev")?this.goToPage(+this.getAttribute("currentpage")-1):t.target.classList.contains("next")&&this.goToPage(+this.getAttribute("currentpage")+1)}))}goToPage(t){this.setAttribute("currentpage",t),this.dispatchEvent(new CustomEvent("pageChange",{detail:{pageNumber:t},bubbles:!0,composed:!0}))}static get observedAttributes(){return["maxpages","currentpage","prev-page-title","next-page-title"]}handleHideShowArrows(){1==this.getAttribute("currentpage")?this.prev.classList.add("hidden"):this.prev.classList.remove("hidden"),+this.getAttribute("currentpage")>=+this.getAttribute("maxpages")?this.next.classList.add("hidden"):this.next.classList.remove("hidden")}rerenderPageButtons(){this.shadowRoot.querySelectorAll('*[class^="page-element"]').forEach((t=>t.remove()));const t=+this.getAttribute("currentpage"),e=this.getAttribute("maxpages");for(let o=e;o>0;o--)if(1==o||o==t-1||o==t||o==t+1||o==e){const e=this.pages.cloneNode(!0).firstElementChild;e.setAttribute("page",o),e.setAttribute("title",o),t==o&&e.classList.add("active"),e.textContent=o,this.prev.after(e)}else o!=t-2&&t+2!=o||this.prev.after(this.dots.cloneNode(!0))}attributeChangedCallback(t,e,o){"currentpage"==t||"maxpages"==t?(this.handleHideShowArrows(),this.rerenderPageButtons()):"prev-page-title"===t?this.shadowRoot.querySelector(".prev zoo-arrow-icon").setAttribute("title",o):"next-page-title"===t&&this.shadowRoot.querySelector(".next zoo-arrow-icon").setAttribute("title",o)}}window.customElements.get("zoo-paginator")||window.customElements.define("zoo-paginator",Paginator);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:#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>',o(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);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 rgba(0,0,0,.2);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);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:rgba(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 rgba(0,0,0,.2);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 rgba(0,0,0,.4)}: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:#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>',o(Paginator,GridHeader,GridRow);const t=this.shadowRoot.querySelector('slot[name="headercell"]');t.addEventListener("slotchange",e((()=>{const e=t.assignedElements();this.style.setProperty("--grid-column-num",e.length),e.forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","columnheader")})),this.hasAttribute("reorderable")&&e.forEach((t=>this.handleDraggableHeader(t))),this.hasAttribute("resizable")&&this.handleResizableAttributeChange()})));const r=this.shadowRoot.querySelector('slot[name="row"]');r.addEventListener("slotchange",e((()=>{r.assignedElements().forEach((t=>{t.setAttribute("role","row"),"ZOO-GRID-ROW"===t.tagName?[...t.querySelector('*[slot="row-details"]').children].forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","cell")})):[...t.children].forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","cell")}))}))}))),this.addEventListener("sortChange",(t=>{this.prevSortedHeader&&!t.target.isEqualNode(this.prevSortedHeader)&&this.prevSortedHeader.removeAttribute("sortstate"),this.prevSortedHeader=t.target}))}static get observedAttributes(){return["currentpage","maxpages","resizable","reorderable","prev-page-title","next-page-title"]}attributeChangedCallback(t,e,o){"resizable"==t?this.handleResizableAttributeChange():"reorderable"==t&&this.hasAttribute("reorderable")?this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((t=>this.handleDraggableHeader(t))):["maxpages","currentpage","prev-page-title","next-page-title"].includes(t)&&this.shadowRoot.querySelector("zoo-paginator").setAttribute(t,o)}resizeCallback(t){t.forEach((t=>{const e=t.target.getAttribute("column"),o=t.contentRect.width;this.querySelectorAll(`[column="${e}"]`).forEach((t=>t.style.width=`${o}px`))}))}handleResizableAttributeChange(){this.hasAttribute("resizable")&&(this.resizeObserver=this.resizeObserver||new ResizeObserver(e(this.resizeCallback.bind(this))),this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((t=>this.resizeObserver.observe(t))))}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",(t=>this.handleDrop(t))))}handleDrop(t){this.prevDraggedOverHeader&&this.prevDraggedOverHeader.classList.remove("drag-over");const e=t.dataTransfer.getData("text"),o=t.target.getAttribute("column");o!=e&&(this.querySelectorAll(`[column="${e}"]`).forEach((t=>{const r=t.parentElement.querySelector(`[column="${o}"]`);o>e?r.after(t):r.before(t)})),this.shadowRoot.querySelector('slot[name="row"]').assignedElements().forEach((t=>{"ZOO-GRID-ROW"===t.tagName?[...t.shadowRoot.querySelector('slot[name="row-details"]').assignedElements()[0].children].forEach(((t,e)=>t.setAttribute("column",e+1))):[...t.children].forEach(((t,e)=>t.setAttribute("column",e+1)))})))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}}window.customElements.get("zoo-grid")||window.customElements.define("zoo-grid",ZooGrid),t.ZooGrid=ZooGrid,Object.defineProperty(t,"__esModule",{value:!0})}({});
|
package/dist/modal.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,24px);height:var(--height,24px);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);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:rgba(0,0,0,.8);opacity:0;transition:opacity .3s;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 (max-width:544px){.dialog-content{padding:25px}}@media only screen and (max-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>',function(...t){!t&&console.error("Please register your components!")}(CrossIcon),this.shadowRoot.querySelector(".close").addEventListener("click",(()=>this.closeModal()));const t=this.shadowRoot.querySelector(".box");t.addEventListener("click",(e=>{e.target==t&&this.closeModal()})),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])']}connectedCallback(){this.hidden=!0}static get observedAttributes(){return["closelabel"]}attributeChangedCallback(t,e,o){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",o)}openModal(){this.style.display="block",this.toggleModalClass(),this.shadowRoot.querySelector("button").focus(),document.addEventListener("keyup",(t=>{"Escape"===t.key&&this.closeModal(),"Tab"===t.key&&this.maintainFocus(t.shiftKey)}))}maintainFocus(t){const e=this.shadowRoot.querySelector("button"),o=[...this.querySelectorAll(this.focusableSelectors.join(","))],i=!o.some((t=>t.isEqualNode(document.activeElement))),s=!e.isEqualNode(this.shadowRoot.activeElement);i&&s&&(t?o[o.length-1].focus():e.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),t.Modal=Modal,Object.defineProperty(t,"__esModule",{value:!0})}({});
|
|
1
|
+
!function(t){class CrossIcon 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,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);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:rgba(0,0,0,var(--zoo-modal-opacity,.8));opacity:0;transition:opacity .3s;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 (max-width:544px){.dialog-content{padding:25px}}@media only screen and (max-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>',function(...t){!t&&console.error("Please register your components!")}(CrossIcon),this.shadowRoot.querySelector(".close").addEventListener("click",(()=>this.closeModal()));const t=this.shadowRoot.querySelector(".box");t.addEventListener("click",(e=>{e.target==t&&this.closeModal()})),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])']}connectedCallback(){this.hidden=!0}static get observedAttributes(){return["closelabel"]}attributeChangedCallback(t,e,o){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",o)}openModal(){this.style.display="block",this.toggleModalClass(),this.shadowRoot.querySelector("button").focus(),document.addEventListener("keyup",(t=>{"Escape"===t.key&&this.closeModal(),"Tab"===t.key&&this.maintainFocus(t.shiftKey)}))}maintainFocus(t){const e=this.shadowRoot.querySelector("button"),o=[...this.querySelectorAll(this.focusableSelectors.join(","))],i=!o.some((t=>t.isEqualNode(document.activeElement))),s=!e.isEqualNode(this.shadowRoot.activeElement);i&&s&&(t?o[o.length-1].focus():e.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),t.Modal=Modal,Object.defineProperty(t,"__esModule",{value:!0})}({});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t){function e(...t){!t&&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>',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 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 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:#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 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;-webkit-appearance:none;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:#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>',e(InfoMessage),this.observer=new MutationObserver((t=>{for(let e of t)e.target.disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),e.target.hasAttribute("indeterminate")?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")})),this.shadowRoot.querySelector('slot[name="checkbox"]').addEventListener("slotchange",(t=>{let e=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));e&&(e.addEventListener("change",(()=>{e.checked?this.setAttribute("checked",""):this.removeAttribute("checked")})),this.registerElementForValidation(e),e.disabled&&this.setAttribute("disabled",""),e.checked&&this.setAttribute("checked",""),e.hasAttribute("indeterminate")&&this.setAttribute("indeterminate",""),this.observer.observe(e,{attributes:!0,attributeFilter:["disabled","indeterminate"]}))}))}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-checkbox")||window.customElements.define("zoo-checkbox",Checkbox);class Radio extends FormElement{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;-webkit-appearance:none;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>',e(InfoMessage,Label),this.shadowRoot.querySelector(".radio-group slot").addEventListener("slotchange",(t=>{t.target.assignedElements().forEach((t=>"INPUT"===t.tagName&&this.registerElementForValidation(t)))}))}}window.customElements.get("zoo-radio")||window.customElements.define("zoo-radio",Radio);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 Preloader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}.bounce{text-align:center}.bounce>div{width:10px;height:10px;background-color:#333;border-radius:100%;display:inline-block;animation:1.4s ease-in-out infinite both sk-bouncedelay}.bounce .bounce1{animation-delay:-.32s}.bounce .bounce2{animation-delay:-.16s}@keyframes sk-bouncedelay{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}</style><div class="bounce"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>'}}window.customElements.get("zoo-preloader")||window.customElements.define("zoo-preloader",Preloader);class Select 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;--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){-webkit-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:#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>',e(InfoMessage,Label,Link,Preloader,ArrowDownIcon),this.observer=new MutationObserver((t=>{for(let e of t){const t=e.attributeName;e.target[t]?this.setAttribute(t,""):this.removeAttribute(t)}})),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",(t=>{let e=[...t.target.assignedElements()].find((t=>"SELECT"===t.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);class CrossIcon 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,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);class Tooltip extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.tip,.tooltip-content{background:#fff;box-shadow:0 4px 15px 0 rgba(0,0,0,.1)}:host{display:grid;position:absolute;width:max-content;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);class SearchableSelect extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.cross,zoo-select{display:none;position:absolute}zoo-info,zoo-input{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}.cross{top:12px;right:14px;cursor:pointer;border:0;padding:0;background:0 0}.cross.hidden,:host([value-selected]) .cross.hidden{display:none}:host([value-selected]) .cross{display:flex}slot[name=selectlabel],zoo-preloader,zoo-tooltip{display:none}:host(:focus) zoo-tooltip,:host(:hover) zoo-tooltip{display:grid}zoo-select{border-top:none;z-index:2;top:59%;--icons-display:none}:host(:focus-within) zoo-select{display:grid}:host(:focus-within) slot[name=selectlabel]{display:block}:host(:focus-within) ::slotted(select){border-top-left-radius:0;border-top-right-radius:0;border:2px solid #555;border-top:none!important}:host([invalid]) ::slotted(select){border:2px solid var(--warning-mid)}:host([loading]) zoo-preloader{display:flex}::slotted([slot=inputlabel]),::slotted([slot=selectlabel]){position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}zoo-link{align-items:flex-start;text-align:right;max-width:max-content;justify-self:flex-end;padding:0}zoo-label,zoo-link{grid-row:1}zoo-input{grid-gap:0;position:relative}:host(:focus-within) ::slotted(input){border:2px solid #555;padding:12px 14px}:host([invalid]) ::slotted(input){border:2px solid var(--warning-mid);padding:12px 14px}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) zoo-input,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}</style><zoo-label><slot name="legend"><slot name="label"></slot></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><zoo-input><zoo-preloader slot="additional"></zoo-preloader><slot slot="input" name="input"></slot><button slot="additional" class="cross" type="button"><zoo-cross-icon></zoo-cross-icon></button><slot name="inputlabel" slot="additional"></slot><zoo-select slot="additional"><slot name="select" slot="select"></slot></zoo-select></zoo-input><slot name="selectlabel"></slot><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',e(Input,Select,Preloader,CrossIcon,Tooltip),this.observer=new MutationObserver((t=>{for(let e of t){this.input.disabled=e.target.disabled;const t=this.shadowRoot.querySelector(".cross");e.target.disabled?t.classList.add("hidden"):t.classList.remove("hidden")}})),this.shadowRoot.querySelector(".cross").addEventListener("click",(()=>{this.select.disabled||(this.select.value=null,this.select.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!1})))})),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",(t=>{this.select=[...t.target.assignedElements()].find((t=>"SELECT"===t.tagName)),this.select&&(this.registerElementForValidation(this.select),this.select.addEventListener("change",(()=>{this.handleOptionChange(),this.valueChange()})),this.select.size=4,this.observer.observe(this.select,{attributes:!0,attributeFilter:["disabled"]}),this.valueChange(),this.slotChange())})),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",(t=>{this.input=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName)),this.input&&(this.inputPlaceholderFallback=this.input.placeholder,this.input.addEventListener("input",(()=>this.handleSearchChange())),this.slotChange())}))}static get observedAttributes(){return["closeicontitle"]}slotChange(){this.input&&this.select&&(this.handleOptionChange(),this.input.disabled=this.select.disabled)}valueChange(){this.select.value?this.setAttribute("value-selected",""):this.removeAttribute("value-selected")}attributeChangedCallback(t,e,o){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",o)}handleSearchChange(){const t=this.input.value.toLowerCase();this.select.querySelectorAll("option").forEach((e=>{e.text.toLowerCase().indexOf(t)>-1?e.style.display="block":e.style.display="none"}))}handleOptionChange(){let t=[...this.select.selectedOptions].map((t=>t.text)).join(", \n");this.input.placeholder=t||this.inputPlaceholderFallback,t?(this.input.value=null,this.tooltip=this.tooltip||this.createTooltip(),this.tooltip.textContent=t,this.shadowRoot.querySelector("zoo-input").appendChild(this.tooltip)):this.tooltip&&this.tooltip.remove()}createTooltip(){const t=document.createElement("zoo-tooltip");return t.slot="additional",t.setAttribute("position","right"),t}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-searchable-select")||window.customElements.define("zoo-searchable-select",SearchableSelect);class QuantityControl extends FormElement{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:#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;-moz-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(InfoMessage,Label),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);class ToggleSwitch extends FormElement{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;-webkit-appearance:none;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:#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>',e(InfoMessage,Label),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",(t=>{const e=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));e&&(this.registerElementForValidation(e),t.target.parentNode.addEventListener("click",(t=>{t.target.classList.contains("toggle-wrapper")&&e.click()})))}))}}window.customElements.get("zoo-toggle-switch")||window.customElements.define("zoo-toggle-switch",ToggleSwitch);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 i=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));o[e]=i,i&&this.registerElementForValidation(i)}}window.customElements.get("zoo-date-range")||window.customElements.define("zoo-date-range",DateRange);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}:host(:hover){background:var(--primary-ultralight)}</style><slot name="tag"></slot><slot name="description"></slot>'}}function o(t,e){let o;return function(){const i=()=>{o=null,t.apply(this,arguments)};clearTimeout(o),o=setTimeout(i,e),o||t.apply(this,arguments)}}window.customElements.get("zoo-input-tag-option")||window.customElements.define("zoo-input-tag-option",InputTagOption);class InputTag extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>#input-wrapper,#tag-options{gap:5px;box-sizing:border-box}#input-wrapper,zoo-info{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}#input-wrapper{display:flex;flex-wrap:wrap;align-items:center;height:max-content;font-size:14px;line-height:20px;padding:13px 15px;border:1px solid #767676;border-radius:5px;color:#555;position:relative;overflow:visible}:host(:focus-within) #input-wrapper{border:2px solid #555;padding:12px 14px}:host([show-tags]) #input-wrapper{z-index:2}:host([invalid]) #input-wrapper{border:2px solid var(--warning-mid);padding:12px 14px}::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;border:1px solid #555;border-radius:0 0 3px 3px;left:-1px;top:90%;border-top:0;width:calc(100% + 2px)}:host(:focus-within) #tag-options,:host([invalid]) #tag-options{border-width:2px;width:calc(100% + 4px);left:-2px}: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){flex:1 0 30%}</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>',e(Label,InfoMessage,InputTagOption,CrossIcon),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",o((()=>{this.handleInitialValues()}))),this.addEventListener("keydown",(t=>{" "===t.key&&"ZOO-TAG"===t.target.tagName&&(t.preventDefault(),this.handleTagSelect(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.handleTagSelect(t)}))}handleTagSelect(t){const e=this.getElAsParentBySlotName(t.target,"tag-option").querySelector("zoo-tag"),o=e.getAttribute("data-value"),i=[...this.select.querySelectorAll("option")].findIndex((t=>t.value===o));if(i>-1&&!this.select.options[i].selected){this.select.options[i].selected=!0,this.select.options[i].setAttribute("selected",""),this.select.dispatchEvent(new Event("input")),this.input.value="";const t=e.cloneNode(!0),o=document.createElement("zoo-cross-icon");o.setAttribute("tabindex",0),o.setAttribute("slot","post"),o.addEventListener("click",(()=>this.deselectOption(t,i))),o.addEventListener("keydown",(e=>{" "===e.key&&(e.preventDefault(),this.deselectOption(t,i))})),t.appendChild(o),this.inputSlot.before(t)}this.removeAttribute("show-tags"),this.input.focus()}handleInitialValues(){const t=[...this.children].filter((t=>"ZOO-INPUT-TAG-OPTION"===t.tagName)),e=this.hasAttribute("data-initial-value")?this.getAttribute("data-initial-value").split(",").map((t=>t.trim())):null;t&&e&&[...t].forEach((t=>{e.includes([...t.children][0].getAttribute("data-value"))&&this.handleTagSelect({target:t})}))}deselectOption(t,e){t.remove(),this.select.options[e].selected=!1,this.select.options[e].removeAttribute("selected"),this.select.dispatchEvent(new Event("input")),this.input.focus()}getElAsParentBySlotName(t,e){if(t.getAttribute("slot")===e)return t;let o=t.parentElement;for(;o&&o.getAttribute("slot")!==e;)o=o.parentElement;return o}}window.customElements.get("zoo-input-tag")||window.customElements.define("zoo-input-tag",InputTag);class Paginator extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.box,button,nav{display:flex}:host{min-width:inherit;display:none}.box{align-items:center;font-size:14px;width:max-content;position:var(--paginator-position, \'initial\');right:var(--right, \'unset\')}:host([currentpage]){display:flex}nav{align-items:center;border:1px solid #e6e6e6;border-radius:5px;padding:15px}button{cursor:pointer;opacity:1;transition:opacity .1s;background:0 0;border:0;padding:0;font-size:inherit;border-radius:5px;margin:0 2px}button:active{opacity:.5}button:focus,button:hover{background:#f2f3f4}button.hidden{display:none}.page-element{padding:4px 8px}.page-element.active{background:var(--primary-ultralight);color:var(--primary-dark)}zoo-arrow-icon{pointer-events:none}.prev zoo-arrow-icon{transform:rotate(90deg)}.next zoo-arrow-icon{transform:rotate(-90deg)}</style><div class="box"><slot name="pagesizeselector"></slot><nav><button type="button" class="prev"><zoo-arrow-icon title="prev page"></zoo-arrow-icon></button> <button type="button" class="next"><zoo-arrow-icon title="next page"></zoo-arrow-icon></button></nav></div><template id="dots"><div class="page-element-dots">...</div></template><template id="pages"><button type="button" class="page-element"></button></template>',e(ArrowDownIcon),this.prev=this.shadowRoot.querySelector(".prev"),this.next=this.shadowRoot.querySelector(".next"),this.dots=this.shadowRoot.querySelector("#dots").content,this.pages=this.shadowRoot.querySelector("#pages").content,this.shadowRoot.addEventListener("click",(t=>{const e=t.target.getAttribute("page");e?this.goToPage(e):t.target.classList.contains("prev")?this.goToPage(+this.getAttribute("currentpage")-1):t.target.classList.contains("next")&&this.goToPage(+this.getAttribute("currentpage")+1)}))}goToPage(t){this.setAttribute("currentpage",t),this.dispatchEvent(new CustomEvent("pageChange",{detail:{pageNumber:t},bubbles:!0,composed:!0}))}static get observedAttributes(){return["maxpages","currentpage","prev-page-title","next-page-title"]}handleHideShowArrows(){1==this.getAttribute("currentpage")?this.prev.classList.add("hidden"):this.prev.classList.remove("hidden"),+this.getAttribute("currentpage")>=+this.getAttribute("maxpages")?this.next.classList.add("hidden"):this.next.classList.remove("hidden")}rerenderPageButtons(){this.shadowRoot.querySelectorAll('*[class^="page-element"]').forEach((t=>t.remove()));const t=+this.getAttribute("currentpage"),e=this.getAttribute("maxpages");for(let o=e;o>0;o--)if(1==o||o==t-1||o==t||o==t+1||o==e){const e=this.pages.cloneNode(!0).firstElementChild;e.setAttribute("page",o),e.setAttribute("title",o),t==o&&e.classList.add("active"),e.textContent=o,this.prev.after(e)}else o!=t-2&&t+2!=o||this.prev.after(this.dots.cloneNode(!0))}attributeChangedCallback(t,e,o){"currentpage"==t||"maxpages"==t?(this.handleHideShowArrows(),this.rerenderPageButtons()):"prev-page-title"===t?this.shadowRoot.querySelector(".prev zoo-arrow-icon").setAttribute("title",o):"next-page-title"===t&&this.shadowRoot.querySelector(".next zoo-arrow-icon").setAttribute("title",o)}}window.customElements.get("zoo-paginator")||window.customElements.define("zoo-paginator",Paginator);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:#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(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);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 rgba(0,0,0,.2);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);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:rgba(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 rgba(0,0,0,.2);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 rgba(0,0,0,.4)}:host([stickyheader]) .header-row{top:0;position:sticky}::slotted([slot=row]:nth-child(odd)){background:#f2f3f4}::slotted([slot=row]:focus),::slotted([slot=row]:hover){background:#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>',e(Paginator,GridHeader,GridRow);const t=this.shadowRoot.querySelector('slot[name="headercell"]');t.addEventListener("slotchange",o((()=>{const e=t.assignedElements();this.style.setProperty("--grid-column-num",e.length),e.forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","columnheader")})),this.hasAttribute("reorderable")&&e.forEach((t=>this.handleDraggableHeader(t))),this.hasAttribute("resizable")&&this.handleResizableAttributeChange()})));const i=this.shadowRoot.querySelector('slot[name="row"]');i.addEventListener("slotchange",o((()=>{i.assignedElements().forEach((t=>{t.setAttribute("role","row"),"ZOO-GRID-ROW"===t.tagName?[...t.querySelector('*[slot="row-details"]').children].forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","cell")})):[...t.children].forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","cell")}))}))}))),this.addEventListener("sortChange",(t=>{this.prevSortedHeader&&!t.target.isEqualNode(this.prevSortedHeader)&&this.prevSortedHeader.removeAttribute("sortstate"),this.prevSortedHeader=t.target}))}static get observedAttributes(){return["currentpage","maxpages","resizable","reorderable","prev-page-title","next-page-title"]}attributeChangedCallback(t,e,o){"resizable"==t?this.handleResizableAttributeChange():"reorderable"==t&&this.hasAttribute("reorderable")?this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((t=>this.handleDraggableHeader(t))):["maxpages","currentpage","prev-page-title","next-page-title"].includes(t)&&this.shadowRoot.querySelector("zoo-paginator").setAttribute(t,o)}resizeCallback(t){t.forEach((t=>{const e=t.target.getAttribute("column"),o=t.contentRect.width;this.querySelectorAll(`[column="${e}"]`).forEach((t=>t.style.width=`${o}px`))}))}handleResizableAttributeChange(){this.hasAttribute("resizable")&&(this.resizeObserver=this.resizeObserver||new ResizeObserver(o(this.resizeCallback.bind(this))),this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((t=>this.resizeObserver.observe(t))))}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",o((()=>{t.classList.add("drag-over"),this.prevDraggedOverHeader=t}))),t.addEventListener("dragleave",(()=>t.classList.remove("drag-over"))),t.addEventListener("drop",(t=>this.handleDrop(t))))}handleDrop(t){this.prevDraggedOverHeader&&this.prevDraggedOverHeader.classList.remove("drag-over");const e=t.dataTransfer.getData("text"),o=t.target.getAttribute("column");o!=e&&(this.querySelectorAll(`[column="${e}"]`).forEach((t=>{const i=t.parentElement.querySelector(`[column="${o}"]`);o>e?i.after(t):i.before(t)})),this.shadowRoot.querySelector('slot[name="row"]').assignedElements().forEach((t=>{"ZOO-GRID-ROW"===t.tagName?[...t.shadowRoot.querySelector('slot[name="row-details"]').assignedElements()[0].children].forEach(((t,e)=>t.setAttribute("column",e+1))):[...t.children].forEach(((t,e)=>t.setAttribute("column",e+1)))})))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}}window.customElements.get("zoo-grid")||window.customElements.define("zoo-grid",ZooGrid);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:#F2F3F4;--color-mid:#F2F3F4;--color-dark:#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>",e(Button)}connectedCallback(){const t=this.shadowRoot.querySelector("slot");this.registerSlotChangeListener(t),this.registerButtonChangeHandler(t)}registerSlotChangeListener(t){t.addEventListener("slotchange",o((()=>{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);class Header extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:style}header{display:flex;align-items:center;padding:0 25px;height:70px}::slotted(img){height:46px;padding:5px 25px 5px 0;cursor:pointer}::slotted([slot=headertext]){color:var(--primary-mid)}</style><header><slot name="img"></slot><slot name="headertext"></slot><slot></slot></header>'}}window.customElements.get("zoo-header")||window.customElements.define("zoo-header",Header);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:rgba(0,0,0,.8);opacity:0;transition:opacity .3s;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 (max-width:544px){.dialog-content{padding:25px}}@media only screen and (max-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>',e(CrossIcon),this.shadowRoot.querySelector(".close").addEventListener("click",(()=>this.closeModal()));const t=this.shadowRoot.querySelector(".box");t.addEventListener("click",(e=>{e.target==t&&this.closeModal()})),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])']}connectedCallback(){this.hidden=!0}static get observedAttributes(){return["closelabel"]}attributeChangedCallback(t,e,o){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",o)}openModal(){this.style.display="block",this.toggleModalClass(),this.shadowRoot.querySelector("button").focus(),document.addEventListener("keyup",(t=>{"Escape"===t.key&&this.closeModal(),"Tab"===t.key&&this.maintainFocus(t.shiftKey)}))}maintainFocus(t){const e=this.shadowRoot.querySelector("button"),o=[...this.querySelectorAll(this.focusableSelectors.join(","))],i=!o.some((t=>t.isEqualNode(document.activeElement))),s=!e.isEqualNode(this.shadowRoot.activeElement);i&&s&&(t?o[o.length-1].focus():e.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);class Footer extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:style}nav{display:flex;justify-content:center;background:linear-gradient(to right,var(--primary-mid),var(--primary-light));padding:10px 30px}::slotted(zoo-link){width:max-content}</style><footer><nav><slot></slot></nav><slot name="additional-content"></slot></footer>'}}window.customElements.get("zoo-footer")||window.customElements.define("zoo-footer",Footer);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>",e(AttentionIcon)}}window.customElements.get("zoo-feedback")||window.customElements.define("zoo-feedback",Feedback);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:rgba(255,255,255,.2)}:host([direction=vertical]) ::slotted(*){padding:10px 5px;color:initial;box-sizing:border-box}:host([direction=vertical]) ::slotted(:focus),:host([direction=vertical]) ::slotted(:hover){background:rgba(0,0,0,.07)}</style><nav><slot></slot></nav>"}}window.customElements.get("zoo-navigation")||window.customElements.define("zoo-navigation",Navigation);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 rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(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);class CollapsableListItem extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{padding:0 10px;display:flex;flex-direction:column}:host([border-visible]){margin:8px 0}details{padding:10px}:host([border-visible]) details{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}details[open]{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}summary{cursor:pointer;color:var(--primary-mid);font-weight:700}</style><details><summary><slot name="header"></slot></summary><slot name="content"></slot></details>',this.details=this.shadowRoot.querySelector("details"),this.details.addEventListener("toggle",(t=>{this.shadowRoot.host.dispatchEvent(new CustomEvent("toggle",{detail:t.target.open,composed:!0}))}))}close(){this.details.open=!1}}window.customElements.get("zoo-collapsable-list-item")||window.customElements.define("zoo-collapsable-list-item",CollapsableListItem);class CollapsableList extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;flex-direction:column}</style><slot></slot>",e(CollapsableListItem);const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",(()=>{const e=t.assignedElements();e.forEach((t=>t.addEventListener("toggle",(o=>{o.detail&&!this.hasAttribute("disable-autoclose")&&e.forEach((e=>!e.isEqualNode(t)&&e.close()))})))),e.forEach((t=>{t.hasAttribute("opened-by-default")&&(t.details.open=!0)}))}))}}window.customElements.get("zoo-collapsable-list")||window.customElements.define("zoo-collapsable-list",CollapsableList);class Spinner extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout}svg{position:absolute;left:calc(50% - 60px);top:calc(50% - 60px);right:0;bottom:0;height:120px;width:120px;transform-origin:center center;animation:2s linear infinite rotate;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);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;line-height:16px;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);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--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,o){this.shadowRoot.querySelector("svg title").textContent=o}}window.customElements.get("zoo-paw-icon")||window.customElements.define("zoo-paw-icon",PawIcon),t.ArrowDownIcon=ArrowDownIcon,t.AttentionIcon=AttentionIcon,t.Button=Button,t.ButtonGroup=ButtonGroup,t.Checkbox=Checkbox,t.CollapsableList=CollapsableList,t.CollapsableListItem=CollapsableListItem,t.CrossIcon=CrossIcon,t.DateRange=DateRange,t.Feedback=Feedback,t.Footer=Footer,t.GridHeader=GridHeader,t.GridRow=GridRow,t.Header=Header,t.InfoMessage=InfoMessage,t.Input=Input,t.InputTag=InputTag,t.Label=Label,t.Link=Link,t.Modal=Modal,t.Navigation=Navigation,t.Paginator=Paginator,t.PawIcon=PawIcon,t.Preloader=Preloader,t.QuantityControl=QuantityControl,t.Radio=Radio,t.SearchableSelect=SearchableSelect,t.Select=Select,t.Spinner=Spinner,t.Tag=Tag,t.Toast=Toast,t.ToggleSwitch=ToggleSwitch,t.Tooltip=Tooltip,t.ZooGrid=ZooGrid,t.registerComponents=e,Object.defineProperty(t,"__esModule",{value:!0})}({});
|
|
1
|
+
!function(t){function e(...t){!t&&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>',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 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 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:#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 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;-webkit-appearance:none;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:#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>',e(InfoMessage),this.observer=new MutationObserver((t=>{for(let e of t)e.target.disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),e.target.hasAttribute("indeterminate")?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")})),this.shadowRoot.querySelector('slot[name="checkbox"]').addEventListener("slotchange",(t=>{let e=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));e&&(e.addEventListener("change",(()=>{e.checked?this.setAttribute("checked",""):this.removeAttribute("checked")})),this.registerElementForValidation(e),e.disabled&&this.setAttribute("disabled",""),e.checked&&this.setAttribute("checked",""),e.hasAttribute("indeterminate")&&this.setAttribute("indeterminate",""),this.observer.observe(e,{attributes:!0,attributeFilter:["disabled","indeterminate"]}))}))}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-checkbox")||window.customElements.define("zoo-checkbox",Checkbox);class Radio extends FormElement{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;-webkit-appearance:none;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>',e(InfoMessage,Label),this.shadowRoot.querySelector(".radio-group slot").addEventListener("slotchange",(t=>{t.target.assignedElements().forEach((t=>"INPUT"===t.tagName&&this.registerElementForValidation(t)))}))}}window.customElements.get("zoo-radio")||window.customElements.define("zoo-radio",Radio);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 Preloader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}.bounce{text-align:center}.bounce>div{width:10px;height:10px;background-color:#333;border-radius:100%;display:inline-block;animation:1.4s ease-in-out infinite both sk-bouncedelay}.bounce .bounce1{animation-delay:-.32s}.bounce .bounce2{animation-delay:-.16s}@keyframes sk-bouncedelay{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}</style><div class="bounce"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>'}}window.customElements.get("zoo-preloader")||window.customElements.define("zoo-preloader",Preloader);class Select 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;--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){-webkit-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:#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>',e(InfoMessage,Label,Link,Preloader,ArrowDownIcon),this.observer=new MutationObserver((t=>{for(let e of t){const t=e.attributeName;e.target[t]?this.setAttribute(t,""):this.removeAttribute(t)}})),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",(t=>{let e=[...t.target.assignedElements()].find((t=>"SELECT"===t.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);class CrossIcon 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,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);class Tooltip extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.tip,.tooltip-content{background:#fff;box-shadow:0 4px 15px 0 rgba(0,0,0,.1)}:host{display:grid;position:absolute;width:max-content;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);class SearchableSelect extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.cross,zoo-select{display:none;position:absolute}zoo-info,zoo-input{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}.cross{top:12px;right:14px;cursor:pointer;border:0;padding:0;background:0 0}.cross.hidden,:host([value-selected]) .cross.hidden{display:none}:host([value-selected]) .cross{display:flex}slot[name=selectlabel],zoo-preloader,zoo-tooltip{display:none}:host(:focus) zoo-tooltip,:host(:hover) zoo-tooltip{display:grid}zoo-select{border-top:none;z-index:2;top:59%;--icons-display:none}:host(:focus-within) zoo-select{display:grid}:host(:focus-within) slot[name=selectlabel]{display:block}:host(:focus-within) ::slotted(select){border-top-left-radius:0;border-top-right-radius:0;border:2px solid #555;border-top:none!important}:host([invalid]) ::slotted(select){border:2px solid var(--warning-mid)}:host([loading]) zoo-preloader{display:flex}::slotted([slot=inputlabel]),::slotted([slot=selectlabel]){position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}zoo-link{align-items:flex-start;text-align:right;max-width:max-content;justify-self:flex-end;padding:0}zoo-label,zoo-link{grid-row:1}zoo-input{grid-gap:0;position:relative}:host(:focus-within) ::slotted(input){border:2px solid #555;padding:12px 14px}:host([invalid]) ::slotted(input){border:2px solid var(--warning-mid);padding:12px 14px}:host([labelposition=left]) zoo-link{grid-column:2}:host([labelposition=left]) zoo-input,:host([labelposition=left]) zoo-label{display:flex;align-items:center;grid-row:2}:host([labelposition=left]) zoo-info[role=status]{grid-row:3;grid-column:2}:host([labelposition=left]) zoo-info[role=alert]{grid-row:4;grid-column:2}</style><zoo-label><slot name="legend"><slot name="label"></slot></slot></zoo-label><zoo-link><slot name="link" slot="anchor"></slot></zoo-link><zoo-input><zoo-preloader slot="additional"></zoo-preloader><slot slot="input" name="input"></slot><button slot="additional" class="cross" type="button"><zoo-cross-icon></zoo-cross-icon></button><slot name="inputlabel" slot="additional"></slot><zoo-select slot="additional"><slot name="select" slot="select"></slot></zoo-select></zoo-input><slot name="selectlabel"></slot><zoo-info role="status"><slot name="info"></slot></zoo-info><zoo-info role="alert"><slot name="error"></slot></zoo-info>',e(Input,Select,Preloader,CrossIcon,Tooltip),this.observer=new MutationObserver((t=>{for(let e of t){this.input.disabled=e.target.disabled;const t=this.shadowRoot.querySelector(".cross");e.target.disabled?t.classList.add("hidden"):t.classList.remove("hidden")}})),this.shadowRoot.querySelector(".cross").addEventListener("click",(()=>{this.select.disabled||(this.select.value=null,this.select.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!1})))})),this.shadowRoot.querySelector('slot[name="select"]').addEventListener("slotchange",(t=>{this.select=[...t.target.assignedElements()].find((t=>"SELECT"===t.tagName)),this.select&&(this.registerElementForValidation(this.select),this.select.addEventListener("change",(()=>{this.handleOptionChange(),this.valueChange()})),this.select.size=4,this.observer.observe(this.select,{attributes:!0,attributeFilter:["disabled"]}),this.valueChange(),this.slotChange())})),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",(t=>{this.input=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName)),this.input&&(this.inputPlaceholderFallback=this.input.placeholder,this.input.addEventListener("input",(()=>this.handleSearchChange())),this.slotChange())}))}static get observedAttributes(){return["closeicontitle"]}slotChange(){this.input&&this.select&&(this.handleOptionChange(),this.input.disabled=this.select.disabled)}valueChange(){this.select.value?this.setAttribute("value-selected",""):this.removeAttribute("value-selected")}attributeChangedCallback(t,e,o){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",o)}handleSearchChange(){const t=this.input.value.toLowerCase();this.select.querySelectorAll("option").forEach((e=>{e.text.toLowerCase().indexOf(t)>-1?e.style.display="block":e.style.display="none"}))}handleOptionChange(){let t=[...this.select.selectedOptions].map((t=>t.text)).join(", \n");this.input.placeholder=t||this.inputPlaceholderFallback,t?(this.input.value=null,this.tooltip=this.tooltip||this.createTooltip(),this.tooltip.textContent=t,this.shadowRoot.querySelector("zoo-input").appendChild(this.tooltip)):this.tooltip&&this.tooltip.remove()}createTooltip(){const t=document.createElement("zoo-tooltip");return t.slot="additional",t.setAttribute("position","right"),t}disconnectedCallback(){this.observer.disconnect()}}window.customElements.get("zoo-searchable-select")||window.customElements.define("zoo-searchable-select",SearchableSelect);class QuantityControl extends FormElement{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:#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;-moz-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(InfoMessage,Label),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);class ToggleSwitch extends FormElement{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;-webkit-appearance:none;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:#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>',e(InfoMessage,Label),this.shadowRoot.querySelector('slot[name="input"]').addEventListener("slotchange",(t=>{const e=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));e&&(this.registerElementForValidation(e),t.target.parentNode.addEventListener("click",(t=>{t.target.classList.contains("toggle-wrapper")&&e.click()})))}))}}window.customElements.get("zoo-toggle-switch")||window.customElements.define("zoo-toggle-switch",ToggleSwitch);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 i=[...t.target.assignedElements()].find((t=>"INPUT"===t.tagName));o[e]=i,i&&this.registerElementForValidation(i)}}window.customElements.get("zoo-date-range")||window.customElements.define("zoo-date-range",DateRange);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}:host(:hover){background:var(--primary-ultralight)}</style><slot name="tag"></slot><slot name="description"></slot>'}}function o(t,e){let o;return function(){const i=()=>{o=null,t.apply(this,arguments)};clearTimeout(o),o=setTimeout(i,e),o||t.apply(this,arguments)}}window.customElements.get("zoo-input-tag-option")||window.customElements.define("zoo-input-tag-option",InputTagOption);class InputTag extends FormElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>#input-wrapper,#tag-options{gap:5px;box-sizing:border-box}#input-wrapper,zoo-info{grid-column:span 2}:host{display:grid;grid-gap:3px;width:100%;height:max-content;box-sizing:border-box}#input-wrapper{display:flex;flex-wrap:wrap;align-items:center;height:max-content;font-size:14px;line-height:20px;padding:13px 15px;border:1px solid #767676;border-radius:5px;color:#555;position:relative;overflow:visible}:host(:focus-within) #input-wrapper{border:2px solid #555;padding:12px 14px}:host([show-tags]) #input-wrapper{z-index:2}:host([invalid]) #input-wrapper{border:2px solid var(--warning-mid);padding:12px 14px}::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;border:1px solid #555;border-radius:0 0 3px 3px;left:-1px;top:90%;border-top:0;width:calc(100% + 2px)}:host(:focus-within) #tag-options,:host([invalid]) #tag-options{border-width:2px;width:calc(100% + 4px);left:-2px}: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){flex:1 0 30%}</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>',e(Label,InfoMessage,InputTagOption,CrossIcon),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",o((()=>{this.handleInitialValues()}))),this.addEventListener("keydown",(t=>{" "===t.key&&"ZOO-TAG"===t.target.tagName&&(t.preventDefault(),this.handleTagSelect(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.handleTagSelect(t)}))}handleTagSelect(t){const e=this.getElAsParentBySlotName(t.target,"tag-option").querySelector("zoo-tag"),o=e.getAttribute("data-value"),i=[...this.select.querySelectorAll("option")].findIndex((t=>t.value===o));if(i>-1&&!this.select.options[i].selected){this.select.options[i].selected=!0,this.select.options[i].setAttribute("selected",""),this.select.dispatchEvent(new Event("input")),this.input.value="";const t=e.cloneNode(!0),o=document.createElement("zoo-cross-icon");o.setAttribute("tabindex",0),o.setAttribute("slot","post"),o.addEventListener("click",(()=>this.deselectOption(t,i))),o.addEventListener("keydown",(e=>{" "===e.key&&(e.preventDefault(),this.deselectOption(t,i))})),t.appendChild(o),this.inputSlot.before(t)}this.removeAttribute("show-tags"),this.input.focus()}handleInitialValues(){const t=[...this.children].filter((t=>"ZOO-INPUT-TAG-OPTION"===t.tagName)),e=this.hasAttribute("data-initial-value")?this.getAttribute("data-initial-value").split(",").map((t=>t.trim())):null;t&&e&&[...t].forEach((t=>{e.includes([...t.children][0].getAttribute("data-value"))&&this.handleTagSelect({target:t})}))}deselectOption(t,e){t.remove(),this.select.options[e].selected=!1,this.select.options[e].removeAttribute("selected"),this.select.dispatchEvent(new Event("input")),this.input.focus()}getElAsParentBySlotName(t,e){if(t.getAttribute("slot")===e)return t;let o=t.parentElement;for(;o&&o.getAttribute("slot")!==e;)o=o.parentElement;return o}}window.customElements.get("zoo-input-tag")||window.customElements.define("zoo-input-tag",InputTag);class Paginator extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>.box,button,nav{display:flex}:host{min-width:inherit;display:none}.box{align-items:center;font-size:14px;width:max-content;position:var(--paginator-position, \'initial\');right:var(--right, \'unset\')}:host([currentpage]){display:flex}nav{align-items:center;border:1px solid #e6e6e6;border-radius:5px;padding:15px}button{cursor:pointer;opacity:1;transition:opacity .1s;background:0 0;border:0;padding:0;font-size:inherit;border-radius:5px;margin:0 2px}button:active{opacity:.5}button:focus,button:hover{background:#f2f3f4}button.hidden{display:none}.page-element{padding:4px 8px}.page-element.active{background:var(--primary-ultralight);color:var(--primary-dark)}zoo-arrow-icon{pointer-events:none}.prev zoo-arrow-icon{transform:rotate(90deg)}.next zoo-arrow-icon{transform:rotate(-90deg)}</style><div class="box"><slot name="pagesizeselector"></slot><nav><button type="button" class="prev"><zoo-arrow-icon title="prev page"></zoo-arrow-icon></button> <button type="button" class="next"><zoo-arrow-icon title="next page"></zoo-arrow-icon></button></nav></div><template id="dots"><div class="page-element-dots">...</div></template><template id="pages"><button type="button" class="page-element"></button></template>',e(ArrowDownIcon),this.prev=this.shadowRoot.querySelector(".prev"),this.next=this.shadowRoot.querySelector(".next"),this.dots=this.shadowRoot.querySelector("#dots").content,this.pages=this.shadowRoot.querySelector("#pages").content,this.shadowRoot.addEventListener("click",(t=>{const e=t.target.getAttribute("page");e?this.goToPage(e):t.target.classList.contains("prev")?this.goToPage(+this.getAttribute("currentpage")-1):t.target.classList.contains("next")&&this.goToPage(+this.getAttribute("currentpage")+1)}))}goToPage(t){this.setAttribute("currentpage",t),this.dispatchEvent(new CustomEvent("pageChange",{detail:{pageNumber:t},bubbles:!0,composed:!0}))}static get observedAttributes(){return["maxpages","currentpage","prev-page-title","next-page-title"]}handleHideShowArrows(){1==this.getAttribute("currentpage")?this.prev.classList.add("hidden"):this.prev.classList.remove("hidden"),+this.getAttribute("currentpage")>=+this.getAttribute("maxpages")?this.next.classList.add("hidden"):this.next.classList.remove("hidden")}rerenderPageButtons(){this.shadowRoot.querySelectorAll('*[class^="page-element"]').forEach((t=>t.remove()));const t=+this.getAttribute("currentpage"),e=this.getAttribute("maxpages");for(let o=e;o>0;o--)if(1==o||o==t-1||o==t||o==t+1||o==e){const e=this.pages.cloneNode(!0).firstElementChild;e.setAttribute("page",o),e.setAttribute("title",o),t==o&&e.classList.add("active"),e.textContent=o,this.prev.after(e)}else o!=t-2&&t+2!=o||this.prev.after(this.dots.cloneNode(!0))}attributeChangedCallback(t,e,o){"currentpage"==t||"maxpages"==t?(this.handleHideShowArrows(),this.rerenderPageButtons()):"prev-page-title"===t?this.shadowRoot.querySelector(".prev zoo-arrow-icon").setAttribute("title",o):"next-page-title"===t&&this.shadowRoot.querySelector(".next zoo-arrow-icon").setAttribute("title",o)}}window.customElements.get("zoo-paginator")||window.customElements.define("zoo-paginator",Paginator);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:#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(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);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 rgba(0,0,0,.2);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);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:rgba(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 rgba(0,0,0,.2);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 rgba(0,0,0,.4)}: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:#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>',e(Paginator,GridHeader,GridRow);const t=this.shadowRoot.querySelector('slot[name="headercell"]');t.addEventListener("slotchange",o((()=>{const e=t.assignedElements();this.style.setProperty("--grid-column-num",e.length),e.forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","columnheader")})),this.hasAttribute("reorderable")&&e.forEach((t=>this.handleDraggableHeader(t))),this.hasAttribute("resizable")&&this.handleResizableAttributeChange()})));const i=this.shadowRoot.querySelector('slot[name="row"]');i.addEventListener("slotchange",o((()=>{i.assignedElements().forEach((t=>{t.setAttribute("role","row"),"ZOO-GRID-ROW"===t.tagName?[...t.querySelector('*[slot="row-details"]').children].forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","cell")})):[...t.children].forEach(((t,e)=>{t.setAttribute("column",e+1),t.setAttribute("role","cell")}))}))}))),this.addEventListener("sortChange",(t=>{this.prevSortedHeader&&!t.target.isEqualNode(this.prevSortedHeader)&&this.prevSortedHeader.removeAttribute("sortstate"),this.prevSortedHeader=t.target}))}static get observedAttributes(){return["currentpage","maxpages","resizable","reorderable","prev-page-title","next-page-title"]}attributeChangedCallback(t,e,o){"resizable"==t?this.handleResizableAttributeChange():"reorderable"==t&&this.hasAttribute("reorderable")?this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((t=>this.handleDraggableHeader(t))):["maxpages","currentpage","prev-page-title","next-page-title"].includes(t)&&this.shadowRoot.querySelector("zoo-paginator").setAttribute(t,o)}resizeCallback(t){t.forEach((t=>{const e=t.target.getAttribute("column"),o=t.contentRect.width;this.querySelectorAll(`[column="${e}"]`).forEach((t=>t.style.width=`${o}px`))}))}handleResizableAttributeChange(){this.hasAttribute("resizable")&&(this.resizeObserver=this.resizeObserver||new ResizeObserver(o(this.resizeCallback.bind(this))),this.shadowRoot.querySelector('slot[name="headercell"]').assignedElements().forEach((t=>this.resizeObserver.observe(t))))}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",o((()=>{t.classList.add("drag-over"),this.prevDraggedOverHeader=t}))),t.addEventListener("dragleave",(()=>t.classList.remove("drag-over"))),t.addEventListener("drop",(t=>this.handleDrop(t))))}handleDrop(t){this.prevDraggedOverHeader&&this.prevDraggedOverHeader.classList.remove("drag-over");const e=t.dataTransfer.getData("text"),o=t.target.getAttribute("column");o!=e&&(this.querySelectorAll(`[column="${e}"]`).forEach((t=>{const i=t.parentElement.querySelector(`[column="${o}"]`);o>e?i.after(t):i.before(t)})),this.shadowRoot.querySelector('slot[name="row"]').assignedElements().forEach((t=>{"ZOO-GRID-ROW"===t.tagName?[...t.shadowRoot.querySelector('slot[name="row-details"]').assignedElements()[0].children].forEach(((t,e)=>t.setAttribute("column",e+1))):[...t.children].forEach(((t,e)=>t.setAttribute("column",e+1)))})))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}}window.customElements.get("zoo-grid")||window.customElements.define("zoo-grid",ZooGrid);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:#F2F3F4;--color-mid:#F2F3F4;--color-dark:#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>",e(Button)}connectedCallback(){const t=this.shadowRoot.querySelector("slot");this.registerSlotChangeListener(t),this.registerButtonChangeHandler(t)}registerSlotChangeListener(t){t.addEventListener("slotchange",o((()=>{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);class Header extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:style}header{display:flex;align-items:center;padding:0 25px;height:70px}::slotted(img){height:46px;padding:5px 25px 5px 0;cursor:pointer}::slotted([slot=headertext]){color:var(--primary-mid)}</style><header><slot name="img"></slot><slot name="headertext"></slot><slot></slot></header>'}}window.customElements.get("zoo-header")||window.customElements.define("zoo-header",Header);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:rgba(0,0,0,var(--zoo-modal-opacity,.8));opacity:0;transition:opacity .3s;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 (max-width:544px){.dialog-content{padding:25px}}@media only screen and (max-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>',e(CrossIcon),this.shadowRoot.querySelector(".close").addEventListener("click",(()=>this.closeModal()));const t=this.shadowRoot.querySelector(".box");t.addEventListener("click",(e=>{e.target==t&&this.closeModal()})),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])']}connectedCallback(){this.hidden=!0}static get observedAttributes(){return["closelabel"]}attributeChangedCallback(t,e,o){this.shadowRoot.querySelector("zoo-cross-icon").setAttribute("title",o)}openModal(){this.style.display="block",this.toggleModalClass(),this.shadowRoot.querySelector("button").focus(),document.addEventListener("keyup",(t=>{"Escape"===t.key&&this.closeModal(),"Tab"===t.key&&this.maintainFocus(t.shiftKey)}))}maintainFocus(t){const e=this.shadowRoot.querySelector("button"),o=[...this.querySelectorAll(this.focusableSelectors.join(","))],i=!o.some((t=>t.isEqualNode(document.activeElement))),s=!e.isEqualNode(this.shadowRoot.activeElement);i&&s&&(t?o[o.length-1].focus():e.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);class Footer extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:style}nav{display:flex;justify-content:center;background:linear-gradient(to right,var(--primary-mid),var(--primary-light));padding:10px 30px}::slotted(zoo-link){width:max-content}</style><footer><nav><slot></slot></nav><slot name="additional-content"></slot></footer>'}}window.customElements.get("zoo-footer")||window.customElements.define("zoo-footer",Footer);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>",e(AttentionIcon)}}window.customElements.get("zoo-feedback")||window.customElements.define("zoo-feedback",Feedback);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:rgba(255,255,255,.2)}:host([direction=vertical]) ::slotted(*){padding:10px 5px;color:initial;box-sizing:border-box}:host([direction=vertical]) ::slotted(:focus),:host([direction=vertical]) ::slotted(:hover){background:rgba(0,0,0,.07)}</style><nav><slot></slot></nav>"}}window.customElements.get("zoo-navigation")||window.customElements.define("zoo-navigation",Navigation);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 rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(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);class CollapsableListItem extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{padding:0 10px;display:flex;flex-direction:column}:host([border-visible]){margin:8px 0}details{padding:10px}:host([border-visible]) details{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}details[open]{color:var(--primary-dark);border:1px solid var(--primary-mid);border-radius:3px}summary{cursor:pointer;color:var(--primary-mid);font-weight:700}</style><details><summary><slot name="header"></slot></summary><slot name="content"></slot></details>',this.details=this.shadowRoot.querySelector("details"),this.details.addEventListener("toggle",(t=>{this.shadowRoot.host.dispatchEvent(new CustomEvent("toggle",{detail:t.target.open,composed:!0}))}))}close(){this.details.open=!1}}window.customElements.get("zoo-collapsable-list-item")||window.customElements.define("zoo-collapsable-list-item",CollapsableListItem);class CollapsableList extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="<style>:host{display:flex;flex-direction:column}</style><slot></slot>",e(CollapsableListItem);const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",(()=>{const e=t.assignedElements();e.forEach((t=>t.addEventListener("toggle",(o=>{o.detail&&!this.hasAttribute("disable-autoclose")&&e.forEach((e=>!e.isEqualNode(t)&&e.close()))})))),e.forEach((t=>{t.hasAttribute("opened-by-default")&&(t.details.open=!0)}))}))}}window.customElements.get("zoo-collapsable-list")||window.customElements.define("zoo-collapsable-list",CollapsableList);class Spinner extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='<style>:host{contain:layout}svg{position:absolute;left:calc(50% - 60px);top:calc(50% - 60px);right:0;bottom:0;height:120px;width:120px;transform-origin:center center;animation:2s linear infinite rotate;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);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;line-height:16px;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);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--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,o){this.shadowRoot.querySelector("svg title").textContent=o}}window.customElements.get("zoo-paw-icon")||window.customElements.define("zoo-paw-icon",PawIcon),t.ArrowDownIcon=ArrowDownIcon,t.AttentionIcon=AttentionIcon,t.Button=Button,t.ButtonGroup=ButtonGroup,t.Checkbox=Checkbox,t.CollapsableList=CollapsableList,t.CollapsableListItem=CollapsableListItem,t.CrossIcon=CrossIcon,t.DateRange=DateRange,t.Feedback=Feedback,t.Footer=Footer,t.GridHeader=GridHeader,t.GridRow=GridRow,t.Header=Header,t.InfoMessage=InfoMessage,t.Input=Input,t.InputTag=InputTag,t.Label=Label,t.Link=Link,t.Modal=Modal,t.Navigation=Navigation,t.Paginator=Paginator,t.PawIcon=PawIcon,t.Preloader=Preloader,t.QuantityControl=QuantityControl,t.Radio=Radio,t.SearchableSelect=SearchableSelect,t.Select=Select,t.Spinner=Spinner,t.Tag=Tag,t.Toast=Toast,t.ToggleSwitch=ToggleSwitch,t.Tooltip=Tooltip,t.ZooGrid=ZooGrid,t.registerComponents=e,Object.defineProperty(t,"__esModule",{value:!0})}({});
|
|
2
2
|
//# sourceMappingURL=zoo-web-components.js.map
|
package/package.json
CHANGED
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@zooplus/zoo-web-components",
|
|
3
|
-
"version": "10.3.
|
|
4
|
-
"main": "dist/zoo-web-components.js",
|
|
5
|
-
"sideEffects": false,
|
|
6
|
-
"files": [
|
|
7
|
-
"dist/*.js",
|
|
8
|
-
"dist/**/*.js"
|
|
9
|
-
],
|
|
10
|
-
"type": "module",
|
|
11
|
-
"module": "dist/esm/zoo-web-components.js",
|
|
12
|
-
"description": "Set of web-components implementing zoo+ style guide",
|
|
13
|
-
"person": "Yuriy Kravets <yuriy.kravets@zooplus.com>",
|
|
14
|
-
"devDependencies": {
|
|
15
|
-
"axe-core": "^4.3.3",
|
|
16
|
-
"clean-css": "^5.1.5",
|
|
17
|
-
"concurrently": "^6.2.1",
|
|
18
|
-
"cross-env": "^7.0.3",
|
|
19
|
-
"eslint": "^7.32.0",
|
|
20
|
-
"html-minifier": "^4.0.0",
|
|
21
|
-
"html-validate": "^
|
|
22
|
-
"jasmine": "^3.9.0",
|
|
23
|
-
"nyc": "^15.1.0",
|
|
24
|
-
"puppeteer": "^
|
|
25
|
-
"puppeteer-to-istanbul": "^1.4.0",
|
|
26
|
-
"rollup": "^2.56.3",
|
|
27
|
-
"rollup-plugin-terser": "^7.0.2",
|
|
28
|
-
"stylelint": "^13.13.1",
|
|
29
|
-
"stylelint-config-standard": "^22.0.0"
|
|
30
|
-
},
|
|
31
|
-
"scripts": {
|
|
32
|
-
"start": "concurrently -k \"node server.js docs\" \"cross-env NODE_ENV=local rollup -c -w\"",
|
|
33
|
-
"build": "rollup -c",
|
|
34
|
-
"pretest": "cross-env NODE_ENV=local npm run build",
|
|
35
|
-
"test": "concurrently -k -s first \"nyc --reporter=lcov --reporter=text-summary jasmine\" \"node server.js docs\"",
|
|
36
|
-
"prepublishOnly": "npm run lint && npm test && npm run build",
|
|
37
|
-
"lint": "eslint src/**/*.js && stylelint src/**/*.css && html-validate src/**/*.html"
|
|
38
|
-
},
|
|
39
|
-
"repository": {
|
|
40
|
-
"type": "git",
|
|
41
|
-
"url": "git+https://github.com/zooplus/zoo-web-components.git"
|
|
42
|
-
},
|
|
43
|
-
"keywords": [
|
|
44
|
-
"web-components",
|
|
45
|
-
"shadow-dom",
|
|
46
|
-
"custom-elements",
|
|
47
|
-
"javascript",
|
|
48
|
-
"css",
|
|
49
|
-
"html"
|
|
50
|
-
],
|
|
51
|
-
"author": "Yuriy Kravets",
|
|
52
|
-
"license": "MIT",
|
|
53
|
-
"bugs": {
|
|
54
|
-
"url": "https://github.com/zooplus/zoo-web-components/issues"
|
|
55
|
-
},
|
|
56
|
-
"homepage": "https://github.com/zooplus/zoo-web-components#readme"
|
|
57
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@zooplus/zoo-web-components",
|
|
3
|
+
"version": "10.3.3",
|
|
4
|
+
"main": "dist/zoo-web-components.js",
|
|
5
|
+
"sideEffects": false,
|
|
6
|
+
"files": [
|
|
7
|
+
"dist/*.js",
|
|
8
|
+
"dist/**/*.js"
|
|
9
|
+
],
|
|
10
|
+
"type": "module",
|
|
11
|
+
"module": "dist/esm/zoo-web-components.js",
|
|
12
|
+
"description": "Set of web-components implementing zoo+ style guide",
|
|
13
|
+
"person": "Yuriy Kravets <yuriy.kravets@zooplus.com>",
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"axe-core": "^4.3.3",
|
|
16
|
+
"clean-css": "^5.1.5",
|
|
17
|
+
"concurrently": "^6.2.1",
|
|
18
|
+
"cross-env": "^7.0.3",
|
|
19
|
+
"eslint": "^7.32.0",
|
|
20
|
+
"html-minifier": "^4.0.0",
|
|
21
|
+
"html-validate": "^6.8.0",
|
|
22
|
+
"jasmine": "^3.9.0",
|
|
23
|
+
"nyc": "^15.1.0",
|
|
24
|
+
"puppeteer": "^13.6.0",
|
|
25
|
+
"puppeteer-to-istanbul": "^1.4.0",
|
|
26
|
+
"rollup": "^2.56.3",
|
|
27
|
+
"rollup-plugin-terser": "^7.0.2",
|
|
28
|
+
"stylelint": "^13.13.1",
|
|
29
|
+
"stylelint-config-standard": "^22.0.0"
|
|
30
|
+
},
|
|
31
|
+
"scripts": {
|
|
32
|
+
"start": "concurrently -k \"node server.js docs\" \"cross-env NODE_ENV=local rollup -c -w\"",
|
|
33
|
+
"build": "rollup -c",
|
|
34
|
+
"pretest": "cross-env NODE_ENV=local npm run build",
|
|
35
|
+
"test": "concurrently -k -s first \"nyc --reporter=lcov --reporter=text-summary jasmine\" \"node server.js docs\"",
|
|
36
|
+
"prepublishOnly": "npm run lint && npm test && npm run build",
|
|
37
|
+
"lint": "eslint src/**/*.js && stylelint src/**/*.css && html-validate src/**/*.html"
|
|
38
|
+
},
|
|
39
|
+
"repository": {
|
|
40
|
+
"type": "git",
|
|
41
|
+
"url": "git+https://github.com/zooplus/zoo-web-components.git"
|
|
42
|
+
},
|
|
43
|
+
"keywords": [
|
|
44
|
+
"web-components",
|
|
45
|
+
"shadow-dom",
|
|
46
|
+
"custom-elements",
|
|
47
|
+
"javascript",
|
|
48
|
+
"css",
|
|
49
|
+
"html"
|
|
50
|
+
],
|
|
51
|
+
"author": "Yuriy Kravets",
|
|
52
|
+
"license": "MIT",
|
|
53
|
+
"bugs": {
|
|
54
|
+
"url": "https://github.com/zooplus/zoo-web-components/issues"
|
|
55
|
+
},
|
|
56
|
+
"homepage": "https://github.com/zooplus/zoo-web-components#readme"
|
|
57
|
+
}
|