@kubex/zinc 1.1.113 → 1.1.114
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +74 -74
- package/dist/vscode.html-custom-data.json +11 -11
- package/dist/web-types.json +23 -23
- package/dist/zn.min.js +1 -1
- package/package.json +1 -1
- package/src/components/priority-list/priority-list.component.ts +9 -6
- package/src/components/priority-list/priority-list.test.ts +34 -0
|
@@ -56,6 +56,79 @@
|
|
|
56
56
|
}
|
|
57
57
|
]
|
|
58
58
|
},
|
|
59
|
+
{
|
|
60
|
+
"kind": "javascript-module",
|
|
61
|
+
"path": "components/action-bar/action-bar.js",
|
|
62
|
+
"declarations": [
|
|
63
|
+
{
|
|
64
|
+
"kind": "class",
|
|
65
|
+
"description": "",
|
|
66
|
+
"name": "ZnActionBar",
|
|
67
|
+
"cssProperties": [
|
|
68
|
+
{
|
|
69
|
+
"description": "An example CSS custom property.",
|
|
70
|
+
"name": "--example"
|
|
71
|
+
}
|
|
72
|
+
],
|
|
73
|
+
"cssParts": [
|
|
74
|
+
{
|
|
75
|
+
"description": "The component's base wrapper.",
|
|
76
|
+
"name": "base"
|
|
77
|
+
}
|
|
78
|
+
],
|
|
79
|
+
"slots": [
|
|
80
|
+
{
|
|
81
|
+
"description": "The default slot.",
|
|
82
|
+
"name": ""
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"description": "An example slot.",
|
|
86
|
+
"name": "example"
|
|
87
|
+
}
|
|
88
|
+
],
|
|
89
|
+
"members": [
|
|
90
|
+
{
|
|
91
|
+
"kind": "field",
|
|
92
|
+
"name": "localize",
|
|
93
|
+
"privacy": "private",
|
|
94
|
+
"readonly": true,
|
|
95
|
+
"default": "new LocalizeController(this)"
|
|
96
|
+
}
|
|
97
|
+
],
|
|
98
|
+
"events": [
|
|
99
|
+
{
|
|
100
|
+
"description": "Emitted as an example.",
|
|
101
|
+
"name": "zn-event-name"
|
|
102
|
+
}
|
|
103
|
+
],
|
|
104
|
+
"superclass": {
|
|
105
|
+
"name": "ZincElement",
|
|
106
|
+
"module": "/src/internal/zinc-element"
|
|
107
|
+
},
|
|
108
|
+
"summary": "Short summary of the component's intended use.",
|
|
109
|
+
"tagNameWithoutPrefix": "action-bar",
|
|
110
|
+
"tagName": "zn-action-bar",
|
|
111
|
+
"customElement": true,
|
|
112
|
+
"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 */",
|
|
113
|
+
"documentation": "https://zinc.style/components/action-bar",
|
|
114
|
+
"status": "experimental",
|
|
115
|
+
"since": "1.0",
|
|
116
|
+
"dependencies": [
|
|
117
|
+
"zn-example"
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
],
|
|
121
|
+
"exports": [
|
|
122
|
+
{
|
|
123
|
+
"kind": "js",
|
|
124
|
+
"name": "default",
|
|
125
|
+
"declaration": {
|
|
126
|
+
"name": "ZnActionBar",
|
|
127
|
+
"module": "components/action-bar/action-bar.js"
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
]
|
|
131
|
+
},
|
|
59
132
|
{
|
|
60
133
|
"kind": "javascript-module",
|
|
61
134
|
"path": "components/alert/alert.js",
|
|
@@ -250,79 +323,6 @@
|
|
|
250
323
|
}
|
|
251
324
|
]
|
|
252
325
|
},
|
|
253
|
-
{
|
|
254
|
-
"kind": "javascript-module",
|
|
255
|
-
"path": "components/action-bar/action-bar.js",
|
|
256
|
-
"declarations": [
|
|
257
|
-
{
|
|
258
|
-
"kind": "class",
|
|
259
|
-
"description": "",
|
|
260
|
-
"name": "ZnActionBar",
|
|
261
|
-
"cssProperties": [
|
|
262
|
-
{
|
|
263
|
-
"description": "An example CSS custom property.",
|
|
264
|
-
"name": "--example"
|
|
265
|
-
}
|
|
266
|
-
],
|
|
267
|
-
"cssParts": [
|
|
268
|
-
{
|
|
269
|
-
"description": "The component's base wrapper.",
|
|
270
|
-
"name": "base"
|
|
271
|
-
}
|
|
272
|
-
],
|
|
273
|
-
"slots": [
|
|
274
|
-
{
|
|
275
|
-
"description": "The default slot.",
|
|
276
|
-
"name": ""
|
|
277
|
-
},
|
|
278
|
-
{
|
|
279
|
-
"description": "An example slot.",
|
|
280
|
-
"name": "example"
|
|
281
|
-
}
|
|
282
|
-
],
|
|
283
|
-
"members": [
|
|
284
|
-
{
|
|
285
|
-
"kind": "field",
|
|
286
|
-
"name": "localize",
|
|
287
|
-
"privacy": "private",
|
|
288
|
-
"readonly": true,
|
|
289
|
-
"default": "new LocalizeController(this)"
|
|
290
|
-
}
|
|
291
|
-
],
|
|
292
|
-
"events": [
|
|
293
|
-
{
|
|
294
|
-
"description": "Emitted as an example.",
|
|
295
|
-
"name": "zn-event-name"
|
|
296
|
-
}
|
|
297
|
-
],
|
|
298
|
-
"superclass": {
|
|
299
|
-
"name": "ZincElement",
|
|
300
|
-
"module": "/src/internal/zinc-element"
|
|
301
|
-
},
|
|
302
|
-
"summary": "Short summary of the component's intended use.",
|
|
303
|
-
"tagNameWithoutPrefix": "action-bar",
|
|
304
|
-
"tagName": "zn-action-bar",
|
|
305
|
-
"customElement": true,
|
|
306
|
-
"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 */",
|
|
307
|
-
"documentation": "https://zinc.style/components/action-bar",
|
|
308
|
-
"status": "experimental",
|
|
309
|
-
"since": "1.0",
|
|
310
|
-
"dependencies": [
|
|
311
|
-
"zn-example"
|
|
312
|
-
]
|
|
313
|
-
}
|
|
314
|
-
],
|
|
315
|
-
"exports": [
|
|
316
|
-
{
|
|
317
|
-
"kind": "js",
|
|
318
|
-
"name": "default",
|
|
319
|
-
"declaration": {
|
|
320
|
-
"name": "ZnActionBar",
|
|
321
|
-
"module": "components/action-bar/action-bar.js"
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
]
|
|
325
|
-
},
|
|
326
326
|
{
|
|
327
327
|
"kind": "javascript-module",
|
|
328
328
|
"path": "components/animated-button/animated-button.js",
|
|
@@ -50889,7 +50889,7 @@
|
|
|
50889
50889
|
"package": {
|
|
50890
50890
|
"name": "@kubex/zinc",
|
|
50891
50891
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
50892
|
-
"version": "1.1.
|
|
50892
|
+
"version": "1.1.114",
|
|
50893
50893
|
"author": "",
|
|
50894
50894
|
"license": "MIT"
|
|
50895
50895
|
}
|
|
@@ -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.",
|
|
@@ -53,17 +64,6 @@
|
|
|
53
64
|
}
|
|
54
65
|
]
|
|
55
66
|
},
|
|
56
|
-
{
|
|
57
|
-
"name": "zn-action-bar",
|
|
58
|
-
"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.",
|
|
59
|
-
"attributes": [],
|
|
60
|
-
"references": [
|
|
61
|
-
{
|
|
62
|
-
"name": "Documentation",
|
|
63
|
-
"url": "https://zinc.style/components/action-bar"
|
|
64
|
-
}
|
|
65
|
-
]
|
|
66
|
-
},
|
|
67
67
|
{
|
|
68
68
|
"name": "zn-animated-button",
|
|
69
69
|
"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.114",
|
|
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.",
|
|
@@ -83,28 +105,6 @@
|
|
|
83
105
|
]
|
|
84
106
|
}
|
|
85
107
|
},
|
|
86
|
-
{
|
|
87
|
-
"name": "zn-action-bar",
|
|
88
|
-
"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.",
|
|
89
|
-
"doc-url": "",
|
|
90
|
-
"attributes": [],
|
|
91
|
-
"slots": [
|
|
92
|
-
{ "name": "", "description": "The default slot." },
|
|
93
|
-
{ "name": "example", "description": "An example slot." }
|
|
94
|
-
],
|
|
95
|
-
"events": [
|
|
96
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
97
|
-
],
|
|
98
|
-
"js": {
|
|
99
|
-
"properties": [],
|
|
100
|
-
"events": [
|
|
101
|
-
{
|
|
102
|
-
"name": "zn-event-name",
|
|
103
|
-
"description": "Emitted as an example."
|
|
104
|
-
}
|
|
105
|
-
]
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
108
|
{
|
|
109
109
|
"name": "zn-animated-button",
|
|
110
110
|
"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
|
@@ -4430,7 +4430,7 @@ ${Ra(this.code(i,t))}
|
|
|
4430
4430
|
${r?u`
|
|
4431
4431
|
<slot name="footer" class="panel__footer"></slot>`:null}
|
|
4432
4432
|
</div>
|
|
4433
|
-
</div>`}};Si.styles=[ot.styles,z(M2)],Si.dependencies={"zn-button":_e,"zn-button-group":Gn,"zn-dropdown":jt,"zn-header":Qu,"zn-menu":gi},c([p()],Si.prototype,"label",2),c([p({type:Object})],Si.prototype,"languages",2),c([R()],Si.prototype,"_activeLanguage",2),c([R()],Si.prototype,"_activatedLanguages",2),c([R()],Si.prototype,"_overflowIndex",2);var IL=Si;Si.define("zn-translation-group");var L2=_`@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}*,*::before,*::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:block;line-height:var(--zn-line-height-dense);--zn-priority-list-item-gap:var(--zn-spacing-2x-small);--zn-priority-list-item-padding:var(--zn-spacing-small) var(--zn-spacing-medium);--zn-priority-list-actions-gap:var(--zn-spacing-small);--zn-priority-list-handle-color:var(--zn-color-neutral-400);--zn-priority-list-priority-color:var(--zn-color-neutral-600)}.form-control{position:relative;border:none;padding:0;margin:0}.form-control__label{padding:0}.priority-list{display:flex;flex-direction:column;gap:var(--zn-priority-list-item-gap)}.priority-list--disabled{opacity:0.5;pointer-events:none}.priority-list--drag-active .priority-list__item{transition:transform 200ms ease,opacity 200ms ease,box-shadow 200ms ease}.priority-list__item{display:flex;align-items:center;gap:var(--zn-spacing-small);padding:var(--zn-priority-list-item-padding);background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:element;position:relative}.priority-list__item:hover{background:rgb(var(--zn-panel-hover,var(--zn-panel)));border-color:rgb(var(--zn-color-primary-500))}.priority-list__item:hover .priority-list__handle{color:rgb(var(--zn-color-primary-500))}.priority-list__item:focus-visible{outline:2px solid rgb(var(--zn-color-primary-500));outline-offset:-1px;border-color:rgb(var(--zn-color-primary-500))}.priority-list__item:active{cursor:grabbing}.priority-list__item--dragging{opacity:0.3;border-style:dashed;border-color:rgb(var(--zn-color-primary-400));background:rgb(var(--zn-color-primary-50,var(--zn-panel)));box-shadow:none}.priority-list__item--disabled{cursor:not-allowed;opacity:0.6}.priority-list__item--disabled:hover{background:rgb(var(--zn-panel));border-color:rgb(var(--zn-border-color))}.priority-list__handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--zn-priority-list-handle-color);cursor:grab;transition:color 150ms ease}.priority-list__handle:active{cursor:grabbing}.priority-list__priority{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:1.5em;font-size:var(--zn-font-size-small);font-weight:var(--zn-font-weight-semibold);color:var(--zn-priority-list-priority-color)}.priority-list__content{flex:1;min-width:0;overflow:hidden;pointer-events:none}.priority-list__content ::slotted(*){pointer-events:none;-webkit-user-drag:none}.priority-list__actions{display:flex;align-items:center;gap:var(--zn-priority-list-actions-gap);flex-shrink:0;pointer-events:auto}.priority-list__actions ::slotted(*){pointer-events:auto;-webkit-user-drag:none}:host([size=small]) .priority-list__item{padding:var(--zn-spacing-2x-small) var(--zn-spacing-small);font-size:var(--zn-font-size-small)}:host([size=small]) .priority-list__priority{font-size:var(--zn-font-size-x-small);min-width:1.25em}:host([size=large]) .priority-list__item{padding:var(--zn-spacing-medium) var(--zn-spacing-large);font-size:var(--zn-font-size-medium)}:host([size=large]) .priority-list__priority{font-size:var(--zn-font-size-medium);min-width:1.75em}.priority-list__collector{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.priority-list__hidden-inputs{display:none}`;function DL(o){try{return JSON.parse(o)}catch{return}}var mt=class extends k{constructor(){super(...arguments);this.formControlController=new re(this,{value:t=>JSON.stringify(t.getPriorityMap()),defaultValue:t=>t.defaultValue,setValue:(t,r)=>{if(!r||Array.isArray(r)&&r.length===0)return;let n=Array.isArray(r)?r:DL(r);Array.isArray(n)&&n.every(a=>typeof a=="string")&&(t.value=n)}});this.hasSlotController=new Y(this,"help-text","label");this.name="";this._value=[];this.defaultValue=[];this.label="";this.labelTooltip="";this.helpText="";this.form="";this.size="medium";this.disabled=!1;this.required=!1;this.priorityStart=1;this.order="";this.draggedKey=null;this.isDragging=!1;this.dragOverKey=null}get value(){return this._value}set value(t){let r=this._value;this._value=[...t],this._assignSlotNames(),this.requestUpdate("value",r)}get validity(){return dt}get validationMessage(){return""}connectedCallback(){super.connectedCallback(),this.defaultValue=[...this._value]}firstUpdated(t){super.firstUpdated(t),this.formControlController.updateValidity(),this._initializeOrderFromSlot()}_initializeOrderFromSlot(){if(this._value.length===0){let r=this._getSlottedItems().map(n=>n.getAttribute("value")||"").filter(n=>n!=="");if(this.order){let n=this.order.split(",").map(h=>h.trim()).filter(h=>h!==""),a=new Set(r),s=n.filter(h=>a.has(h)),l=new Set(s),d=r.filter(h=>!l.has(h));this._value=[...s,...d]}else this._value=r}this.defaultValue=[...this._value],this._assignSlotNames(),this._syncHiddenInputs(),this.requestUpdate()}_getSlottedItems(){let t=["label","label-tooltip","help-text"];return[...this.querySelectorAll(":scope > [value]")].filter(r=>{let n=r.getAttribute("slot");return!n||n.startsWith("_item-")||!t.includes(n)})}_assignSlotNames(){[...this.querySelectorAll(":scope > [value]")].forEach(r=>{let n=r.getAttribute("value");n&&!["label","label-tooltip","help-text"].includes(n)&&r.setAttribute("slot",`_item-${n}`)})}getPriorityMap(){return this._value.map((t,r)=>({key:t,priority:this.priorityStart+r}))}_syncHiddenInputs(){this.hiddenInputsContainer&&(this.hiddenInputsContainer.innerHTML="",this.name&&this._value.forEach((t,r)=>{let n=document.createElement("input");n.type="hidden",n.name=`${this.name}[${t}]`,n.value=String(this.priorityStart+r),this.hiddenInputsContainer.appendChild(n)}))}_moveItem(t,r){if(t===r||t<0||r<0||t>=this._value.length||r>=this._value.length)return;let n=[...this._value],[a]=n.splice(t,1);n.splice(r,0,a),this._value=n,this._assignSlotNames(),this._syncHiddenInputs(),this.requestUpdate(),this.emit("zn-change"),this.emit("zn-reorder"),this._submitForm()}_submitForm(){if(this.formAction===void 0||this.formAction===null)return;
|
|
4433
|
+
</div>`}};Si.styles=[ot.styles,z(M2)],Si.dependencies={"zn-button":_e,"zn-button-group":Gn,"zn-dropdown":jt,"zn-header":Qu,"zn-menu":gi},c([p()],Si.prototype,"label",2),c([p({type:Object})],Si.prototype,"languages",2),c([R()],Si.prototype,"_activeLanguage",2),c([R()],Si.prototype,"_activatedLanguages",2),c([R()],Si.prototype,"_overflowIndex",2);var IL=Si;Si.define("zn-translation-group");var L2=_`@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}*,*::before,*::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:block;line-height:var(--zn-line-height-dense);--zn-priority-list-item-gap:var(--zn-spacing-2x-small);--zn-priority-list-item-padding:var(--zn-spacing-small) var(--zn-spacing-medium);--zn-priority-list-actions-gap:var(--zn-spacing-small);--zn-priority-list-handle-color:var(--zn-color-neutral-400);--zn-priority-list-priority-color:var(--zn-color-neutral-600)}.form-control{position:relative;border:none;padding:0;margin:0}.form-control__label{padding:0}.priority-list{display:flex;flex-direction:column;gap:var(--zn-priority-list-item-gap)}.priority-list--disabled{opacity:0.5;pointer-events:none}.priority-list--drag-active .priority-list__item{transition:transform 200ms ease,opacity 200ms ease,box-shadow 200ms ease}.priority-list__item{display:flex;align-items:center;gap:var(--zn-spacing-small);padding:var(--zn-priority-list-item-padding);background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:element;position:relative}.priority-list__item:hover{background:rgb(var(--zn-panel-hover,var(--zn-panel)));border-color:rgb(var(--zn-color-primary-500))}.priority-list__item:hover .priority-list__handle{color:rgb(var(--zn-color-primary-500))}.priority-list__item:focus-visible{outline:2px solid rgb(var(--zn-color-primary-500));outline-offset:-1px;border-color:rgb(var(--zn-color-primary-500))}.priority-list__item:active{cursor:grabbing}.priority-list__item--dragging{opacity:0.3;border-style:dashed;border-color:rgb(var(--zn-color-primary-400));background:rgb(var(--zn-color-primary-50,var(--zn-panel)));box-shadow:none}.priority-list__item--disabled{cursor:not-allowed;opacity:0.6}.priority-list__item--disabled:hover{background:rgb(var(--zn-panel));border-color:rgb(var(--zn-border-color))}.priority-list__handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--zn-priority-list-handle-color);cursor:grab;transition:color 150ms ease}.priority-list__handle:active{cursor:grabbing}.priority-list__priority{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:1.5em;font-size:var(--zn-font-size-small);font-weight:var(--zn-font-weight-semibold);color:var(--zn-priority-list-priority-color)}.priority-list__content{flex:1;min-width:0;overflow:hidden;pointer-events:none}.priority-list__content ::slotted(*){pointer-events:none;-webkit-user-drag:none}.priority-list__actions{display:flex;align-items:center;gap:var(--zn-priority-list-actions-gap);flex-shrink:0;pointer-events:auto}.priority-list__actions ::slotted(*){pointer-events:auto;-webkit-user-drag:none}:host([size=small]) .priority-list__item{padding:var(--zn-spacing-2x-small) var(--zn-spacing-small);font-size:var(--zn-font-size-small)}:host([size=small]) .priority-list__priority{font-size:var(--zn-font-size-x-small);min-width:1.25em}:host([size=large]) .priority-list__item{padding:var(--zn-spacing-medium) var(--zn-spacing-large);font-size:var(--zn-font-size-medium)}:host([size=large]) .priority-list__priority{font-size:var(--zn-font-size-medium);min-width:1.75em}.priority-list__collector{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.priority-list__hidden-inputs{display:none}`;function DL(o){try{return JSON.parse(o)}catch{return}}var mt=class extends k{constructor(){super(...arguments);this.formControlController=new re(this,{value:t=>JSON.stringify(t.getPriorityMap()),defaultValue:t=>t.defaultValue,setValue:(t,r)=>{if(!r||Array.isArray(r)&&r.length===0)return;let n=Array.isArray(r)?r:DL(r);Array.isArray(n)&&n.every(a=>typeof a=="string")&&(t.value=n)}});this.hasSlotController=new Y(this,"help-text","label");this.name="";this._value=[];this.defaultValue=[];this.label="";this.labelTooltip="";this.helpText="";this.form="";this.size="medium";this.disabled=!1;this.required=!1;this.priorityStart=1;this.order="";this.draggedKey=null;this.isDragging=!1;this.dragOverKey=null}get value(){return this._value}set value(t){let r=this._value;this._value=[...t],this._assignSlotNames(),this.requestUpdate("value",r)}get validity(){return dt}get validationMessage(){return""}connectedCallback(){super.connectedCallback(),this.defaultValue=[...this._value]}firstUpdated(t){super.firstUpdated(t),this.formControlController.updateValidity(),this._initializeOrderFromSlot()}_initializeOrderFromSlot(){if(this._value.length===0){let r=this._getSlottedItems().map(n=>n.getAttribute("value")||"").filter(n=>n!=="");if(this.order){let n=this.order.split(",").map(h=>h.trim()).filter(h=>h!==""),a=new Set(r),s=n.filter(h=>a.has(h)),l=new Set(s),d=r.filter(h=>!l.has(h));this._value=[...s,...d]}else this._value=r}this.defaultValue=[...this._value],this._assignSlotNames(),this._syncHiddenInputs(),this.requestUpdate()}_getSlottedItems(){let t=["label","label-tooltip","help-text"];return[...this.querySelectorAll(":scope > [value]")].filter(r=>{let n=r.getAttribute("slot");return!n||n.startsWith("_item-")||!t.includes(n)})}_assignSlotNames(){[...this.querySelectorAll(":scope > [value]")].forEach(r=>{let n=r.getAttribute("value");n&&!["label","label-tooltip","help-text"].includes(n)&&r.setAttribute("slot",`_item-${n}`)})}getPriorityMap(){return this._value.map((t,r)=>({key:t,priority:this.priorityStart+r}))}_syncHiddenInputs(){this.hiddenInputsContainer&&(this.hiddenInputsContainer.innerHTML="",this.name&&this._value.forEach((t,r)=>{let n=document.createElement("input");n.type="hidden",n.name=`${this.name}[${t}]`,n.value=String(this.priorityStart+r),this.hiddenInputsContainer.appendChild(n)}))}_moveItem(t,r){if(t===r||t<0||r<0||t>=this._value.length||r>=this._value.length)return;let n=[...this._value],[a]=n.splice(t,1);n.splice(r,0,a),this._value=n,this._assignSlotNames(),this._syncHiddenInputs(),this.requestUpdate(),this.emit("zn-change"),this.emit("zn-reorder"),this._submitForm()}_submitForm(){if(this.formAction===void 0||this.formAction===null)return;if(this.getForm()){let r=document.createElement("input");r.type="submit",this.formAction&&r.setAttribute("formaction",this.formAction),this.formControlController.submit(r)}else if(this.formAction){let r=document.createElement("form");r.method="post",r.action=this.formAction,r.hidden=!0,this._value.forEach((n,a)=>{if(this.name){let s=document.createElement("input");s.type="hidden",s.name=`${this.name}[${n}]`,s.value=String(this.priorityStart+a),r.appendChild(s)}}),document.body.appendChild(r),r.requestSubmit(),r.remove()}}_handleDragStart(t,r){if(this.disabled){t.preventDefault();return}this.draggedKey=r,this.isDragging=!0,t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",r))}_handleDragEnd(){this.isDragging&&(this._syncHiddenInputs(),this.emit("zn-change"),this.emit("zn-reorder"),this._submitForm()),this.draggedKey=null,this.dragOverKey=null,this.isDragging=!1}_handleDragOver(t,r){if(t.preventDefault(),!this.draggedKey||this.draggedKey===r)return;t.dataTransfer&&(t.dataTransfer.dropEffect="move");let n=this._value.indexOf(this.draggedKey),a=this._value.indexOf(r);if(n===-1||a===-1||n===a)return;let s=[...this._value],[l]=s.splice(n,1);s.splice(a,0,l),this._value=s,this._assignSlotNames(),this.requestUpdate(),this.dragOverKey=r}_handleDragLeave(t,r){let n=t.relatedTarget,a=t.currentTarget;n&&a.contains(n)||this.dragOverKey===r&&(this.dragOverKey=null)}_handleDrop(t){t.preventDefault()}_handleKeyDown(t,r){if(this.disabled)return;let n=this._value.indexOf(r);if(n===-1)return;let a=null;switch(t.key){case"ArrowUp":n>0&&(a=n-1);break;case"ArrowDown":n<this._value.length-1&&(a=n+1);break;case"Home":n>0&&(a=0);break;case"End":n<this._value.length-1&&(a=this._value.length-1);break;default:return}a!==null&&(t.preventDefault(),this._moveItem(n,a),this.updateComplete.then(()=>{this.shadowRoot?.querySelectorAll(".priority-list__item")?.[a]?.focus()}))}_handleSlotChange(){let t=[...this.querySelectorAll(":scope > [value]")],r=["label","label-tooltip","help-text"],n=t.filter(h=>{let m=h.getAttribute("slot");return!m||m.startsWith("_item-")||!r.includes(m)}).map(h=>h.getAttribute("value")||"").filter(h=>h!=="");if(n.length===0&&this._value.length>0)return;let a=new Set(this._value),s=new Set(n),l=n.filter(h=>!a.has(h)),d=this._value.filter(h=>s.has(h));(l.length>0||d.length!==this._value.length)&&(this._value=[...d,...l],this._assignSlotNames(),this._syncHiddenInputs(),this.requestUpdate())}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(t=""){}updated(t){super.updated(t),(t.has("value")||t.has("name")||t.has("priorityStart"))&&this._syncHiddenInputs()}render(){let t=this.hasSlotController.test("label"),r=this.hasSlotController.test("label-tooltip"),n=this.hasSlotController.test("help-text"),a=this.label?!0:t,s=this.labelTooltip?!0:r,l=this.helpText?!0:n;return u`
|
|
4434
4434
|
<fieldset
|
|
4435
4435
|
part="form-control"
|
|
4436
4436
|
class=${q({"form-control":!0,"form-control--small":this.size==="small","form-control--medium":this.size==="medium","form-control--large":this.size==="large","form-control--has-label":a,"form-control--has-label-tooltip":s,"form-control--has-help-text":l})}
|
package/package.json
CHANGED
|
@@ -297,15 +297,16 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
|
|
|
297
297
|
|
|
298
298
|
const form = this.getForm();
|
|
299
299
|
if (form) {
|
|
300
|
-
|
|
300
|
+
// Submitting through the controller announces the form before it is
|
|
301
|
+
// submitted, which is what lets a host intercept the submit: a submit
|
|
302
|
+
// event raised on a form inside a shadow root never reaches the document,
|
|
303
|
+
// so submitting it directly navigates the page instead.
|
|
304
|
+
const submitter = document.createElement('input');
|
|
301
305
|
submitter.type = 'submit';
|
|
302
|
-
submitter.hidden = true;
|
|
303
306
|
if (this.formAction) {
|
|
304
307
|
submitter.setAttribute('formaction', this.formAction);
|
|
305
308
|
}
|
|
306
|
-
|
|
307
|
-
form.requestSubmit(submitter);
|
|
308
|
-
submitter.remove();
|
|
309
|
+
this.formControlController.submit(submitter);
|
|
309
310
|
} else if (this.formAction) {
|
|
310
311
|
// No parent form — create a temporary one to submit the priority data
|
|
311
312
|
const tempForm = document.createElement('form');
|
|
@@ -324,7 +325,9 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
|
|
|
324
325
|
});
|
|
325
326
|
|
|
326
327
|
document.body.appendChild(tempForm);
|
|
327
|
-
|
|
328
|
+
// requestSubmit raises a cancellable submit event, so a host can handle
|
|
329
|
+
// the submission rather than the browser navigating to formaction.
|
|
330
|
+
tempForm.requestSubmit();
|
|
328
331
|
tempForm.remove();
|
|
329
332
|
}
|
|
330
333
|
}
|
|
@@ -179,4 +179,38 @@ describe('<zn-priority-list>', () => {
|
|
|
179
179
|
expect(item.getAttribute('draggable')).to.equal('false');
|
|
180
180
|
expect(item.getAttribute('tabindex')).to.equal('-1');
|
|
181
181
|
});
|
|
182
|
+
|
|
183
|
+
it('should announce its form before submitting a reorder, so a host can intercept it', async () => {
|
|
184
|
+
const form = await fixture(html`
|
|
185
|
+
<form action="/save" method="post">
|
|
186
|
+
<zn-priority-list name="sections" formaction="/save">
|
|
187
|
+
<div value="a">A</div>
|
|
188
|
+
<div value="b">B</div>
|
|
189
|
+
</zn-priority-list>
|
|
190
|
+
</form>
|
|
191
|
+
`) as HTMLFormElement;
|
|
192
|
+
|
|
193
|
+
const el = form.querySelector('zn-priority-list') as any;
|
|
194
|
+
await el.updateComplete;
|
|
195
|
+
|
|
196
|
+
const announced: Element[] = [];
|
|
197
|
+
const onRegister = (e: Event) => announced.push((e as CustomEvent).detail.element);
|
|
198
|
+
document.addEventListener('zn-register-element', onRegister);
|
|
199
|
+
|
|
200
|
+
let submitter: HTMLElement | null = null;
|
|
201
|
+
form.addEventListener('submit', (e: SubmitEvent) => {
|
|
202
|
+
submitter = e.submitter;
|
|
203
|
+
e.preventDefault();
|
|
204
|
+
});
|
|
205
|
+
|
|
206
|
+
const item = el.shadowRoot.querySelector('.priority-list__item');
|
|
207
|
+
item.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true, composed: true, cancelable: true}));
|
|
208
|
+
await el.updateComplete;
|
|
209
|
+
|
|
210
|
+
document.removeEventListener('zn-register-element', onRegister);
|
|
211
|
+
|
|
212
|
+
expect(announced).to.include(form);
|
|
213
|
+
expect(submitter).to.exist;
|
|
214
|
+
expect(submitter!.getAttribute('formaction')).to.equal('/save');
|
|
215
|
+
});
|
|
182
216
|
});
|