zinggrid
Version:
ZingGrid - A fully-featured, native, web-component, data table and grid for Javascript applications.
7 lines • 1.34 MB
JavaScript
/*!
*
* ZingGrid v2.1.3
* Author: ZingSoft https://www.zingsoft.com
*
*/
(()=>{var e={487:e=>{var t={utf8:{stringToBytes:function(e){return t.bin.stringToBytes(unescape(encodeURIComponent(e)))},bytesToString:function(e){return decodeURIComponent(escape(t.bin.bytesToString(e)))}},bin:{stringToBytes:function(e){for(var t=[],o=0;o<e.length;o++)t.push(255&e.charCodeAt(o));return t},bytesToString:function(e){for(var t=[],o=0;o<e.length;o++)t.push(String.fromCharCode(e[o]));return t.join("")}}};e.exports=t},1012:e=>{var t,o;t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",o={rotl:function(e,t){return e<<t|e>>>32-t},rotr:function(e,t){return e<<32-t|e>>>t},endian:function(e){if(e.constructor==Number)return 16711935&o.rotl(e,8)|4278255360&o.rotl(e,24);for(var t=0;t<e.length;t++)e[t]=o.endian(e[t]);return e},randomBytes:function(e){for(var t=[];e>0;e--)t.push(Math.floor(256*Math.random()));return t},bytesToWords:function(e){for(var t=[],o=0,n=0;o<e.length;o++,n+=8)t[n>>>5]|=e[o]<<24-n%32;return t},wordsToBytes:function(e){for(var t=[],o=0;o<32*e.length;o+=8)t.push(e[o>>>5]>>>24-o%32&255);return t},bytesToHex:function(e){for(var t=[],o=0;o<e.length;o++)t.push((e[o]>>>4).toString(16)),t.push((15&e[o]).toString(16));return t.join("")},hexToBytes:function(e){for(var t=[],o=0;o<e.length;o+=2)t.push(parseInt(e.substr(o,2),16));return t},bytesToBase64:function(e){for(var o=[],n=0;n<e.length;n+=3)for(var r=e[n]<<16|e[n+1]<<8|e[n+2],a=0;a<4;a++)8*n+6*a<=8*e.length?o.push(t.charAt(r>>>6*(3-a)&63)):o.push("=");return o.join("")},base64ToBytes:function(e){e=e.replace(/[^A-Z0-9+\/]/gi,"");for(var o=[],n=0,r=0;n<e.length;r=++n%4)0!=r&&o.push((t.indexOf(e.charAt(n-1))&Math.pow(2,-2*r+8)-1)<<2*r|t.indexOf(e.charAt(n))>>>6-2*r);return o}},e.exports=o},2259:(e,t,o)=>{(e.exports=o(9252)()).push([e.id,'/* Styling Wrappers\n * These independent wrapper divs sit on top of the grid to facilitate the batch edit visual look.\n * Since rows are split vertically into 3 rows (head, body, foot) there is no singular element\n * that wraps to form a body for styling, so we create artificial ones.\n * Their position is calculated (js) to match the current position of the matching editable rows,\n * otherwise the rest of the positioning/styling is handled with CSS\n*/\n:host {\n /**\n * @memberof ZGBatchEdit\n * @var --zing-grid-batch-edit-style-border\n * @default 1px solid #d6e9ff\n * @see border\n * @description Styles the border of the batch edit styling element\n * @demoLink https://app.zingsoft.com/demos/create/TX748SB9\n * @shadowOnly false\n */\n border: var(--zing-grid-batch-edit-style-border, 1px solid #d6e9ff);\n /**\n * @memberof ZGBatchEdit\n * @var --zing-grid-batch-edit-style-box-shadow\n * @default inset 0 0 6px #99caff\n * @see box-shadow\n * @description Styles the box-shadow of the frozen column styling element\n * @demoLink https://app.zingsoft.com/demos/create/YKOH0VPL\n * @shadowOnly false\n */\n box-shadow: var(--zing-grid-batch-edit-style-box-shadow, inset 0 0 5px var(--theme-color-primary));\n border-bottom-left-radius: var(--zing-grid-batch-edit-style-bottom-border-radius, 0);\n border-bottom-right-radius: var(--zing-grid-batch-edit-style-bottom-border-radius, 0);\n box-sizing: border-box;\n\tpointer-events: none;\n\tposition: absolute;\n\theight: 100%;\n width:100%;\n\ttop: 0;\n\tz-index: 1;\n}\n\n:host([layout="card"]) {\n display: none;\n}',""])},7679:(e,t,o)=>{(e.exports=o(9252)()).push([e.id,"/* SELF\n-------------------------------------- */\n:host {\n /**\n * @memberof ZGRow\n * @var --zg-row-card-grid-gap\n * @description Sets the gap between cards in 'card' layout-mode\n * @see grid-gap\n * @default 10px\n * @demoLink https://app.zingsoft.com/demos/create/JOUVG6NN\n * @shadowOnly true\n * @storyExample card\n */\n --card-gap: var(--zg-row-card-grid-gap, 10px); \n\n /**\n * @memberof ZGBody\n * @var --zg-body-border-left\n * @description Styles the left border of grid body\n * @see border\n * @default var(--zg-body-border, 0)\n * @demoLink https://app.zingsoft.com/demos/create/FPYUYEEX\n * @shadowOnly false\n */\n --zg-area-border-left_context: var(--zg-body-border-left, var(--zg-body-border));\n /**\n * @memberof ZGBody\n * @var --zg-body-border-right\n * @description Styles the right border of grid body\n * @see border\n * @default var(--zg-body-border, 0)\n * @demoLink https://app.zingsoft.com/demos/create/70O17569\n * @shadowOnly false\n */\n --zg-area-border-right_context: var(--zg-body-border-right, var(--zg-body-border));\n\n --zg-row-user-height_context: var(--zg-user-height_context, var(--zg-body-user-height_context));\n \n display: contents;\n /**\n * @memberof ZGBody\n * @var --zg-body-font-family\n * @description Sets the font family of contents inside grid body\n * @see font-family\n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/XS22J4JG\n * @shadowOnly false\n */\n --zg-row-area-font-family_context: var(--zg-body-font-family);\n /**\n * @memberof ZGBody\n * @var --zg-body-font-size\n * @description Sets the font size of contents inside grid body\n * @see font-size\n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/YLAXDUP9\n * @shadowOnly false\n */\n --zg-row-area-font-size_context: var(--zg-body-font-size);\n /**\n * @memberof ZGBody\n * @var --zg-body-font-style\n * @description Sets the font style of contents inside grid body\n * @see font-style\n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/0VOTEN03\n * @shadowOnly false\n */\n --zg-row-area-font-style_context: var(--zg-body-font-style);\n /**\n * @memberof ZGBody\n * @var --zg-body-font-weight\n * @description Sets the font weight of contents inside grid body\n * @see font-weight\n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/F6CRSTMQ\n * @shadowOnly false\n */\n --zg-row-area-font-weight_context: var(--zg-body-font-weight);\n /**\n * @memberof ZGBody\n * @var --zg-body-line-height\n * @description Sets the line-height of contents inside of grid body\n * @see line-height \n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/UO5MJUXO\n * @shadowOnly false\n */\n --zg-row-area-line-height_context: var(--zg-body-line-height);\n}\n\n/* Layout: Card */\n:host([layout=\"card\"]) {\n /**\n * @memberof ZGBody\n * @var --zg-body-card-background\n * @description Styles the background of grid body in 'card' layout-mode\n * @see background\n * @default linear-gradient(45deg, #f9fafb 20%, #fff)\n * @demoLink https://app.zingsoft.com/demos/create/XGWDT5HI\n * @shadowOnly false\n * @storyExample card\n */\n background: var(--zg-body-card-background, linear-gradient(45deg, #f9fafb 20%, #fff));\n /**\n * @memberof ZGBody\n * @var --zg-body-card-border\n * @description Styles the border of grid body in 'card' layout-mode\n * @see border\n * @default 0\n * @demoLink https://app.zingsoft.com/demos/create/UMQX6FC1\n * @shadowOnly false\n * @storyExample card\n */\n /**\n * @memberof ZGBody\n * @var --zg-body-card-border-bottom\n * @description Styles the bottom border of grid body in 'card' layout-mode\n * @see border\n * @default var(--zg-body-card-border, 0)\n * @demoLink https://app.zingsoft.com/demos/create/0CXPJ9CM\n * @shadowOnly false\n */\n border-bottom: var(--zg-body-card-border-bottom, var(--zg-body-card-border, 0));\n /**\n * @memberof ZGBody\n * @var --zg-body-card-border-left\n * @description Styles the left border of grid body in 'card' layout-mode\n * @see border\n * @default var(--zg-body-card-border, 0)\n * @demoLink https://app.zingsoft.com/demos/create/FPJ9DVE0\n * @shadowOnly false\n * @storyExample card\n */\n border-left: var(--zg-body-card-border-left, var(--zg-body-card-border, 0));\n /**\n * @memberof ZGBody\n * @var --zg-body-card-border-right\n * @description Styles the right border of grid body in 'card' layout-mode\n * @see border\n * @default var(--zg-body-card-border, 0)\n * @demoLink https://app.zingsoft.com/demos/create/YJHA2SIP\n * @shadowOnly false\n * @storyExample card\n */\n border-right: var(--zg-body-card-border-right, var(--zg-body-card-border, 0));\n /**\n * @memberof ZGBody\n * @var --zg-body-card-border-top\n * @description Styles the top border of grid body in 'card' layout-mode. Note: If `--zg-row-border-top` set in 'card' layout-mode\n * it will override `--zg-body-border-top`.\n * @see border\n * @default var(--zg-body-card-border, 0)\n * @demoLink https://app.zingsoft.com/demos/create/ZQPWRYZ2\n * @shadowOnly false\n * @storyExample card\n */\n border-top: var(--zg-body-card-border-top, var(--zg-body-card-border, 0));\n border-radius: var(--zg-body-border-radius, 0);\n box-sizing: border-box;\n /**\n * @memberof ZGBody\n * @var --zg-body-card-display\n * @description Sets display of grid body in 'card' layout-mode\n * @see display\n * @default grid\n * @demoLink https://app.zingsoft.com/demos/create/JHSU4OLH\n * @shadowOnly false\n * @storyExample card\n */\n display: var(--zg-body-card-display, grid);\n grid-template-columns: repeat(auto-fill, minmax(calc(var(--zg-card-columns, 25%) - var(--card-gap)), 1fr));;\n grid-auto-rows: auto;\n grid-gap: var(--card-gap, 10px);\n padding: var(--card-gap, 10px);\n -max-height: var(--zg-max-height);\n -overflow: auto;\n}\n:host([viewport=\"mobile\"][layout=\"card\"]) { --zg-card-columns: 100%; }\n:host([viewport=\"tablet-portrait\"][layout=\"card\"]) { --zg-card-columns: 50%; }\n:host([viewport=\"tablet-landscape\"][layout=\"card\"]) { --zg-card-columns: 33%; }\n:host([viewport=\"desktop\"][layout=\"card\"]) { --zg-card-columns: 25%; }\n:host([viewport=\"desktop-large\"][layout=\"card\"]) { --zg-card-columns: 25%; }\n\n/* CUSTOM CARD TEMPLATE (ZG-CARD) */\n\n/* SLOTTED ELEMENTS\n-------------------------------------- */\n/* ZG-ROW */\n\n:host ::slotted(zg-row:first-child) {\n /**\n * @memberof ZGBody\n * @var --zg-body-border-top\n * @description Styles the top border of grid body. Note: If `--zg-row-border-top` set,\n * it will override `--zg-body-border-top`.\n * @see border\n * @default var(--zg-body-border, 0)\n * @demoLink https://app.zingsoft.com/demos/create/C9XJMTTQ\n * @shadowOnly false\n */\n --zg-body-border-top_context: var(--zg-body-border-top, var(--zg-body-border, var(--zg-border-top_context)));\n}\n:host(:not([layout=\"card\"])) ::slotted(zg-row:last-child) {\n /**\n * @memberof ZGBody\n * @var --zg-body-border\n * @description Styles the border of grid body\n * @see border\n * @default 0\n * @demoLink https://app.zingsoft.com/demos/create/YWTPH9M0\n * @shadowOnly false\n */\n /**\n * @memberof ZGBody\n * @var --zg-body-border-bottom\n * @description Styles the bottom border of grid body\n * @see border\n * @default var(--zg-body-border, 0)\n * @demoLink https://app.zingsoft.com/demos/create/25V704EG\n * @shadowOnly false\n */\n --zg-body-border-bottom_context: var(--zg-body-border-bottom, var(--zg-body-border));\n}\n\n/* All Rows */\n:host(:not([layout=\"card\"])) ::slotted(zg-row) {\n /**\n * @memberof ZGRow\n * @var --zg-row-body-border\n * @description Styles the border of body rows\n * @see border\n * @default var(--zg-row-body-border, var(--zg-row-border-bottom, var(--zg-row-border, 0)))\n * @demoLink https://app.zingsoft.com/demos/create/EAVHDY7O\n * @shadowOnly false\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-body-border-bottom\n * @description Styles the bottom border of body rows\n * @see border\n * @default var(--zg-row-body-border, var(--zg-row-border-bottom, var(--zg-row-border, 0)))\n * @demoLink https://app.zingsoft.com/demos/create/HNJ2XN7Y\n * @shadowOnly false\n */\n --zg-row-area-border-bottom_context: var(--zg-row-body-border-bottom, var(--zg-row-body-border, var(--zg-row-border-bottom, var(--zg-row-border, var(--zg-body-border-bottom_context, 0)))));\n /**\n * @memberof ZGRow\n * @var --zg-row-body-border-left\n * @description Styles the left border of body rows\n * @see border\n * @default var(--zg-row-body-border, var(--zg-row-border-left, var(--zg-row-border, 0)))\n * @demoLink https://app.zingsoft.com/demos/create/E72YL6QW\n * @shadowOnly false\n */\n --zg-row-area-border-left_context: var(--zg-row-body-border-left, var(--zg-row-body-border));\n /**\n * @memberof ZGRow\n * @var --zg-row-body-border-right\n * @description Styles the right border of body rows\n * @see border\n * @default var(--zg-row-body-border, var(--zg-row-border-right, var(--zg-row-border), 0))\n * @demoLink https://app.zingsoft.com/demos/create/B3XG2R64\n * @shadowOnly false\n */\n --zg-row-area-border-right_context: var(--zg-row-body-border-right, var(--zg-row-body-border));\n /**\n * @memberof ZGRow\n * @var --zg-row-body-border-top\n * @description Styles the top border of body rows\n * @see border\n * @default var(--zg-row-body-border, var(--zg-row-border-top, var(--zg-row-border, 1px solid var(--theme-border-color))))\n * @demoLink https://app.zingsoft.com/demos/create/9PTJDF3I\n * @shadowOnly false\n */\n --zg-row-area-border-top_context: var(--zg-row-body-border-top, var(--zg-row-body-border, var(--zg-row-border-top, \n var(--zg-row-border, var(--zg-body-border-top_context, var(--zg-row-body-border-top_default, 1px solid var(--theme-border-color)))))));\n \n}\n\n:host ::slotted(zg-row.hover) {\n background: var(--zg-row-body-background_hover);\n \n color: var(--zg-row-body-color_hover, var(--zg-row-color_hover, var(--zg-row-color)));\n}\n\n:host ::slotted(zg-row:first-of-type){\n border-radius: var(--zg-row-border-radius_first) var(--zg-row-border-radius_first) 0 0;\n}\n:host[layout=\"row\"] ::slotted(zg-row:last-of-type){\n border-radius: 0 0 var(--zg-row-border-radius_last) var(--zg-row-border-radius_last);\n}\n\n/* Even Rows */\n:host(:not([layout=card])) ::slotted(zg-row:nth-of-type(even)) {\n /**\n * @memberof ZGBody\n * @var --zg-body-background\n * @description Styles the background of grid body\n * @see background\n * @default transparent\n * @demoLink https://app.zingsoft.com/demos/create/WVUSRWLP\n * @shadowOnly false\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-body-background\n * @description Styles the background of body rows\n * @see background\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/90PL3ZDR\n * @shadowOnly false\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-body-background_even\n * @description Styles the background of 'even' body rows\n * @see background\n * @default var(--zg-row-body-background)\n * @demoLink https://app.zingsoft.com/demos/create/VMHOQP1A\n * @shadowOnly false\n */\n --zg-row-area-background_context: var(--zg-row-body-background_even, var(--zg-row-body-background, var(--zg-body-background, white)));\n /**\n * @memberof ZGRow\n * @var --zg-row-body-color_even\n * @description Sets the font color of 'even' body rows\n * @see color\n * @default var(--zg-row-body-color, var(--zg-row-color))\n * @demoLink https://app.zingsoft.com/demos/create/96LE1ORX\n * @shadowOnly false\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-body-color\n * @description Sets the font color of body rows\n * @see color\n * @default var(--zg-row-color)\n * @demoLink https://app.zingsoft.com/demos/create/ZWULY1D1\n * @shadowOnly false\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-color\n * @description Sets the font color of all rows\n * @see color\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/DZMUUEIE\n * @shadowOnly false\n */\n /**\n * @memberof ZGBody\n * @var --zg-body-color\n * @description Sets the font color of contents inside grid body\n * @see color\n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/X9E64KMS\n * @shadowOnly false\n */\n --zg-row-area-color_context: var(--zg-row-body-color_even, var(--zg-row-body-color, var(--zg-row-color, var(--zg-body-color))));\n /**\n * @memberof ZGRow\n * @var --zg-row-height\n * @description Sets the height of all rows\n * @see height\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/MG7QBHBV\n * @shadowOnly false\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-body-height\n * @description Sets the height of body rows\n * @see height\n * @default var(--zg-row-height)\n * @demoLink https://app.zingsoft.com/demos/create/E2CM149E\n * @shadowOnly false\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-body-height_even\n * @description Sets the height of 'even' body rows\n * @see height\n * @default var(--zg-row-body-height, var(--zg-row-height))\n * @demoLink https://app.zingsoft.com/demos/create/PHUE49RH\n * @shadowOnly false\n */\n --zg-row-area-height_context: var(--zg-row-body-height_even, var(--zg-row-body-height, var(--zg-row-height, 48px)));\n}\n:host ::slotted(zg-row:nth-of-type(even).hover) {\n /**\n * @memberof ZGRow\n * @var --zg-row-body-background_hover\n * @description Styles the background of body rows on hover\n * @see background\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/FNZQKLOI\n * @shadowOnly false\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-body-background_even_hover\n * @description Styles the background of 'even' body rows on hover\n * @see background\n * @default var(--zg-row-body-background_hover)\n * @demoLink https://app.zingsoft.com/demos/create/AIYZXTF0\n * @shadowOnly false\n */\n --zg-row-area-background_hover_context: var(--zg-row-body-background_even_hover, var(--zg-row-body-background_hover));\n /**\n * @memberof ZGRow\n * @var --zg-row-body-color_hover\n * @description Styles the font color of body rows\n * @see color\n * @default var(--zg-row-color_hover, var(--zg-row-color))\n * @demoLink https://app.zingsoft.com/demos/create/XCEJKX89\n * @shadowOnly false\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-body-color_even_hover\n * @description Styles the font color of 'even' body rows on hover\n * @see color\n * @default var(--zg-row-body-color_hover, var(--zg-row-color_hover, var(--zg-row-color)))\n * @demoLink https://app.zingsoft.com/demos/create/9OLTDTMD\n * @shadowOnly false\n */\n --zg-row-area-color_hover_context: var(--zg-row-body-color_even_hover, var(--zg-row-body-color_hover, var(--zg-row-color_hover, var(--zg-row-color))));\n}\n/* Odd Rows */\n:host(:not([layout=card])) ::slotted(zg-row:nth-of-type(odd)) {\n /**\n * @memberof ZGRow\n * @var --zg-row-body-background_odd\n * @description Styles the background of 'odd' body rows\n * @see background\n * @default var(--zg-row-body-background)\n * @demoLink https://app.zingsoft.com/demos/create/GB8RXLPN\n * @shadowOnly false\n */\n --zg-row-area-background_context: var(--zg-row-body-background_odd, var(--zg-row-body-background, var(--zg-body-background, white)));\n /**\n * @memberof ZGRow\n * @var --zg-row-body-color_odd\n * @description Styles the font color of 'odd' body rows\n * @see color\n * @default var(--zg-row-body-color, var(--zg-row-color))\n * @demoLink https://app.zingsoft.com/demos/create/RRFIV8VL\n * @shadowOnly false\n */\n --zg-row-area-color_context: var(--zg-row-body-color_odd, var(--zg-row-body-color, var(--zg-row-color, var(--zg-body-color))));\n /**\n * @memberof ZGRow\n * @var --zg-row-body-height_odd\n * @description Sets the height of 'odd' body rows\n * @see height\n * @default var(--zg-row-body-height, var(--zg-row-height))\n * @demoLink https://app.zingsoft.com/demos/create/CC4GKUD7\n * @shadowOnly false\n */\n --zg-row-area-height_context: var(--zg-row-body-height_odd, var(--zg-row-body-height, var(--zg-row-height, 48px)));\n}\n:host ::slotted(zg-row:nth-of-type(odd).hover) {\n /**\n * @memberof ZGRow\n * @var --zg-row-body-background_odd_hover\n * @description Styles the background of 'odd' body rows on hover\n * @see background\n * @default var(--zg-row-body-background_hover)\n * @demoLink https://app.zingsoft.com/demos/create/41M3NTDX\n * @shadowOnly false\n */\n --zg-row-area-background_hover_context: var(--zg-row-body-background_odd_hover, var(--zg-row-body-background_hover));\n /**\n * @memberof ZGRow\n * @var --zg-row-body-color_odd_hover\n * @description Sets the font color of 'odd' body rows on hover\n * @see color\n * @default var(--zg-row-body-color_hover, var(--zg-row-color_hover, var(--zg-row-color)))\n * @demoLink https://app.zingsoft.com/demos/create/XVED8WRA\n * @shadowOnly false\n */\n --zg-row-area-color_hover_context: var(--zg-row-body-color_odd_hover, var(--zg-row-body-color_hover, var(--zg-row-color_hover, var(--zg-row-color))));\n}\n\n/* In the case of zebra, we have to set the class so that we can use the header and footer data rows */\n:host(:not([layout=card])) ::slotted(zg-row.zebra-2) {\n --zg-row-zebra-background_context: var(--theme-background-zebra, var(--zg-row-body-background));\n}\n\n:host(:not([layout=card])) ::slotted(zg-row:not(.zebra-1):not(.zebra-2)) {\n --zg-row-zebra-background_context: initial;\n}\n\n/* In the case of hidden head row, we don't want the first row to show the top border unless it is explicitly set */\n:host ::slotted(zg-row[internal-top]) {\n --zg-row-area-border-top_context: var(--zg-row-body-border-top, var(--zg-row-body-border, var(--zg-row-border-top, \n var(--zg-row-border, var(--zg-body-border-top_context, 0px)))));\n}\n\n/* ZG-ROW: CARD LAYOUT\n-------------------------------------- */\n/* ALL */\n:host([layout=card]) ::slotted(zg-row) {\n display: flex;\n flex-wrap: wrap;\n height: auto !important;\n overflow: hidden;\n}\n:host([layout=\"card\"]:not([card-template])) ::slotted(zg-row) {\n /**\n * @memberof ZGRow\n * @var --zg-row-card-padding\n * @description Sets the padding of cards in 'card' layout-mode\n * when '[internal-card-header]' not added to '<zing-grid>'\n * @see padding\n * @default 10px 0 5px\n * @demoLink https://app.zingsoft.com/demos/create/3ANH9F1F\n * @shadowOnly false\n * @storyExample card\n */\n padding: var(--zg-row-card-padding, 8px 0 5px);\n}\n/* EDITOR CONTROLS */\n:host([layout=\"card\"][internal-card-header]:not([card-template])) ::slotted(zg-row) {\n padding: var(--zg-row-card-padding_editor, 50px 0 5px);\n}\n\n/* SELECTOR CONTROL */\n\n\n/* ODD */\n:host([layout=card]) ::slotted(zg-row:nth-child(odd)) {\n /**\n * @memberof ZGRow\n * @var --zg-row-card-background_odd\n * @description Styles the background of cards in 'card' layout-mode\n * @see background\n * @default var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background, #fff)))\n * @demoLink https://app.zingsoft.com/demos/create/MYI4STFX\n * @shadowOnly false\n * @storyExample card\n */\n /* background: var(--zg-row-card-background_odd, var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background)))); */\n background: var(--zg-row-card-background_odd, var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background, #fff))));\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border_odd\n * @description Styles the border of 'odd' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color)))\n * @demoLink https://app.zingsoft.com/demos/create/48K2LXTZ\n * @shadowOnly false\n * @storyExample card\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border-bottom_odd\n * @description Styles the bottom border of 'odd' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border_odd, var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color))))\n * @demoLink https://app.zingsoft.com/demos/create/6KWRAGP6\n * @shadowOnly false\n * @storyExample card\n */\n border-bottom: var(--zg-row-card-border-bottom_odd, var(--zg-row-card-border_odd, var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color)))));\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border-left_odd\n * @description Styles the left border of 'odd' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border_odd, var(--zg-row-card-border-left, var(--zg-row-card-border, 1px solid var(--theme-border-color))))\n * @demoLink https://app.zingsoft.com/demos/create/E0MU4LOA\n * @shadowOnly false\n * @storyExample card\n */\n border-left: var(--zg-row-card-border-left_odd, var(--zg-row-card-border_odd, var(--zg-row-card-border-left, var(--zg-row-card-border, 1px solid var(--theme-border-color)))));\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border-right_odd\n * @description Styles the right border of 'odd' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border_odd, var(--zg-row-card-border-right, var(--zg-row-card-border, 1px solid var(--theme-border-color))))\n * @demoLink https://app.zingsoft.com/demos/create/BQ9TSN4A\n * @shadowOnly false\n * @storyExample card\n */\n border-right: var(--zg-row-card-border-right_odd, var(--zg-row-card-border_odd, var(--zg-row-card-border-right, var(--zg-row-card-border, 1px solid var(--theme-border-color)))));\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border-top_odd\n * @description Styles the top border of 'odd' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border_odd, var(--zg-row-card-border-top, var(--zg-row-card-border, 1px solid var(--theme-border-color))))\n * @demoLink https://app.zingsoft.com/demos/create/MYMKX9W0\n * @shadowOnly false\n * @storyExample card\n */\n border-top: var(--zg-row-card-border-top_odd, var(--zg-row-card-border_odd, var(--zg-row-card-border-top, var(--zg-row-card-border, 1px solid var(--theme-border-color)))));\n /**\n * @memberof ZGRow\n * @var --zg-row-card-box-shadow\n * @description Applies a box shadow behind cards in 'card' layout-mode\n * @see box-shadow\n * @default none\n * @demoLink https://app.zingsoft.com/demos/create/HQ7WKPH0\n * @shadowOnly false\n * @storyExample card\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-card-box-shadow_odd\n * @description Applies a box shadow behind 'odd' cards in 'card' layout-mode\n * @see box-shadow\n * @default var(--zg-row-card-box-shadow, none)\n * @demoLink https://app.zingsoft.com/demos/create/1D7VE3BL\n * @shadowOnly false\n * @storyExample card\n */\n box-shadow: var(--zg-row-card-box-shadow_odd, var(--zg-row-card-box-shadow, none));\n}\n/* ODD: EDITOR CONTROLS */\n:host([layout=\"card\"][internal-card-header]) ::slotted(zg-row:nth-child(odd)) {\n background: var(--zg-row-card-background_editor_odd, var(--zg-row-card-background_odd, var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background)))));\n}\n/* BATCH EDIT */\n:host([layout=\"card\"][internal-card-header]) ::slotted(zg-row.row-dirty-inserted) {\n --zg-row-card-background_editor_even: linear-gradient(\n var(--zg-row-dirty-insert-background-color)\n var(--zg-row-dirty-insert-background-color) 43px, \n var(--theme-border-color) 44px, \n var(--zg-row-card-background_even, var(--zg-row-card-background, var(--zg-row-body-background_even, var(--zg-row-body-background, #fff)))) 45px\n );\n --zg-row-card-background_editor_odd: linear-gradient(\n var(--zg-row-dirty-insert-background-color), \n var(--zg-row-dirty-insert-background-color) 43px, \n var(--theme-border-color) 44px, \n var(--zg-row-card-background_odd, var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background, #fff)))) 45px\n );\n}\n:host([layout=\"card\"][internal-card-header]) ::slotted(zg-row.row-dirty-removed) {\n --zg-row-card-background_editor_even: linear-gradient(\n var(--zg-row-dirty-delete-background-color)\n var(--zg-row-dirty-delete-background-color) 43px, \n var(--theme-border-color) 44px, \n var(--zg-row-card-background_even, var(--zg-row-card-background, var(--zg-row-body-background_even, var(--zg-row-body-background, #fff)))) 45px\n );\n --zg-row-card-background_editor_odd: linear-gradient(\n var(--zg-row-dirty-delete-background-color), \n var(--zg-row-dirty-delete-background-color) 43px, \n var(--theme-border-color) 44px, \n var(--zg-row-card-background_odd, var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background, #fff)))) 45px\n );\n}\n\n/* EVEN */\n:host([layout=card]) ::slotted(zg-row:nth-child(even)) {\n /**\n * @memberof ZGRow\n * @var --zg-row-card-background_even\n * @description Styles the background of 'even' cards in 'card' layout-mode\n * @see background\n * @default var(--zg-row-card-background, var(--zg-row-body-background_even, var(--zg-row-body-background, #fff)))\n * @demoLink https://app.zingsoft.com/demos/create/Z3JQXTST\n * @shadowOnly false\n * @storyExample card\n */\n background: var(--zg-row-card-background_even, var(--zg-row-card-background, var(--zg-row-body-background_even, var(--zg-row-body-background, #fff))));\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border\n * @description Styles the border of cards in 'card' layout-mode\n * @see border\n * @default 1px solid var(--theme-border-color)\n * @demoLink https://app.zingsoft.com/demos/create/5V9VVXDQ\n * @shadowOnly false\n * @storyExample card\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border_even\n * @description Styles the border of 'even' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color)))\n * @demoLink https://app.zingsoft.com/demos/create/H8PWRCJT\n * @shadowOnly false\n * @storyExample card\n */\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border-bottom_even\n * @description Styles the bottom border of 'even' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border_even, var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color))))\n * @demoLink https://app.zingsoft.com/demos/create/UKFWTUFU\n * @shadowOnly false\n * @storyExample card\n */\n border-bottom: var(--zg-row-card-border-bottom_even, var(--zg-row-card-border_even, var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color)))));\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border-left_even\n * @description Styles the left border of 'even' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border_even, var(--zg-row-card-border-left, var(--zg-row-card-border, 1px solid var(--theme-border-color))))\n * @demoLink https://app.zingsoft.com/demos/create/T8FJCD4O\n * @shadowOnly false\n */\n border-left: var(--zg-row-card-border-left_even, var(--zg-row-card-border_even, var(--zg-row-card-border-left, var(--zg-row-card-border, 1px solid var(--theme-border-color)))));\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border-right_even\n * @description Styles the right border of 'even' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border_even, var(--zg-row-card-border-right, var(--zg-row-card-border, 1px solid var(--theme-border-color))))\n * @demoLink https://app.zingsoft.com/demos/create/NYUK87GS\n * @shadowOnly false\n * @storyExample card\n */\n border-right: var(--zg-row-card-border-right_even, var(--zg-row-card-border_even, var(--zg-row-card-border-right, var(--zg-row-card-border, 1px solid var(--theme-border-color)))));\n /**\n * @memberof ZGRow\n * @var --zg-row-card-border-top_even\n * @description Styles the top border of 'even' cards in 'card' layout-mode\n * @see border\n * @default var(--zg-row-card-border_even, var(--zg-row-card-border-top, var(--zg-row-card-border, 1px solid var(--theme-border-color))))\n * @demoLink https://app.zingsoft.com/demos/create/UWJMSEYU\n * @shadowOnly false\n * @storyExample card\n */\n border-top: var(--zg-row-card-border-top_even, var(--zg-row-card-border_even, var(--zg-row-card-border-top, var(--zg-row-card-border, 1px solid var(--theme-border-color)))));\n /* Already document above */\n box-shadow: var(--zg-row-card-box-shadow_even, var(--zg-row-card-box-shadow, none));\n}\n/* EVEN: EDITOR CONTROLS */\n:host([layout=\"card\"][internal-card-header]) ::slotted(zg-row:nth-child(even)) {\n background: var(--zg-row-card-background_editor_even, var(--zg-row-card-background_even, var(--zg-row-card-background, var(--zg-row-body-background_even, var(--zg-row-body-background)))));\n}\n",""])},8719:(e,t,o)=>{(e.exports=o(9252)()).push([e.id,"/* SELF\n-------------------------------------- */\n:host {\n align-items: center;\n /**\n * @memberof ZGButton\n * @var --zg-button-background\n * @description Styles the background of button\n * @see background\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/0NOUHK2G\n * @shadowOnly false\n */\n background: var(--zg-button-background);\n /**\n * @memberof ZGButton\n * @var --zg-button-border\n * @description Styles the border of a button\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/OQ49B7D2\n * @shadowOnly false\n */\n border: var(--zg-button-border);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-bottom\n * @description Styles the bottom border of a button\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/49VYLDM2\n * @shadowOnly false\n */\n border-bottom: var(--zg-button-border-bottom, var(--zg-button-border));\n /**\n * @memberof ZGButton\n * @var --zg-button-border-left\n * @description Styles the left border of a button\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/5BOPSVLN\n * @shadowOnly false\n */\n border-left: var(--zg-button-border-left, var(--zg-button-border));\n /**\n * @memberof ZGButton\n * @var --zg-button-border-right\n * @description Styles the right border of a button\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/LK4TGZ1R\n * @shadowOnly false\n */\n border-right: var(--zg-button-border-right, var(--zg-button-border));\n /**\n * @memberof ZGButton\n * @var --zg-button-border-top\n * @description Styles the top border of a button\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/4SWUJJOY\n * @shadowOnly false\n */\n border-top: var(--zg-button-border-top, var(--zg-button-border));\n /**\n * @memberof ZGButton\n * @var --zg-button-box-shadow\n * @description Styles the box-shadow of the button\n * @see box-shadow\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/TUG6V5YD\n * @shadowOnly false\n */\n box-shadow: var(--zg-button-box-shadow);\n box-sizing: border-box;\n /**\n * @memberof ZGButton\n * @var --zg-button-color\n * @description Sets the font color of button\n * @see color\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/RPE1ZPAR\n * @shadowOnly false\n */\n color: var(--zg-button-color);\n cursor: pointer;\n display: inline-flex;\n /**\n * @memberof ZGButton\n * @var --zg-button-font-family\n * @description Sets the font family of button\n * @see font-family\n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/7JWFA1UO\n * @shadowOnly false\n */\n font-family: var(--zg-button-font-family, inherit);\n /**\n * @memberof ZGButton\n * @var --zg-button-font-size\n * @description Sets the font size of button\n * @see font-size\n * @default 90%\n * @demoLink https://app.zingsoft.com/demos/create/0B3ZKXEO\n * @shadowOnly false\n */\n font-size: var(--zg-button-font-size, 100%);\n /**\n * @memberof ZGButton\n * @var --zg-button-font-style\n * @description Sets the font style of button\n * @see font-style\n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/N5ISV2HS\n * @shadowOnly false\n */\n font-style: var(--zg-button-font-style, inherit);\n /**\n * @memberof ZGButton\n * @var --zg-button-font-weight\n * @description Sets the font weight of button\n * @see font-weight\n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/USH6VNB2\n * @shadowOnly false\n */\n font-weight: var(--zg-button-font-weight, inherit);\n /**\n * @memberof ZGButton\n * @var --zg-button-line-height\n * @description Sets the line height of button\n * @see line-height\n * @default inherit\n * @demoLink https://app.zingsoft.com/demos/create/BC7ELB6L\n * @shadowOnly false\n */\n line-height: var(--zg-button-line-height, inherit);\n justify-content: flex-start;\n /**\n * @memberof ZGButton\n * @var --zg-button-margin\n * @description Sets the margin of button\n * @see margin\n * @default 0\n * @demoLink https://app.zingsoft.com/demos/create/M834XVE5\n * @shadowOnly false\n */\n margin: var(--zg-button-margin, 0);\n /*outline: none;*/\n /*overflow: hidden;*/\n /**\n * @memberof ZGButton\n * @var --zg-button-padding\n * @description Sets the padding of button\n * @see padding\n * @default 3px\n * @demoLink https://app.zingsoft.com/demos/create/SXA4AMPI\n * @shadowOnly false\n */\n padding: var(--zg-button-padding, 0);\n position: relative;\n user-select: none;\n}\n\n/* Default Hover State (Defined) */\n:host([action]:not([disabled]):hover),\n:host([action]:not([disabled]).hover) {\n /**\n * @memberof ZGButton\n * @var --zg-button-icon-background_hover\n * @description Styles the background of the icon in a button on hover state\n * @see fill\n * @default #fff\n * @demoLink https://app.zingsoft.com/demos/create/AKM36W15\n * @shadowOnly false\n */\n --zg-icon-color: var(--zg-button-icon-background_hover);\n\n /**\n * @memberof ZGButton\n * @var --zg-button-background_hover\n * @description Styles the background of button on hover\n * @see background\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/F1CZ5AEC\n * @shadowOnly false\n */\n background: var(--zg-button-background_hover);\n /**\n * @memberof ZGButton\n * @var --zg-button-border_hover\n * @description Styles the border of a button on hover state\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/M6VZUWV3\n * @shadowOnly false\n */\n border: var(--zg-button-border_hover);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-bottom_hover\n * @description Styles the bottom border of a button on hover\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/N34TY79O\n * @shadowOnly false\n */\n border-bottom: var(--zg-button-border-bottom_hover);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-left_hover\n * @description Styles the left border of a button on hover\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/8WXKJKRH\n * @shadowOnly false\n */\n border-left: var(--zg-button-border-left_hover);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-right_hover\n * @description Styles the right border of a button on hover\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/3F37KXA6\n * @shadowOnly false\n */\n border-right: var(--zg-button-border-right_hover);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-top_hover\n * @description Styles the top border of a button on hover\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/8YBE3ACC\n * @shadowOnly false\n */\n border-top: var(--zg-button-border-top_hover);\n /**\n * @memberof ZGButton\n * @var --zg-button-box-shadow_hover\n * @description Styles the box-shadow of the button on hover\n * @see box-shadow\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/RAV3EMI2\n * @shadowOnly false\n */\n box-shadow: var(--zg-button-box-shadow_hover);\n /**\n * @memberof ZGButton\n * @var --zg-button-color_hover\n * @description Styles the color of the button on hover\n * @see color\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/TNO4DYRC\n * @shadowOnly false\n */\n color: var(--zg-button-color_hover);\n /**\n * @memberof ZGButton\n * @var --zg-button-transition_speed\n * @description Sets the transition speed of button\n * @see transition\n * @default var(--theme-transition_speed)\n * @demoLink https://app.zingsoft.com/demos/create/W9ECS6H6\n * @shadowOnly false\n * @storyAlert true\n */\n transition: background-color var(--zg-button-transition_speed, var(--theme-transition_speed));\n z-index: 11;\n}\n\n/* Default Focus State (Defined) */\n:host(:focus-visible) {\n /**\n * @memberof ZGButton\n * @var --zg-button-background_focus\n * @description Styles the background of button on focus\n * @see background\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/KHSJ4IAG\n * @shadowOnly false\n */\n background: var(--zg-button-background_focus);\n /**\n * @memberof ZGButton\n * @var --zg-button-border_focus\n * @description Styles the border of a button on focus state\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/6ECRZ83T\n * @shadowOnly false\n */\n border: var(--zg-button-border_focus);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-bottom_focus\n * @description Styles the bottom border of a button on focus\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/TNC5VI4O\n * @shadowOnly false\n */\n border-bottom: var(--zg-button-border-bottom_focus);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-left_focus\n * @description Styles the left border of a button on focus\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/OTDDVBOS\n * @shadowOnly false\n */\n border-left: var(--zg-button-border-left_focus);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-right_focus\n * @description Styles the right border of a button on focus\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/MTB5U5AF\n * @shadowOnly false\n */\n border-right: var(--zg-button-border-right_focus);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-top_focus\n * @description Styles the top border of a button on focus\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/LO0MH08V\n * @shadowOnly false\n */\n border-top: var(--zg-button-border-top_focus);\n /**\n * @memberof ZGButton\n * @var --zg-button-box-shadow_focus\n * @description Styles the box-shadow of the button on focus\n * @see box-shadow\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/P92OHBPM\n * @shadowOnly false\n */\n box-shadow: var(--zg-button-box-shadow_focus);\n /**\n * @memberof ZGButton\n * @var --zg-button-color_focus\n * @description Styles the color of the button on focus\n * @see color\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/18C3727I\n * @shadowOnly false\n */\n color: var(--zg-button-color_focus);\n outline: var(--zg-button-focus);\n transition: background-color var(--zg-button-transition_speed, var(--theme-transition_speed));\n}\n\n/* Active State */\n:host([action]:active),\n:host([action].active),\n:host([active]) {\n /**\n * @memberof ZGButton\n * @var --zg-button-background_active\n * @description Styles of background of button on active state\n * @see background\n * @default var(--theme-background-color)\n * @demoLink https://app.zingsoft.com/demos/create/B5GX883S\n * @shadowOnly false\n */\n background: var(--zg-button-background_active, var(--theme-background-color));\n /**\n * @memberof ZGButton\n * @var --zg-button-border_active\n * @description Styles the border of a button on active state\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/XPUZZ3LU\n * @shadowOnly false\n */\n border: var(--zg-button-border_active);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-bottom_active\n * @description Styles the bottom border of a button on active state\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/NOL6XBMR\n * @shadowOnly false\n */\n border-bottom: var(--zg-button-border-bottom_active);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-left_active\n * @description Styles the left border of a button on active state\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/RG7Z2CMD\n * @shadowOnly false\n */\n border-left: var(--zg-button-border-left_active);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-right_active\n * @description Styles the right border of a button on active state\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/TX5552LK\n * @shadowOnly false\n */\n border-right: var(--zg-button-border-right_active);\n /**\n * @memberof ZGButton\n * @var --zg-button-border-top_active\n * @description Styles the top border of a button on active state\n * @see border\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/X9WBHY4L\n * @shadowOnly false\n */\n border-top: var(--zg-button-border-top_active);\n /**\n * @memberof ZGButton\n * @var --zg-button-box-shadow_active\n * @description Styles the box-shadow of the button on activation\n * @see box-shadow\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/MX9J71NQ\n * @shadowOnly false\n */\n box-shadow: var(--zg-button-box-shadow_active);\n /**\n * @memberof ZGButton\n * @var --zg-button-color_active\n * @description Styles the color of the button on active state\n * @see color\n * @default Browser's default value\n * @demoLink https://app.zingsoft.com/demos/create/RARCAIWD\n * @shadowOnly false\n */\n color: var(--zg-button-color_active);\n cursor: default;\n}\n\n/* Disabled Normal State */\n:host([disabled]) {\n cursor: not-allowed;\n /**\n * @memberof ZGButton\n * @var --zg-button-opacity_disabled\n * @description Styles the opacity of disabled button or button on hover\n * @see opacity\n * @default 0.2\n * @demoLink https://app.zingsoft.com/demos/create/L2BLE14D\n * @shadowOnly false\n */\n opacity: var(--zg-button-opacity_disabled, 0.2);\n}\n\n/* Hide tooltip if button disabled */\n:host([tooltip][disabled]):before,\n:host([tooltip][disabled]):after {\n display: none;\n}\n\n/* Disabled Hover State */\n:host([disabled]:hover),\n:host([disabled].hover) {\n background: none;\n cursor: not-allowed;\n opacity: var(--zg-button-opacity_disabled, 0.2);\n}\n\n/* If the button is hidden (has [hidden] attribute) */\n:host([hidden]) {\n display: none !important;\n}\n\n/* DIR\n------------------------------------- */\n:host([dir=\"rtl\"]) ::slotted(zg-icon) {\n transform: scaleX(-1);\n}\n\n/* ICON\n-------------------------------------- */\n:host([no-icon]) .zg-button-icon {\n display: none;\n}\n\n/* todo: not wonderful yet */\n:host([icon-last]) .zg-button-icon {\n order: 2;\n}\n\n/* NODATA */\n:host([no-data]) {\n color: var(--theme-color-primary);\n}\n\n:host([no-data]) ::slotted(zg-icon) {\n margin-right: 3px !important;\n transform: scale(.9);\n}\n\n/* CURSOR-BASED PAGINATION STYLING\n-------------------------------------- */\n:host([type=\"cursor\"]) ::slotted(zg-icon) {\n transform: scale(1.2);\n}\n\n/* SLOTTED ELEMENTS\n-------------------------------------- */\n/* Checkbox - only when text added to button */\n:host([hastext]) ::slotted(zg-checkbox) {\n margin-right: 5px;\n}\n\n:host([hastext][dir=\"rtl\"]) ::slotted(zg-checkbox) {\n margin-left: 5px;\n margin-right: unset\n}\n\n/* Icon - only when text added to button */\n:host([hastext]) ::slotted(zg-icon) {\n margin-right: 7px;\n}\n\n:host([hastext][dir=\"rtl\"]) ::slotted(zg-icon) {\n margin-left: 5px;\n margin-right: unset\n}\n\n:host ::slotted(zg-icon) {\n text-align: center;\n}\n\n\n/* ZG-PAGER: 'BUTTON' PAGINATION STYLING */\n\n/* 'Next Page' button */\n:host([action=\"nextpage\"]) {\n margin-left: -1px;\n}\n\n/* '1, 2, 3' Page buttons */\n:host([action=\"page\"]) {\n margin-left: -1px;\n}\n\n:host([action=\"page\"][disabled]) {\n opacity: 1;\n}\n\n:host([action=\"page\"]) ::slotted(zg-icon) {\n display: none;\n}\n\n:host([action=\"page\"]) ::slotted([slot=\"label\"]) {\n width: 100%;\n text-align: center;\n}\n\n:host([action*=\"record\"]),\n:host([action^=\"batch\"]),\n:host([internal-cell]) {\n vertical-align: middle;\n}\n\n:host([compact]) {\n height: 18px;\n width: 18px;\n}\n\n/* Row Grouping Buttons */\n:host([action$=\"rowgroup\"]) {\n margin-right: 20px;\n}\n\n:host([action$=\"rowgroup\"]) ::slotted(zg-icon) {\n width: 24px;\n height: 24px;\n}\n\n/* Menu button label (one line) */\n:host ::slotted(.label) {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n/* CUSTOM BUTTONS (NON-INTERNAL)\n-------------