legalesign-document-viewer 0.3.6 → 0.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ls-compose-manager.cjs.entry.js +28 -0
- package/dist/cjs/ls-compose-manager.cjs.entry.js.map +1 -0
- package/dist/cjs/ls-compose-manager.entry.cjs.js.map +1 -0
- package/dist/cjs/ls-document-options_42.cjs.entry.js +106 -101
- package/dist/cjs/ls-document-options_42.cjs.entry.js.map +1 -1
- package/dist/cjs/ls-document-viewer.cjs.js +1 -1
- package/dist/cjs/ls-field-properties-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/ls-formfield.cjs.entry.js +2 -2
- package/dist/cjs/ls-number-input_5.cjs.entry.js +6 -6
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/ls-compose-manager/ls-compose-manager.css +3 -0
- package/dist/collection/components/ls-compose-manager/ls-compose-manager.js +55 -0
- package/dist/collection/components/ls-compose-manager/ls-compose-manager.js.map +1 -0
- package/dist/collection/components/ls-document-options/ls-document-options.js +3 -3
- package/dist/collection/components/ls-document-options/ls-document-options.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/adapter/templateActions.js +2 -2
- package/dist/collection/components/ls-document-viewer/adapter/templateActions.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.js +16 -16
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.js.map +1 -1
- package/dist/collection/components/ls-editor-table/ls-editor-table.js +1 -1
- package/dist/collection/components/ls-feature-column/ls-feature-column.css +4 -0
- package/dist/collection/components/ls-feature-column/ls-feature-column.js +29 -5
- package/dist/collection/components/ls-feature-column/ls-feature-column.js.map +1 -1
- package/dist/collection/components/ls-field-alignment/ls-field-alignment.js +2 -2
- package/dist/collection/components/ls-field-content/ls-field-content.js +2 -2
- package/dist/collection/components/ls-field-dimensions/ls-field-dimensions.js +1 -1
- package/dist/collection/components/ls-field-distribute/ls-field-distribute.js +5 -5
- package/dist/collection/components/ls-field-footer/ls-field-footer.js +1 -1
- package/dist/collection/components/ls-field-format/ls-field-format.js +11 -11
- package/dist/collection/components/ls-field-placement/ls-field-placement.js +1 -1
- package/dist/collection/components/ls-field-properties/ls-field-properties.js +1 -1
- package/dist/collection/components/ls-field-properties-advanced/ls-field-properties-advanced.js +2 -2
- package/dist/collection/components/ls-field-properties-autosign/ls-field-properties-autosign.js +1 -1
- package/dist/collection/components/ls-field-properties-container/ls-field-properties-container.js +1 -1
- package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.js +1 -1
- package/dist/collection/components/ls-field-properties-dropdown/ls-field-properties-dropdown.js +1 -1
- package/dist/collection/components/ls-field-properties-email/ls-field-properties-email.js +1 -1
- package/dist/collection/components/ls-field-properties-file/ls-field-properties-file.js +1 -1
- package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.js +1 -1
- package/dist/collection/components/ls-field-properties-image/ls-field-properties-image.js +1 -1
- package/dist/collection/components/ls-field-properties-multiple/ls-field-properties-multiple.js +3 -3
- package/dist/collection/components/ls-field-properties-number/ls-field-properties-number.js +1 -1
- package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.js +1 -1
- package/dist/collection/components/ls-field-properties-text/ls-field-properties-text.js +1 -1
- package/dist/collection/components/ls-field-size/ls-field-size.js +1 -1
- package/dist/collection/components/ls-field-type-display/ls-field-type-display.js +3 -3
- package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.js +1 -1
- package/dist/collection/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.js +1 -1
- package/dist/collection/components/ls-formfield/inputs/ls-select-input/ls-select-input.js +1 -1
- package/dist/collection/components/ls-formfield/inputs/ls-text-input/ls-text-input.js +2 -2
- package/dist/collection/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.js +1 -1
- package/dist/collection/components/ls-formfield/ls-formfield.js +2 -2
- package/dist/collection/components/ls-helper-bar/ls-helper-bar.js +2 -2
- package/dist/collection/components/ls-icon/ls-icon.js +1 -1
- package/dist/collection/components/ls-input-wrapper/ls-input-wrapper.js +1 -1
- package/dist/collection/components/ls-keyboard-shortcuts/ls-keyboard-shortcuts.js +1 -1
- package/dist/collection/components/ls-page-loader/ls-page-loader.js +2 -2
- package/dist/collection/components/ls-participant-card/ls-participant-card.js +9 -9
- package/dist/collection/components/ls-participant-manager/ls-participant-manager.js +3 -3
- package/dist/collection/components/ls-participant-select/ls-participant-select.js +9 -9
- package/dist/collection/components/ls-props-section/ls-props-section.js +1 -1
- package/dist/collection/components/ls-statusbar/ls-statusbar.js +3 -3
- package/dist/collection/components/ls-toggle/ls-toggle.js +2 -2
- package/dist/collection/components/ls-toolbar/ls-toolbar.js +2 -2
- package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js +3 -3
- package/dist/collection/components/ls-tooltip/ls-tooltip.js +1 -1
- package/dist/collection/components/ls-validation-tag/ls-validation-tag.js +22 -1
- package/dist/collection/components/ls-validation-tag/ls-validation-tag.js.map +1 -1
- package/dist/collection/types/LSApiTemplate.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/ls-compose-manager.d.ts +11 -0
- package/dist/components/ls-compose-manager.js +47 -0
- package/dist/components/ls-compose-manager.js.map +1 -0
- package/dist/components/ls-document-options.js +1 -1
- package/dist/components/ls-document-viewer.js +52 -52
- package/dist/components/ls-document-viewer.js.map +1 -1
- package/dist/components/ls-editor-field.js +1 -1
- package/dist/components/ls-editor-table.js +1 -1
- package/dist/components/ls-feature-column.js +1 -1
- package/dist/components/ls-field-alignment.js +1 -1
- package/dist/components/ls-field-content.js +1 -1
- package/dist/components/ls-field-dimensions.js +1 -1
- package/dist/components/ls-field-distribute.js +1 -1
- package/dist/components/ls-field-footer.js +1 -1
- package/dist/components/ls-field-format.js +1 -1
- package/dist/components/ls-field-placement.js +1 -1
- package/dist/components/ls-field-properties-advanced.js +1 -1
- package/dist/components/ls-field-properties-autosign.js +1 -1
- package/dist/components/ls-field-properties-container.js +1 -1
- package/dist/components/ls-field-properties-date.js +1 -1
- package/dist/components/ls-field-properties-dropdown.js +15 -15
- package/dist/components/ls-field-properties-email.js +1 -1
- package/dist/components/ls-field-properties-file.js +1 -1
- package/dist/components/ls-field-properties-general.js +1 -1
- package/dist/components/ls-field-properties-image.js +1 -1
- package/dist/components/ls-field-properties-multiple.js +1 -1
- package/dist/components/ls-field-properties-number.js +1 -1
- package/dist/components/ls-field-properties-signature.js +1 -1
- package/dist/components/ls-field-properties-text.js +1 -1
- package/dist/components/ls-field-properties.js +1 -1
- package/dist/components/ls-field-size.js +1 -1
- package/dist/components/ls-field-type-display.js +1 -1
- package/dist/components/ls-formfield.js +9 -9
- package/dist/components/ls-helper-bar.js +1 -1
- package/dist/components/ls-icon.js +1 -1
- package/dist/components/ls-input-wrapper.js +1 -1
- package/dist/components/ls-keyboard-shortcuts.js +1 -1
- package/dist/components/ls-number-input.js +1 -1
- package/dist/components/ls-page-loader.js +1 -1
- package/dist/components/ls-participant-card.js +1 -1
- package/dist/components/ls-participant-manager.js +1 -1
- package/dist/components/ls-participant-select.js +1 -1
- package/dist/components/ls-props-section.js +1 -1
- package/dist/components/ls-radio-input.js +1 -1
- package/dist/components/ls-select-input.js +1 -1
- package/dist/components/ls-statusbar.js +1 -1
- package/dist/components/ls-text-input.js +1 -1
- package/dist/components/ls-textarea-input.js +1 -1
- package/dist/components/ls-toggle.js +1 -1
- package/dist/components/ls-toolbar.js +1 -1
- package/dist/components/ls-toolbox-field.js +1 -1
- package/dist/components/ls-tooltip.js +1 -1
- package/dist/components/ls-validation-tag.js +1 -1
- package/dist/components/{p-Ymh-2OnV.js → p-1dvcNcdF.js} +17 -17
- package/dist/components/{p-Ymh-2OnV.js.map → p-1dvcNcdF.js.map} +1 -1
- package/dist/components/{p-0l2bXbFG.js → p-5pLj6W__.js} +11 -11
- package/dist/components/{p-0l2bXbFG.js.map → p-5pLj6W__.js.map} +1 -1
- package/dist/components/{p-D7BMvkxF.js → p-B1U2Ui7F.js} +17 -17
- package/dist/components/{p-D7BMvkxF.js.map → p-B1U2Ui7F.js.map} +1 -1
- package/dist/components/{p-DO4zTNa2.js → p-B7dTg-FF.js} +17 -17
- package/dist/components/{p-DO4zTNa2.js.map → p-B7dTg-FF.js.map} +1 -1
- package/dist/components/{p-D8-qPGsJ.js → p-BCoqHTq9.js} +7 -7
- package/dist/components/{p-D8-qPGsJ.js.map → p-BCoqHTq9.js.map} +1 -1
- package/dist/components/{p-DPHDQvBy.js → p-BKPLevlT.js} +4 -4
- package/dist/components/{p-DPHDQvBy.js.map → p-BKPLevlT.js.map} +1 -1
- package/dist/components/{p-C0DxZPf7.js → p-BNC69LYf.js} +14 -14
- package/dist/components/{p-C0DxZPf7.js.map → p-BNC69LYf.js.map} +1 -1
- package/dist/components/{p-Dns9yEdO.js → p-BmEXSmLf.js} +8 -6
- package/dist/components/p-BmEXSmLf.js.map +1 -0
- package/dist/components/{p-GVTVbJVE.js → p-BnRYK-C4.js} +8 -8
- package/dist/components/p-BnRYK-C4.js.map +1 -0
- package/dist/components/{p-Z79iUN1m.js → p-BphT81GV.js} +17 -17
- package/dist/components/{p-Z79iUN1m.js.map → p-BphT81GV.js.map} +1 -1
- package/dist/components/{p-Pb_M5CHe.js → p-BvIKgXkH.js} +7 -7
- package/dist/components/{p-Pb_M5CHe.js.map → p-BvIKgXkH.js.map} +1 -1
- package/dist/components/{p-CEfaqMjm.js → p-C28pfXKN.js} +8 -8
- package/dist/components/{p-CEfaqMjm.js.map → p-C28pfXKN.js.map} +1 -1
- package/dist/components/{p-BKpv-kC8.js → p-C4YY0EyH.js} +9 -9
- package/dist/components/{p-BKpv-kC8.js.map → p-C4YY0EyH.js.map} +1 -1
- package/dist/components/{p-CIaA9Qz9.js → p-C7ohAVHE.js} +6 -6
- package/dist/components/{p-CIaA9Qz9.js.map → p-C7ohAVHE.js.map} +1 -1
- package/dist/components/{p-DSWW2hzE.js → p-CAWxK_LI.js} +30 -30
- package/dist/components/{p-DSWW2hzE.js.map → p-CAWxK_LI.js.map} +1 -1
- package/dist/components/{p-DZm_unSc.js → p-CAbrMIbN.js} +6 -6
- package/dist/components/p-CAbrMIbN.js.map +1 -0
- package/dist/components/{p-D0Dhti1c.js → p-CEc76IM2.js} +5 -5
- package/dist/components/{p-D0Dhti1c.js.map → p-CEc76IM2.js.map} +1 -1
- package/dist/components/{p-BvHSBTD8.js → p-CEhCcP_A.js} +3 -3
- package/dist/components/{p-BvHSBTD8.js.map → p-CEhCcP_A.js.map} +1 -1
- package/dist/components/{p-Jxy3zvjl.js → p-CNX4llIr.js} +5 -5
- package/dist/components/{p-Jxy3zvjl.js.map → p-CNX4llIr.js.map} +1 -1
- package/dist/components/{p-yqhOKUzi.js → p-CSmx-jJT.js} +17 -17
- package/dist/components/{p-yqhOKUzi.js.map → p-CSmx-jJT.js.map} +1 -1
- package/dist/components/{p-Ccn3ZZcu.js → p-CWMW0nzH.js} +6 -6
- package/dist/components/{p-Ccn3ZZcu.js.map → p-CWMW0nzH.js.map} +1 -1
- package/dist/components/{p-DdA-gazu.js → p-CWfyjOto.js} +4 -4
- package/dist/components/{p-DdA-gazu.js.map → p-CWfyjOto.js.map} +1 -1
- package/dist/components/{p-B-CwRcyM.js → p-CciiwtyT.js} +16 -16
- package/dist/components/{p-B-CwRcyM.js.map → p-CciiwtyT.js.map} +1 -1
- package/dist/components/{p-Cvpba_Hj.js → p-CdEPt9fv.js} +8 -8
- package/dist/components/{p-Cvpba_Hj.js.map → p-CdEPt9fv.js.map} +1 -1
- package/dist/components/{p-BnXLoyl5.js → p-CeKcOUyM.js} +17 -17
- package/dist/components/{p-BnXLoyl5.js.map → p-CeKcOUyM.js.map} +1 -1
- package/dist/components/{p-CHTd656b.js → p-D-OtQhJz.js} +17 -17
- package/dist/components/{p-CHTd656b.js.map → p-D-OtQhJz.js.map} +1 -1
- package/dist/components/{p-DmRC_Wu_.js → p-DKbeIqEX.js} +5 -5
- package/dist/components/{p-DmRC_Wu_.js.map → p-DKbeIqEX.js.map} +1 -1
- package/dist/components/{p-ehKlmMJ5.js → p-DLxAjAd4.js} +6 -6
- package/dist/components/{p-ehKlmMJ5.js.map → p-DLxAjAd4.js.map} +1 -1
- package/dist/components/{p-CPWE3RPb.js → p-DWIo_K0q.js} +5 -5
- package/dist/components/{p-CPWE3RPb.js.map → p-DWIo_K0q.js.map} +1 -1
- package/dist/components/{p-DYigxUng.js → p-DZPnGx2N.js} +5 -5
- package/dist/components/{p-DYigxUng.js.map → p-DZPnGx2N.js.map} +1 -1
- package/dist/components/{p-ByytASxI.js → p-DfYmuFSx.js} +4 -4
- package/dist/components/{p-ByytASxI.js.map → p-DfYmuFSx.js.map} +1 -1
- package/dist/components/{p-C3Yf2XxL.js → p-Djqb_4PL.js} +7 -7
- package/dist/components/{p-C3Yf2XxL.js.map → p-Djqb_4PL.js.map} +1 -1
- package/dist/components/{p-DmpTMpIK.js → p-Dk00ccBn.js} +4 -4
- package/dist/components/{p-DmpTMpIK.js.map → p-Dk00ccBn.js.map} +1 -1
- package/dist/components/{p-sXbu_0hu.js → p-DkCVXmg3.js} +10 -10
- package/dist/components/{p-sXbu_0hu.js.map → p-DkCVXmg3.js.map} +1 -1
- package/dist/components/{p-D_bOpI93.js → p-DrD5JKw9.js} +11 -11
- package/dist/components/{p-D_bOpI93.js.map → p-DrD5JKw9.js.map} +1 -1
- package/dist/components/{p-DRlasxvX.js → p-IlkS4czy.js} +17 -12
- package/dist/components/p-IlkS4czy.js.map +1 -0
- package/dist/components/{p-BMoeVwvV.js → p-IpGJwBtp.js} +8 -8
- package/dist/components/{p-BMoeVwvV.js.map → p-IpGJwBtp.js.map} +1 -1
- package/dist/components/{p-D1G_SpA3.js → p-Wuj0cujc.js} +13 -13
- package/dist/components/{p-D1G_SpA3.js.map → p-Wuj0cujc.js.map} +1 -1
- package/dist/components/{p-BfYQbwHx.js → p-XF3M9gAr.js} +11 -11
- package/dist/components/{p-BfYQbwHx.js.map → p-XF3M9gAr.js.map} +1 -1
- package/dist/components/{p-CZoubBus.js → p-XkANRt3Q.js} +4 -4
- package/dist/components/{p-CZoubBus.js.map → p-XkANRt3Q.js.map} +1 -1
- package/dist/components/{p-ChsJHskx.js → p-gE1FA92I.js} +5 -5
- package/dist/components/{p-ChsJHskx.js.map → p-gE1FA92I.js.map} +1 -1
- package/dist/components/{p-BhKW6QAV.js → p-h0r-SdI7.js} +5 -5
- package/dist/components/{p-BhKW6QAV.js.map → p-h0r-SdI7.js.map} +1 -1
- package/dist/components/{p-hM61nVV6.js → p-hHXffFw5.js} +17 -17
- package/dist/components/{p-hM61nVV6.js.map → p-hHXffFw5.js.map} +1 -1
- package/dist/components/{p-D81uQuBt.js → p-qx-naHxz.js} +5 -5
- package/dist/components/{p-D81uQuBt.js.map → p-qx-naHxz.js.map} +1 -1
- package/dist/components/{p-DXhpjcQC.js → p-sqcHMrnp.js} +4 -4
- package/dist/components/{p-DXhpjcQC.js.map → p-sqcHMrnp.js.map} +1 -1
- package/dist/components/{p-B6WHuozd.js → p-wgy1HDlb.js} +17 -17
- package/dist/components/{p-B6WHuozd.js.map → p-wgy1HDlb.js.map} +1 -1
- package/dist/components/{p-CesULiVv.js → p-yu8Gmj9y.js} +6 -6
- package/dist/components/{p-CesULiVv.js.map → p-yu8Gmj9y.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ls-compose-manager.entry.js +26 -0
- package/dist/esm/ls-compose-manager.entry.js.map +1 -0
- package/dist/esm/ls-document-options_42.entry.js +106 -101
- package/dist/esm/ls-document-options_42.entry.js.map +1 -1
- package/dist/esm/ls-document-viewer.js +1 -1
- package/dist/esm/ls-field-properties-dropdown.entry.js +1 -1
- package/dist/esm/ls-formfield.entry.js +2 -2
- package/dist/esm/ls-number-input_5.entry.js +6 -6
- package/dist/ls-document-viewer/ls-compose-manager.entry.esm.js.map +1 -0
- package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
- package/dist/ls-document-viewer/{p-d2eaa2ec.entry.js → p-14049937.entry.js} +2 -2
- package/dist/ls-document-viewer/p-20ab7965.entry.js +2 -0
- package/dist/ls-document-viewer/p-20ab7965.entry.js.map +1 -0
- package/dist/ls-document-viewer/{p-cfb2d2ff.entry.js → p-76fe67f1.entry.js} +2 -2
- package/dist/ls-document-viewer/p-7f4adac4.entry.js +2 -0
- package/dist/ls-document-viewer/{p-3d9bde07.entry.js → p-fbf49a8c.entry.js} +5 -5
- package/dist/ls-document-viewer/p-fbf49a8c.entry.js.map +1 -0
- package/dist/types/components/ls-compose-manager/ls-compose-manager.d.ts +9 -0
- package/dist/types/components/ls-document-viewer/ls-document-viewer.d.ts +4 -3
- package/dist/types/components/ls-feature-column/ls-feature-column.d.ts +5 -0
- package/dist/types/components/ls-validation-tag/ls-validation-tag.d.ts +1 -0
- package/dist/types/components.d.ts +49 -10
- package/dist/types/types/LSApiTemplate.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-DRlasxvX.js.map +0 -1
- package/dist/components/p-DZm_unSc.js.map +0 -1
- package/dist/components/p-Dns9yEdO.js.map +0 -1
- package/dist/components/p-GVTVbJVE.js.map +0 -1
- package/dist/ls-document-viewer/p-3d9bde07.entry.js.map +0 -1
- package/dist/ls-document-viewer/p-3ff5b214.entry.js +0 -2
- /package/dist/ls-document-viewer/{p-d2eaa2ec.entry.js.map → p-14049937.entry.js.map} +0 -0
- /package/dist/ls-document-viewer/{p-cfb2d2ff.entry.js.map → p-76fe67f1.entry.js.map} +0 -0
- /package/dist/ls-document-viewer/{p-3ff5b214.entry.js.map → p-7f4adac4.entry.js.map} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H,
|
|
1
|
+
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CEhCcP_A.js';
|
|
2
2
|
import { c as clsx } from './p-ChV9xqsO.js';
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-CWfyjOto.js';
|
|
4
4
|
|
|
5
5
|
const lsTextInputCss = "* {\n box-sizing: border-box;\n font-family: \"IBM Plex\", sans-serif;\n margin: 0;\n}\n\n.host {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n#fieldIcon {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-60)\n}\n\n#password-icon {\n padding-right: 0.25rem;\n}\n\n.icon-input {\n padding-left: 2.5rem !important;\n}\n\n.button-input {\n padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n padding-right: 4rem !important;\n}\n\n.input-base {\n display: flex;\n width: 100%;\n height: 2.25rem;\n padding: 0.5rem 0.75rem;\n align-items: center;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.5rem;\n /* Shadow/sm */\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n /* text-sm/leading-5/font-regular */\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-100);\n}\n\n.default:hover {\n border: 1px solid var(--gray-50, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-110);\n}\n\n\n.disabled {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-10, #F7F8FA);\n color: var(--gray-60);\n cursor: not-allowed;\n}\n\n.display-only {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-10, #F7F8FA);\n color: var(--gray-100);\n cursor: not-allowed;\n}\n\n.invalid {\n border: 1px solid var(--red-40, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n border: 1px solid var(--red-50, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.valid {\n border: 1px solid var(--green-40, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n border: 1px solid var(--green-50, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n position: absolute;\n padding: 0.25rem;\n height: 36px;\n right: 0;\n top: 0;\n display: flex;\n align-items: center;\n} \n\n#invalidIcon {\n margin: 0 0.5rem;\n color: var(--red-70);\n}\n\n#validIcon {\n margin: 0 0.5rem;\n color: var(--green-60);\n}\n\n.button {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--White, #FFF);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-90);\n }\n}\n\n.button:hover {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--gray-20, #EDEFF2);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:active {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:focus {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n\n\n\n\n";
|
|
6
6
|
|
|
@@ -45,13 +45,13 @@ const LsTextInput = /*@__PURE__*/ proxyCustomElement(class LsTextInput extends H
|
|
|
45
45
|
: dirty && !valid
|
|
46
46
|
? 'invalid'
|
|
47
47
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
48
|
-
return (h(Host, { key: '
|
|
48
|
+
return (h(Host, { key: '9f58679c7e72b2aa0bb0efb777c1d17420d9fbc6', class: 'host' }, fieldIcon && (h("ls-icon", { key: '7fc0da24a79e8b0aca1a72a998a86c070b8a33d6', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
|
|
49
49
|
this.changeHandler(e);
|
|
50
50
|
} })) : type === 'displayonly' ? (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true, onChange: (e) => {
|
|
51
51
|
this.changeHandler(e);
|
|
52
52
|
} })) : (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onChange: (e) => {
|
|
53
53
|
this.changeHandler(e);
|
|
54
|
-
} })), h("div", { key: '
|
|
54
|
+
} })), h("div", { key: 'a9873657c293611cb5b0bfdc7c2936ad2859e1e1', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'b22a919a5886cfd395c19693d3311ea7c34de25f', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '2b09bca182cedcb44d124bb91a588878075c1290', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '08e4457eba4879b4dcb1a6f0e8df18694b172f4e', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '56dd71d1b86db74a61bc187d3f85caa3bc001a69', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
|
|
55
55
|
}
|
|
56
56
|
static get style() { return lsTextInputCss; }
|
|
57
57
|
}, [257, "ls-text-input", {
|
|
@@ -92,6 +92,6 @@ function defineCustomElement() {
|
|
|
92
92
|
defineCustomElement();
|
|
93
93
|
|
|
94
94
|
export { LsTextInput as L, defineCustomElement as d };
|
|
95
|
-
//# sourceMappingURL=p-
|
|
95
|
+
//# sourceMappingURL=p-DLxAjAd4.js.map
|
|
96
96
|
|
|
97
|
-
//# sourceMappingURL=p-
|
|
97
|
+
//# sourceMappingURL=p-DLxAjAd4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-ehKlmMJ5.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-text-input/ls-text-input.css?tag=ls-text-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-text-input/ls-text-input.tsx"],"sourcesContent":["* {\n box-sizing: border-box;\n font-family: \"IBM Plex\", sans-serif;\n margin: 0;\n}\n\n.host {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n#fieldIcon {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-60)\n}\n\n#password-icon {\n padding-right: 0.25rem;\n}\n\n.icon-input {\n padding-left: 2.5rem !important;\n}\n\n.button-input {\n padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n padding-right: 4rem !important;\n}\n\n.input-base {\n display: flex;\n width: 100%;\n height: 2.25rem;\n padding: 0.5rem 0.75rem;\n align-items: center;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.5rem;\n /* Shadow/sm */\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n /* text-sm/leading-5/font-regular */\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-100);\n}\n\n.default:hover {\n border: 1px solid var(--gray-50, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-110);\n}\n\n\n.disabled {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-10, #F7F8FA);\n color: var(--gray-60);\n cursor: not-allowed;\n}\n\n.display-only {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-10, #F7F8FA);\n color: var(--gray-100);\n cursor: not-allowed;\n}\n\n.invalid {\n border: 1px solid var(--red-40, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n border: 1px solid var(--red-50, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.valid {\n border: 1px solid var(--green-40, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n border: 1px solid var(--green-50, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n position: absolute;\n padding: 0.25rem;\n height: 36px;\n right: 0;\n top: 0;\n display: flex;\n align-items: center;\n} \n\n#invalidIcon {\n margin: 0 0.5rem;\n color: var(--red-70);\n}\n\n#validIcon {\n margin: 0 0.5rem;\n color: var(--green-60);\n}\n\n.button {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--White, #FFF);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-90);\n }\n}\n\n.button:hover {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--gray-20, #EDEFF2);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:active {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:focus {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n\n\n\n\n","import { Component, Prop, h, Host, Event as StencilEvent, EventEmitter, State } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'ls-text-input',\n styleUrl: 'ls-text-input.css',\n shadow: true,\n})\nexport class LsTextInput {\n @Prop() type: 'default' | 'password' | 'displayonly' = 'default';\n @Prop() name: string;\n @Prop({ mutable: true }) value: string;\n @Prop() placeholder?: string;\n @Prop() aria?: string;\n @Prop() inputRef?: string;\n @Prop() disabled: boolean;\n @Prop() required: boolean;\n @Prop() valid: boolean;\n @Prop() dirty: boolean;\n @Prop() countMax: number;\n @Prop() buttonClick?: any;\n @Prop() buttonIcon?: Icon;\n @Prop() fieldIcon?: Icon;\n @StencilEvent() valueChange: EventEmitter<string>;\n\n @State() showPassword: boolean = false;\n\n handlePassword = () => {\n this.showPassword = !this.showPassword;\n };\n\n changeHandler(event: Event) {\n console.log(event)\n this.valueChange.emit((event.target as any).value as string);\n }\n\n render() {\n const {\n type,\n name,\n value,\n placeholder,\n aria,\n disabled,\n required,\n valid,\n dirty,\n countMax,\n buttonClick,\n buttonIcon,\n fieldIcon,\n showPassword,\n handlePassword,\n } = this;\n\n const inputClass = clsx(\n 'input-base',\n type === 'displayonly'\n ? 'display-only'\n : disabled\n ? 'disabled'\n : dirty && valid\n ? 'valid'\n : dirty && !valid\n ? 'invalid'\n : 'default',\n fieldIcon && 'icon-input',\n dirty && 'button-input',\n buttonIcon && 'button-input',\n buttonIcon && dirty && 'right-items-input',\n );\n\n return (\n <Host class='host'>\n {fieldIcon && (\n <ls-icon\n id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n name={fieldIcon}\n ></ls-icon>\n )}\n {type === 'password' ? (\n <input\n type={showPassword && 'password'}\n class={inputClass}\n id={name}\n name={name}\n value={value}\n maxlength={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled={disabled}\n onChange={(e) => {\n this.changeHandler(e)\n }}\n ></input>\n ) : type === 'displayonly' ? (\n <input\n class={inputClass}\n id={name}\n name={name}\n value={value}\n maxlength={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled\n onChange={(e) => {\n this.changeHandler(e)\n }}\n />\n ) : (\n <input\n class={inputClass}\n id={name}\n name={name}\n value={value}\n maxlength={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled={disabled}\n onChange={(e) => {\n this.changeHandler(e)\n }}\n ></input>\n )}\n <div class='right-items'>\n {dirty && !disabled && (\n <ls-icon\n id={valid ? 'validIcon' : 'invalidIcon'}\n name={valid ? 'check-circle' : 'exclamation-circle'}\n ></ls-icon>\n )}\n {buttonIcon && (\n <button class='button' onClick={buttonClick}>\n <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n </button>\n )}\n {type === 'password' && !buttonIcon && (\n <ls-icon-button\n id='password-icon'\n icon={showPassword ? 'eye' : 'eye-off'}\n onClick={handlePassword}\n ></ls-icon-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-DLxAjAd4.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-text-input/ls-text-input.css?tag=ls-text-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-text-input/ls-text-input.tsx"],"sourcesContent":["* {\n box-sizing: border-box;\n font-family: \"IBM Plex\", sans-serif;\n margin: 0;\n}\n\n.host {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n#fieldIcon {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-60)\n}\n\n#password-icon {\n padding-right: 0.25rem;\n}\n\n.icon-input {\n padding-left: 2.5rem !important;\n}\n\n.button-input {\n padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n padding-right: 4rem !important;\n}\n\n.input-base {\n display: flex;\n width: 100%;\n height: 2.25rem;\n padding: 0.5rem 0.75rem;\n align-items: center;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.5rem;\n /* Shadow/sm */\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n /* text-sm/leading-5/font-regular */\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n}\n\n.input-base:active:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-100);\n}\n\n.default:hover {\n border: 1px solid var(--gray-50, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-110);\n}\n\n\n.disabled {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-10, #F7F8FA);\n color: var(--gray-60);\n cursor: not-allowed;\n}\n\n.display-only {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-10, #F7F8FA);\n color: var(--gray-100);\n cursor: not-allowed;\n}\n\n.invalid {\n border: 1px solid var(--red-40, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n border: 1px solid var(--red-50, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.valid {\n border: 1px solid var(--green-40, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n border: 1px solid var(--green-50, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n position: absolute;\n padding: 0.25rem;\n height: 36px;\n right: 0;\n top: 0;\n display: flex;\n align-items: center;\n} \n\n#invalidIcon {\n margin: 0 0.5rem;\n color: var(--red-70);\n}\n\n#validIcon {\n margin: 0 0.5rem;\n color: var(--green-60);\n}\n\n.button {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--White, #FFF);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-90);\n }\n}\n\n.button:hover {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--gray-20, #EDEFF2);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:active {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:focus {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n\n\n\n\n","import { Component, Prop, h, Host, Event as StencilEvent, EventEmitter, State } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'ls-text-input',\n styleUrl: 'ls-text-input.css',\n shadow: true,\n})\nexport class LsTextInput {\n @Prop() type: 'default' | 'password' | 'displayonly' = 'default';\n @Prop() name: string;\n @Prop({ mutable: true }) value: string;\n @Prop() placeholder?: string;\n @Prop() aria?: string;\n @Prop() inputRef?: string;\n @Prop() disabled: boolean;\n @Prop() required: boolean;\n @Prop() valid: boolean;\n @Prop() dirty: boolean;\n @Prop() countMax: number;\n @Prop() buttonClick?: any;\n @Prop() buttonIcon?: Icon;\n @Prop() fieldIcon?: Icon;\n @StencilEvent() valueChange: EventEmitter<string>;\n\n @State() showPassword: boolean = false;\n\n handlePassword = () => {\n this.showPassword = !this.showPassword;\n };\n\n changeHandler(event: Event) {\n console.log(event)\n this.valueChange.emit((event.target as any).value as string);\n }\n\n render() {\n const {\n type,\n name,\n value,\n placeholder,\n aria,\n disabled,\n required,\n valid,\n dirty,\n countMax,\n buttonClick,\n buttonIcon,\n fieldIcon,\n showPassword,\n handlePassword,\n } = this;\n\n const inputClass = clsx(\n 'input-base',\n type === 'displayonly'\n ? 'display-only'\n : disabled\n ? 'disabled'\n : dirty && valid\n ? 'valid'\n : dirty && !valid\n ? 'invalid'\n : 'default',\n fieldIcon && 'icon-input',\n dirty && 'button-input',\n buttonIcon && 'button-input',\n buttonIcon && dirty && 'right-items-input',\n );\n\n return (\n <Host class='host'>\n {fieldIcon && (\n <ls-icon\n id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n name={fieldIcon}\n ></ls-icon>\n )}\n {type === 'password' ? (\n <input\n type={showPassword && 'password'}\n class={inputClass}\n id={name}\n name={name}\n value={value}\n maxlength={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled={disabled}\n onChange={(e) => {\n this.changeHandler(e)\n }}\n ></input>\n ) : type === 'displayonly' ? (\n <input\n class={inputClass}\n id={name}\n name={name}\n value={value}\n maxlength={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled\n onChange={(e) => {\n this.changeHandler(e)\n }}\n />\n ) : (\n <input\n class={inputClass}\n id={name}\n name={name}\n value={value}\n maxlength={countMax}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled={disabled}\n onChange={(e) => {\n this.changeHandler(e)\n }}\n ></input>\n )}\n <div class='right-items'>\n {dirty && !disabled && (\n <ls-icon\n id={valid ? 'validIcon' : 'invalidIcon'}\n name={valid ? 'check-circle' : 'exclamation-circle'}\n ></ls-icon>\n )}\n {buttonIcon && (\n <button class='button' onClick={buttonClick}>\n <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n </button>\n )}\n {type === 'password' && !buttonIcon && (\n <ls-icon-button\n id='password-icon'\n icon={showPassword ? 'eye' : 'eye-off'}\n onClick={handlePassword}\n ></ls-icon-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h } from './p-CEhCcP_A.js';
|
|
2
2
|
import { c as clsx } from './p-ChV9xqsO.js';
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-CWfyjOto.js';
|
|
4
4
|
|
|
5
5
|
const lsSelectInputCss = "* {\n box-sizing: border-box;\n margin: 0;\n}\n\n.host {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n#fieldIcon {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-60)\n}\n\n.icon-input {\n padding-left: 2.5rem !important;\n}\n\n.button-input {\n padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n padding-right: 4rem !important;\n}\n\n.input-base {\n display: flex;\n width: 100%;\n height: 2.25rem;\n padding: 0rem 0.75rem;\n align-items: center;\n vertical-align: text-top;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.5rem;\n /* Shadow/sm */\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n /* text-sm/leading-5/font-regular */\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n}\n\nselect::-ms-expand {\n display: none;\n}\n\nselect {\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n#select-arrow {\n color: var(--gray-70);\n margin-right: 0.25rem;\n margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n color: var(--gray-40);\n margin-right: 0.25rem;\n margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-100);\n}\n\n.default:hover {\n border: 1px solid var(--gray-50, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-110);\n}\n\n\n.disabled {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-10, #F7F8FA);\n color: var(--gray-60);\n cursor: not-allowed;\n}\n\n.invalid {\n border: 1px solid var(--red-40, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n border: 1px solid var(--red-50, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.valid {\n border: 1px solid var(--green-40, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n border: 1px solid var(--green-50, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n position: absolute;\n padding: 0.25rem;\n height: 36px;\n right: 0;\n top: 0;\n display: flex;\n align-items: center;\n} \n\n#invalidIcon {\n margin: 0 0.5rem;\n color: var(--red-70);\n}\n\n#validIcon {\n margin: 0 0.5rem;\n color: var(--green-60);\n}\n\n.button {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--White, #FFF);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-90);\n }\n}\n\n.button:hover {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--gray-20, #EDEFF2);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:active {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:focus {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n\n\n\n\n";
|
|
6
6
|
|
|
@@ -35,7 +35,7 @@ const LsSelectInput = /*@__PURE__*/ proxyCustomElement(class LsSelectInput exten
|
|
|
35
35
|
: displayOnly
|
|
36
36
|
? 'displayOnly'
|
|
37
37
|
: 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
|
|
38
|
-
return (h("host", { key: '
|
|
38
|
+
return (h("host", { key: 'e22bd6924365a77cebda382a7ee9445263de716f', class: 'host' }, fieldIcon && (h("ls-icon", { key: '4e0d8d395c7874235f2618c39331ebb77112bd25', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '68077a1eae69a43ec4c37dff022c096bfd7c0c4d', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '13f5f193359e4752bb790d2d8b518b5bb6f91e49' })), h("div", { key: 'a06550b784b85776e9976b7a27e51dab2be69e5d', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '7d70d7d3a28ed3082518d588c0b6d6be04829412', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
|
|
39
39
|
}
|
|
40
40
|
static get style() { return lsSelectInputCss; }
|
|
41
41
|
}, [260, "ls-select-input", {
|
|
@@ -73,6 +73,6 @@ function defineCustomElement() {
|
|
|
73
73
|
defineCustomElement();
|
|
74
74
|
|
|
75
75
|
export { LsSelectInput as L, defineCustomElement as d };
|
|
76
|
-
//# sourceMappingURL=p-
|
|
76
|
+
//# sourceMappingURL=p-DWIo_K0q.js.map
|
|
77
77
|
|
|
78
|
-
//# sourceMappingURL=p-
|
|
78
|
+
//# sourceMappingURL=p-DWIo_K0q.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DWIo_K0q.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m5IAAm5I;;MCS/5I,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;AAChB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;;;;IAMjB,MAAM,GAAA;QACJ,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,GACV,GAAG,IAAI;AAER,QAAA,MAAM,UAAU,GAAG,IAAI,CACrB,YAAY,EACZ;AACE,cAAE;cACA,KAAK,IAAI;AACT,kBAAE;AACF,kBAAE,KAAK,IAAI,CAAC;AACV,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,SAAS,EACnB,SAAS,IAAI,YAAY,EACzB,KAAK,IAAI,cAAc,EACvB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,KAAK,IAAI,mBAAmB,CAC3C;QAED,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EACf,SAAS,KACR,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,QAAQ,GAAG,mBAAmB,GAAG,WAAW,EAChD,IAAI,EAAE,SAAS,GACN,CACZ,EACD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,KAAK,IAAI,CAAC,QAAQ,KACjB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,KAAK,GAAG,WAAW,GAAG,aAAa,EACvC,IAAI,EAAE,KAAK,GAAG,cAAc,GAAG,oBAAoB,GAC1C,CACZ,EACA,UAAU,IACT,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAY,CAAA,CAC9C,KACN,eACH,EAAE,EAAE,QAAQ,GAAG,uBAAuB,GAAG,cAAc,EACvD,IAAI,EAAE,cAAc,EACX,CAAA,CAAC,CACR,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-select-input/ls-select-input.css?tag=ls-select-input","src/components/ls-formfield/inputs/ls-select-input/ls-select-input.tsx"],"sourcesContent":["* {\n box-sizing: border-box;\n margin: 0;\n}\n\n.host {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n#fieldIcon {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--gray-60)\n}\n\n.icon-input {\n padding-left: 2.5rem !important;\n}\n\n.button-input {\n padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n padding-right: 4rem !important;\n}\n\n.input-base {\n display: flex;\n width: 100%;\n height: 2.25rem;\n padding: 0rem 0.75rem;\n align-items: center;\n vertical-align: text-top;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.5rem;\n /* Shadow/sm */\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n /* text-sm/leading-5/font-regular */\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n}\n\nselect::-ms-expand {\n display: none;\n}\n\nselect {\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n#select-arrow {\n color: var(--gray-70);\n margin-right: 0.25rem;\n margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n color: var(--gray-40);\n margin-right: 0.25rem;\n margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-100);\n}\n\n.default:hover {\n border: 1px solid var(--gray-50, #D8D9DC);\n background: var(--White, #FFF);\n color: var(--gray-110);\n}\n\n\n.disabled {\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-10, #F7F8FA);\n color: var(--gray-60);\n cursor: not-allowed;\n}\n\n.invalid {\n border: 1px solid var(--red-40, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n border: 1px solid var(--red-50, #FFA19E);\n background: var(--White, #FFF);\n color: var(--Red-100, #7A1714);\n}\n\n.valid {\n border: 1px solid var(--green-40, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n border: 1px solid var(--green-50, #72F0C2);\n background: var(--White, #FFF);\n color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n position: absolute;\n padding: 0.25rem;\n height: 36px;\n right: 0;\n top: 0;\n display: flex;\n align-items: center;\n} \n\n#invalidIcon {\n margin: 0 0.5rem;\n color: var(--red-70);\n}\n\n#validIcon {\n margin: 0 0.5rem;\n color: var(--green-60);\n}\n\n.button {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--White, #FFF);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-90);\n }\n}\n\n.button:hover {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #C8C9CC);\n background: var(--gray-20, #EDEFF2);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:active {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:focus {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456F6);\n background: var(--White, #FFF);\n box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n\n\n\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'ls-select-input',\n styleUrl: 'ls-select-input.css',\n shadow: false,\n})\nexport class LsSelectInput {\n @Prop() name: string;\n @Prop() value: string;\n @Prop() aria?: string;\n @Prop() inputRef?: string;\n @Prop() disabled: boolean;\n @Prop() displayOnly: boolean;\n @Prop() required: boolean;\n @Prop() valid: boolean;\n @Prop() dirty: boolean;\n @Prop() buttonClick?: any;\n @Prop() buttonIcon?: Icon;\n @Prop() fieldIcon?: Icon;\n\n // handleChange(event) {\n // this.value = event.target.value;\n // }\n\n render() {\n const {\n name,\n aria,\n disabled,\n displayOnly,\n required,\n valid,\n dirty,\n buttonClick,\n buttonIcon,\n fieldIcon,\n } = this;\n\n const inputClass = clsx(\n 'input-base',\n disabled\n ? 'disabled'\n : dirty && valid\n ? 'valid'\n : dirty && !valid\n ? 'invalid'\n : displayOnly\n ? 'displayOnly'\n : 'default',\n fieldIcon && 'icon-input',\n dirty && 'button-input',\n buttonIcon && 'button-input',\n buttonIcon && dirty && 'right-items-input',\n );\n\n return (\n <host class='host'>\n {fieldIcon && (\n <ls-icon\n id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n name={fieldIcon}\n ></ls-icon>\n )}\n <select\n class={inputClass}\n id={name}\n name={name}\n aria-label={aria}\n required={required}\n disabled={disabled}\n >\n <slot />\n </select>\n <div class='right-items'>\n {dirty && !disabled && (\n <ls-icon\n id={valid ? 'validIcon' : 'invalidIcon'}\n name={valid ? 'check-circle' : 'exclamation-circle'}\n ></ls-icon>\n )}\n {buttonIcon ? (\n <button class='button' onClick={buttonClick}>\n <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n </button>\n ) : (<ls-icon\n id={disabled ? 'select-arrow-disabled' : 'select-arrow'}\n name={'chevron-down'}\n ></ls-icon>) }\n </div>\n </host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H,
|
|
1
|
+
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CEhCcP_A.js';
|
|
2
2
|
|
|
3
3
|
const lsToggleCss = ":host{display:block}.switch{position:relative;display:inline-block;width:2.75rem;height:1.5rem}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--gray-20, #edeff2);-webkit-transition:0.4s;transition:0.4s}.indeterminate{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--primary-60, #4456f6);-webkit-transition:0.4s;transition:0.4s}.slider:before{position:absolute;content:'';height:1.25rem;width:1.25rem;left:0.125rem;bottom:0.125rem;background-color:white;-webkit-transition:0.4s;transition:0.4s}.indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.75rem;height:0.125rem;background-color:white}input:checked+.slider{background-color:var(--primary-60, #4456f6)}input:focus+.slider{box-shadow:0 0 1px var(--primary-60, #4456f6);outline:4px solid var(--primary-20, #e3e6ff)}input:checked+.slider:before{-webkit-transform:translateX(1.25rem);-ms-transform:translateX(1.25rem);transform:translateX(1.25rem)}.slider.round,.indeterminate.round{border-radius:34px}.slider.round:before{border-radius:50%}";
|
|
4
4
|
|
|
@@ -15,9 +15,9 @@ const LsToggle = /*@__PURE__*/ proxyCustomElement(class LsToggle extends H {
|
|
|
15
15
|
this.valueChange.emit(value);
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: 'ed5c0cf6938343a75778033d857ed75d1dd71a16' }, h("label", { key: 'c61d2548ff81739a02d32e4f6ca726d0d7a2ba8d', class: "switch" }, h("input", { key: 'c1bb11a118c0eb16f3aa7ff9857e9326031066b5', type: "checkbox", checked: this.checked, onChange: (e) => {
|
|
19
19
|
this.changeHandler(e.target.checked);
|
|
20
|
-
} }), h("span", { key: '
|
|
20
|
+
} }), h("span", { key: '42ca0de480283f08abcbf5107b4f4c96fa778224', class: `${this.indeterminate ? 'indeterminate' : 'slider'} round` })), h("slot", { key: '42962f9a09a41198c49673de78a4f80213b1347a' })));
|
|
21
21
|
}
|
|
22
22
|
static get style() { return lsToggleCss; }
|
|
23
23
|
}, [260, "ls-toggle", {
|
|
@@ -40,6 +40,6 @@ function defineCustomElement() {
|
|
|
40
40
|
defineCustomElement();
|
|
41
41
|
|
|
42
42
|
export { LsToggle as L, defineCustomElement as d };
|
|
43
|
-
//# sourceMappingURL=p-
|
|
43
|
+
//# sourceMappingURL=p-DZPnGx2N.js.map
|
|
44
44
|
|
|
45
|
-
//# sourceMappingURL=p-
|
|
45
|
+
//# sourceMappingURL=p-DZPnGx2N.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DZPnGx2N.js","mappings":";;AAAA,MAAM,WAAW,GAAG,opCAAopC;;MCO3pC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;AACM,IAAA,OAAO;AACxB,IAAA,aAAa;AACL,IAAA,WAAW;AAE3B,IAAA,aAAa,CAAC,KAAc,EAAA;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG9B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACnB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAG,QAAQ,EAAE,CAAC,CAAC,KAAI;gBAC7D,IAAI,CAAC,aAAa,CAAE,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC;AAC7C,aAAC,EACE,CAAA,EACL,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,QAAQ,CAAA,MAAA,CAAQ,GAAS,CAC1E,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toggle/ls-toggle.css?tag=ls-toggle","src/components/ls-toggle/ls-toggle.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n/* The switch - the box around the slider */\n.switch {\n position: relative;\n display: inline-block;\n width: 2.75rem;\n height: 1.5rem;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--gray-20, #edeff2);\n -webkit-transition: 0.4s;\n transition: 0.4s;\n}\n\n.indeterminate {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--primary-60, #4456f6);\n -webkit-transition: 0.4s;\n transition: 0.4s;\n}\n\n.slider:before {\n position: absolute;\n content: '';\n height: 1.25rem;\n width: 1.25rem;\n left: 0.125rem;\n bottom: 0.125rem;\n background-color: white;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n}\n\n.indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.75rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput:checked + .slider {\n background-color: var(--primary-60, #4456f6);\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px var(--primary-60, #4456f6);\n outline: 4px solid var(--primary-20, #e3e6ff);\n}\n\ninput:checked + .slider:before {\n -webkit-transform: translateX(1.25rem);\n -ms-transform: translateX(1.25rem);\n transform: translateX(1.25rem);\n}\n\n/* Rounded sliders */\n.slider.round, .indeterminate.round {\n border-radius: 34px;\n}\n\n.slider.round:before {\n border-radius: 50%;\n}\n","import { Component, Host, Prop, h, Event as StencilEvent, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ls-toggle',\n styleUrl: 'ls-toggle.css',\n shadow: false,\n})\nexport class LsToggle {\n @Prop({ mutable: true }) checked: boolean;\n @Prop() indeterminate: boolean;\n @StencilEvent() valueChange: EventEmitter<boolean>;\n\n changeHandler(value: boolean) {\n this.valueChange.emit(value);\n }\n\n render() {\n return (\n <Host>\n <label class=\"switch\">\n <input type=\"checkbox\" checked={this.checked} onChange={(e) => {\n this.changeHandler((e.target as any).checked)\n }\n }/>\n <span class={`${this.indeterminate ? 'indeterminate' : 'slider'} round`}></span>\n </label>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h,
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
|
|
2
2
|
|
|
3
3
|
const lsFieldPropertiesContainerCss = "*{margin:0;box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:calc(100% - 7.25rem);position:relative}.tabs-container{display:grid;width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73);text-transform:capitalize}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:100%}";
|
|
4
4
|
|
|
@@ -17,7 +17,7 @@ const LsFieldPropertiesContainer = /*@__PURE__*/ proxyCustomElement(class LsFiel
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: '3fa6c8fd48b21f1fedfb5af0270afed918c2639f' }, this.tabs.length > 1 && (h("div", { key: '2314daf0f47d5f4a694eae0d9aac3f0a775df26d', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), h("div", { key: '967f6c1b1b7d24a14dd9520d8fbd4b7d16041a03', class: 'scrolling-container' }, h("slot", { key: '4e190919fbb04a3b159acb0b522f160c91218e20', name: this.selectedTab }))));
|
|
21
21
|
}
|
|
22
22
|
static get style() { return lsFieldPropertiesContainerCss; }
|
|
23
23
|
}, [257, "ls-field-properties-container", {
|
|
@@ -41,6 +41,6 @@ function defineCustomElement() {
|
|
|
41
41
|
defineCustomElement();
|
|
42
42
|
|
|
43
43
|
export { LsFieldPropertiesContainer as L, defineCustomElement as d };
|
|
44
|
-
//# sourceMappingURL=p-
|
|
44
|
+
//# sourceMappingURL=p-DfYmuFSx.js.map
|
|
45
45
|
|
|
46
|
-
//# sourceMappingURL=p-
|
|
46
|
+
//# sourceMappingURL=p-DfYmuFSx.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DfYmuFSx.js","mappings":";;AAAA,MAAM,6BAA6B,GAAG,27BAA27B;;MCQp9B,0BAA0B,iBAAAA,kBAAA,CAAA,MAAA,0BAAA,SAAAC,CAAA,CAAA;;;;;;AAC7B,IAAA,QAAQ;IACR,IAAI,GAAa,EAAE;AACY,IAAA,WAAW;IAElD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;;;IAIzC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAQ,MAAA,CAAA,EAAE,EAC7F,EAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAChB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,QAAQ,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,IAC1G,GAAG,CACG,CACV,CAAC,CACE,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAAA,EAC/B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,WAAW,EAAS,CAAA,CACjC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-container/ls-field-properties-container.css?tag=ls-field-properties-container&encapsulation=shadow","src/components/ls-field-properties-container/ls-field-properties-container.tsx"],"sourcesContent":["* {\n margin: 0;\n box-sizing: border-box;\n}\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: calc(100% - 7.25rem);\n position: relative;\n}\n\n.tabs-container {\n display: grid;\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n color: var(--gray-80, #6c6e73);\n text-transform: capitalize;\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: 100%;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n tag: 'ls-field-properties-container',\n styleUrl: 'ls-field-properties-container.css',\n shadow: true,\n})\nexport class LsFieldPropertiesContainer {\n @Prop() dataItem: LSApiElement;\n @Prop() tabs: string[] = [];\n @Prop({ mutable: true, reflect: true}) selectedTab: string;\n\n componentWillLoad() {\n if (!this.selectedTab) {\n this.selectedTab = this.tabs[0] || '';\n }\n }\n\n render() {\n return (\n <Host>\n {this.tabs.length > 1 && (\n <div class={'tabs-container'} style={{ gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` }}>\n {this.tabs.map(tab => (\n <button class={tab === this.selectedTab ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.selectedTab = tab)}>\n {tab}\n </button>\n ))}\n </div>\n )}\n <div class={'scrolling-container'}>\n <slot name={this.selectedTab}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H,
|
|
1
|
+
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CEhCcP_A.js';
|
|
2
2
|
import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-CWfyjOto.js';
|
|
4
|
+
import { d as defineCustomElement$1 } from './p-XkANRt3Q.js';
|
|
5
5
|
|
|
6
6
|
const lsFieldAlignmentCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
|
|
7
7
|
|
|
@@ -132,9 +132,9 @@ const LsFieldAlignment = /*@__PURE__*/ proxyCustomElement(class LsFieldAlignment
|
|
|
132
132
|
attachAllTooltips(this.component.shadowRoot);
|
|
133
133
|
}
|
|
134
134
|
render() {
|
|
135
|
-
return (h(Host, { key: '
|
|
135
|
+
return (h(Host, { key: '16462ffe97721feb1c5116c9cbdc6194acb09c88' }, h("div", { key: '8b49b100acabf5428f0c6c96617b5face71cc8fb', class: 'ls-field-properties-section' }, h("div", { key: 'cd17f6e15d2da47217c9e81674bce61ffb93c5a2', class: 'ls-field-properties-section-text' }, h("p", { key: 'c7b348993120880a8569e122fc541c27e00b2996', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: 'faea33f277f2a0676ea49fe9aa89e2aa5403d2b3', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), h("div", { key: '46cbb0916710f4543714a66fb79e0530325773d4', class: 'multi-button-group-row' }, h("div", { key: 'fa2c33f3b95adbbc6676d301849f2b3265da576b', class: 'button-group' }, h("button", { key: '9811795776b9d3b72e6e01227537ba647765c1f7', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip": "Align Left" }, h("ls-icon", { key: 'c9cccea1fce16b039046eccd7770008744431d15', name: "field-alignment-left" })), h("button", { key: 'c1b61bce62bee85743552f58296a20cb8727b6b4', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip": "Align Center" }, h("ls-icon", { key: '50b82372296941ac55d244a4e6142ca5298f9e03', name: "field-alignment-centre" })), h("button", { key: '6d1c84c9d18fa3a34031aff232b20802322cad12', onClick: () => {
|
|
136
136
|
this.right();
|
|
137
|
-
}, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip": "Align Right" }, h("ls-icon", { key: '
|
|
137
|
+
}, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip": "Align Right" }, h("ls-icon", { key: 'bfe5ee90db7501e726fa39a261bb30ab73e6f95b', name: "field-alignment-right" }))), h("div", { key: '208cbaf9fbd64a236d21b05e651f4c186884bea5', class: 'button-group' }, h("button", { key: 'f519fd5dbffc3142cb5903acb7351b3ac90498ad', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip": "Align Top" }, h("ls-icon", { key: 'f865644ee98d5ac1344305db3f36f01e115339ee', name: "field-alignment-top" })), h("button", { key: '01413374356dcba3d8e610d53cad1e54c9505ef1', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip": "Align Middle" }, h("ls-icon", { key: '972cf08862151472512535e83c293e06c0f3517a', name: "field-alignment-middle" })), h("button", { key: 'f50e3a0b9979286d84a4d5c7b08434b898c7e3e2', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip": "Align Bottom" }, h("ls-icon", { key: '54ff2ee565b8a57c2d9d833cb44428526456d1cf', name: "field-alignment-bottom" }))))), h("slot", { key: 'ecb3c25fc535b1c95ef548fad465015c0c51be56' }), h("ls-tooltip", { key: 'bc9ef2625c2a44a76ce3346f706852262b545592', id: "ls-tooltip-master" })));
|
|
138
138
|
}
|
|
139
139
|
static get style() { return lsFieldAlignmentCss; }
|
|
140
140
|
}, [257, "ls-field-alignment", {
|
|
@@ -166,6 +166,6 @@ function defineCustomElement() {
|
|
|
166
166
|
defineCustomElement();
|
|
167
167
|
|
|
168
168
|
export { LsFieldAlignment as L, defineCustomElement as d };
|
|
169
|
-
//# sourceMappingURL=p-
|
|
169
|
+
//# sourceMappingURL=p-Djqb_4PL.js.map
|
|
170
170
|
|
|
171
|
-
//# sourceMappingURL=p-
|
|
171
|
+
//# sourceMappingURL=p-Djqb_4PL.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-C3Yf2XxL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-alignment/ls-field-alignment.css?tag=ls-field-alignment&encapsulation=shadow","src/components/ls-field-alignment/ls-field-alignment.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n box-sizing: border-box;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.multi-button-group-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n width: 9.313rem;\n max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n}\n\n.input-wrapper {\n position: relative;\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-50, #d8d9dc);\n}\n\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n color: var(--gray-50, #d8d9dc);\n box-shadow: none;\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n width: 100%;\n}\n\n.button-group button {\n display: flex;\n width: 100%;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n background: var(--gray-10, #f7f8fa);\n cursor: not-allowed;\n color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-alignment',\n styleUrl: 'ls-field-alignment.css',\n shadow: true,\n})\nexport class LsFieldAlignment {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement[];\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n right() {\n const rightmost = this.dataItem.reduce((rightmost, current) => {\n return current.left + current.width < rightmost ? rightmost : current.left + current.width;\n }, 0);\n\n console.log(rightmost);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newLeft = rightmost - c.width;\n\n return {\n action: 'update',\n data: {\n ...c,\n left: newLeft,\n ax: newLeft,\n bx: newLeft + c.width,\n } as LSApiElement,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n center() {\n const addcentres = this.dataItem.reduce((total, current) => {\n console.log(total + (current.left + current.width / 2));\n return total + (current.left + current.width / 2);\n }, 0);\n console.log(addcentres);\n\n const cp = addcentres / this.dataItem.length;\n console.log('centerposition', cp);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newLeft = c.left + (cp - (c.left + c.width / 2));\n return {\n action: 'update',\n data: {\n ...c,\n left: newLeft,\n ax: newLeft,\n bx: newLeft + c.width,\n } as LSApiElement,\n };\n });\n console.log(diffs);\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n top() {\n const topmost = this.dataItem.reduce((most, current) => {\n return current.top < most ? most : current.top;\n }, 0);\n\n this.alter({ top: topmost });\n }\n\n left() {\n const leftmost = this.dataItem.reduce((least, current) => {\n return current.left < least ? current.left : least;\n }, this.dataItem[0].left);\n\n this.alter({ left: leftmost });\n }\n\n middle() {\n const addmiddles = this.dataItem.reduce((total, current) => {\n console.log(total + (current.top + current.height / 2));\n return total + (current.top + current.height / 2);\n }, 0);\n\n const cp = addmiddles / this.dataItem.length;\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newTop = c.top + (cp - (c.top + c.height / 2));\n return {\n action: 'update',\n data: {\n ...c,\n top: newTop,\n ay: newTop,\n by: newTop + c.height,\n } as LSApiElement,\n };\n });\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n bottom() {\n const lowest = this.dataItem.reduce((acc, current) => {\n return acc > current.top + current.height ? acc : current.top + current.height;\n }, 0);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newTop = lowest - c.height;\n return {\n action: 'update',\n data: {\n ...c,\n top: newTop,\n ay: newTop,\n by: newTop + c.height,\n } as LSApiElement,\n };\n });\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Alignment</p>\n <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n </div>\n <div class={'multi-button-group-row'}>\n <div class={'button-group'}>\n <button onClick={() => this.left()} aria-label=\"Align selected fields vertically about their left edge.\" data-tooltip=\"Align Left\">\n <ls-icon name=\"field-alignment-left\"></ls-icon>\n </button>\n <button onClick={() => this.center()} aria-label=\"Align selected fields vertically about their centre.\" data-tooltip=\"Align Center\">\n <ls-icon name=\"field-alignment-centre\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.right();\n }}\n aria-label=\"Align selected fields vertically about their right edge.\"\n data-tooltip=\"Align Right\"\n >\n <ls-icon name=\"field-alignment-right\"></ls-icon>\n </button>\n </div>\n <div class={'button-group'}>\n <button onClick={() => this.top()} aria-label=\"Align selected fields by their top.\" data-tooltip=\"Align Top\">\n <ls-icon name=\"field-alignment-top\"></ls-icon>\n </button>\n <button onClick={() => this.middle()} aria-label=\"Align selected fields by their middles.\" data-tooltip=\"Align Middle\">\n <ls-icon name=\"field-alignment-middle\"></ls-icon>\n </button>\n <button onClick={() => this.bottom()} aria-label=\"Align selected fields by their bottoms.\" data-tooltip=\"Align Bottom\">\n <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n </button>\n </div>\n </div>\n </div>\n\n <slot></slot>\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-Djqb_4PL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-alignment/ls-field-alignment.css?tag=ls-field-alignment&encapsulation=shadow","src/components/ls-field-alignment/ls-field-alignment.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n box-sizing: border-box;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.multi-button-group-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n width: 9.313rem;\n max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n}\n\n.input-wrapper {\n position: relative;\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-50, #d8d9dc);\n}\n\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n color: var(--gray-50, #d8d9dc);\n box-shadow: none;\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n width: 100%;\n}\n\n.button-group button {\n display: flex;\n width: 100%;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n background: var(--gray-10, #f7f8fa);\n cursor: not-allowed;\n color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-field-alignment',\n styleUrl: 'ls-field-alignment.css',\n shadow: true,\n})\nexport class LsFieldAlignment {\n @Element() component: HTMLElement;\n @Prop({ mutable: true }) dataItem: LSApiElement[];\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n right() {\n const rightmost = this.dataItem.reduce((rightmost, current) => {\n return current.left + current.width < rightmost ? rightmost : current.left + current.width;\n }, 0);\n\n console.log(rightmost);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newLeft = rightmost - c.width;\n\n return {\n action: 'update',\n data: {\n ...c,\n left: newLeft,\n ax: newLeft,\n bx: newLeft + c.width,\n } as LSApiElement,\n };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n center() {\n const addcentres = this.dataItem.reduce((total, current) => {\n console.log(total + (current.left + current.width / 2));\n return total + (current.left + current.width / 2);\n }, 0);\n console.log(addcentres);\n\n const cp = addcentres / this.dataItem.length;\n console.log('centerposition', cp);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newLeft = c.left + (cp - (c.left + c.width / 2));\n return {\n action: 'update',\n data: {\n ...c,\n left: newLeft,\n ax: newLeft,\n bx: newLeft + c.width,\n } as LSApiElement,\n };\n });\n console.log(diffs);\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n top() {\n const topmost = this.dataItem.reduce((most, current) => {\n return current.top < most ? most : current.top;\n }, 0);\n\n this.alter({ top: topmost });\n }\n\n left() {\n const leftmost = this.dataItem.reduce((least, current) => {\n return current.left < least ? current.left : least;\n }, this.dataItem[0].left);\n\n this.alter({ left: leftmost });\n }\n\n middle() {\n const addmiddles = this.dataItem.reduce((total, current) => {\n console.log(total + (current.top + current.height / 2));\n return total + (current.top + current.height / 2);\n }, 0);\n\n const cp = addmiddles / this.dataItem.length;\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newTop = c.top + (cp - (c.top + c.height / 2));\n return {\n action: 'update',\n data: {\n ...c,\n top: newTop,\n ay: newTop,\n by: newTop + c.height,\n } as LSApiElement,\n };\n });\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n bottom() {\n const lowest = this.dataItem.reduce((acc, current) => {\n return acc > current.top + current.height ? acc : current.top + current.height;\n }, 0);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n const newTop = lowest - c.height;\n return {\n action: 'update',\n data: {\n ...c,\n top: newTop,\n ay: newTop,\n by: newTop + c.height,\n } as LSApiElement,\n };\n });\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\n }\n\n render() {\n return (\n <Host>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Alignment</p>\n <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n </div>\n <div class={'multi-button-group-row'}>\n <div class={'button-group'}>\n <button onClick={() => this.left()} aria-label=\"Align selected fields vertically about their left edge.\" data-tooltip=\"Align Left\">\n <ls-icon name=\"field-alignment-left\"></ls-icon>\n </button>\n <button onClick={() => this.center()} aria-label=\"Align selected fields vertically about their centre.\" data-tooltip=\"Align Center\">\n <ls-icon name=\"field-alignment-centre\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.right();\n }}\n aria-label=\"Align selected fields vertically about their right edge.\"\n data-tooltip=\"Align Right\"\n >\n <ls-icon name=\"field-alignment-right\"></ls-icon>\n </button>\n </div>\n <div class={'button-group'}>\n <button onClick={() => this.top()} aria-label=\"Align selected fields by their top.\" data-tooltip=\"Align Top\">\n <ls-icon name=\"field-alignment-top\"></ls-icon>\n </button>\n <button onClick={() => this.middle()} aria-label=\"Align selected fields by their middles.\" data-tooltip=\"Align Middle\">\n <ls-icon name=\"field-alignment-middle\"></ls-icon>\n </button>\n <button onClick={() => this.bottom()} aria-label=\"Align selected fields by their bottoms.\" data-tooltip=\"Align Bottom\">\n <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n </button>\n </div>\n </div>\n </div>\n\n <slot></slot>\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h,
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
|
|
2
2
|
|
|
3
3
|
const lsPropsSectionCss = "*{margin:0;box-sizing:border-box}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}";
|
|
4
4
|
|
|
@@ -12,7 +12,7 @@ const LsPropsSection = /*@__PURE__*/ proxyCustomElement(class LsPropsSection ext
|
|
|
12
12
|
sectionDescription;
|
|
13
13
|
row = false;
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: '2e9bc93a39de751b09f7f15424e053f087e732ee' }, h("div", { key: 'bc9a664955b8b7bac5fcee4b4b89897c7dc5b7ab', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, h("div", { key: '23e4dfdf4bb9d5e1d7590445394149b6a805faeb', class: 'ls-field-properties-section-text' }, h("p", { key: '127b7257f2386f0ab2b7832f4ea6a0836408a2fd', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && h("p", { key: 'a76879fb1266dad048c3a4769e840b78c78f549e', class: 'ls-field-properties-section-description' }, this.sectionDescription)), h("slot", { key: '3927e8b73f16ef502a2e3c63dd27435a90e736f8' }))));
|
|
16
16
|
}
|
|
17
17
|
static get style() { return lsPropsSectionCss; }
|
|
18
18
|
}, [257, "ls-props-section", {
|
|
@@ -36,6 +36,6 @@ function defineCustomElement() {
|
|
|
36
36
|
defineCustomElement();
|
|
37
37
|
|
|
38
38
|
export { LsPropsSection as L, defineCustomElement as d };
|
|
39
|
-
//# sourceMappingURL=p-
|
|
39
|
+
//# sourceMappingURL=p-Dk00ccBn.js.map
|
|
40
40
|
|
|
41
|
-
//# sourceMappingURL=p-
|
|
41
|
+
//# sourceMappingURL=p-Dk00ccBn.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-Dk00ccBn.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,wmBAAwmB;;MCOrnB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;AACjB,IAAA,YAAY;AACZ,IAAA,kBAAkB;IAClB,GAAG,GAAa,KAAK;IAE7B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,GAAG,GAAG,iCAAiC,GAAG,6BAA6B,EAAA,EACtF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kCAAkC,EAAA,EAC5C,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,mCAAmC,IAAG,IAAI,CAAC,YAAY,CAAK,EACrE,IAAI,CAAC,kBAAkB,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,yCAAyC,EAAA,EAAG,IAAI,CAAC,kBAAkB,CAAK,CAC1G,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-props-section/ls-props-section.css?tag=ls-props-section&encapsulation=shadow","src/components/ls-props-section/ls-props-section.tsx"],"sourcesContent":["* {\n margin: 0;\n box-sizing: border-box;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; /* 120% */\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ls-props-section',\n styleUrl: 'ls-props-section.css',\n shadow: true,\n})\nexport class LsPropsSection {\n @Prop() sectionTitle: string;\n @Prop() sectionDescription?: string;\n @Prop() row?: boolean = false;\n\n render() {\n return (\n <Host>\n <div class={this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>{this.sectionTitle}</p>\n {this.sectionDescription && <p class={'ls-field-properties-section-description'}>{this.sectionDescription}</p>}\n </div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h,
|
|
2
|
-
import { d as defineCustomElement$6 } from './p-
|
|
3
|
-
import { d as defineCustomElement$5 } from './p-
|
|
4
|
-
import { d as defineCustomElement$4 } from './p-
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
7
|
-
import { d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
|
|
2
|
+
import { d as defineCustomElement$6 } from './p-CWMW0nzH.js';
|
|
3
|
+
import { d as defineCustomElement$5 } from './p-CNX4llIr.js';
|
|
4
|
+
import { d as defineCustomElement$4 } from './p-BvIKgXkH.js';
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-CWfyjOto.js';
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-Dk00ccBn.js';
|
|
7
|
+
import { d as defineCustomElement$1 } from './p-XkANRt3Q.js';
|
|
8
8
|
|
|
9
9
|
const lsFieldPropertiesAutosignCss = ":host{display:block}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
|
|
10
10
|
|
|
@@ -16,7 +16,7 @@ const LsFieldPropertiesAutosign = /*@__PURE__*/ proxyCustomElement(class LsField
|
|
|
16
16
|
}
|
|
17
17
|
dataItem;
|
|
18
18
|
render() {
|
|
19
|
-
return (h(Host, { key: '
|
|
19
|
+
return (h(Host, { key: '3fbad8ed745b4900fc76f2f5642c4aeda93193f9' }, h("div", { key: 'f433089f386eaf85cde4dac1f800634730b2e9d0', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: '8142d175bc2e494aa4741b4c2c4e82523f117bba' }, "Label: ", h("input", { key: '70b4e47422f4e090d01946171a4bb3618949e9a6', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '17cbfbad642d9919e44632b78b72bf7694957e37', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: 'b3e3704ee4e17b85f536581795a8331adc6d0a4c', dataItem: this.dataItem }), h("ls-field-footer", { key: 'eca74f7af4fd303c81be26df4863965c5acea42c', dataItem: this.dataItem }), h("slot", { key: 'b880e6d4331cef73aa9f1e0a329cdb56835a8a22' })));
|
|
20
20
|
}
|
|
21
21
|
static get style() { return lsFieldPropertiesAutosignCss; }
|
|
22
22
|
}, [257, "ls-field-properties-autosign", {
|
|
@@ -68,6 +68,6 @@ function defineCustomElement() {
|
|
|
68
68
|
defineCustomElement();
|
|
69
69
|
|
|
70
70
|
export { LsFieldPropertiesAutosign as L, defineCustomElement as d };
|
|
71
|
-
//# sourceMappingURL=p-
|
|
71
|
+
//# sourceMappingURL=p-DkCVXmg3.js.map
|
|
72
72
|
|
|
73
|
-
//# sourceMappingURL=p-
|
|
73
|
+
//# sourceMappingURL=p-DkCVXmg3.js.map
|