@kubex/zinc 1.1.138 → 1.1.140
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 +700 -590
- package/dist/vscode.html-custom-data.json +81 -81
- package/dist/web-types.json +160 -160
- package/dist/zn.d.ts +23 -6
- package/dist/zn.min.js +434 -415
- package/package.json +1 -1
- package/src/components/collapsible/collapsible.scss +10 -2
- package/src/components/filter-container/filter-container.component.ts +3 -6
- package/src/components/flow-builder/flow-layout.ts +1 -1
- package/src/components/flow-builder/modules/flow-canvas/flow-canvas.component.ts +1 -1
- package/src/components/header/header.component.ts +1 -1
- package/src/components/icon-picker/icon-picker.component.ts +6 -18
- package/src/components/input/input.component.ts +4 -2
- package/src/components/menu-item/submenu-controller.ts +7 -7
- package/src/components/page-builder/page-builder.component.ts +120 -2
- package/src/components/page-builder/page-builder.scss +22 -0
- package/src/components/page-builder/page.types.ts +20 -0
- package/src/components/query-builder/query-builder.component.ts +2 -2
- package/src/components/sidebar/sidebar.component.ts +3 -3
- package/src/components/slideout/slideout.component.ts +2 -2
- package/src/components/stat/stat.component.ts +3 -3
- package/src/components/stepper/stepper.component.ts +1 -1
- package/src/internal/form.ts +2 -2
- package/src/internal/zinc-element.ts +1 -1
- /package/src/components/hover-container/{hover-container.ts → hover-container.test.ts} +0 -0
|
@@ -13,17 +13,6 @@
|
|
|
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
|
-
},
|
|
27
16
|
{
|
|
28
17
|
"name": "zn-alert",
|
|
29
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.",
|
|
@@ -64,6 +53,17 @@
|
|
|
64
53
|
}
|
|
65
54
|
]
|
|
66
55
|
},
|
|
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",
|
|
@@ -348,25 +348,6 @@
|
|
|
348
348
|
}
|
|
349
349
|
]
|
|
350
350
|
},
|
|
351
|
-
{
|
|
352
|
-
"name": "zn-button-menu",
|
|
353
|
-
"description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
|
|
354
|
-
"attributes": [
|
|
355
|
-
{ "name": "max-width", "values": [] },
|
|
356
|
-
{ "name": "containerWidth", "values": [] },
|
|
357
|
-
{ "name": "limit", "values": [] },
|
|
358
|
-
{ "name": "max-level", "values": [] },
|
|
359
|
-
{ "name": "icon-size", "values": [] },
|
|
360
|
-
{ "name": "no-gap", "values": [] },
|
|
361
|
-
{ "name": "no-padding", "values": [] }
|
|
362
|
-
],
|
|
363
|
-
"references": [
|
|
364
|
-
{
|
|
365
|
-
"name": "Documentation",
|
|
366
|
-
"url": "https://zinc.style/components/button-menu"
|
|
367
|
-
}
|
|
368
|
-
]
|
|
369
|
-
},
|
|
370
351
|
{
|
|
371
352
|
"name": "zn-button-group",
|
|
372
353
|
"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\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -387,6 +368,25 @@
|
|
|
387
368
|
}
|
|
388
369
|
]
|
|
389
370
|
},
|
|
371
|
+
{
|
|
372
|
+
"name": "zn-button-menu",
|
|
373
|
+
"description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
|
|
374
|
+
"attributes": [
|
|
375
|
+
{ "name": "max-width", "values": [] },
|
|
376
|
+
{ "name": "containerWidth", "values": [] },
|
|
377
|
+
{ "name": "limit", "values": [] },
|
|
378
|
+
{ "name": "max-level", "values": [] },
|
|
379
|
+
{ "name": "icon-size", "values": [] },
|
|
380
|
+
{ "name": "no-gap", "values": [] },
|
|
381
|
+
{ "name": "no-padding", "values": [] }
|
|
382
|
+
],
|
|
383
|
+
"references": [
|
|
384
|
+
{
|
|
385
|
+
"name": "Documentation",
|
|
386
|
+
"url": "https://zinc.style/components/button-menu"
|
|
387
|
+
}
|
|
388
|
+
]
|
|
389
|
+
},
|
|
390
390
|
{
|
|
391
391
|
"name": "zn-channel-tile",
|
|
392
392
|
"description": "A channel/queue slot tile with two faces: an active (occupied) state\nshowing an in-progress item, and an available (empty) state advertising\ncapacity — optionally reserving an incoming item with an auto-accept countdown.\n---\n\n\n### **Events:**\n - **zn-accept** - Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n- **zn-reject** - Emitted when the reject control is pressed.\n\n### **Slots:**\n - **title** - Replaces the primary line. Falls back to the `title` attribute (or \"Available\" when unset in the available state).\n- **subtitle** - Replaces the secondary line. Falls back to the `subtitle` attribute.\n- **leading** - Replaces the leading icon in the active state.\n- **action** - Action content for the available state (e.g. a form). Falls back to a default accept button.\n- **footer** - Trailing content (e.g. status badges) in the active state.\n\n### **CSS Properties:**\n - **--channel-tile-color** - Resolved accent color (set from the `color` property). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **progress** - The progress indicator (incoming countdown overlay or active progress bar).",
|
|
@@ -1451,111 +1451,111 @@
|
|
|
1451
1451
|
]
|
|
1452
1452
|
},
|
|
1453
1453
|
{
|
|
1454
|
-
"name": "zn-
|
|
1455
|
-
"description": "
|
|
1454
|
+
"name": "zn-defined-label",
|
|
1455
|
+
"description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
|
|
1456
1456
|
"attributes": [
|
|
1457
1457
|
{
|
|
1458
|
-
"name": "
|
|
1459
|
-
"description": "The
|
|
1460
|
-
"values": [
|
|
1461
|
-
{ "name": "default" },
|
|
1462
|
-
{ "name": "warning" },
|
|
1463
|
-
{ "name": "announcement" }
|
|
1464
|
-
]
|
|
1458
|
+
"name": "value",
|
|
1459
|
+
"description": "The selected label key. Also acts as the filter while typing.",
|
|
1460
|
+
"values": []
|
|
1465
1461
|
},
|
|
1466
1462
|
{
|
|
1467
|
-
"name": "
|
|
1468
|
-
"description": "The
|
|
1463
|
+
"name": "inputValue",
|
|
1464
|
+
"description": "The value entered for the selected label. Submitted as `label:value` when present.",
|
|
1465
|
+
"values": []
|
|
1466
|
+
},
|
|
1467
|
+
{
|
|
1468
|
+
"name": "input-size",
|
|
1469
|
+
"description": "The size of the main input.",
|
|
1469
1470
|
"values": [
|
|
1471
|
+
{ "name": "x-small" },
|
|
1470
1472
|
{ "name": "small" },
|
|
1471
1473
|
{ "name": "medium" },
|
|
1472
|
-
{ "name": "large" }
|
|
1473
|
-
{ "name": "custom" }
|
|
1474
|
+
{ "name": "large" }
|
|
1474
1475
|
]
|
|
1475
1476
|
},
|
|
1476
1477
|
{
|
|
1477
|
-
"name": "
|
|
1478
|
-
"description": "
|
|
1478
|
+
"name": "name",
|
|
1479
|
+
"description": "The name of the control. Used for form submission.",
|
|
1479
1480
|
"values": []
|
|
1480
1481
|
},
|
|
1481
1482
|
{
|
|
1482
|
-
"name": "
|
|
1483
|
-
"description": "The
|
|
1483
|
+
"name": "title",
|
|
1484
|
+
"description": "The title of the main input.",
|
|
1484
1485
|
"values": []
|
|
1485
1486
|
},
|
|
1486
|
-
{ "name": "cosmic", "values": [] },
|
|
1487
1487
|
{
|
|
1488
|
-
"name": "
|
|
1489
|
-
"description": "Disables the
|
|
1488
|
+
"name": "disabled",
|
|
1489
|
+
"description": "Disables the control.",
|
|
1490
1490
|
"values": []
|
|
1491
1491
|
},
|
|
1492
1492
|
{
|
|
1493
|
-
"name": "
|
|
1494
|
-
"description": "
|
|
1493
|
+
"name": "allow-custom",
|
|
1494
|
+
"description": "Allows labels that aren't in the predefined list.",
|
|
1495
1495
|
"values": []
|
|
1496
|
+
},
|
|
1497
|
+
{
|
|
1498
|
+
"name": "predefined-labels",
|
|
1499
|
+
"description": "The predefined labels. Entries are either a string or `{name, options}`.",
|
|
1500
|
+
"values": [{ "name": "(PredefinedLabel" }, { "name": "string)[]" }]
|
|
1496
1501
|
}
|
|
1497
1502
|
],
|
|
1498
1503
|
"references": [
|
|
1499
1504
|
{
|
|
1500
1505
|
"name": "Documentation",
|
|
1501
|
-
"url": "https://zinc.style/components/
|
|
1506
|
+
"url": "https://zinc.style/components/defined-label"
|
|
1502
1507
|
}
|
|
1503
1508
|
]
|
|
1504
1509
|
},
|
|
1505
1510
|
{
|
|
1506
|
-
"name": "zn-
|
|
1507
|
-
"description": "
|
|
1511
|
+
"name": "zn-dialog",
|
|
1512
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the dialog is opens.\n- **zn-close** - Emitted when the dialog is closed.\n- **zn-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The dialog's label. Alternatively you can use the `label` attribute.\n- **header-icon** - Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.\n- **announcement-intro** - Optional Intro text to display below the icon, when using the variant `announcement`.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **footer** - The dialog's footer. This is typically used for buttons representing various options.\n- **footer-text** - Optional text to include below the footer buttons, when using the variant `announcement`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **title** - The dialog's title.\n- **close-button** - The dialog's close button.\n- **close-button__base** - The close buttons exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
|
|
1508
1513
|
"attributes": [
|
|
1509
1514
|
{
|
|
1510
|
-
"name": "
|
|
1511
|
-
"description": "The
|
|
1512
|
-
"values": [
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
"values": []
|
|
1515
|
+
"name": "variant",
|
|
1516
|
+
"description": "The dialog's theme variant.",
|
|
1517
|
+
"values": [
|
|
1518
|
+
{ "name": "default" },
|
|
1519
|
+
{ "name": "warning" },
|
|
1520
|
+
{ "name": "announcement" }
|
|
1521
|
+
]
|
|
1518
1522
|
},
|
|
1519
1523
|
{
|
|
1520
|
-
"name": "
|
|
1521
|
-
"description": "The size
|
|
1524
|
+
"name": "size",
|
|
1525
|
+
"description": "The dialog's size.",
|
|
1522
1526
|
"values": [
|
|
1523
|
-
{ "name": "x-small" },
|
|
1524
1527
|
{ "name": "small" },
|
|
1525
1528
|
{ "name": "medium" },
|
|
1526
|
-
{ "name": "large" }
|
|
1529
|
+
{ "name": "large" },
|
|
1530
|
+
{ "name": "custom" }
|
|
1527
1531
|
]
|
|
1528
1532
|
},
|
|
1529
1533
|
{
|
|
1530
|
-
"name": "
|
|
1531
|
-
"description": "
|
|
1534
|
+
"name": "open",
|
|
1535
|
+
"description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
|
|
1532
1536
|
"values": []
|
|
1533
1537
|
},
|
|
1534
1538
|
{
|
|
1535
|
-
"name": "
|
|
1536
|
-
"description": "The
|
|
1539
|
+
"name": "label",
|
|
1540
|
+
"description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
|
|
1537
1541
|
"values": []
|
|
1538
1542
|
},
|
|
1543
|
+
{ "name": "cosmic", "values": [] },
|
|
1539
1544
|
{
|
|
1540
|
-
"name": "
|
|
1541
|
-
"description": "Disables the
|
|
1545
|
+
"name": "no-header",
|
|
1546
|
+
"description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
|
|
1542
1547
|
"values": []
|
|
1543
1548
|
},
|
|
1544
1549
|
{
|
|
1545
|
-
"name": "
|
|
1546
|
-
"description": "
|
|
1550
|
+
"name": "trigger",
|
|
1551
|
+
"description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
|
|
1547
1552
|
"values": []
|
|
1548
|
-
},
|
|
1549
|
-
{
|
|
1550
|
-
"name": "predefined-labels",
|
|
1551
|
-
"description": "The predefined labels. Entries are either a string or `{name, options}`.",
|
|
1552
|
-
"values": [{ "name": "(PredefinedLabel" }, { "name": "string)[]" }]
|
|
1553
1553
|
}
|
|
1554
1554
|
],
|
|
1555
1555
|
"references": [
|
|
1556
1556
|
{
|
|
1557
1557
|
"name": "Documentation",
|
|
1558
|
-
"url": "https://zinc.style/components/
|
|
1558
|
+
"url": "https://zinc.style/components/dialog"
|
|
1559
1559
|
}
|
|
1560
1560
|
]
|
|
1561
1561
|
},
|
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.140",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,28 +15,6 @@
|
|
|
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
|
-
},
|
|
40
18
|
{
|
|
41
19
|
"name": "zn-alert",
|
|
42
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.",
|
|
@@ -105,6 +83,28 @@
|
|
|
105
83
|
]
|
|
106
84
|
}
|
|
107
85
|
},
|
|
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",
|
|
@@ -676,40 +676,6 @@
|
|
|
676
676
|
]
|
|
677
677
|
}
|
|
678
678
|
},
|
|
679
|
-
{
|
|
680
|
-
"name": "zn-button-menu",
|
|
681
|
-
"description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
|
|
682
|
-
"doc-url": "",
|
|
683
|
-
"attributes": [
|
|
684
|
-
{ "name": "max-width", "value": { "type": "number" } },
|
|
685
|
-
{ "name": "containerWidth", "value": { "type": "number" } },
|
|
686
|
-
{ "name": "limit", "value": { "type": "number", "default": "-1" } },
|
|
687
|
-
{
|
|
688
|
-
"name": "max-level",
|
|
689
|
-
"value": { "type": "number", "default": "2" }
|
|
690
|
-
},
|
|
691
|
-
{
|
|
692
|
-
"name": "icon-size",
|
|
693
|
-
"value": { "type": "number", "default": "20" }
|
|
694
|
-
},
|
|
695
|
-
{ "name": "no-gap", "value": { "type": "boolean" } },
|
|
696
|
-
{ "name": "no-padding", "value": { "type": "boolean" } }
|
|
697
|
-
],
|
|
698
|
-
"slots": [{ "name": "", "description": "The default slot." }],
|
|
699
|
-
"events": [],
|
|
700
|
-
"js": {
|
|
701
|
-
"properties": [
|
|
702
|
-
{ "name": "maxWidth", "type": "number" },
|
|
703
|
-
{ "name": "containerWidth", "type": "number" },
|
|
704
|
-
{ "name": "limit", "type": "number" },
|
|
705
|
-
{ "name": "maxLevel", "type": "number" },
|
|
706
|
-
{ "name": "iconSize", "type": "number" },
|
|
707
|
-
{ "name": "noGap", "type": "boolean" },
|
|
708
|
-
{ "name": "noPadding", "type": "boolean" }
|
|
709
|
-
],
|
|
710
|
-
"events": []
|
|
711
|
-
}
|
|
712
|
-
},
|
|
713
679
|
{
|
|
714
680
|
"name": "zn-button-group",
|
|
715
681
|
"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\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -760,6 +726,40 @@
|
|
|
760
726
|
]
|
|
761
727
|
}
|
|
762
728
|
},
|
|
729
|
+
{
|
|
730
|
+
"name": "zn-button-menu",
|
|
731
|
+
"description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
|
|
732
|
+
"doc-url": "",
|
|
733
|
+
"attributes": [
|
|
734
|
+
{ "name": "max-width", "value": { "type": "number" } },
|
|
735
|
+
{ "name": "containerWidth", "value": { "type": "number" } },
|
|
736
|
+
{ "name": "limit", "value": { "type": "number", "default": "-1" } },
|
|
737
|
+
{
|
|
738
|
+
"name": "max-level",
|
|
739
|
+
"value": { "type": "number", "default": "2" }
|
|
740
|
+
},
|
|
741
|
+
{
|
|
742
|
+
"name": "icon-size",
|
|
743
|
+
"value": { "type": "number", "default": "20" }
|
|
744
|
+
},
|
|
745
|
+
{ "name": "no-gap", "value": { "type": "boolean" } },
|
|
746
|
+
{ "name": "no-padding", "value": { "type": "boolean" } }
|
|
747
|
+
],
|
|
748
|
+
"slots": [{ "name": "", "description": "The default slot." }],
|
|
749
|
+
"events": [],
|
|
750
|
+
"js": {
|
|
751
|
+
"properties": [
|
|
752
|
+
{ "name": "maxWidth", "type": "number" },
|
|
753
|
+
{ "name": "containerWidth", "type": "number" },
|
|
754
|
+
{ "name": "limit", "type": "number" },
|
|
755
|
+
{ "name": "maxLevel", "type": "number" },
|
|
756
|
+
{ "name": "iconSize", "type": "number" },
|
|
757
|
+
{ "name": "noGap", "type": "boolean" },
|
|
758
|
+
{ "name": "noPadding", "type": "boolean" }
|
|
759
|
+
],
|
|
760
|
+
"events": []
|
|
761
|
+
}
|
|
762
|
+
},
|
|
763
763
|
{
|
|
764
764
|
"name": "zn-channel-tile",
|
|
765
765
|
"description": "A channel/queue slot tile with two faces: an active (occupied) state\nshowing an in-progress item, and an available (empty) state advertising\ncapacity — optionally reserving an incoming item with an auto-accept countdown.\n---\n\n\n### **Events:**\n - **zn-accept** - Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n- **zn-reject** - Emitted when the reject control is pressed.\n\n### **Slots:**\n - **title** - Replaces the primary line. Falls back to the `title` attribute (or \"Available\" when unset in the available state).\n- **subtitle** - Replaces the secondary line. Falls back to the `subtitle` attribute.\n- **leading** - Replaces the leading icon in the active state.\n- **action** - Action content for the available state (e.g. a form). Falls back to a default accept button.\n- **footer** - Trailing content (e.g. status badges) in the active state.\n\n### **CSS Properties:**\n - **--channel-tile-color** - Resolved accent color (set from the `color` property). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **progress** - The progress indicator (incoming countdown overlay or active progress bar).",
|
|
@@ -3372,6 +3372,109 @@
|
|
|
3372
3372
|
]
|
|
3373
3373
|
}
|
|
3374
3374
|
},
|
|
3375
|
+
{
|
|
3376
|
+
"name": "zn-defined-label",
|
|
3377
|
+
"description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
|
|
3378
|
+
"doc-url": "",
|
|
3379
|
+
"attributes": [
|
|
3380
|
+
{
|
|
3381
|
+
"name": "value",
|
|
3382
|
+
"description": "The selected label key. Also acts as the filter while typing.",
|
|
3383
|
+
"value": { "type": "string", "default": "''" }
|
|
3384
|
+
},
|
|
3385
|
+
{
|
|
3386
|
+
"name": "inputValue",
|
|
3387
|
+
"description": "The value entered for the selected label. Submitted as `label:value` when present.",
|
|
3388
|
+
"value": { "type": "string", "default": "''" }
|
|
3389
|
+
},
|
|
3390
|
+
{
|
|
3391
|
+
"name": "input-size",
|
|
3392
|
+
"description": "The size of the main input.",
|
|
3393
|
+
"value": {
|
|
3394
|
+
"type": "'x-small' | 'small' | 'medium' | 'large'",
|
|
3395
|
+
"default": "'medium'"
|
|
3396
|
+
}
|
|
3397
|
+
},
|
|
3398
|
+
{
|
|
3399
|
+
"name": "name",
|
|
3400
|
+
"description": "The name of the control. Used for form submission.",
|
|
3401
|
+
"value": { "type": "string", "default": "'label'" }
|
|
3402
|
+
},
|
|
3403
|
+
{
|
|
3404
|
+
"name": "title",
|
|
3405
|
+
"description": "The title of the main input.",
|
|
3406
|
+
"value": { "type": "string" }
|
|
3407
|
+
},
|
|
3408
|
+
{
|
|
3409
|
+
"name": "disabled",
|
|
3410
|
+
"description": "Disables the control.",
|
|
3411
|
+
"value": { "type": "boolean", "default": "false" }
|
|
3412
|
+
},
|
|
3413
|
+
{
|
|
3414
|
+
"name": "allow-custom",
|
|
3415
|
+
"description": "Allows labels that aren't in the predefined list.",
|
|
3416
|
+
"value": { "type": "boolean", "default": "false" }
|
|
3417
|
+
},
|
|
3418
|
+
{
|
|
3419
|
+
"name": "predefined-labels",
|
|
3420
|
+
"description": "The predefined labels. Entries are either a string or `{name, options}`.",
|
|
3421
|
+
"value": {
|
|
3422
|
+
"type": "(PredefinedLabel | string)[]",
|
|
3423
|
+
"default": "[]"
|
|
3424
|
+
}
|
|
3425
|
+
}
|
|
3426
|
+
],
|
|
3427
|
+
"events": [],
|
|
3428
|
+
"js": {
|
|
3429
|
+
"properties": [
|
|
3430
|
+
{ "name": "input", "type": "ZnInput" },
|
|
3431
|
+
{ "name": "dropdown", "type": "ZnDropdown" },
|
|
3432
|
+
{
|
|
3433
|
+
"name": "value",
|
|
3434
|
+
"description": "The selected label key. Also acts as the filter while typing.",
|
|
3435
|
+
"type": "string"
|
|
3436
|
+
},
|
|
3437
|
+
{
|
|
3438
|
+
"name": "inputValue",
|
|
3439
|
+
"description": "The value entered for the selected label. Submitted as `label:value` when present.",
|
|
3440
|
+
"type": "string"
|
|
3441
|
+
},
|
|
3442
|
+
{
|
|
3443
|
+
"name": "inputSize",
|
|
3444
|
+
"description": "The size of the main input.",
|
|
3445
|
+
"type": "'x-small' | 'small' | 'medium' | 'large'"
|
|
3446
|
+
},
|
|
3447
|
+
{
|
|
3448
|
+
"name": "name",
|
|
3449
|
+
"description": "The name of the control. Used for form submission.",
|
|
3450
|
+
"type": "string"
|
|
3451
|
+
},
|
|
3452
|
+
{
|
|
3453
|
+
"name": "title",
|
|
3454
|
+
"description": "The title of the main input.",
|
|
3455
|
+
"type": "string"
|
|
3456
|
+
},
|
|
3457
|
+
{
|
|
3458
|
+
"name": "disabled",
|
|
3459
|
+
"description": "Disables the control.",
|
|
3460
|
+
"type": "boolean"
|
|
3461
|
+
},
|
|
3462
|
+
{
|
|
3463
|
+
"name": "allowCustom",
|
|
3464
|
+
"description": "Allows labels that aren't in the predefined list.",
|
|
3465
|
+
"type": "boolean"
|
|
3466
|
+
},
|
|
3467
|
+
{
|
|
3468
|
+
"name": "predefinedLabels",
|
|
3469
|
+
"description": "The predefined labels. Entries are either a string or `{name, options}`.",
|
|
3470
|
+
"type": "(PredefinedLabel | string)[]"
|
|
3471
|
+
},
|
|
3472
|
+
{ "name": "validationMessage" },
|
|
3473
|
+
{ "name": "validity" }
|
|
3474
|
+
],
|
|
3475
|
+
"events": []
|
|
3476
|
+
}
|
|
3477
|
+
},
|
|
3375
3478
|
{
|
|
3376
3479
|
"name": "zn-dialog",
|
|
3377
3480
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the dialog is opens.\n- **zn-close** - Emitted when the dialog is closed.\n- **zn-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The dialog's label. Alternatively you can use the `label` attribute.\n- **header-icon** - Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.\n- **announcement-intro** - Optional Intro text to display below the icon, when using the variant `announcement`.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **footer** - The dialog's footer. This is typically used for buttons representing various options.\n- **footer-text** - Optional text to include below the footer buttons, when using the variant `announcement`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **title** - The dialog's title.\n- **close-button** - The dialog's close button.\n- **close-button__base** - The close buttons exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
|
|
@@ -3513,109 +3616,6 @@
|
|
|
3513
3616
|
]
|
|
3514
3617
|
}
|
|
3515
3618
|
},
|
|
3516
|
-
{
|
|
3517
|
-
"name": "zn-defined-label",
|
|
3518
|
-
"description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
|
|
3519
|
-
"doc-url": "",
|
|
3520
|
-
"attributes": [
|
|
3521
|
-
{
|
|
3522
|
-
"name": "value",
|
|
3523
|
-
"description": "The selected label key. Also acts as the filter while typing.",
|
|
3524
|
-
"value": { "type": "string", "default": "''" }
|
|
3525
|
-
},
|
|
3526
|
-
{
|
|
3527
|
-
"name": "inputValue",
|
|
3528
|
-
"description": "The value entered for the selected label. Submitted as `label:value` when present.",
|
|
3529
|
-
"value": { "type": "string", "default": "''" }
|
|
3530
|
-
},
|
|
3531
|
-
{
|
|
3532
|
-
"name": "input-size",
|
|
3533
|
-
"description": "The size of the main input.",
|
|
3534
|
-
"value": {
|
|
3535
|
-
"type": "'x-small' | 'small' | 'medium' | 'large'",
|
|
3536
|
-
"default": "'medium'"
|
|
3537
|
-
}
|
|
3538
|
-
},
|
|
3539
|
-
{
|
|
3540
|
-
"name": "name",
|
|
3541
|
-
"description": "The name of the control. Used for form submission.",
|
|
3542
|
-
"value": { "type": "string", "default": "'label'" }
|
|
3543
|
-
},
|
|
3544
|
-
{
|
|
3545
|
-
"name": "title",
|
|
3546
|
-
"description": "The title of the main input.",
|
|
3547
|
-
"value": { "type": "string" }
|
|
3548
|
-
},
|
|
3549
|
-
{
|
|
3550
|
-
"name": "disabled",
|
|
3551
|
-
"description": "Disables the control.",
|
|
3552
|
-
"value": { "type": "boolean", "default": "false" }
|
|
3553
|
-
},
|
|
3554
|
-
{
|
|
3555
|
-
"name": "allow-custom",
|
|
3556
|
-
"description": "Allows labels that aren't in the predefined list.",
|
|
3557
|
-
"value": { "type": "boolean", "default": "false" }
|
|
3558
|
-
},
|
|
3559
|
-
{
|
|
3560
|
-
"name": "predefined-labels",
|
|
3561
|
-
"description": "The predefined labels. Entries are either a string or `{name, options}`.",
|
|
3562
|
-
"value": {
|
|
3563
|
-
"type": "(PredefinedLabel | string)[]",
|
|
3564
|
-
"default": "[]"
|
|
3565
|
-
}
|
|
3566
|
-
}
|
|
3567
|
-
],
|
|
3568
|
-
"events": [],
|
|
3569
|
-
"js": {
|
|
3570
|
-
"properties": [
|
|
3571
|
-
{ "name": "input", "type": "ZnInput" },
|
|
3572
|
-
{ "name": "dropdown", "type": "ZnDropdown" },
|
|
3573
|
-
{
|
|
3574
|
-
"name": "value",
|
|
3575
|
-
"description": "The selected label key. Also acts as the filter while typing.",
|
|
3576
|
-
"type": "string"
|
|
3577
|
-
},
|
|
3578
|
-
{
|
|
3579
|
-
"name": "inputValue",
|
|
3580
|
-
"description": "The value entered for the selected label. Submitted as `label:value` when present.",
|
|
3581
|
-
"type": "string"
|
|
3582
|
-
},
|
|
3583
|
-
{
|
|
3584
|
-
"name": "inputSize",
|
|
3585
|
-
"description": "The size of the main input.",
|
|
3586
|
-
"type": "'x-small' | 'small' | 'medium' | 'large'"
|
|
3587
|
-
},
|
|
3588
|
-
{
|
|
3589
|
-
"name": "name",
|
|
3590
|
-
"description": "The name of the control. Used for form submission.",
|
|
3591
|
-
"type": "string"
|
|
3592
|
-
},
|
|
3593
|
-
{
|
|
3594
|
-
"name": "title",
|
|
3595
|
-
"description": "The title of the main input.",
|
|
3596
|
-
"type": "string"
|
|
3597
|
-
},
|
|
3598
|
-
{
|
|
3599
|
-
"name": "disabled",
|
|
3600
|
-
"description": "Disables the control.",
|
|
3601
|
-
"type": "boolean"
|
|
3602
|
-
},
|
|
3603
|
-
{
|
|
3604
|
-
"name": "allowCustom",
|
|
3605
|
-
"description": "Allows labels that aren't in the predefined list.",
|
|
3606
|
-
"type": "boolean"
|
|
3607
|
-
},
|
|
3608
|
-
{
|
|
3609
|
-
"name": "predefinedLabels",
|
|
3610
|
-
"description": "The predefined labels. Entries are either a string or `{name, options}`.",
|
|
3611
|
-
"type": "(PredefinedLabel | string)[]"
|
|
3612
|
-
},
|
|
3613
|
-
{ "name": "validationMessage" },
|
|
3614
|
-
{ "name": "validity" }
|
|
3615
|
-
],
|
|
3616
|
-
"events": []
|
|
3617
|
-
}
|
|
3618
|
-
},
|
|
3619
3619
|
{
|
|
3620
3620
|
"name": "zn-dropdown",
|
|
3621
3621
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **show()** - Opens the dropdown\n- **hide()** - Closes the dropdown\n- **reposition()** - Instructs the dropdown to reposition itself\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.",
|