LoopOS UI Component Preview

[{"row_0":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9912568611\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"lui-tooltip hidden\"\n data-controller=\"tooltips\"\n data-tooltips-tippy-target-id-value=\"\"\n data-tooltips-position-value=\"top\"\n data-tooltips-interactive-value=\"false\"\n \u003e\n\u003c/div\u003e\n\n \u003cspan class=\"lui-table_data_list__label_header_row\"\u003e\n \u003cspan class=\"lui-label\" style=\"color: #212529; background-color: #ffffff; border: 1px solid var(--General-Gray-200, #ECEFF2);\"\u003e\n \n \u003ci class=\"fa-regular fa-circle lui-label__icon\"\u003e\u003c/i\u003e\n\u003cspan class=\"lui-label__text\"\u003eSome state\u003c/span\u003e\n\n\u003c/span\u003e\n\n Some description\n\n\u003c/span\u003e\n\n\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n \n \u003c/div\u003e\n\u003c/span\u003e\n","children":[{"row_0":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_2322156580\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"lui-tooltip hidden\"\n data-controller=\"tooltips\"\n data-tooltips-tippy-target-id-value=\"\"\n data-tooltips-position-value=\"top\"\n data-tooltips-interactive-value=\"false\"\n \u003e\n\u003c/div\u003e\n\n \u003cdiv class=\"inline-flex\"\u003e\n \u003cdiv class=\"lui-double-state-label\"\u003e\n \u003cspan class=\"lui-label\" style=\"color: #212529; background-color: #ECEFF2;\"\u003e\n \n \u003csvg height=\"12\" width=\"12\" viewBox=\"0 0 12 10\"\u003e\n \u003cpath d=\"M4.708 9.24858C3.95829 9.24858 3.20859 8.96398 2.63778 8.39317L0.912326 6.66772C0.876549 6.63194 0.00162625 5.75051 0 4.54058C0 3.81202 0.305735 3.13388 0.912326 2.52728C1.97915 1.46046 3.06223 1.52226 3.78266 1.76295C4.53073 2.01176 5.02999 2.50614 5.05113 2.52728L5.56828 3.04443L6.94897 1.66375C6.98475 1.62797 7.8678 0.753045 9.0761 0.751419H9.08098C9.80792 0.751419 10.4844 1.05878 11.0894 1.66375C12.1562 2.73057 12.0944 3.81365 11.8537 4.53408C11.6049 5.28215 11.1105 5.78141 11.0894 5.80255C10.3982 6.49371 9.44526 6.76692 8.54595 6.62056L6.77659 8.38992C6.20577 8.96073 5.45607 9.24533 4.70637 9.24533L4.708 9.24858ZM2.94026 2.59559C2.53207 2.59559 2.07022 2.75171 1.60348 3.21844C1.18716 3.63476 0.97575 4.07873 0.977377 4.53896C0.977377 5.33419 1.59698 5.97006 1.60186 5.97656L3.32731 7.70201C4.08839 8.4631 5.32597 8.4631 6.08706 7.70201L7.46612 6.32295L4.3616 3.21844C4.27053 3.129 3.69484 2.59559 2.93863 2.59559H2.94026ZM6.26107 3.73559L7.64175 5.11627C8.40284 5.87736 9.64041 5.87736 10.4015 5.11627C10.5397 4.97479 11.7301 3.68517 10.4015 2.35653C9.98518 1.94021 9.53633 1.73205 9.08098 1.73042C8.28575 1.73042 7.64988 2.35002 7.64338 2.3549L6.26269 3.73559H6.26107Z\" fill=\"url(#paint0_linear_238_3029)\"/\u003e\n \u003cdefs\u003e\n \u003clinearGradient id=\"paint0_linear_238_3029\" x1=\"6.00086\" y1=\"9.24858\" x2=\"6.00086\" y2=\"0.754671\" gradientUnits=\"userSpaceOnUse\"\u003e\n \u003cstop stop-color=\"#059898\"/\u003e\n \u003cstop offset=\"1\" stop-color=\"#00D8B5\"/\u003e\n \u003c/linearGradient\u003e\n \u003c/defs\u003e\n\u003c/svg\u003e\n\u003cspan class=\"lui-label__text\"\u003eValidation\u003c/span\u003e\n\n\u003c/span\u003e\n \u003cspan class=\"lui-label\" style=\"color: #1a883f; background-color: #f3f9f5;\"\u003e\n \n \u003ci class=\"fa-regular fa-circle-check lui-label__icon\"\u003e\u003c/i\u003e\n\u003cspan class=\"lui-label__text\"\u003eAccepted\u003c/span\u003e\n\n\u003c/span\u003e\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n\n\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n \n \u003c/div\u003e\n\u003c/span\u003e\n","row_1":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_6597424226\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"lui-tooltip hidden\"\n data-controller=\"tooltips\"\n data-tooltips-tippy-target-id-value=\"\"\n data-tooltips-position-value=\"top\"\n data-tooltips-interactive-value=\"false\"\n \u003e\n\u003c/div\u003e\n\n Some other property\n\n\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n \n \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"group_0_0","_lui_data":{"delete_action":null}}],"_lui_key":"group_0","_lui_data":{"delete_action":null}},{"row_0":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_8670528836\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"lui-tooltip hidden\"\n data-controller=\"tooltips\"\n data-tooltips-tippy-target-id-value=\"\"\n data-tooltips-position-value=\"top\"\n data-tooltips-interactive-value=\"false\"\n \u003e\n\u003c/div\u003e\n\n \u003cspan class=\"lui-table_data_list__label_header_row\"\u003e\n \u003cspan class=\"lui-label\" style=\"color: #c81720; background-color: #fcf3f3;\"\u003e\n \n \u003ci class=\"fa-regular fa-circle lui-label__icon\"\u003e\u003c/i\u003e\n\u003cspan class=\"lui-label__text\"\u003eSome other state\u003c/span\u003e\n\n\u003c/span\u003e\n\n Some other description\n\n\u003c/span\u003e\n\n\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n \n \u003c/div\u003e\n\u003c/span\u003e\n","children":[{"row_0":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9451751915\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"lui-tooltip hidden\"\n data-controller=\"tooltips\"\n data-tooltips-tippy-target-id-value=\"\"\n data-tooltips-position-value=\"top\"\n data-tooltips-interactive-value=\"false\"\n \u003e\n\u003c/div\u003e\n\n \u003cdiv class=\"inline-flex\"\u003e\n \u003cdiv class=\"lui-double-state-label\"\u003e\n \u003cspan class=\"lui-label\" style=\"color: #212529; background-color: #ECEFF2;\"\u003e\n \n \u003csvg height=\"12\" width=\"12\" viewBox=\"0 0 12 12\"\u003e\n \u003cpath d=\"M7.92298 12H1.15375V8.30769C1.15375 7.26974 1.58452 6.33026 2.2758 5.65949C1.91068 5.53641 1.50862 5.32923 1.16606 4.98872C0.647086 4.4718 0.384521 3.77641 0.384521 2.92308C0.384521 0.777436 2.13221 0 3.3076 0H5.61529C7.2276 0 8.53837 1.31077 8.53837 2.92308V4.66872C9.84914 4.8841 11.6153 5.81128 11.6153 8.30769C11.6153 9.38872 11.285 10.2667 10.6327 10.9169C9.56196 11.9836 8.01324 12 7.92298 12ZM2.38452 10.7692H7.92298C8.17529 10.7692 10.3845 10.6872 10.3845 8.30769C10.3845 5.92821 8.17734 5.84821 7.92093 5.84615H4.84606C3.48811 5.84615 2.38452 6.94974 2.38452 8.30769V10.7692ZM3.3076 1.23077C3.3076 1.23077 2.83785 1.23897 2.39888 1.47077C1.8717 1.74769 1.61529 2.22154 1.61529 2.92308C1.61529 3.62462 1.8717 4.10256 2.39683 4.37949C2.8358 4.60923 3.3035 4.61538 3.30965 4.61538H7.3076V2.92308C7.3076 1.98974 6.54862 1.23077 5.61529 1.23077H3.3076Z\" fill=\"url(#paint0_linear_238_804)\"/\u003e\n \u003cdefs\u003e\n \u003clinearGradient id=\"paint0_linear_238_804\" x1=\"6.00093\" y1=\"12\" x2=\"6.00093\" y2=\"0\" gradientUnits=\"userSpaceOnUse\"\u003e\n \u003cstop stop-color=\"#FFAA38\"/\u003e\n \u003cstop offset=\"1\" stop-color=\"#FFCB33\"/\u003e\n \u003c/linearGradient\u003e\n \u003c/defs\u003e\n\u003c/svg\u003e\n\u003cspan class=\"lui-label__text\"\u003eSubmission\u003c/span\u003e\n\n\u003c/span\u003e\n \u003cspan class=\"lui-label\" style=\"color: #c81720; background-color: #fcf3f3;\"\u003e\n \n \u003ci class=\"fa-regular fa-xmark lui-label__icon\"\u003e\u003c/i\u003e\n\u003cspan class=\"lui-label__text\"\u003eProposal Rejected\u003c/span\u003e\n\n\u003c/span\u003e\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n\n\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n \n \u003c/div\u003e\n\u003c/span\u003e\n","row_1":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_5215854990\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"lui-tooltip hidden\"\n data-controller=\"tooltips\"\n data-tooltips-tippy-target-id-value=\"\"\n data-tooltips-position-value=\"top\"\n data-tooltips-interactive-value=\"false\"\n \u003e\n\u003c/div\u003e\n\n Some other property\n\n\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n \n \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"group_1_0","_lui_data":{"delete_action":null}},{"row_0":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_1569762617\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"lui-tooltip hidden\"\n data-controller=\"tooltips\"\n data-tooltips-tippy-target-id-value=\"\"\n data-tooltips-position-value=\"top\"\n data-tooltips-interactive-value=\"false\"\n \u003e\n\u003c/div\u003e\n\n \u003cdiv class=\"inline-flex\"\u003e\n \u003cdiv class=\"lui-double-state-label\"\u003e\n \u003cspan class=\"lui-label\" style=\"color: #212529; background-color: #ECEFF2;\"\u003e\n \n \u003csvg height=\"12\" width=\"12\" viewBox=\"0 0 12 12\"\u003e\n \u003cpath d=\"M7.92298 12H1.15375V8.30769C1.15375 7.26974 1.58452 6.33026 2.2758 5.65949C1.91068 5.53641 1.50862 5.32923 1.16606 4.98872C0.647086 4.4718 0.384521 3.77641 0.384521 2.92308C0.384521 0.777436 2.13221 0 3.3076 0H5.61529C7.2276 0 8.53837 1.31077 8.53837 2.92308V4.66872C9.84914 4.8841 11.6153 5.81128 11.6153 8.30769C11.6153 9.38872 11.285 10.2667 10.6327 10.9169C9.56196 11.9836 8.01324 12 7.92298 12ZM2.38452 10.7692H7.92298C8.17529 10.7692 10.3845 10.6872 10.3845 8.30769C10.3845 5.92821 8.17734 5.84821 7.92093 5.84615H4.84606C3.48811 5.84615 2.38452 6.94974 2.38452 8.30769V10.7692ZM3.3076 1.23077C3.3076 1.23077 2.83785 1.23897 2.39888 1.47077C1.8717 1.74769 1.61529 2.22154 1.61529 2.92308C1.61529 3.62462 1.8717 4.10256 2.39683 4.37949C2.8358 4.60923 3.3035 4.61538 3.30965 4.61538H7.3076V2.92308C7.3076 1.98974 6.54862 1.23077 5.61529 1.23077H3.3076Z\" fill=\"url(#paint0_linear_238_804)\"/\u003e\n \u003cdefs\u003e\n \u003clinearGradient id=\"paint0_linear_238_804\" x1=\"6.00093\" y1=\"12\" x2=\"6.00093\" y2=\"0\" gradientUnits=\"userSpaceOnUse\"\u003e\n \u003cstop stop-color=\"#FFAA38\"/\u003e\n \u003cstop offset=\"1\" stop-color=\"#FFCB33\"/\u003e\n \u003c/linearGradient\u003e\n \u003c/defs\u003e\n\u003c/svg\u003e\n\u003cspan class=\"lui-label__text\"\u003eSubmission\u003c/span\u003e\n\n\u003c/span\u003e\n \u003cspan class=\"lui-label\" style=\"color: #c81720; background-color: #fcf3f3;\"\u003e\n \n \u003ci class=\"fa-regular fa-xmark lui-label__icon\"\u003e\u003c/i\u003e\n\u003cspan class=\"lui-label__text\"\u003eProposal Rejected\u003c/span\u003e\n\n\u003c/span\u003e\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n\n\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n \n \u003c/div\u003e\n\u003c/span\u003e\n","row_1":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_5005363814\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"lui-tooltip hidden\"\n data-controller=\"tooltips\"\n data-tooltips-tippy-target-id-value=\"\"\n data-tooltips-position-value=\"top\"\n data-tooltips-interactive-value=\"false\"\n \u003e\n\u003c/div\u003e\n\n Some other property\n\n\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n \n \u003c/div\u003e\n\u003c/span\u003e\n","row_2":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9404554452\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"lui-tooltip hidden\"\n data-controller=\"tooltips\"\n data-tooltips-tippy-target-id-value=\"\"\n data-tooltips-position-value=\"top\"\n data-tooltips-interactive-value=\"false\"\n \u003e\n\u003c/div\u003e\n\n \u003cbutton class=\"lui-button lui-button--neutral--secondary lui-button--size-small w-fit w-fit\" data-controller=\"lui--button\"\u003e\n \n \n \u003cspan class=\"lui-button__text\" data-lui--button-target=\"text\"\u003e\n Some button\n\u003c/span\u003e \n \n\u003c/button\u003e\n\n\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n \n \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"group_1_1","_lui_data":{"delete_action":null}}],"_lui_key":"group_1","_lui_data":{"delete_action":null}}]