@kubex/zinc 1.1.125 → 1.1.127
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 +2019 -1981
- package/dist/vscode.html-custom-data.json +92 -92
- package/dist/web-types.json +194 -194
- package/dist/zn.d.ts +40 -6
- package/dist/zn.min.js +256 -246
- package/package.json +1 -1
- package/src/components/collapsible/collapsible.scss +3 -0
- package/src/components/expanding-action/expanding-action.component.ts +4 -2
- package/src/components/page/page.scss +1 -1
- package/src/components/page-builder/modules/page-palette-item/page-palette-item.scss +4 -1
- package/src/components/page-builder/page-builder.component.ts +62 -13
- package/src/components/page-builder/page-builder.scss +1 -1
- package/src/components/page-builder/page-builder.test.ts +90 -0
- package/src/components/page-builder/page.types.ts +40 -5
|
@@ -2844,47 +2844,47 @@
|
|
|
2844
2844
|
]
|
|
2845
2845
|
},
|
|
2846
2846
|
{
|
|
2847
|
-
"name": "zn-
|
|
2848
|
-
"description": "
|
|
2847
|
+
"name": "zn-option",
|
|
2848
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
|
|
2849
2849
|
"attributes": [
|
|
2850
2850
|
{
|
|
2851
|
-
"name": "
|
|
2852
|
-
"description": "The
|
|
2851
|
+
"name": "value",
|
|
2852
|
+
"description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
|
|
2853
2853
|
"values": []
|
|
2854
2854
|
},
|
|
2855
2855
|
{
|
|
2856
2856
|
"name": "disabled",
|
|
2857
|
-
"description": "
|
|
2857
|
+
"description": "Draws the option in a disabled state, preventing selection.",
|
|
2858
2858
|
"values": []
|
|
2859
|
-
}
|
|
2859
|
+
},
|
|
2860
|
+
{ "name": "selected", "values": [] }
|
|
2860
2861
|
],
|
|
2861
2862
|
"references": [
|
|
2862
2863
|
{
|
|
2863
2864
|
"name": "Documentation",
|
|
2864
|
-
"url": "https://zinc.style/components/
|
|
2865
|
+
"url": "https://zinc.style/components/option"
|
|
2865
2866
|
}
|
|
2866
2867
|
]
|
|
2867
2868
|
},
|
|
2868
2869
|
{
|
|
2869
|
-
"name": "zn-
|
|
2870
|
-
"description": "
|
|
2870
|
+
"name": "zn-opt-group",
|
|
2871
|
+
"description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
|
|
2871
2872
|
"attributes": [
|
|
2872
2873
|
{
|
|
2873
|
-
"name": "
|
|
2874
|
-
"description": "The
|
|
2874
|
+
"name": "label",
|
|
2875
|
+
"description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
|
|
2875
2876
|
"values": []
|
|
2876
2877
|
},
|
|
2877
2878
|
{
|
|
2878
2879
|
"name": "disabled",
|
|
2879
|
-
"description": "
|
|
2880
|
+
"description": "Disables all options within the group.",
|
|
2880
2881
|
"values": []
|
|
2881
|
-
}
|
|
2882
|
-
{ "name": "selected", "values": [] }
|
|
2882
|
+
}
|
|
2883
2883
|
],
|
|
2884
2884
|
"references": [
|
|
2885
2885
|
{
|
|
2886
2886
|
"name": "Documentation",
|
|
2887
|
-
"url": "https://zinc.style/components/
|
|
2887
|
+
"url": "https://zinc.style/components/opt-group"
|
|
2888
2888
|
}
|
|
2889
2889
|
]
|
|
2890
2890
|
},
|
|
@@ -2942,7 +2942,7 @@
|
|
|
2942
2942
|
},
|
|
2943
2943
|
{
|
|
2944
2944
|
"name": "zn-page-builder",
|
|
2945
|
-
"description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToSlot(type: _string_, containerId: _string_, slotIndex: _number_): _PageSection | null_** - Adds a new section of a registered type into a container's slot. Returns null if not allowed.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container
|
|
2945
|
+
"description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToSlot(type: _string_, containerId: _string_, slotIndex: _number_): _PageSection | null_** - Adds a new section of a registered type into a container's slot. Returns null if not allowed.\n- **setSectionColumns(id: _string_, columns: _number_)** - Sets how many slots per row a container whose type allows a choice lays out,\nclamped to the declared bounds. Children keep their order and reflow into the\nnew width, so nothing is lost by narrowing one.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container that many slots wide — rows are added as they fill — and `slots-min`/ `slots-max` let each placed section choose its own width; `accepts` is a comma-separated list of the type keys its slots allow.\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.\n- **inspector-header** - The inspector's fixed header (icon, section name, type, close).\n- **inspector-body** - The inspector's scrolling form area.",
|
|
2946
2946
|
"attributes": [
|
|
2947
2947
|
{
|
|
2948
2948
|
"name": "name",
|
|
@@ -3522,82 +3522,6 @@
|
|
|
3522
3522
|
}
|
|
3523
3523
|
]
|
|
3524
3524
|
},
|
|
3525
|
-
{
|
|
3526
|
-
"name": "zn-radio-group",
|
|
3527
|
-
"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 - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-radio-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
3528
|
-
"attributes": [
|
|
3529
|
-
{
|
|
3530
|
-
"name": "label",
|
|
3531
|
-
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
3532
|
-
"values": []
|
|
3533
|
-
},
|
|
3534
|
-
{
|
|
3535
|
-
"name": "label-tooltip",
|
|
3536
|
-
"description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
|
|
3537
|
-
"values": []
|
|
3538
|
-
},
|
|
3539
|
-
{
|
|
3540
|
-
"name": "help-text",
|
|
3541
|
-
"description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
3542
|
-
"values": []
|
|
3543
|
-
},
|
|
3544
|
-
{
|
|
3545
|
-
"name": "name",
|
|
3546
|
-
"description": "The name of the radio group, submitted as a name/value pair with form data.",
|
|
3547
|
-
"values": []
|
|
3548
|
-
},
|
|
3549
|
-
{
|
|
3550
|
-
"name": "value",
|
|
3551
|
-
"description": "The current value of the radio group, submitted as a name/value pair with form data.",
|
|
3552
|
-
"values": []
|
|
3553
|
-
},
|
|
3554
|
-
{
|
|
3555
|
-
"name": "size",
|
|
3556
|
-
"description": "The radio group's size. This size will be applied to all child radios",
|
|
3557
|
-
"values": [
|
|
3558
|
-
{ "name": "small" },
|
|
3559
|
-
{ "name": "medium" },
|
|
3560
|
-
{ "name": "large" }
|
|
3561
|
-
]
|
|
3562
|
-
},
|
|
3563
|
-
{
|
|
3564
|
-
"name": "horizontal",
|
|
3565
|
-
"description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
|
|
3566
|
-
"values": []
|
|
3567
|
-
},
|
|
3568
|
-
{
|
|
3569
|
-
"name": "contained",
|
|
3570
|
-
"description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
|
|
3571
|
-
"values": []
|
|
3572
|
-
},
|
|
3573
|
-
{
|
|
3574
|
-
"name": "square",
|
|
3575
|
-
"description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
|
|
3576
|
-
"values": []
|
|
3577
|
-
},
|
|
3578
|
-
{
|
|
3579
|
-
"name": "wrap",
|
|
3580
|
-
"description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
|
|
3581
|
-
"values": []
|
|
3582
|
-
},
|
|
3583
|
-
{
|
|
3584
|
-
"name": "form",
|
|
3585
|
-
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
3586
|
-
"values": []
|
|
3587
|
-
},
|
|
3588
|
-
{
|
|
3589
|
-
"name": "required",
|
|
3590
|
-
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
3591
|
-
"values": []
|
|
3592
|
-
}
|
|
3593
|
-
],
|
|
3594
|
-
"references": [
|
|
3595
|
-
{
|
|
3596
|
-
"name": "Documentation",
|
|
3597
|
-
"url": "https://zinc.style/components/radio-group"
|
|
3598
|
-
}
|
|
3599
|
-
]
|
|
3600
|
-
},
|
|
3601
3525
|
{
|
|
3602
3526
|
"name": "zn-rating",
|
|
3603
3527
|
"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 - **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity()** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n- **help-text** - Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n- **--preview-color** - The color of the preview value. _(default: undefined)_\n- **--preview-size** - The font size of the preview value. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the symbols and help text.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **preview** - The value shown next to the symbols when `preview` is enabled.",
|
|
@@ -3727,6 +3651,82 @@
|
|
|
3727
3651
|
}
|
|
3728
3652
|
]
|
|
3729
3653
|
},
|
|
3654
|
+
{
|
|
3655
|
+
"name": "zn-radio-group",
|
|
3656
|
+
"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 - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-radio-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
3657
|
+
"attributes": [
|
|
3658
|
+
{
|
|
3659
|
+
"name": "label",
|
|
3660
|
+
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
3661
|
+
"values": []
|
|
3662
|
+
},
|
|
3663
|
+
{
|
|
3664
|
+
"name": "label-tooltip",
|
|
3665
|
+
"description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
|
|
3666
|
+
"values": []
|
|
3667
|
+
},
|
|
3668
|
+
{
|
|
3669
|
+
"name": "help-text",
|
|
3670
|
+
"description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
3671
|
+
"values": []
|
|
3672
|
+
},
|
|
3673
|
+
{
|
|
3674
|
+
"name": "name",
|
|
3675
|
+
"description": "The name of the radio group, submitted as a name/value pair with form data.",
|
|
3676
|
+
"values": []
|
|
3677
|
+
},
|
|
3678
|
+
{
|
|
3679
|
+
"name": "value",
|
|
3680
|
+
"description": "The current value of the radio group, submitted as a name/value pair with form data.",
|
|
3681
|
+
"values": []
|
|
3682
|
+
},
|
|
3683
|
+
{
|
|
3684
|
+
"name": "size",
|
|
3685
|
+
"description": "The radio group's size. This size will be applied to all child radios",
|
|
3686
|
+
"values": [
|
|
3687
|
+
{ "name": "small" },
|
|
3688
|
+
{ "name": "medium" },
|
|
3689
|
+
{ "name": "large" }
|
|
3690
|
+
]
|
|
3691
|
+
},
|
|
3692
|
+
{
|
|
3693
|
+
"name": "horizontal",
|
|
3694
|
+
"description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
|
|
3695
|
+
"values": []
|
|
3696
|
+
},
|
|
3697
|
+
{
|
|
3698
|
+
"name": "contained",
|
|
3699
|
+
"description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
|
|
3700
|
+
"values": []
|
|
3701
|
+
},
|
|
3702
|
+
{
|
|
3703
|
+
"name": "square",
|
|
3704
|
+
"description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
|
|
3705
|
+
"values": []
|
|
3706
|
+
},
|
|
3707
|
+
{
|
|
3708
|
+
"name": "wrap",
|
|
3709
|
+
"description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
|
|
3710
|
+
"values": []
|
|
3711
|
+
},
|
|
3712
|
+
{
|
|
3713
|
+
"name": "form",
|
|
3714
|
+
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
3715
|
+
"values": []
|
|
3716
|
+
},
|
|
3717
|
+
{
|
|
3718
|
+
"name": "required",
|
|
3719
|
+
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
3720
|
+
"values": []
|
|
3721
|
+
}
|
|
3722
|
+
],
|
|
3723
|
+
"references": [
|
|
3724
|
+
{
|
|
3725
|
+
"name": "Documentation",
|
|
3726
|
+
"url": "https://zinc.style/components/radio-group"
|
|
3727
|
+
}
|
|
3728
|
+
]
|
|
3729
|
+
},
|
|
3730
3730
|
{
|
|
3731
3731
|
"name": "zn-schedule-builder",
|
|
3732
3732
|
"description": "Builds a weekly opening-hours schedule as a drag-to-paint calendar or a compact list of\ntime ranges, and posts the result as JSON.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the schedule changes.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **setDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, in the save timezone.\n- **getDay(day: _ScheduleDay_): _ScheduleRange[]_** - Reads the hours for a single day, in the save timezone.\n- **setDisplayDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, given in the display timezone.\n\n### **Slots:**\n - **label** - The schedule's label. Alternatively, use the `label` attribute.\n- **help-text** - Text that describes how to use the schedule. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--slot-height** - The height of a single time slot in the calendar. Defaults to `18px`. _(default: undefined)_\n- **--gutter-width** - The width of the calendar's time gutter. Defaults to `64px`. _(default: undefined)_\n- **--open-color** - The fill used for open hours. _(default: undefined)_\n- **--reduced-color** - The fill used for hours an exception removes. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the builder, label and help text.\n- **base** - The component's base wrapper.\n- **toolbar** - The row above the builder holding the hint, legend and view toggle.\n- **calendar** - The calendar view wrapper.\n- **list** - The form (list) view wrapper.\n- **summary** - The summary panel beside the calendar.",
|