@kubex/zinc 1.1.136 → 1.1.138
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 +870 -851
- package/dist/vscode.html-custom-data.json +96 -96
- package/dist/web-types.json +198 -198
- package/dist/zn.d.ts +7 -0
- package/dist/zn.min.js +6 -5
- package/package.json +1 -1
- package/src/components/button-menu/button-menu.scss +10 -0
- package/src/components/chip/chip.scss +1 -1
- package/src/components/page/page.scss +3 -1
- package/src/components/page-builder/modules/page-section-card/page-section-card.scss +16 -3
- package/src/components/page-builder/page-builder.component.ts +27 -0
|
@@ -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",
|
|
@@ -138,21 +138,6 @@
|
|
|
138
138
|
}
|
|
139
139
|
]
|
|
140
140
|
},
|
|
141
|
-
{
|
|
142
|
-
"name": "zn-bulk-actions",
|
|
143
|
-
"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.",
|
|
144
|
-
"attributes": [
|
|
145
|
-
{ "name": "name", "values": [] },
|
|
146
|
-
{ "name": "value", "values": [{ "name": "PropertyKey" }] },
|
|
147
|
-
{ "name": "actions", "values": [{ "name": "BulkActionData" }] }
|
|
148
|
-
],
|
|
149
|
-
"references": [
|
|
150
|
-
{
|
|
151
|
-
"name": "Documentation",
|
|
152
|
-
"url": "https://zinc.style/components/bulk-actions"
|
|
153
|
-
}
|
|
154
|
-
]
|
|
155
|
-
},
|
|
156
141
|
{
|
|
157
142
|
"name": "zn-background",
|
|
158
143
|
"description": "Composes a colour, decorative image, image strength, optional motion and contrast overlay behind slotted content.\n---\n\n\n### **Slots:**\n - _default_ - Content displayed above the background layers.\n\n### **CSS Properties:**\n - **--zn-background-color** - Fallback colour when the `color` attribute is not set. _(default: undefined)_\n- **--zn-background-image-position** - Position of the background image. Defaults to `center`. _(default: undefined)_\n- **--zn-background-overlay-angle** - Direction of the overlay gradient. Defaults to `110deg`. _(default: undefined)_\n- **--zn-background-floating-icon-color** - Colour of the floating icons. Defaults to `currentColor`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's full-size background canvas.\n- **image** - The decorative background image.\n- **overlay** - The contrast overlay between the image and content.\n- **floating-icons** - The non-interactive layer containing the floating icons.\n- **floating-icon** - Each floating `zn-icon`.\n- **content** - The wrapper around the default slot.",
|
|
@@ -205,6 +190,21 @@
|
|
|
205
190
|
}
|
|
206
191
|
]
|
|
207
192
|
},
|
|
193
|
+
{
|
|
194
|
+
"name": "zn-bulk-actions",
|
|
195
|
+
"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.",
|
|
196
|
+
"attributes": [
|
|
197
|
+
{ "name": "name", "values": [] },
|
|
198
|
+
{ "name": "value", "values": [{ "name": "PropertyKey" }] },
|
|
199
|
+
{ "name": "actions", "values": [{ "name": "BulkActionData" }] }
|
|
200
|
+
],
|
|
201
|
+
"references": [
|
|
202
|
+
{
|
|
203
|
+
"name": "Documentation",
|
|
204
|
+
"url": "https://zinc.style/components/bulk-actions"
|
|
205
|
+
}
|
|
206
|
+
]
|
|
207
|
+
},
|
|
208
208
|
{
|
|
209
209
|
"name": "zn-button",
|
|
210
210
|
"description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the button loses focus.\n- **zn-focus** - Emitted when the button gains focus.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **cancel** - Slot for custom cancel button/content when autoClick is active.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<zn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
|
|
@@ -348,6 +348,25 @@
|
|
|
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
|
+
},
|
|
351
370
|
{
|
|
352
371
|
"name": "zn-button-group",
|
|
353
372
|
"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.",
|
|
@@ -368,25 +387,6 @@
|
|
|
368
387
|
}
|
|
369
388
|
]
|
|
370
389
|
},
|
|
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-dialog",
|
|
1455
|
+
"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.",
|
|
1456
1456
|
"attributes": [
|
|
1457
1457
|
{
|
|
1458
|
-
"name": "
|
|
1459
|
-
"description": "The
|
|
1460
|
-
"values": [
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
"values": []
|
|
1458
|
+
"name": "variant",
|
|
1459
|
+
"description": "The dialog's theme variant.",
|
|
1460
|
+
"values": [
|
|
1461
|
+
{ "name": "default" },
|
|
1462
|
+
{ "name": "warning" },
|
|
1463
|
+
{ "name": "announcement" }
|
|
1464
|
+
]
|
|
1466
1465
|
},
|
|
1467
1466
|
{
|
|
1468
|
-
"name": "
|
|
1469
|
-
"description": "The size
|
|
1467
|
+
"name": "size",
|
|
1468
|
+
"description": "The dialog's size.",
|
|
1470
1469
|
"values": [
|
|
1471
|
-
{ "name": "x-small" },
|
|
1472
1470
|
{ "name": "small" },
|
|
1473
1471
|
{ "name": "medium" },
|
|
1474
|
-
{ "name": "large" }
|
|
1472
|
+
{ "name": "large" },
|
|
1473
|
+
{ "name": "custom" }
|
|
1475
1474
|
]
|
|
1476
1475
|
},
|
|
1477
1476
|
{
|
|
1478
|
-
"name": "
|
|
1479
|
-
"description": "
|
|
1477
|
+
"name": "open",
|
|
1478
|
+
"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.",
|
|
1480
1479
|
"values": []
|
|
1481
1480
|
},
|
|
1482
1481
|
{
|
|
1483
|
-
"name": "
|
|
1484
|
-
"description": "The
|
|
1482
|
+
"name": "label",
|
|
1483
|
+
"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.",
|
|
1485
1484
|
"values": []
|
|
1486
1485
|
},
|
|
1486
|
+
{ "name": "cosmic", "values": [] },
|
|
1487
1487
|
{
|
|
1488
|
-
"name": "
|
|
1489
|
-
"description": "Disables the
|
|
1488
|
+
"name": "no-header",
|
|
1489
|
+
"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.",
|
|
1490
1490
|
"values": []
|
|
1491
1491
|
},
|
|
1492
1492
|
{
|
|
1493
|
-
"name": "
|
|
1494
|
-
"description": "
|
|
1493
|
+
"name": "trigger",
|
|
1494
|
+
"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.",
|
|
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)[]" }]
|
|
1501
1496
|
}
|
|
1502
1497
|
],
|
|
1503
1498
|
"references": [
|
|
1504
1499
|
{
|
|
1505
1500
|
"name": "Documentation",
|
|
1506
|
-
"url": "https://zinc.style/components/
|
|
1501
|
+
"url": "https://zinc.style/components/dialog"
|
|
1507
1502
|
}
|
|
1508
1503
|
]
|
|
1509
1504
|
},
|
|
1510
1505
|
{
|
|
1511
|
-
"name": "zn-
|
|
1512
|
-
"description": "
|
|
1506
|
+
"name": "zn-defined-label",
|
|
1507
|
+
"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.",
|
|
1513
1508
|
"attributes": [
|
|
1514
1509
|
{
|
|
1515
|
-
"name": "
|
|
1516
|
-
"description": "The
|
|
1517
|
-
"values": [
|
|
1518
|
-
{ "name": "default" },
|
|
1519
|
-
{ "name": "warning" },
|
|
1520
|
-
{ "name": "announcement" }
|
|
1521
|
-
]
|
|
1510
|
+
"name": "value",
|
|
1511
|
+
"description": "The selected label key. Also acts as the filter while typing.",
|
|
1512
|
+
"values": []
|
|
1522
1513
|
},
|
|
1523
1514
|
{
|
|
1524
|
-
"name": "
|
|
1525
|
-
"description": "The
|
|
1515
|
+
"name": "inputValue",
|
|
1516
|
+
"description": "The value entered for the selected label. Submitted as `label:value` when present.",
|
|
1517
|
+
"values": []
|
|
1518
|
+
},
|
|
1519
|
+
{
|
|
1520
|
+
"name": "input-size",
|
|
1521
|
+
"description": "The size of the main input.",
|
|
1526
1522
|
"values": [
|
|
1523
|
+
{ "name": "x-small" },
|
|
1527
1524
|
{ "name": "small" },
|
|
1528
1525
|
{ "name": "medium" },
|
|
1529
|
-
{ "name": "large" }
|
|
1530
|
-
{ "name": "custom" }
|
|
1526
|
+
{ "name": "large" }
|
|
1531
1527
|
]
|
|
1532
1528
|
},
|
|
1533
1529
|
{
|
|
1534
|
-
"name": "
|
|
1535
|
-
"description": "
|
|
1530
|
+
"name": "name",
|
|
1531
|
+
"description": "The name of the control. Used for form submission.",
|
|
1536
1532
|
"values": []
|
|
1537
1533
|
},
|
|
1538
1534
|
{
|
|
1539
|
-
"name": "
|
|
1540
|
-
"description": "The
|
|
1535
|
+
"name": "title",
|
|
1536
|
+
"description": "The title of the main input.",
|
|
1541
1537
|
"values": []
|
|
1542
1538
|
},
|
|
1543
|
-
{ "name": "cosmic", "values": [] },
|
|
1544
1539
|
{
|
|
1545
|
-
"name": "
|
|
1546
|
-
"description": "Disables the
|
|
1540
|
+
"name": "disabled",
|
|
1541
|
+
"description": "Disables the control.",
|
|
1547
1542
|
"values": []
|
|
1548
1543
|
},
|
|
1549
1544
|
{
|
|
1550
|
-
"name": "
|
|
1551
|
-
"description": "
|
|
1545
|
+
"name": "allow-custom",
|
|
1546
|
+
"description": "Allows labels that aren't in the predefined list.",
|
|
1552
1547
|
"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/defined-label"
|
|
1559
1559
|
}
|
|
1560
1560
|
]
|
|
1561
1561
|
},
|