zinggrid
Version:
ZingGrid - A fully-featured, native, web-component, data table and grid for Javascript applications.
1,192 lines • 492 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "README.md",
"modules": [
{
"kind": "javascript-module",
"path": "zinggrid-lib/src/js/components/zg-batch-edit/ZGBatchEdit.js",
"declarations": [
{
"kind": "class",
"customElement": true,
"description": "The `<zg-batch-edit>` element is used to define the batch edit region. `<zg-batch-edit>` is created internally and should not be placed directly in the user's HTML; however, the user can style the `<zg-batch-edit>` using the `zg-batch-edit` selector.",
"tagName": "ZGBatchEdit",
"cssProperties": [
{
"name": "--zing-grid-batch-edit-style-border",
"description": "Styles the border of the batch edit styling element",
"syntax": "<line-width> || <line-style> || <color>",
"default": "1px solid #d6e9ff"
},
{
"name": "--zing-grid-batch-edit-style-box-shadow",
"description": "Styles the box-shadow of the frozen column styling element",
"syntax": "none | <shadow>#",
"default": "inset 0 0 6px #99caff"
},
{
"name": "--zg-cell-dirty-edit-border-width",
"description": "Sets the border width of the dirty cell marker",
"syntax": "",
"default": "7px"
},
{
"name": "--zg-cell-dirty-edit-border-color",
"description": "Sets the color of the dirty cell marker",
"syntax": "",
"default": "red;"
},
{
"name": "--zg-row-dirty-delete-background-color",
"description": "Sets the background color of the dirty row on row delete",
"syntax": "",
"default": "gray;"
},
{
"name": "--zg-row-dirty-delete-color",
"description": "Sets the color of the dirty row on row delete",
"syntax": "<color>",
"default": ""
},
{
"name": "--zg-row-dirty-insert-background-color",
"description": "Sets the background color of the dirty row on row insert",
"syntax": "",
"default": "green;"
},
{
"name": "--zg-row-dirty-insert-color",
"description": "Sets the color of the dirty row on row insert",
"syntax": "<color>",
"default": ""
}
]
}
],
"exports": [
{
"kind": "js",
"name": "ZGBatchEdit",
"declaration": {
"name": "ZGBatchEdit",
"module": "zinggrid-lib/src/js/components/zg-batch-edit/ZGBatchEdit.js"
}
},
{
"kind": "custom-element-definition",
"name": "zg-batch-edit",
"declaration": {
"name": "ZGBatchEdit",
"module": "zinggrid-lib/src/js/components/zg-batch-edit/ZGBatchEdit.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "zinggrid-lib/src/js/components/zg-body/ZGBody.js",
"declarations": [
{
"kind": "class",
"customElement": true,
"description": "`<zg-body>` is created dynamically by the ZingGrid library, and as such should not be manually added by the developer. However the user can style `<zg-body>` using CSS.",
"tagName": "ZGBody",
"cssProperties": [
{
"name": "--zg-body-border-left",
"description": "Styles the left border of grid body",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-body-border, 0)"
},
{
"name": "--zg-body-border-right",
"description": "Styles the right border of grid body",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-body-border, 0)"
},
{
"name": "--zg-body-font-family",
"description": "Sets the font family of contents inside grid body",
"syntax": "[ <'family-name'> | <generic-family> ]#",
"default": "inherit"
},
{
"name": "--zg-body-font-size",
"description": "Sets the font size of contents inside grid body",
"syntax": "<absolute-size> | <relative-size> | <length-percentage>",
"default": "inherit"
},
{
"name": "--zg-body-font-style",
"description": "Sets the font style of contents inside grid body",
"syntax": "normal | italic | oblique <angle>?",
"default": "inherit"
},
{
"name": "--zg-body-font-weight",
"description": "Sets the font weight of contents inside grid body",
"syntax": "<font-weight-absolute> | bolder | lighter",
"default": "inherit"
},
{
"name": "--zg-body-line-height",
"description": "Sets the line-height of contents inside of grid body",
"syntax": "normal | <number> | <length> | <percentage>",
"default": "inherit"
},
{
"name": "--zg-body-card-background",
"description": "Styles the background of grid body in 'card' layout-mode",
"syntax": "",
"default": "linear-gradient(45deg, #f9fafb 20%, #fff)"
},
{
"name": "--zg-body-card-border",
"description": "Styles the border of grid body in 'card' layout-mode",
"syntax": "<line-width> || <line-style> || <color>",
"default": "0"
},
{
"name": "--zg-body-card-border-bottom",
"description": "Styles the bottom border of grid body in 'card' layout-mode",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-body-card-border, 0)"
},
{
"name": "--zg-body-card-border-left",
"description": "Styles the left border of grid body in 'card' layout-mode",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-body-card-border, 0)"
},
{
"name": "--zg-body-card-border-right",
"description": "Styles the right border of grid body in 'card' layout-mode",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-body-card-border, 0)"
},
{
"name": "--zg-body-card-border-top",
"description": "Styles the top border of grid body in 'card' layout-mode. Note: If `--zg-row-border-top` set in 'card' layout-mode it will override `--zg-body-border-top`.",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-body-card-border, 0)"
},
{
"name": "--zg-body-card-display",
"description": "Sets display of grid body in 'card' layout-mode",
"syntax": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>",
"default": "grid"
},
{
"name": "--zg-body-border-top",
"description": "Styles the top border of grid body. Note: If `--zg-row-border-top` set, it will override `--zg-body-border-top`.",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-body-border, 0)"
},
{
"name": "--zg-body-border",
"description": "Styles the border of grid body",
"syntax": "<line-width> || <line-style> || <color>",
"default": "0"
},
{
"name": "--zg-body-border-bottom",
"description": "Styles the bottom border of grid body",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-body-border, 0)"
},
{
"name": "--zg-body-background",
"description": "Styles the background of grid body",
"syntax": "",
"default": "transparent"
},
{
"name": "--zg-body-color",
"description": "Sets the font color of contents inside grid body",
"syntax": "<color>",
"default": "inherit"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "ZGBody",
"declaration": {
"name": "ZGBody",
"module": "zinggrid-lib/src/js/components/zg-body/ZGBody.js"
}
},
{
"kind": "custom-element-definition",
"name": "zg-body",
"declaration": {
"name": "ZGBody",
"module": "zinggrid-lib/src/js/components/zg-body/ZGBody.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "zinggrid-lib/src/js/components/zg-button/ZGButton.js",
"declarations": [
{
"kind": "class",
"customElement": true,
"description": "A custom, styled button that can be used both for internal grid-related action and for user-specific actions. It is stylable via CSS. Some buttons are automatically inserted when a feature that uses it enabled, like `pager`, while others are inserted manually by the user.",
"tagName": "ZGButton",
"attributes": [
{
"name": "action",
"description": "Sets the action of the button",
"type": "string"
},
{
"name": "custom-disabled",
"description": "Set to a template or a function to return true or false to set the disabled state The function's callback receives rowData and zg-cell object if in a cell",
"type": "string"
},
{
"name": "custom-tooltip",
"description": "Sets the tooltip in the case of custom buttons. Can override the default tooltip on builtin buttons",
"type": "string"
},
{
"name": "disabled",
"description": "Presence of attribute determines if the button is disabled or not",
"type": "boolean"
},
{
"name": "force-border",
"description": "By default, action buttons have no border and custom buttons do. You can force a border by setting the `[force-border]` attribute and you can force no border by setting `[force-border=\"disabled\"]`",
"type": "string | boolean"
},
{
"name": "handler",
"description": "A custom function to call on button click",
"type": "function"
},
{
"name": "icon",
"description": "Sets the icon for the button",
"type": "string"
}
],
"cssProperties": [
{
"name": "--zg-button-background",
"description": "Styles the background of button",
"syntax": "",
"default": "Browser's default value"
},
{
"name": "--zg-button-border",
"description": "Styles the border of a button",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-bottom",
"description": "Styles the bottom border of a button",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-left",
"description": "Styles the left border of a button",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-right",
"description": "Styles the right border of a button",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-top",
"description": "Styles the top border of a button",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-box-shadow",
"description": "Styles the box-shadow of the button",
"syntax": "none | <shadow>#",
"default": "Browser's default value"
},
{
"name": "--zg-button-color",
"description": "Sets the font color of button",
"syntax": "<color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-font-family",
"description": "Sets the font family of button",
"syntax": "[ <'family-name'> | <generic-family> ]#",
"default": "inherit"
},
{
"name": "--zg-button-font-size",
"description": "Sets the font size of button",
"syntax": "<absolute-size> | <relative-size> | <length-percentage>",
"default": "90%"
},
{
"name": "--zg-button-font-style",
"description": "Sets the font style of button",
"syntax": "normal | italic | oblique <angle>?",
"default": "inherit"
},
{
"name": "--zg-button-font-weight",
"description": "Sets the font weight of button",
"syntax": "<font-weight-absolute> | bolder | lighter",
"default": "inherit"
},
{
"name": "--zg-button-line-height",
"description": "Sets the line height of button",
"syntax": "normal | <number> | <length> | <percentage>",
"default": "inherit"
},
{
"name": "--zg-button-margin",
"description": "Sets the margin of button",
"syntax": "[ <length> | <percentage> | auto ]{1,4}",
"default": "0"
},
{
"name": "--zg-button-padding",
"description": "Sets the padding of button",
"syntax": "[ <length> | <percentage> ]{1,4}",
"default": "3px"
},
{
"name": "--zg-button-icon-background_hover",
"description": "Styles the background of the icon in a button on hover state",
"syntax": "<'background'>",
"default": "#fff"
},
{
"name": "--zg-button-background_hover",
"description": "Styles the background of button on hover",
"syntax": "",
"default": "Browser's default value"
},
{
"name": "--zg-button-border_hover",
"description": "Styles the border of a button on hover state",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-bottom_hover",
"description": "Styles the bottom border of a button on hover",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-left_hover",
"description": "Styles the left border of a button on hover",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-right_hover",
"description": "Styles the right border of a button on hover",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-top_hover",
"description": "Styles the top border of a button on hover",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-box-shadow_hover",
"description": "Styles the box-shadow of the button on hover",
"syntax": "none | <shadow>#",
"default": "Browser's default value"
},
{
"name": "--zg-button-color_hover",
"description": "Styles the color of the button on hover",
"syntax": "<color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-transition_speed",
"description": "Sets the transition speed of button",
"syntax": "<single-transition>#",
"default": "var(--theme-transition_speed)"
},
{
"name": "--zg-button-background_focus",
"description": "Styles the background of button on focus",
"syntax": "",
"default": "Browser's default value"
},
{
"name": "--zg-button-border_focus",
"description": "Styles the border of a button on focus state",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-bottom_focus",
"description": "Styles the bottom border of a button on focus",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-left_focus",
"description": "Styles the left border of a button on focus",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-right_focus",
"description": "Styles the right border of a button on focus",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-top_focus",
"description": "Styles the top border of a button on focus",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-box-shadow_focus",
"description": "Styles the box-shadow of the button on focus",
"syntax": "none | <shadow>#",
"default": "Browser's default value"
},
{
"name": "--zg-button-color_focus",
"description": "Styles the color of the button on focus",
"syntax": "<color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-background_active",
"description": "Styles of background of button on active state",
"syntax": "",
"default": "var(--theme-background-color)"
},
{
"name": "--zg-button-border_active",
"description": "Styles the border of a button on active state",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-bottom_active",
"description": "Styles the bottom border of a button on active state",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-left_active",
"description": "Styles the left border of a button on active state",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-right_active",
"description": "Styles the right border of a button on active state",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-border-top_active",
"description": "Styles the top border of a button on active state",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-box-shadow_active",
"description": "Styles the box-shadow of the button on activation",
"syntax": "none | <shadow>#",
"default": "Browser's default value"
},
{
"name": "--zg-button-color_active",
"description": "Styles the color of the button on active state",
"syntax": "<color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-opacity_disabled",
"description": "Styles the opacity of disabled button or button on hover",
"syntax": "<alpha-value>",
"default": "0.2"
},
{
"name": "--zg-button-background_custom",
"description": "Styles the background of custom button",
"syntax": "",
"default": "Browser's default value"
},
{
"name": "--zg-button-border_custom",
"description": "Styles the border of custom button",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-box-shadow_custom",
"description": "Applies a box shadow behind custom button",
"syntax": "none | <shadow>#",
"default": "Browser's default value"
},
{
"name": "--zg-button-background_custom_focus",
"description": "Styles the background of custom button on focus",
"syntax": "",
"default": "Browser's default value"
},
{
"name": "--zg-button-border_custom_focus",
"description": "Styles the border of custom button on focus",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-box-shadow_custom_focus",
"description": "Applies a box shadow behind custom button on focus",
"syntax": "none | <shadow>#",
"default": "Browser's default value"
},
{
"name": "--zg-button-color_custom_focus",
"description": "Sets the font color of custom button on focus",
"syntax": "<color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-icon-background_custom_hover",
"description": "Styles the background of icon in custom button on hover",
"syntax": "<'background'>",
"default": "#fff"
},
{
"name": "--zg-button-background_custom_hover",
"description": "Styles the background of custom button on hover",
"syntax": "",
"default": "Browser's default value"
},
{
"name": "--zg-button-border_custom_hover",
"description": "Styles the border of custom button on hover",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-box-shadow_custom_hover",
"description": "Applies a box shadow behing custom button on hover",
"syntax": "none | <shadow>#",
"default": "Browser's default value"
},
{
"name": "--zg-button-color_custom_hover",
"description": "Sets the font color of custom button on hover",
"syntax": "<color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-background_custom_active",
"description": "Styles the background of custom button on active state",
"syntax": "",
"default": "Browser's default value"
},
{
"name": "--zg-button-border_custom_active",
"description": "Styles the border of custom button on active state",
"syntax": "<line-width> || <line-style> || <color>",
"default": "Browser's default value"
},
{
"name": "--zg-button-box-shadow_custom_active",
"description": "Applies a box shadow behind custom button on active state",
"syntax": "none | <shadow>#",
"default": "Browser's default value"
},
{
"name": "--zg-button-color_custom_active",
"description": "Sets the font color of custom button on active state",
"syntax": "<color>",
"default": "Browser's default value"
}
],
"slots": [
{
"name": "",
"description": "Button content."
},
{
"name": "icon",
"description": "Button icon. Replaces the default slot."
},
{
"name": "label",
"description": "Button label. Use to add a label when using the \"icon\" slot."
}
]
}
],
"exports": [
{
"kind": "js",
"name": "ZGButton",
"declaration": {
"name": "ZGButton",
"module": "zinggrid-lib/src/js/components/zg-button/ZGButton.js"
}
},
{
"kind": "custom-element-definition",
"name": "zg-button",
"declaration": {
"name": "ZGButton",
"module": "zinggrid-lib/src/js/components/zg-button/ZGButton.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "zinggrid-lib/src/js/components/zg-caption/ZGCaption.js",
"declarations": [
{
"kind": "class",
"customElement": true,
"description": "A caption can be manually inserted inside the `<zing-grid>` tag as slotted content or automatically inserted when the `caption` is enabled. `<zg-caption>` is stylable via CSS.",
"tagName": "ZGCaption",
"attributes": [
{
"name": "align",
"description": "The alignment of content in the caption",
"type": "string"
},
{
"name": "position",
"description": "Indicates where to position the caption",
"type": "string"
}
],
"cssParts": [
{
"name": "caption",
"description": "Caption container"
},
{
"name": "title",
"description": "The title container"
},
{
"name": "toolbar",
"description": "The toolbar container"
}
],
"cssProperties": [
{
"name": "--zg-caption-background",
"description": "Styles the background of caption",
"syntax": "",
"default": "Browser's default value"
},
{
"name": "--zg-caption-border",
"description": "Styles the border of caption",
"syntax": "<line-width> || <line-style> || <color>",
"default": "0"
},
{
"name": "--zg-caption-border-bottom",
"description": "Styles the bottom border of caption",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-caption-border, 0)"
},
{
"name": "--zg-caption-border-left",
"description": "Styles the left border of caption",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-caption-border, 0)"
},
{
"name": "--zg-caption-border-right",
"description": "Styles the right border of caption",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-caption-border, 0)"
},
{
"name": "--zg-caption-border-top",
"description": "Styles the top border of caption",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-caption-border, 0)"
},
{
"name": "--zg-caption-border-radius",
"description": "Applies a border-radius to the caption",
"syntax": "<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?",
"default": "0"
},
{
"name": "--zg-caption-border-top-left-radius",
"description": "Applies a top-left border-radius to the caption",
"syntax": "<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?",
"default": "0"
},
{
"name": "--zg-caption-border-top-right-radius",
"description": "Applies a top-right border-radius to the caption",
"syntax": "<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?",
"default": "0"
},
{
"name": "--zg-caption-border-bottom-left-radius",
"description": "Applies a bottom-left border-radius to the caption",
"syntax": "<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?",
"default": "0"
},
{
"name": "--zg-caption-border-bottom-right-radius",
"description": "Applies a bottom-right border-radius to the caption",
"syntax": "<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?",
"default": "0"
},
{
"name": "--zg-caption-box-shadow",
"description": "Applies a box shadow behind caption",
"syntax": "none | <shadow>#",
"default": "none"
},
{
"name": "--zg-caption-color",
"description": "Sets the font color of caption",
"syntax": "<color>",
"default": "Browser's default value"
},
{
"name": "--zg-caption-font-family",
"description": "Sets the font family of caption",
"syntax": "[ <'family-name'> | <generic-family> ]#",
"default": "Browser's default value"
},
{
"name": "--zg-caption-font-size",
"description": "Sets the font size of caption",
"syntax": "<absolute-size> | <relative-size> | <length-percentage>",
"default": "1.25rem"
},
{
"name": "--zg-caption-font-style",
"description": "Sets the font style of caption",
"syntax": "normal | italic | oblique <angle>?",
"default": "Browser's default value"
},
{
"name": "--zg-caption-font-weight",
"description": "Sets the font weight of caption",
"syntax": "<font-weight-absolute> | bolder | lighter",
"default": "Browser's default value"
},
{
"name": "--zg-caption-margin",
"description": "Sets the margin of caption",
"syntax": "[ <length> | <percentage> | auto ]{1,4}",
"default": "0"
},
{
"name": "--zg-caption-opacity",
"description": "Sets the opacity of caption",
"syntax": "<alpha-value>",
"default": "Browser's default value"
},
{
"name": "--zg-caption-padding",
"description": "Sets the padding of caption",
"syntax": "[ <length> | <percentage> ]{1,4}",
"default": "0 var(--theme-padding_x)"
},
{
"name": "--zg-caption-transition",
"description": "Sets the transition of caption",
"syntax": "<single-transition>#",
"default": "Browser's default value"
},
{
"name": "--zg-caption-align-items",
"description": "Sets the vertical alignment of items (title and toolbar) in caption",
"syntax": "normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]",
"default": "center"
},
{
"name": "--zg-caption-flex-direction",
"description": "Sets the flex direction of items (title and toolbar) in caption",
"syntax": "row | row-reverse | column | column-reverse",
"default": "row"
},
{
"name": "--zg-caption-height",
"description": "Sets the height of caption",
"syntax": "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
"default": "Browser's default value"
},
{
"name": "--zg-caption-title-align-self",
"description": "Sets vertical alignment of items in caption title",
"syntax": "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>",
"default": "center"
},
{
"name": "--zg-caption-title-flex",
"description": "Sets how items are flexed in caption title",
"syntax": "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]",
"default": "0 1 auto"
},
{
"name": "--zg-caption-title-font-family",
"description": "Sets the font-family of caption title",
"syntax": "[ <'family-name'> | <generic-family> ]#",
"default": "inherit"
},
{
"name": "--zg-caption-title-font-size",
"description": "Sets the font size of caption title",
"syntax": "<absolute-size> | <relative-size> | <length-percentage>",
"default": "inherit"
},
{
"name": "--zg-caption-title-font-style",
"description": "Sets the font style of caption title",
"syntax": "normal | italic | oblique <angle>?",
"default": "inherit"
},
{
"name": "--zg-caption-title-font-weight",
"description": "Sets the font weight of caption title",
"syntax": "<font-weight-absolute> | bolder | lighter",
"default": "inherit"
},
{
"name": "--zg-caption-title-margin",
"description": "Sets the margin of caption title",
"syntax": "[ <length> | <percentage> | auto ]{1,4}",
"default": "0"
},
{
"name": "--zg-caption-title-padding",
"description": "Sets the padding of caption title",
"syntax": "[ <length> | <percentage> ]{1,4}",
"default": "0"
},
{
"name": "--zg-caption-title-order",
"description": "Sets the order of caption title with respect to caption toolbar",
"syntax": "<integer>",
"default": "Browser's default value"
},
{
"name": "--zg-caption-title-text-align",
"description": "Sets the text alignment of caption title",
"syntax": "start | end | left | right | center | justify | match-parent",
"default": "inherit"
},
{
"name": "--zg-caption-title-transform",
"description": "Sets the transform of caption title",
"syntax": "none | <transform-list>",
"default": "none"
},
{
"name": "--zg-caption-title-width",
"description": "Sets the width of caption title",
"syntax": "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
"default": "100%"
},
{
"name": "--zg-caption-toolbar-align-self",
"description": "Sets vertical alignment of items in caption toolbar",
"syntax": "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>",
"default": "Browser's default value"
},
{
"name": "--zg-caption-toolbar-bottom",
"description": "Sets the position from bottom of caption toolbar. To apply, set --zg-caption-toolbar-position.",
"syntax": "<length> | <percentage> | auto",
"default": "Browser's default value"
},
{
"name": "--zg-caption-toolbar-justify-content",
"description": "Sets the horizontal alignment of contents in caption toolbar",
"syntax": "normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]",
"default": "flex-start"
},
{
"name": "--zg-caption-toolbar-left",
"description": "Sets the left of caption toolbar. To apply, set --zg-caption-toolbar-position.",
"syntax": "<length> | <percentage> | auto",
"default": "auto"
},
{
"name": "--zg-caption-toolbar-margin",
"description": "Sets the margin of caption toolbar",
"syntax": "[ <length> | <percentage> | auto ]{1,4}",
"default": "0"
},
{
"name": "--zg-caption-toolbar-position",
"description": "Sets the position of caption toolbar",
"syntax": "static | relative | absolute | sticky | fixed",
"default": "Browser's default value"
},
{
"name": "--zg-caption-toolbar-right",
"description": "Sets the right of caption toolbar. To apply, set --zg-caption-toolbar-position.",
"syntax": "<length> | <percentage> | auto",
"default": "auto"
},
{
"name": "--zg-caption-toolbar-top",
"description": "Sets the top of caption toolbar. To apply, set --zg-caption-toolbar-position.",
"syntax": "<length> | <percentage> | auto",
"default": "auto"
},
{
"name": "--zg-caption-toolbar-transform",
"description": "Sets the transform of caption toolbar",
"syntax": "none | <transform-list>",
"default": "none"
},
{
"name": "--zg-caption-toolbar-width",
"description": "Sets the width of caption toolbar",
"syntax": "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
"default": "auto"
},
{
"name": "--zg-caption-button-background",
"description": "Styles the background of button in caption",
"syntax": "",
"default": "var(--zg-button-background)"
},
{
"name": "--zg-caption-button-background_focus",
"description": "Styles the background of button in caption when the button is in a `focus` state",
"syntax": "",
"default": "var(--zg-caption-button-background, var(--zg-button-background))"
},
{
"name": "--zg-caption-button-background_hover",
"description": "Styles the background of button in caption when the button is in a `hover` state",
"syntax": "",
"default": "var(--zg-caption-button-background, var(--zg-button-background))"
},
{
"name": "--zg-caption-button-background_active",
"description": "Styles the background of button in caption when the button is in an `active` state",
"syntax": "",
"default": "var(--zg-caption-button-background, var(--zg-button-background))"
}
],
"slots": [
{
"name": "",
"description": "Caption title."
},
{
"name": "message",
"description": "Caption title. Use when using a feature that enables caption toolbar ([contextMenu], [search], [staticMenu])."
},
{
"name": "tool",
"description": "Caption toolbar, which is added to the rightmost of caption by default."
}
]
}
],
"exports": [
{
"kind": "js",
"name": "ZGCaption",
"declaration": {
"name": "ZGCaption",
"module": "zinggrid-lib/src/js/components/zg-caption/ZGCaption.js"
}
},
{
"kind": "custom-element-definition",
"name": "zg-caption",
"declaration": {
"name": "ZGCaption",
"module": "zinggrid-lib/src/js/components/zg-caption/ZGCaption.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "zinggrid-lib/src/js/components/zg-card/ZGCard.js",
"declarations": [
{
"kind": "class",
"customElement": true,
"description": "The container for a card template that holds a custom template for card mode. This custom template will be rendered per row. `<zg-card>` can be styled via CSS or the `--zg-card-*` selectors. Please reference the \"Template\" section for more details on templates.",
"tagName": "ZGCard",
"attributes": [
{
"name": "editor",
"description": "Sets the custom editor",
"type": "function"
},
{
"name": "editor-template",
"description": "Points to an external template element to be used as the template for the card's editor.",
"type": "function"
},
{
"name": "renderer",
"description": "The return value of the method is set as the innerHTML of `<zg-card>`. If nothing is returned, it will not change the currently rendered card. The method takes the paramters `data`, `domCard`, and `rowObject`.",
"type": "function"
},
{
"name": "renderer-template",
"description": "Points to an external template element to be used as the template for the card's render.",
"type": "function"
}
],
"cssProperties": [
{
"name": "--zg-cell-background_layout_card",
"description": "Styles the background of cards in 'card' layout-mode",
"syntax": "",
"default": "Browser's default value"
},
{
"name": "--zg-cell-border_layout_card",
"description": "Styles the border of cards in 'card' layout-mode",
"syntax": "<line-width> || <line-style> || <color>",
"default": "0"
},
{
"name": "--zg-cell-border-bottom_layout_card",
"description": "Styles the bottom border of cards in 'card' layout-mode",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-card-border, 0)"
},
{
"name": "--zg-cell-border-left_layout_card",
"description": "Styles the left border of cards in 'card' layout-mode",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-card-border, 0)"
},
{
"name": "--zg-cell-border-right_layout_card",
"description": "Styles the right border of cards in 'card' layout-mode",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-card-border, 0)"
},
{
"name": "--zg-cell-border-top_layout_card",
"description": "Styles the top border of cards in 'card' layout-mode",
"syntax": "<line-width> || <line-style> || <color>",
"default": "var(--zg-card-border, 0)"
},
{
"name": "--zg-cell-color_layout_card",
"description": "Sets the font color of cards in 'card' layout-mode",
"syntax": "<color>",
"default": "inherit"
},
{
"name": "--zg-cell-font-family_layout_card",
"description": "Sets the font family of cards in 'card' layout-mode",
"syntax": "[ <'family-name'> | <generic-family> ]#",
"default": "inherit"
},
{
"name": "--zg-cell-font-size_layout_card",
"description": "Sets the font size of cards in 'card' layout-mode",
"syntax": "<absolute-size> | <relative-size> | <length-percentage>",
"default": "inherit"
},
{
"name": "--zg-cell-font-style_layout_card",
"description": "Sets the font family of cards in 'card' layout-mode",
"syntax": "normal | italic | oblique <angle>?",
"default": "inherit"
},
{
"name": "--zg-cell-font-weight_layout_card",
"description": "Sets the font weight of cards in 'card' layout-mode",
"syntax": "<font-weight-absolute> | bolder | lighter",
"default": "inherit"
},
{
"name": "--zg-cell-height_layout_card",
"description": "Sets the height of cards in 'card' layout-mode",
"syntax": "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)",
"default": "auto"
},
{
"name": "--zg-cell-line-height_layout_card",
"description": "Sets the line height of cards in 'card' layout-mode",
"syntax": "normal | <number> | <length> | <percentage>",
"default": "inherit"
},
{
"name": "--zg-cell-padding_layout_card",
"description": "Sets the padding of cards in 'card' layout-mode",
"syntax": "[ <length> | <percentage> ]{1,4}",
"default": "var(--theme-padding_y) var(--theme-padding_x)"
},
{
"name": "--zg-cell-transition_layout_card",
"description": "Sets the transition of cards in 'card' layout-mode",
"syntax": "<single-transition>#",
"default": "Browser's default value"
},
{
"name": "--zg-cell-word-break_layout_card",
"description": "Sets the word break of items in cards in 'card' layout-mode",
"syntax": "",
"default": "break-all"
}
],
"slots": [
{
"name": "",
"description": "Card content."
}
]
}
],
"exports": [
{
"kind": "js",
"name": "ZGCard",
"declaration": {
"name": "ZGCard",
"module": "zinggrid-lib/src/js/components/zg-card/ZGCard.js"
}
},
{
"kind": "custom-element-definition",
"name": "zg-card",
"declaration": {
"name": "ZGCard",
"module": "zinggrid-lib/src/js/components/zg-card/ZGCard.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "zinggrid-lib/src/