@kubex/zinc 1.1.33 → 1.1.34
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.
|
@@ -47,6 +47,79 @@
|
|
|
47
47
|
}
|
|
48
48
|
]
|
|
49
49
|
},
|
|
50
|
+
{
|
|
51
|
+
"kind": "javascript-module",
|
|
52
|
+
"path": "components/action-bar/action-bar.js",
|
|
53
|
+
"declarations": [
|
|
54
|
+
{
|
|
55
|
+
"kind": "class",
|
|
56
|
+
"description": "",
|
|
57
|
+
"name": "ZnActionBar",
|
|
58
|
+
"cssProperties": [
|
|
59
|
+
{
|
|
60
|
+
"description": "An example CSS custom property.",
|
|
61
|
+
"name": "--example"
|
|
62
|
+
}
|
|
63
|
+
],
|
|
64
|
+
"cssParts": [
|
|
65
|
+
{
|
|
66
|
+
"description": "The component's base wrapper.",
|
|
67
|
+
"name": "base"
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
"slots": [
|
|
71
|
+
{
|
|
72
|
+
"description": "The default slot.",
|
|
73
|
+
"name": ""
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"description": "An example slot.",
|
|
77
|
+
"name": "example"
|
|
78
|
+
}
|
|
79
|
+
],
|
|
80
|
+
"members": [
|
|
81
|
+
{
|
|
82
|
+
"kind": "field",
|
|
83
|
+
"name": "localize",
|
|
84
|
+
"privacy": "private",
|
|
85
|
+
"readonly": true,
|
|
86
|
+
"default": "new LocalizeController(this)"
|
|
87
|
+
}
|
|
88
|
+
],
|
|
89
|
+
"events": [
|
|
90
|
+
{
|
|
91
|
+
"description": "Emitted as an example.",
|
|
92
|
+
"name": "zn-event-name"
|
|
93
|
+
}
|
|
94
|
+
],
|
|
95
|
+
"superclass": {
|
|
96
|
+
"name": "ZincElement",
|
|
97
|
+
"module": "/src/internal/zinc-element"
|
|
98
|
+
},
|
|
99
|
+
"summary": "Short summary of the component's intended use.",
|
|
100
|
+
"tagNameWithoutPrefix": "action-bar",
|
|
101
|
+
"tagName": "zn-action-bar",
|
|
102
|
+
"customElement": true,
|
|
103
|
+
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
|
|
104
|
+
"documentation": "https://zinc.style/components/action-bar",
|
|
105
|
+
"status": "experimental",
|
|
106
|
+
"since": "1.0",
|
|
107
|
+
"dependencies": [
|
|
108
|
+
"zn-example"
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
],
|
|
112
|
+
"exports": [
|
|
113
|
+
{
|
|
114
|
+
"kind": "js",
|
|
115
|
+
"name": "default",
|
|
116
|
+
"declaration": {
|
|
117
|
+
"name": "ZnActionBar",
|
|
118
|
+
"module": "components/action-bar/action-bar.js"
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
},
|
|
50
123
|
{
|
|
51
124
|
"kind": "javascript-module",
|
|
52
125
|
"path": "components/alert/alert.js",
|
|
@@ -223,79 +296,6 @@
|
|
|
223
296
|
}
|
|
224
297
|
]
|
|
225
298
|
},
|
|
226
|
-
{
|
|
227
|
-
"kind": "javascript-module",
|
|
228
|
-
"path": "components/action-bar/action-bar.js",
|
|
229
|
-
"declarations": [
|
|
230
|
-
{
|
|
231
|
-
"kind": "class",
|
|
232
|
-
"description": "",
|
|
233
|
-
"name": "ZnActionBar",
|
|
234
|
-
"cssProperties": [
|
|
235
|
-
{
|
|
236
|
-
"description": "An example CSS custom property.",
|
|
237
|
-
"name": "--example"
|
|
238
|
-
}
|
|
239
|
-
],
|
|
240
|
-
"cssParts": [
|
|
241
|
-
{
|
|
242
|
-
"description": "The component's base wrapper.",
|
|
243
|
-
"name": "base"
|
|
244
|
-
}
|
|
245
|
-
],
|
|
246
|
-
"slots": [
|
|
247
|
-
{
|
|
248
|
-
"description": "The default slot.",
|
|
249
|
-
"name": ""
|
|
250
|
-
},
|
|
251
|
-
{
|
|
252
|
-
"description": "An example slot.",
|
|
253
|
-
"name": "example"
|
|
254
|
-
}
|
|
255
|
-
],
|
|
256
|
-
"members": [
|
|
257
|
-
{
|
|
258
|
-
"kind": "field",
|
|
259
|
-
"name": "localize",
|
|
260
|
-
"privacy": "private",
|
|
261
|
-
"readonly": true,
|
|
262
|
-
"default": "new LocalizeController(this)"
|
|
263
|
-
}
|
|
264
|
-
],
|
|
265
|
-
"events": [
|
|
266
|
-
{
|
|
267
|
-
"description": "Emitted as an example.",
|
|
268
|
-
"name": "zn-event-name"
|
|
269
|
-
}
|
|
270
|
-
],
|
|
271
|
-
"superclass": {
|
|
272
|
-
"name": "ZincElement",
|
|
273
|
-
"module": "/src/internal/zinc-element"
|
|
274
|
-
},
|
|
275
|
-
"summary": "Short summary of the component's intended use.",
|
|
276
|
-
"tagNameWithoutPrefix": "action-bar",
|
|
277
|
-
"tagName": "zn-action-bar",
|
|
278
|
-
"customElement": true,
|
|
279
|
-
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
|
|
280
|
-
"documentation": "https://zinc.style/components/action-bar",
|
|
281
|
-
"status": "experimental",
|
|
282
|
-
"since": "1.0",
|
|
283
|
-
"dependencies": [
|
|
284
|
-
"zn-example"
|
|
285
|
-
]
|
|
286
|
-
}
|
|
287
|
-
],
|
|
288
|
-
"exports": [
|
|
289
|
-
{
|
|
290
|
-
"kind": "js",
|
|
291
|
-
"name": "default",
|
|
292
|
-
"declaration": {
|
|
293
|
-
"name": "ZnActionBar",
|
|
294
|
-
"module": "components/action-bar/action-bar.js"
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
|
-
]
|
|
298
|
-
},
|
|
299
299
|
{
|
|
300
300
|
"kind": "javascript-module",
|
|
301
301
|
"path": "components/animated-button/animated-button.js",
|
|
@@ -39878,7 +39878,7 @@
|
|
|
39878
39878
|
"package": {
|
|
39879
39879
|
"name": "@kubex/zinc",
|
|
39880
39880
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
39881
|
-
"version": "1.1.
|
|
39881
|
+
"version": "1.1.34",
|
|
39882
39882
|
"author": "",
|
|
39883
39883
|
"license": "MIT"
|
|
39884
39884
|
}
|
|
@@ -13,6 +13,17 @@
|
|
|
13
13
|
}
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
|
+
{
|
|
17
|
+
"name": "zn-action-bar",
|
|
18
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
19
|
+
"attributes": [],
|
|
20
|
+
"references": [
|
|
21
|
+
{
|
|
22
|
+
"name": "Documentation",
|
|
23
|
+
"url": "https://zinc.style/components/action-bar"
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
},
|
|
16
27
|
{
|
|
17
28
|
"name": "zn-alert",
|
|
18
29
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -52,17 +63,6 @@
|
|
|
52
63
|
}
|
|
53
64
|
]
|
|
54
65
|
},
|
|
55
|
-
{
|
|
56
|
-
"name": "zn-action-bar",
|
|
57
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
58
|
-
"attributes": [],
|
|
59
|
-
"references": [
|
|
60
|
-
{
|
|
61
|
-
"name": "Documentation",
|
|
62
|
-
"url": "https://zinc.style/components/action-bar"
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
},
|
|
66
66
|
{
|
|
67
67
|
"name": "zn-animated-button",
|
|
68
68
|
"description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@kubex/zinc",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.34",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,6 +15,28 @@
|
|
|
15
15
|
"events": [],
|
|
16
16
|
"js": { "properties": [], "events": [] }
|
|
17
17
|
},
|
|
18
|
+
{
|
|
19
|
+
"name": "zn-action-bar",
|
|
20
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
21
|
+
"doc-url": "",
|
|
22
|
+
"attributes": [],
|
|
23
|
+
"slots": [
|
|
24
|
+
{ "name": "", "description": "The default slot." },
|
|
25
|
+
{ "name": "example", "description": "An example slot." }
|
|
26
|
+
],
|
|
27
|
+
"events": [
|
|
28
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
29
|
+
],
|
|
30
|
+
"js": {
|
|
31
|
+
"properties": [],
|
|
32
|
+
"events": [
|
|
33
|
+
{
|
|
34
|
+
"name": "zn-event-name",
|
|
35
|
+
"description": "Emitted as an example."
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
18
40
|
{
|
|
19
41
|
"name": "zn-alert",
|
|
20
42
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -78,28 +100,6 @@
|
|
|
78
100
|
]
|
|
79
101
|
}
|
|
80
102
|
},
|
|
81
|
-
{
|
|
82
|
-
"name": "zn-action-bar",
|
|
83
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
84
|
-
"doc-url": "",
|
|
85
|
-
"attributes": [],
|
|
86
|
-
"slots": [
|
|
87
|
-
{ "name": "", "description": "The default slot." },
|
|
88
|
-
{ "name": "example", "description": "An example slot." }
|
|
89
|
-
],
|
|
90
|
-
"events": [
|
|
91
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
92
|
-
],
|
|
93
|
-
"js": {
|
|
94
|
-
"properties": [],
|
|
95
|
-
"events": [
|
|
96
|
-
{
|
|
97
|
-
"name": "zn-event-name",
|
|
98
|
-
"description": "Emitted as an example."
|
|
99
|
-
}
|
|
100
|
-
]
|
|
101
|
-
}
|
|
102
|
-
},
|
|
103
103
|
{
|
|
104
104
|
"name": "zn-animated-button",
|
|
105
105
|
"description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
package/dist/zn.min.js
CHANGED
|
@@ -3825,7 +3825,7 @@ ${ua(this.code(o,t))}
|
|
|
3825
3825
|
`}render(){return u`
|
|
3826
3826
|
<slot></slot>
|
|
3827
3827
|
${this.hasSubmitButton?"":this.renderDefaultButton()}
|
|
3828
|
-
`}};qi.styles=T(k_),c([p()],qi.prototype,"button",2);var D6=qi;qi.define("zn-filter-wrapper");var S_=A`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:contents}.container{padding-bottom:50px}.container--scroll{height:100%;width:100%;overflow:hidden;position:relative}.container--scroll .scroll-content{height:100%;width:100%;overflow:auto;box-sizing:border-box}.setting-container__dropdown{z-index:10;position:absolute;border-radius:50%;width:32px;height:32px;padding:4px;background:rgba(var(--zn-panel,0.8));box-shadow:var(--zn-shadow-small);opacity:0.7;transition-duration:0.3s;transition-property:opacity}.setting-container__dropdown:hover{background:rgba(var(--zn-panel,1))}.setting-container__dropdown--top-end{top:var(--zn-base-gap);right:calc(var(--zn-base-gap) + var(--zn-gutter));bottom:auto}.setting-container__dropdown--top-start{top:var(--zn-base-gap);right:auto;left:calc(var(--zn-base-gap) + var(--zn-gutter));bottom:auto}.setting-container__dropdown--bottom-end{bottom:calc(var(--zn-base-gap) + var(--zn-scroll-footer-height,0px));right:calc(var(--zn-base-gap) + var(--zn-gutter));top:auto}.setting-container__dropdown--bottom-start{bottom:calc(var(--zn-base-gap) + var(--zn-scroll-footer-height,0px));left:calc(var(--zn-base-gap) + var(--zn-gutter));top:auto}.setting-container__dropdown[open],.setting-container__dropdown:hover{opacity:1}.setting-container__toggle-button::part(icon){rotate:0deg;transition:rotate 0.9s ease-in-out,color 0.9s ease-in-out}.setting-container__dropdown[open] .setting-container__toggle-button::part(icon),.setting-container__toggle-button:hover::part(icon){color:rgb(var(--zn-primary));cursor:pointer;rotate:380deg}zn-button{border-radius:var(--zn-border-radius)}.pull-tab{position:absolute;top:0;right:calc(var(--zn-base-gap) + var(--zn-gutter));z-index:20;display:flex;flex-direction:column;align-items:flex-end;max-height:100%}.pull-tab__panel{display:grid;grid-template-rows:0fr;min-height:0;overflow:hidden;background-color:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-top:none;border-bottom-width:0;border-radius:0 0 0 var(--zn-border-radius);transition:grid-template-rows 0.22s ease,border-bottom-width 0s linear 0.22s;will-change:grid-template-rows}.pull-tab--open .pull-tab__panel{grid-template-rows:1fr;border-bottom-width:1px;transition:grid-template-rows 0.22s ease,border-bottom-width 0s linear 0s}.pull-tab__panel-content{min-height:0;overflow:hidden}.pull-tab__panel-content .settings-container__dropdown-content{border:none;box-shadow:none;border-radius:0;margin-bottom:0;max-width:none;width:auto}.pull-tab--expanded .pull-tab__panel-content{overflow-y:auto}.pull-tab__tab{flex-shrink:0;background-color:rgb(var(--zn-panel));color:rgb(var(--zn-text-heading));border:1px solid rgb(var(--zn-border-color));border-top:none;border-radius:0 0 10px 10px;padding:var(--zn-spacing-x-small);cursor:pointer;display:inline-flex;align-items:center;gap:var(--zn-spacing-x-small);max-height:36px;overflow:hidden;margin-top:-1px}.pull-tab__tab:hover{background-color:rgb(var(--zn-shadow))}.pull-tab__tab:focus-visible{outline:2px solid rgb(var(--zn-primary));outline-offset:-2px}.settings-container__dropdown-content{display:flex;flex-direction:column;gap:var(--zn-spacing-
|
|
3828
|
+
`}};qi.styles=T(k_),c([p()],qi.prototype,"button",2);var D6=qi;qi.define("zn-filter-wrapper");var S_=A`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:contents}.container{padding-bottom:50px}.container--scroll{height:100%;width:100%;overflow:hidden;position:relative}.container--scroll .scroll-content{height:100%;width:100%;overflow:auto;box-sizing:border-box}.setting-container__dropdown{z-index:10;position:absolute;border-radius:50%;width:32px;height:32px;padding:4px;background:rgba(var(--zn-panel,0.8));box-shadow:var(--zn-shadow-small);opacity:0.7;transition-duration:0.3s;transition-property:opacity}.setting-container__dropdown:hover{background:rgba(var(--zn-panel,1))}.setting-container__dropdown--top-end{top:var(--zn-base-gap);right:calc(var(--zn-base-gap) + var(--zn-gutter));bottom:auto}.setting-container__dropdown--top-start{top:var(--zn-base-gap);right:auto;left:calc(var(--zn-base-gap) + var(--zn-gutter));bottom:auto}.setting-container__dropdown--bottom-end{bottom:calc(var(--zn-base-gap) + var(--zn-scroll-footer-height,0px));right:calc(var(--zn-base-gap) + var(--zn-gutter));top:auto}.setting-container__dropdown--bottom-start{bottom:calc(var(--zn-base-gap) + var(--zn-scroll-footer-height,0px));left:calc(var(--zn-base-gap) + var(--zn-gutter));top:auto}.setting-container__dropdown[open],.setting-container__dropdown:hover{opacity:1}.setting-container__toggle-button::part(icon){rotate:0deg;transition:rotate 0.9s ease-in-out,color 0.9s ease-in-out}.setting-container__dropdown[open] .setting-container__toggle-button::part(icon),.setting-container__toggle-button:hover::part(icon){color:rgb(var(--zn-primary));cursor:pointer;rotate:380deg}zn-button{border-radius:var(--zn-border-radius)}.pull-tab{position:absolute;top:0;right:calc(var(--zn-base-gap) + var(--zn-gutter));z-index:20;display:flex;flex-direction:column;align-items:flex-end;max-height:100%}.pull-tab__panel{display:grid;grid-template-rows:0fr;min-height:0;overflow:hidden;background-color:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-top:none;border-bottom-width:0;border-radius:0 0 0 var(--zn-border-radius);transition:grid-template-rows 0.22s ease,border-bottom-width 0s linear 0.22s;will-change:grid-template-rows}.pull-tab--open .pull-tab__panel{grid-template-rows:1fr;border-bottom-width:1px;transition:grid-template-rows 0.22s ease,border-bottom-width 0s linear 0s}.pull-tab__panel-content{min-height:0;overflow:hidden}.pull-tab__panel-content .settings-container__dropdown-content{border:none;box-shadow:none;border-radius:0;margin-bottom:0;max-width:none;width:auto}.pull-tab--expanded .pull-tab__panel-content{overflow-y:auto}.pull-tab__tab{flex-shrink:0;background-color:rgb(var(--zn-panel));color:rgb(var(--zn-text-heading));border:1px solid rgb(var(--zn-border-color));border-top:none;border-radius:0 0 10px 10px;padding:var(--zn-spacing-x-small);cursor:pointer;display:inline-flex;align-items:center;gap:var(--zn-spacing-x-small);max-height:36px;overflow:hidden;margin-top:-1px}.pull-tab__tab:hover{background-color:rgb(var(--zn-shadow))}.pull-tab__tab:focus-visible{outline:2px solid rgb(var(--zn-primary));outline-offset:-2px}.settings-container__dropdown-content{display:flex;flex-direction:column;gap:var(--zn-spacing-small);background-color:rgb(var(--zn-panel));padding:var(--zn-spacing-small);box-shadow:var(--zn-shadow-small);border-radius:var(--zn-border-radius);max-width:var(--zn-size-mpanel);width:-moz-fit-content;width:fit-content;z-index:20;border:1px solid rgb(var(--zn-border-color));margin-bottom:10px}`;var jr=class extends C{constructor(){super(...arguments);this.filters=[];this.position="bottom-start";this.pullTab=!1;this.open=!1;this.panelExpanded=!1;this._mutationObserver=new Dt(this,{target:null,config:{childList:!0,subtree:!0,attributes:!0},callback:t=>{for(let r of t)if(!(r.type==="attributes"&&r.attributeName==="hidden")){this.scheduleUpdateFilters();break}}});this._updateFiltersScheduled=!1;this._hiddenElements=new Set;this.handleDocumentMouseDown=t=>{if(!this.open)return;let r=this.shadowRoot?.querySelector(".pull-tab");r&&t.composedPath().includes(r)||this.hidePullTab()};this.togglePullTab=()=>{this.open?this.hidePullTab():(this.open=!0,document.addEventListener("mousedown",this.handleDocumentMouseDown,!0),this.emit("zn-show"))};this.handlePanelTransitionEnd=t=>{t.propertyName==="grid-template-rows"&&(this.panelExpanded=this.open)};this.handleContentSlotChange=()=>{this.updateFilters()};this.handleFiltersSlotChange=()=>{this.recomputeFiltersFromSlot(),this.updateFilters()}}connectedCallback(){if(super.connectedCallback(),this._store=new qr(window.sessionStorage,this.storeKey),this.recomputeFiltersFromSlot(),this.storeKey){let t=this._store.get("filters");if(t){let r=JSON.parse(t);this.filters=this.filters.map(n=>({...n,checked:Object.prototype.hasOwnProperty.call(r,n.attribute)?r[n.attribute]:n.checked}))}}this.updateFilters(),this._mutationObserver.observe(this)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown,!0),super.disconnectedCallback()}hidePullTab(){this.open=!1,this.panelExpanded=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown,!0),this.emit("zn-hide")}scheduleUpdateFilters(){this._updateFiltersScheduled||(this._updateFiltersScheduled=!0,Promise.resolve().then(()=>{this._updateFiltersScheduled=!1,this.updateFilters()}))}recomputeFiltersFromSlot(){let t=new Map(this.filters.map(a=>[a.attribute,a.checked])),r=this.querySelectorAll('[slot="filter"]'),n=[];r.forEach(a=>{let s=a.getAttribute("attribute");if(!s)return;let l=a.getAttribute("default")==="true",d=t.has(s)?!!t.get(s):l,h=a.textContent||"Unnamed Filter",m=a.getAttribute("item-selector")||"*";n.push({attribute:s,checked:d,label:h,itemSelector:m})}),this.filters=n}updateSingleFilter(t,r){let n,a=t.attribute==="*"?"":`[${t.attribute}]`;t.itemSelector&&t.itemSelector.startsWith(">")?n=qt(t.itemSelector.substring(1)+a,this,""):n=this.querySelectorAll(t.itemSelector+a),n.forEach(s=>{r?this.filters.some(d=>{if(d.attribute===t.attribute||d.checked)return!1;let h=d.attribute==="*"?"":`[${d.attribute}]`,m;return d.itemSelector&&d.itemSelector.startsWith(">")?m=qt(d.itemSelector.substring(1)+h,this,""):m=this.querySelectorAll(d.itemSelector+h),Array.from(m).includes(s)})||(s.removeAttribute("hidden"),this._hiddenElements.delete(s)):(s.setAttribute("hidden","true"),this._hiddenElements.add(s))})}updateFilters(){this._hiddenElements.forEach(t=>t.removeAttribute("hidden")),this._hiddenElements.clear(),this.filters.forEach(t=>{this.updateSingleFilter(t,t.checked)})}updateFilter(t){let r=t.target.getAttribute("data-attribute"),n=t.target.isChecked,a=this.filters.find(s=>s.attribute===r);if(a){if(this.filters=this.filters.map(s=>s.attribute===r?{...s,checked:n}:s),this.storeKey){let s=this.filters.reduce((l,d)=>(l[d.attribute]=d.checked,l),{});this._store.set("filters",JSON.stringify(s))}this.updateSingleFilter(a,n)}}render(){let t="top-start";switch(this.position){case"top-end":t="bottom-end";break;case"top-start":t="bottom-start";break;case"bottom-end":t="top-end";break;case"bottom-start":t="top-start";break}return u`
|
|
3829
3829
|
<div class="${N({container:!0,"container--scroll":!this.noScroll})}">
|
|
3830
3830
|
<div class="scroll-content">
|
|
3831
3831
|
<slot @slotchange="${this.handleContentSlotChange}"></slot>
|
package/package.json
CHANGED
|
@@ -162,9 +162,9 @@ zn-button {
|
|
|
162
162
|
.settings-container__dropdown-content {
|
|
163
163
|
display: flex;
|
|
164
164
|
flex-direction: column;
|
|
165
|
-
gap: var(--zn-spacing-
|
|
165
|
+
gap: var(--zn-spacing-small);
|
|
166
166
|
background-color: rgb(var(--zn-panel));
|
|
167
|
-
padding: var(--zn-spacing-
|
|
167
|
+
padding: var(--zn-spacing-small);
|
|
168
168
|
box-shadow: var(--zn-shadow-small);
|
|
169
169
|
border-radius: var(--zn-border-radius);
|
|
170
170
|
max-width: var(--zn-size-mpanel);
|