bromcom-ui 2.12.3-rc.3-test.0 → 3.0.0-alpha.0
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/bromcom-ui/bromcom-ui.css +1 -1
- package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
- package/dist/bromcom-ui/{p-7c5763cc.entry.js → p-03337609.entry.js} +1 -1
- package/dist/bromcom-ui/{p-540fbc32.entry.js → p-10687c62.entry.js} +1 -1
- package/dist/bromcom-ui/{p-c49b6287.entry.js → p-19ed830b.entry.js} +1 -1
- package/dist/bromcom-ui/{p-32c55505.entry.js → p-1a7e1a74.entry.js} +1 -1
- package/dist/bromcom-ui/{p-d59d9687.entry.js → p-1fbec9e4.entry.js} +1 -1
- package/dist/bromcom-ui/{p-dd24646a.entry.js → p-2afde14e.entry.js} +1 -1
- package/dist/bromcom-ui/{p-beaec5b8.js → p-2d0ff35e.js} +1 -1
- package/dist/bromcom-ui/{p-7e0e02b3.js → p-31a60231.js} +1 -1
- package/dist/bromcom-ui/{p-67343ad8.entry.js → p-3b079331.entry.js} +1 -1
- package/dist/bromcom-ui/{p-cbcf6d9c.js → p-3be27626.js} +1 -1
- package/dist/bromcom-ui/{p-6bea284a.js → p-499d8454.js} +1 -1
- package/dist/bromcom-ui/{p-a6aa173f.entry.js → p-4a71c61a.entry.js} +1 -1
- package/dist/bromcom-ui/{p-80edaf47.entry.js → p-4cc12992.entry.js} +1 -1
- package/dist/bromcom-ui/{p-c77541f4.js → p-4d2bf0e7.js} +2 -2
- package/dist/bromcom-ui/p-556010cb.js +5 -0
- package/dist/bromcom-ui/{p-a00b053e.entry.js → p-56b9cdf7.entry.js} +1 -1
- package/dist/bromcom-ui/{p-1b558b0f.entry.js → p-583982a6.entry.js} +1 -1
- package/dist/bromcom-ui/p-59dc2542.js +5 -0
- package/dist/bromcom-ui/{p-fec89309.entry.js → p-5adcfd9b.entry.js} +1 -1
- package/dist/bromcom-ui/p-5ea9881d.entry.js +5 -0
- package/dist/bromcom-ui/{p-9f5ee998.entry.js → p-5f47e061.entry.js} +1 -1
- package/dist/bromcom-ui/p-64fad38b.js +11 -0
- package/dist/bromcom-ui/{p-507db92e.entry.js → p-6d42e250.entry.js} +1 -1
- package/dist/bromcom-ui/p-6f11eb8e.entry.js +5 -0
- package/dist/bromcom-ui/{p-8c018ae0.js → p-6f2e4c9b.js} +1 -1
- package/dist/bromcom-ui/{p-7e44e6b5.js → p-6f861fed.js} +1 -1
- package/dist/bromcom-ui/{p-d1298c40.js → p-7b21fcb9.js} +1 -1
- package/dist/bromcom-ui/p-815f884d.entry.js +5 -0
- package/dist/bromcom-ui/{p-6657830f.js → p-85eedabc.js} +1 -1
- package/dist/bromcom-ui/{p-974a427c.entry.js → p-8c009880.entry.js} +1 -1
- package/dist/bromcom-ui/p-8d0d0c5b.entry.js +5 -0
- package/dist/bromcom-ui/{p-9850cbce.js → p-8e5e362a.js} +1 -1
- package/dist/bromcom-ui/{p-cf11cdde.entry.js → p-8f062608.entry.js} +1 -1
- package/dist/bromcom-ui/p-9cbf3f1d.entry.js +16 -0
- package/dist/bromcom-ui/{p-aeb4be41.js → p-a2df6c19.js} +1 -1
- package/dist/bromcom-ui/{p-8b8dd8fe.entry.js → p-a2e0a182.entry.js} +1 -1
- package/dist/bromcom-ui/{p-2b42d77e.entry.js → p-a6b4a46d.entry.js} +1 -1
- package/dist/bromcom-ui/p-a6b696de.js +5 -0
- package/dist/bromcom-ui/p-a947136c.entry.js +5 -0
- package/dist/bromcom-ui/{p-fafa70ac.entry.js → p-ac720743.entry.js} +1 -1
- package/dist/bromcom-ui/{p-10f511ff.entry.js → p-b3af25ef.entry.js} +1 -1
- package/dist/bromcom-ui/{p-77ef609e.entry.js → p-b46e368e.entry.js} +1 -1
- package/dist/bromcom-ui/{p-25bbe3e6.entry.js → p-bae91cbf.entry.js} +1 -1
- package/dist/bromcom-ui/{p-15402dac.entry.js → p-c10b25e2.entry.js} +1 -1
- package/dist/bromcom-ui/{p-59f7fa84.entry.js → p-c4bf7f7e.entry.js} +1 -1
- package/dist/bromcom-ui/p-c4d524b5.entry.js +5 -0
- package/dist/bromcom-ui/{p-9b59c689.entry.js → p-c5bb29d0.entry.js} +1 -1
- package/dist/bromcom-ui/{p-052005c9.js → p-c7ae8fa9.js} +1 -1
- package/dist/bromcom-ui/{p-5d670fd7.entry.js → p-cc70861b.entry.js} +1 -1
- package/dist/bromcom-ui/{p-e8eaa3bb.entry.js → p-d0e56f5f.entry.js} +1 -1
- package/dist/bromcom-ui/{p-a31644e3.entry.js → p-d49d3d72.entry.js} +1 -1
- package/dist/bromcom-ui/{p-a0d6d680.js → p-d65bc842.js} +1 -1
- package/dist/bromcom-ui/{p-d19d45ed.entry.js → p-dc2d5b2f.entry.js} +1 -1
- package/dist/bromcom-ui/p-dc73abe2.js +5 -0
- package/dist/bromcom-ui/{p-170cf07d.js → p-e037ee2b.js} +1 -1
- package/dist/bromcom-ui/p-e46fde49.js +5 -0
- package/dist/bromcom-ui/{p-87192588.entry.js → p-e499306b.entry.js} +1 -1
- package/dist/bromcom-ui/p-ebd9132c.entry.js +5 -0
- package/dist/bromcom-ui/{p-01e63843.entry.js → p-f5a8e601.entry.js} +1 -1
- package/dist/bromcom-ui/{p-9253d439.entry.js → p-f66c4afa.entry.js} +1 -1
- package/dist/bromcom-ui/{p-a486613b.entry.js → p-fdd4cabe.entry.js} +1 -1
- package/dist/cjs/bcm-accordion_68.cjs.entry.js +47182 -0
- package/dist/cjs/bcm-attendance-actions-comment.cjs.entry.js +4 -4
- package/dist/cjs/bcm-attendance-actions-dropdown.cjs.entry.js +4 -4
- package/dist/cjs/bcm-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/bcm-caption.cjs.entry.js +5 -5
- package/dist/cjs/bcm-card.cjs.entry.js +2 -2
- package/dist/cjs/bcm-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/bcm-datetime-picker.cjs.entry.js +3 -3
- package/dist/cjs/bcm-default.cjs.entry.js +2 -2
- package/dist/cjs/bcm-form-2.cjs.entry.js +2 -2
- package/dist/cjs/bcm-input-2.cjs.entry.js +5 -5
- package/dist/cjs/bcm-input-custom.cjs.entry.js +2 -2
- package/dist/cjs/bcm-input-dropdown.cjs.entry.js +5 -5
- package/dist/cjs/bcm-modal-2-footer.cjs.entry.js +4 -4
- package/dist/cjs/bcm-modal-2-header.cjs.entry.js +4 -4
- package/dist/cjs/bcm-modal-2.cjs.entry.js +4 -4
- package/dist/cjs/bcm-number-input.cjs.entry.js +6 -6
- package/dist/cjs/bcm-skeleton.cjs.entry.js +4 -4
- package/dist/cjs/bcm-table.cjs.entry.js +4 -4
- package/dist/cjs/bcm-tag.cjs.entry.js +3 -3
- package/dist/cjs/bcm-time-picker.cjs.entry.js +2 -2
- package/dist/cjs/bcm-toast.cjs.entry.js +18 -18
- package/dist/cjs/bromcom-ui.cjs.js +3 -3
- package/dist/cjs/{caption-template-85a18b6d.js → caption-template-f8a78504.js} +9 -9
- package/dist/cjs/{generate-bff3fa38.js → generate-e3956756.js} +14 -14
- package/dist/cjs/{global-825d9cd4.js → global-642cd031.js} +1 -1
- package/dist/cjs/{input.style-b5676e6a.js → input.style-bee84fb0.js} +1 -1
- package/dist/cjs/{label-template-e83447b5.js → label-template-fc301e0c.js} +4 -4
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/{number-helper-9bc46d37.js → number-helper-43361f4e.js} +1 -1
- package/dist/cjs/old-bcm-popover-box.cjs.entry.js +3 -3
- package/dist/cjs/old-bcm-popover.cjs.entry.js +2 -2
- package/dist/cjs/{package-dda6f822.js → package-033055fc.js} +1 -1
- package/dist/cjs/{validators-c0eef77a.js → validators-9a6ae72d.js} +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/atoms/avatar/avatar.js +1 -1
- package/dist/collection/components/atoms/avatar/avatar.style.js +4 -4
- package/dist/collection/components/atoms/badge/badge.style.js +8 -8
- package/dist/collection/components/atoms/button/button.css +90 -92
- package/dist/collection/components/atoms/button/button.js +45 -46
- package/dist/collection/components/atoms/chip/chip.css +27 -29
- package/dist/collection/components/atoms/chip/chip.js +10 -11
- package/dist/collection/components/atoms/divider/divider.css +4 -4
- package/dist/collection/components/atoms/link/link.css +10 -11
- package/dist/collection/components/molecules/accordion/accordion.css +23 -0
- package/dist/collection/components/molecules/accordion/accordion.js +1 -1
- package/dist/collection/components/molecules/alert/alert.css +28 -24
- package/dist/collection/components/molecules/alert/alert.js +26 -36
- package/dist/collection/components/molecules/button-group/button-group.css +15 -23
- package/dist/collection/components/molecules/checkbox/checkbox.css +15 -15
- package/dist/collection/components/molecules/checkbox/checkbox.js +8 -9
- package/dist/collection/components/molecules/color-input/color-input.js +1 -1
- package/dist/collection/components/molecules/empty/empty.js +1 -1
- package/dist/collection/components/molecules/error-layout/error-layout.css +13 -15
- package/dist/collection/components/molecules/error-layout/error-layout.js +1 -1
- package/dist/collection/components/molecules/expansion-panel/expansion-panel.css +25 -22
- package/dist/collection/components/molecules/expansion-panel/expansion-panel.js +1 -1
- package/dist/collection/components/molecules/input/input.css +21 -13
- package/dist/collection/components/molecules/input/input.style.js +1 -1
- package/dist/collection/components/molecules/menu/menu.css +29 -23
- package/dist/collection/components/molecules/modal/modal.css +21 -27
- package/dist/collection/components/molecules/radio/radio.js +10 -10
- package/dist/collection/components/molecules/range/range.css +5 -8
- package/dist/collection/components/molecules/search/search.css +21 -13
- package/dist/collection/components/molecules/stepper/stepper.css +6 -5
- package/dist/collection/components/molecules/switch/switch.css +22 -21
- package/dist/collection/components/molecules/tab-group/tab-item-header.js +6 -6
- package/dist/collection/components/molecules/textarea/textarea.css +21 -13
- package/dist/collection/components/organism/list/list.css +44 -44
- package/dist/collection/components/other/shortcut/shortcut.js +4 -4
- package/dist/collection/components/other/toast/toast.js +16 -16
- package/dist/collection/components/third-parts/colorful/colorful.css +21 -13
- package/dist/collection/components/third-parts/rc-picker/rc-picker.css +13 -9
- package/dist/collection/global/components/_checkbox.css +15 -15
- package/dist/collection/helper/popover-helper.js +5 -5
- package/dist/collection/helper/tooltip-helper.js +6 -6
- package/dist/collection/templates/caption-template.js +9 -9
- package/dist/collection/templates/input-template.js +1 -1
- package/dist/collection/templates/label-template.js +4 -4
- package/dist/collection/templates/step-template.js +4 -4
- package/dist/components/Overflow.js +141 -83
- package/dist/components/avatar.js +6 -6
- package/dist/components/badge.js +9 -9
- package/dist/components/bcm-accordion.js +2 -2
- package/dist/components/bcm-alert.js +28 -41
- package/dist/components/bcm-attendance-actions-comment.js +1 -1
- package/dist/components/bcm-attendance-actions-dropdown.js +1 -1
- package/dist/components/bcm-attendance-actions.js +1 -1
- package/dist/components/bcm-button-group.js +1 -1
- package/dist/components/bcm-checkbox-group.js +1 -1
- package/dist/components/bcm-color-input.js +1 -1
- package/dist/components/bcm-error-layout.js +2 -2
- package/dist/components/bcm-expansion-panel.js +2 -2
- package/dist/components/bcm-input-2.js +1 -1
- package/dist/components/bcm-input-dropdown.js +1 -1
- package/dist/components/bcm-modal.js +1 -1
- package/dist/components/bcm-popover.js +5 -5
- package/dist/components/bcm-range.js +1 -1
- package/dist/components/bcm-shortcut.js +4 -4
- package/dist/components/bcm-stepper.js +6 -6
- package/dist/components/bcm-switch.js +1 -1
- package/dist/components/bcm-tab-item-header.js +6 -6
- package/dist/components/bcm-toast.js +16 -16
- package/dist/components/button.js +47 -48
- package/dist/components/caption-template.js +9 -9
- package/dist/components/checkbox-lite.js +1 -1
- package/dist/components/checkbox.js +9 -10
- package/dist/components/chip.js +11 -12
- package/dist/components/colorful.js +1 -1
- package/dist/components/divider.js +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/generate.js +1 -1
- package/dist/components/index4.js +2549 -171
- package/dist/components/index5.js +171 -2549
- package/dist/components/input-template.js +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/input.style.js +2 -2
- package/dist/components/label.js +4 -4
- package/dist/components/link.js +1 -1
- package/dist/components/list.js +2 -2
- package/dist/components/menu.js +1 -1
- package/dist/components/radio.js +10 -10
- package/dist/components/rc-picker.js +2651 -2404
- package/dist/components/search.js +2 -2
- package/dist/components/skeleton.js +1 -1
- package/dist/components/step.js +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/tooltip-helper.js +6 -6
- package/dist/esm/{_commonjsHelpers-82aa9212.js → _commonjsHelpers-7002e5de.js} +1 -1
- package/dist/esm/bcm-accordion_68.entry.js +47111 -0
- package/dist/esm/bcm-attendance-actions-comment.entry.js +11 -11
- package/dist/esm/bcm-attendance-actions-dropdown.entry.js +12 -12
- package/dist/esm/bcm-autocomplete.entry.js +3 -3
- package/dist/esm/bcm-box.entry.js +1 -1
- package/dist/esm/bcm-breadcrumb.entry.js +6 -6
- package/dist/esm/bcm-caption.entry.js +13 -13
- package/dist/esm/bcm-card.entry.js +10 -10
- package/dist/esm/bcm-colorpicker.entry.js +5 -5
- package/dist/esm/bcm-content.entry.js +1 -1
- package/dist/esm/bcm-date-picker.entry.js +8 -8
- package/dist/esm/bcm-datetime-picker.entry.js +12 -12
- package/dist/esm/bcm-default.entry.js +5 -5
- package/dist/esm/bcm-form-2.entry.js +7 -7
- package/dist/esm/bcm-form-group.entry.js +1 -1
- package/dist/esm/bcm-input-2.entry.js +10 -10
- package/dist/esm/bcm-input-custom.entry.js +6 -6
- package/dist/esm/bcm-input-dropdown.entry.js +13 -13
- package/dist/esm/bcm-message.entry.js +3 -3
- package/dist/esm/bcm-modal-2-footer.entry.js +12 -12
- package/dist/esm/bcm-modal-2-header.entry.js +11 -11
- package/dist/esm/bcm-modal-2.entry.js +12 -12
- package/dist/esm/bcm-notification.entry.js +3 -3
- package/dist/esm/bcm-number-input.entry.js +14 -14
- package/dist/esm/bcm-overlay_2.entry.js +4 -4
- package/dist/esm/bcm-react-number.entry.js +3 -3
- package/dist/esm/bcm-result.entry.js +3 -3
- package/dist/esm/bcm-select-group.entry.js +3 -3
- package/dist/esm/bcm-select-option.entry.js +3 -3
- package/dist/esm/bcm-skeleton.entry.js +11 -11
- package/dist/esm/bcm-tab-pane.entry.js +3 -3
- package/dist/esm/bcm-table.entry.js +12 -12
- package/dist/esm/bcm-tabs-content.entry.js +4 -4
- package/dist/esm/bcm-tag.entry.js +8 -8
- package/dist/esm/bcm-time-picker.entry.js +8 -8
- package/dist/esm/bcm-timeline-item.entry.js +3 -3
- package/dist/esm/bcm-timeline.entry.js +3 -3
- package/dist/esm/bcm-toast.entry.js +24 -24
- package/dist/esm/bcm-treeview-group.entry.js +1 -1
- package/dist/esm/bromcom-ui.js +5 -5
- package/dist/esm/{caption-template-d7953d13.js → caption-template-16dd9444.js} +11 -11
- package/dist/esm/{color-helper-74614f24.js → color-helper-ba15b0d8.js} +2 -2
- package/dist/esm/{colors-dd598eea.js → colors-ed4e7579.js} +1 -1
- package/dist/esm/{element-dragger-89bb52fd.js → element-dragger-b75266e6.js} +1 -1
- package/dist/esm/{generate-1281254a.js → generate-d2495751.js} +15 -15
- package/dist/esm/{global-c031697c.js → global-88abdcdc.js} +2 -2
- package/dist/esm/{index-f549811f.js → index-00c8a8f7.js} +1 -1
- package/dist/esm/{index-036974d7.js → index-0d3a56ec.js} +1 -1
- package/dist/esm/{index-0615c2b8.js → index-4614b7f0.js} +1 -1
- package/dist/esm/{input.style-e855c0f3.js → input.style-0ddc0073.js} +1 -1
- package/dist/esm/{is-load-decorator-8277e3b8.js → is-load-decorator-b8ca22f2.js} +1 -1
- package/dist/esm/{label-template-a26f76c0.js → label-template-4c3797f4.js} +6 -6
- package/dist/esm/loader.js +5 -5
- package/dist/esm/{number-helper-778c8f87.js → number-helper-a1e5c9e5.js} +1 -1
- package/dist/esm/old-bcm-popover-box.entry.js +11 -11
- package/dist/esm/old-bcm-popover.entry.js +6 -6
- package/dist/esm/{package-08ddc3fa.js → package-7549581c.js} +1 -1
- package/dist/esm/{popover-placement-d12fec40.js → popover-placement-2bf3a181.js} +1 -1
- package/dist/esm/{slot-template-2a19b2db.js → slot-template-e0202c5a.js} +2 -2
- package/dist/esm/{string-helper-3592bdc2.js → string-helper-69203215.js} +1 -1
- package/dist/esm/{utils-57652744.js → utils-7727d09e.js} +1 -1
- package/dist/esm/{validators-0c6e8dea.js → validators-57df25a7.js} +1 -1
- package/dist/types/components/atoms/avatar/avatar.style.d.ts +21 -21
- package/dist/types/components/molecules/alert/alert.d.ts +1 -3
- package/dist/types/components.d.ts +0 -2
- package/package.json +1 -1
- package/dist/bromcom-ui/p-04594f76.entry.js +0 -5
- package/dist/bromcom-ui/p-0e110a9f.entry.js +0 -5
- package/dist/bromcom-ui/p-0e5f1168.entry.js +0 -5
- package/dist/bromcom-ui/p-1345d51b.entry.js +0 -5
- package/dist/bromcom-ui/p-1baed29d.entry.js +0 -5
- package/dist/bromcom-ui/p-1e61a44c.entry.js +0 -5
- package/dist/bromcom-ui/p-1f93fd33.entry.js +0 -5
- package/dist/bromcom-ui/p-228c74e9.entry.js +0 -5
- package/dist/bromcom-ui/p-23759244.entry.js +0 -5
- package/dist/bromcom-ui/p-270e1b24.entry.js +0 -5
- package/dist/bromcom-ui/p-27596881.entry.js +0 -5
- package/dist/bromcom-ui/p-29791e4a.entry.js +0 -5
- package/dist/bromcom-ui/p-2bd0545e.js +0 -5
- package/dist/bromcom-ui/p-2cd6cdee.js +0 -5
- package/dist/bromcom-ui/p-3179ce74.entry.js +0 -7
- package/dist/bromcom-ui/p-33166492.entry.js +0 -5
- package/dist/bromcom-ui/p-376a20ed.js +0 -5
- package/dist/bromcom-ui/p-3da7b6c0.entry.js +0 -5
- package/dist/bromcom-ui/p-41276d76.entry.js +0 -5
- package/dist/bromcom-ui/p-412abc6d.entry.js +0 -5
- package/dist/bromcom-ui/p-4393b33e.entry.js +0 -5
- package/dist/bromcom-ui/p-46db5206.js +0 -5
- package/dist/bromcom-ui/p-4834bc26.js +0 -5
- package/dist/bromcom-ui/p-4856568f.entry.js +0 -5
- package/dist/bromcom-ui/p-534f958a.entry.js +0 -5
- package/dist/bromcom-ui/p-65da044b.js +0 -5
- package/dist/bromcom-ui/p-6687afd7.entry.js +0 -5
- package/dist/bromcom-ui/p-6ceb315f.entry.js +0 -5
- package/dist/bromcom-ui/p-74e6d2b6.js +0 -5
- package/dist/bromcom-ui/p-7c45705d.entry.js +0 -5
- package/dist/bromcom-ui/p-7dbfff1b.entry.js +0 -5
- package/dist/bromcom-ui/p-822dda00.js +0 -5
- package/dist/bromcom-ui/p-881853bd.entry.js +0 -5
- package/dist/bromcom-ui/p-8b6d3a37.js +0 -5
- package/dist/bromcom-ui/p-8cd80ac4.entry.js +0 -5
- package/dist/bromcom-ui/p-8f32198d.js +0 -14
- package/dist/bromcom-ui/p-904b0c28.entry.js +0 -5
- package/dist/bromcom-ui/p-926b314d.entry.js +0 -5
- package/dist/bromcom-ui/p-95a797b3.entry.js +0 -5
- package/dist/bromcom-ui/p-9ebe6ef9.entry.js +0 -5
- package/dist/bromcom-ui/p-a0f44b56.entry.js +0 -5
- package/dist/bromcom-ui/p-a2065e9e.entry.js +0 -5
- package/dist/bromcom-ui/p-a2e5bb35.entry.js +0 -5
- package/dist/bromcom-ui/p-a352f45e.entry.js +0 -5
- package/dist/bromcom-ui/p-ae57f046.entry.js +0 -5
- package/dist/bromcom-ui/p-b1084320.entry.js +0 -5
- package/dist/bromcom-ui/p-b301fa40.entry.js +0 -5
- package/dist/bromcom-ui/p-b43e975b.entry.js +0 -5
- package/dist/bromcom-ui/p-b9a88f16.entry.js +0 -5
- package/dist/bromcom-ui/p-bbcb683f.entry.js +0 -5
- package/dist/bromcom-ui/p-bd50c28f.entry.js +0 -5
- package/dist/bromcom-ui/p-c1a992e7.entry.js +0 -5
- package/dist/bromcom-ui/p-c39e73dc.entry.js +0 -5
- package/dist/bromcom-ui/p-c503526a.entry.js +0 -5
- package/dist/bromcom-ui/p-c63f5261.entry.js +0 -5
- package/dist/bromcom-ui/p-d2bd0293.entry.js +0 -5
- package/dist/bromcom-ui/p-e0ab7b38.js +0 -11
- package/dist/bromcom-ui/p-e1b6f98e.entry.js +0 -5
- package/dist/bromcom-ui/p-e36c7523.entry.js +0 -5
- package/dist/bromcom-ui/p-e5532875.entry.js +0 -5
- package/dist/bromcom-ui/p-e94d2f48.js +0 -5
- package/dist/bromcom-ui/p-ead59725.entry.js +0 -5
- package/dist/bromcom-ui/p-eca0acda.js +0 -5
- package/dist/bromcom-ui/p-ede7ca76.entry.js +0 -5
- package/dist/bromcom-ui/p-eef8f7c7.entry.js +0 -5
- package/dist/bromcom-ui/p-effc088c.entry.js +0 -5
- package/dist/bromcom-ui/p-fc787048.entry.js +0 -5
- package/dist/bromcom-ui/p-ff2b4565.entry.js +0 -5
- package/dist/cjs/Overflow-5a73947b.js +0 -2233
- package/dist/cjs/bcm-accordion.cjs.entry.js +0 -74
- package/dist/cjs/bcm-alert.cjs.entry.js +0 -99
- package/dist/cjs/bcm-attendance-actions.cjs.entry.js +0 -330
- package/dist/cjs/bcm-attendance.cjs.entry.js +0 -35
- package/dist/cjs/bcm-avatar_2.cjs.entry.js +0 -210
- package/dist/cjs/bcm-button-group.cjs.entry.js +0 -92
- package/dist/cjs/bcm-button.cjs.entry.js +0 -372
- package/dist/cjs/bcm-checkbox-group.cjs.entry.js +0 -415
- package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +0 -2529
- package/dist/cjs/bcm-checkbox_2.cjs.entry.js +0 -194
- package/dist/cjs/bcm-chip-group.cjs.entry.js +0 -128
- package/dist/cjs/bcm-chip.cjs.entry.js +0 -91
- package/dist/cjs/bcm-collapse-group.cjs.entry.js +0 -43
- package/dist/cjs/bcm-collapse.cjs.entry.js +0 -62
- package/dist/cjs/bcm-color-input.cjs.entry.js +0 -77
- package/dist/cjs/bcm-colorful_2.cjs.entry.js +0 -251
- package/dist/cjs/bcm-date_6.cjs.entry.js +0 -15363
- package/dist/cjs/bcm-drawer.cjs.entry.js +0 -96
- package/dist/cjs/bcm-dropdown.cjs.entry.js +0 -119
- package/dist/cjs/bcm-error-layout.cjs.entry.js +0 -64
- package/dist/cjs/bcm-expansion-panel.cjs.entry.js +0 -116
- package/dist/cjs/bcm-input_2.cjs.entry.js +0 -550
- package/dist/cjs/bcm-item.cjs.entry.js +0 -72
- package/dist/cjs/bcm-items.cjs.entry.js +0 -49
- package/dist/cjs/bcm-link.cjs.entry.js +0 -51
- package/dist/cjs/bcm-list_3.cjs.entry.js +0 -1977
- package/dist/cjs/bcm-menu.cjs.entry.js +0 -151
- package/dist/cjs/bcm-modal.cjs.entry.js +0 -157
- package/dist/cjs/bcm-old-input.cjs.entry.js +0 -397
- package/dist/cjs/bcm-old-tag_2.cjs.entry.js +0 -145
- package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +0 -115
- package/dist/cjs/bcm-popconfirm.cjs.entry.js +0 -101
- package/dist/cjs/bcm-popover.cjs.entry.js +0 -230
- package/dist/cjs/bcm-progress.cjs.entry.js +0 -162
- package/dist/cjs/bcm-radio-group.cjs.entry.js +0 -161
- package/dist/cjs/bcm-radio.cjs.entry.js +0 -65
- package/dist/cjs/bcm-range.cjs.entry.js +0 -183
- package/dist/cjs/bcm-select.cjs.entry.js +0 -1195
- package/dist/cjs/bcm-shortcut.cjs.entry.js +0 -65
- package/dist/cjs/bcm-step.cjs.entry.js +0 -89
- package/dist/cjs/bcm-stepper.cjs.entry.js +0 -240
- package/dist/cjs/bcm-switch.cjs.entry.js +0 -151
- package/dist/cjs/bcm-tab-group.cjs.entry.js +0 -210
- package/dist/cjs/bcm-tab-item-header.cjs.entry.js +0 -60
- package/dist/cjs/bcm-tab-item.cjs.entry.js +0 -91
- package/dist/cjs/bcm-tab.cjs.entry.js +0 -72
- package/dist/cjs/bcm-tabs.cjs.entry.js +0 -370
- package/dist/cjs/bcm-text.cjs.entry.js +0 -49
- package/dist/cjs/index-d321de96.js +0 -193
- package/dist/cjs/input-template-d05a507f.js +0 -92
- package/dist/cjs/json-parse-decarator-b9186302.js +0 -40
- package/dist/cjs/lodash-917168d7.js +0 -17199
- package/dist/cjs/stepper-states-a565a45f.js +0 -85
- package/dist/cjs/tooltip-helper-2e1f4fda.js +0 -158
- package/dist/esm/Overflow-40c63001.js +0 -2217
- package/dist/esm/bcm-accordion.entry.js +0 -70
- package/dist/esm/bcm-alert.entry.js +0 -95
- package/dist/esm/bcm-attendance-actions.entry.js +0 -326
- package/dist/esm/bcm-attendance.entry.js +0 -31
- package/dist/esm/bcm-avatar_2.entry.js +0 -205
- package/dist/esm/bcm-button-group.entry.js +0 -88
- package/dist/esm/bcm-button.entry.js +0 -368
- package/dist/esm/bcm-checkbox-group.entry.js +0 -411
- package/dist/esm/bcm-checkbox-lite_9.entry.js +0 -2517
- package/dist/esm/bcm-checkbox_2.entry.js +0 -189
- package/dist/esm/bcm-chip-group.entry.js +0 -124
- package/dist/esm/bcm-chip.entry.js +0 -87
- package/dist/esm/bcm-collapse-group.entry.js +0 -39
- package/dist/esm/bcm-collapse.entry.js +0 -58
- package/dist/esm/bcm-color-input.entry.js +0 -73
- package/dist/esm/bcm-colorful_2.entry.js +0 -246
- package/dist/esm/bcm-date_6.entry.js +0 -15354
- package/dist/esm/bcm-drawer.entry.js +0 -92
- package/dist/esm/bcm-dropdown.entry.js +0 -115
- package/dist/esm/bcm-error-layout.entry.js +0 -60
- package/dist/esm/bcm-expansion-panel.entry.js +0 -112
- package/dist/esm/bcm-input_2.entry.js +0 -545
- package/dist/esm/bcm-item.entry.js +0 -68
- package/dist/esm/bcm-items.entry.js +0 -45
- package/dist/esm/bcm-link.entry.js +0 -47
- package/dist/esm/bcm-list_3.entry.js +0 -1971
- package/dist/esm/bcm-menu.entry.js +0 -147
- package/dist/esm/bcm-modal.entry.js +0 -153
- package/dist/esm/bcm-old-input.entry.js +0 -393
- package/dist/esm/bcm-old-tag_2.entry.js +0 -140
- package/dist/esm/bcm-popconfirm-box.entry.js +0 -111
- package/dist/esm/bcm-popconfirm.entry.js +0 -97
- package/dist/esm/bcm-popover.entry.js +0 -226
- package/dist/esm/bcm-progress.entry.js +0 -158
- package/dist/esm/bcm-radio-group.entry.js +0 -157
- package/dist/esm/bcm-radio.entry.js +0 -61
- package/dist/esm/bcm-range.entry.js +0 -179
- package/dist/esm/bcm-select.entry.js +0 -1191
- package/dist/esm/bcm-shortcut.entry.js +0 -61
- package/dist/esm/bcm-step.entry.js +0 -85
- package/dist/esm/bcm-stepper.entry.js +0 -236
- package/dist/esm/bcm-switch.entry.js +0 -147
- package/dist/esm/bcm-tab-group.entry.js +0 -206
- package/dist/esm/bcm-tab-item-header.entry.js +0 -56
- package/dist/esm/bcm-tab-item.entry.js +0 -87
- package/dist/esm/bcm-tab.entry.js +0 -68
- package/dist/esm/bcm-tabs.entry.js +0 -366
- package/dist/esm/bcm-text.entry.js +0 -45
- package/dist/esm/index-7e71bbc8.js +0 -191
- package/dist/esm/input-template-b4045b25.js +0 -90
- package/dist/esm/json-parse-decarator-7d436ec7.js +0 -38
- package/dist/esm/lodash-4197be99.js +0 -17197
- package/dist/esm/stepper-states-325c754b.js +0 -83
- package/dist/esm/tooltip-helper-9c64ad15.js +0 -156
|
@@ -1,1977 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built with Stencil
|
|
3
|
-
* Copyright (c) Bromcom.
|
|
4
|
-
*/
|
|
5
|
-
'use strict';
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
8
|
-
|
|
9
|
-
const index$1 = require('./index-c591ecec.js');
|
|
10
|
-
const isLoadDecorator = require('./is-load-decorator-15036f37.js');
|
|
11
|
-
const jsonParseDecarator = require('./json-parse-decarator-b9186302.js');
|
|
12
|
-
require('./color-helper-dc98a2ca.js');
|
|
13
|
-
require('./datetime-helper-eaf4fadb.js');
|
|
14
|
-
const generate = require('./generate-bff3fa38.js');
|
|
15
|
-
const numberHelper = require('./number-helper-9bc46d37.js');
|
|
16
|
-
const stringHelper = require('./string-helper-9cdfb273.js');
|
|
17
|
-
const validators = require('./validators-c0eef77a.js');
|
|
18
|
-
require('./element-dragger-a8562f82.js');
|
|
19
|
-
const popoverPlacement = require('./popover-placement-02e6101b.js');
|
|
20
|
-
const utils = require('./utils-fc077139.js');
|
|
21
|
-
const bcm = require('./bcm-1d1fcf21.js');
|
|
22
|
-
const captionTemplate = require('./caption-template-85a18b6d.js');
|
|
23
|
-
const index = require('./index-95ae50d0.js');
|
|
24
|
-
require('./types-cc4adee7.js');
|
|
25
|
-
require('./types-7523fd99.js');
|
|
26
|
-
const index$2 = require('./index-d321de96.js');
|
|
27
|
-
const Overflow = require('./Overflow-5a73947b.js');
|
|
28
|
-
const index$3 = require('./index-e05a7c6f.js');
|
|
29
|
-
const inputTemplate = require('./input-template-d05a507f.js');
|
|
30
|
-
require('./colors-56282b00.js');
|
|
31
|
-
require('./colors-250d0982.js');
|
|
32
|
-
require('./_commonjsHelpers-ed84c3ca.js');
|
|
33
|
-
require('./package-dda6f822.js');
|
|
34
|
-
|
|
35
|
-
const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
|
|
36
|
-
// if ( indeterminate ) {
|
|
37
|
-
// checked = indeterminate == 'determinate' ? true : false
|
|
38
|
-
// }
|
|
39
|
-
const hostClasses = index.classnames('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
|
|
40
|
-
// 'size-2': size === Bcm.Size.small || size === Bcm.Size.medium,
|
|
41
|
-
// 'size-3': optionType === 'button' && size === Bcm.Size.large,
|
|
42
|
-
'error': captionType == bcm.Bcm$1.Status.error,
|
|
43
|
-
hidden,
|
|
44
|
-
checked,
|
|
45
|
-
disabled,
|
|
46
|
-
required,
|
|
47
|
-
readonly,
|
|
48
|
-
});
|
|
49
|
-
const bcmCheckboxIconClass = index.classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
|
|
50
|
-
'bcm-checkbox__label-icon-checked': checked,
|
|
51
|
-
});
|
|
52
|
-
const bcmCheckboxLabelClass = index.classnames('bcm-checkbox__label');
|
|
53
|
-
return (index$1.h("div", { class: hostClasses },
|
|
54
|
-
index$1.h("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly }),
|
|
55
|
-
index$1.h("label", { class: bcmCheckboxLabelClass, htmlFor: _id },
|
|
56
|
-
index$1.h("span", { class: bcmCheckboxIconClass },
|
|
57
|
-
index$1.h("bcm-icon", { icon: "far fa-check" })))));
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
|
|
61
|
-
total = total || 0;
|
|
62
|
-
variableText = variableText ? utils.pluralize(variableText, total) : 'items';
|
|
63
|
-
return (index$1.h("footer", { class: "bcm-info-footer" },
|
|
64
|
-
index$1.h("bcm-text", { scale: "size-1", color: "grey-8" },
|
|
65
|
-
(multiple && selected > 0) && ` ( ${selected} selected ) `,
|
|
66
|
-
` Total ${total} `,
|
|
67
|
-
found != null && ` / ${found} `,
|
|
68
|
-
` ${variableText} found. `)));
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
|
|
72
|
-
const isHaveChildren = item.items && item.items.length > 0;
|
|
73
|
-
var text = stringHelper.StringHelper.htmlEntities(item.text);
|
|
74
|
-
let intersection = [];
|
|
75
|
-
if (highlight && stringHelper.StringHelper.slugify(text).includes(stringHelper.StringHelper.slugify(highlight))) {
|
|
76
|
-
if (!searchIsOnlyChilds || (searchIsOnlyChilds && (!isHaveChildren || (!treeview && item.type != "group")))) {
|
|
77
|
-
text = stringHelper.StringHelper.highlight(text, highlight);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
if (item.type != 'group' && item.template) {
|
|
81
|
-
const match = item.template
|
|
82
|
-
.replace(/\s/g, '')
|
|
83
|
-
.match(/\{{[^}}]+\}/g)
|
|
84
|
-
.map(x => x.replace(/[{}]/g, ''));
|
|
85
|
-
const keys = Object.keys(item.itemObject);
|
|
86
|
-
intersection = match.filter(x => keys.includes(x));
|
|
87
|
-
}
|
|
88
|
-
text = item.isHtmlContent ? item.isHtmlContent : item.template && intersection.length > 0 ? stringHelper.StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
|
|
89
|
-
const unClickable = !treeview && item.type == "group" && !item.clickable;
|
|
90
|
-
const disabled = item.disabled;
|
|
91
|
-
const readonly = item.readonly;
|
|
92
|
-
const itemClick = (event) => {
|
|
93
|
-
let path = event.path || event.composedPath();
|
|
94
|
-
if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
// if (readonly) {
|
|
98
|
-
// collapseClick();
|
|
99
|
-
// }
|
|
100
|
-
!unClickable && !disabled && !readonly && (checkboxes ? checkedItem(item.id) : selectedItem(item.id));
|
|
101
|
-
};
|
|
102
|
-
const collapseClick = () => {
|
|
103
|
-
// if (disabled) {
|
|
104
|
-
// return;
|
|
105
|
-
// }
|
|
106
|
-
item.open = item.isSearching;
|
|
107
|
-
openGroup(item.id);
|
|
108
|
-
};
|
|
109
|
-
return (index$1.h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: index.classnames('bcm-list__item',
|
|
110
|
-
// size === 'large' ? 'size-3' : 'size-2',
|
|
111
|
-
'bcm-list__item-' + size, {
|
|
112
|
-
'bcm-list__item--group': !treeview && item.type == 'group',
|
|
113
|
-
'bcm-list__item--readonly': readonly,
|
|
114
|
-
}) },
|
|
115
|
-
index$1.h("div", { class: index.classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled, readonly }) },
|
|
116
|
-
treeview && (index$1.h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && index$1.h("bcm-icon", { icon: index.classnames('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
|
|
117
|
-
index$1.h("div", { class: index.classnames('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) },
|
|
118
|
-
checkboxes && (treeview || (!treeview && item.type != 'group')) && (index$1.h("div", { class: "bcm-list__item-content-text-checkbox" },
|
|
119
|
-
index$1.h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))),
|
|
120
|
-
index$1.h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: text })))),
|
|
121
|
-
(treeview || !treeview && item.type == "group") && isHaveChildren && (index$1.h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
|
|
122
|
-
item.items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, tempId, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, }) => {
|
|
126
|
-
const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
|
|
127
|
-
const setScrollHeight = () => {
|
|
128
|
-
const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
|
|
129
|
-
const itemCount = searchFound == null ? (treeview ? items.length : totalData) : searchFound;
|
|
130
|
-
const scrollHeight = itemCount * itemHeight || 0;
|
|
131
|
-
return Object.assign(Object.assign({ 'min-height': `${scrollHeight}px` }, (type === 'select' && { 'overscroll-behavior': 'none' })), { 'height': '100%', 'display': 'flex', 'flex-direction': 'column' });
|
|
132
|
-
};
|
|
133
|
-
return (index$1.h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) },
|
|
134
|
-
data && searchable && (index$1.h("section", { class: "bcm-list__container-search" },
|
|
135
|
-
index$1.h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))),
|
|
136
|
-
index$1.h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: Object.assign({}, (type === 'select' && { 'overscroll-behavior': 'none' })) },
|
|
137
|
-
index$1.h("div", { style: setScrollHeight() },
|
|
138
|
-
checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (index$1.h("section", { class: "bcm-list__container-select-all" },
|
|
139
|
-
index$1.h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
|
|
140
|
-
items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
|
|
141
|
-
(!items || items.length === 0) && searchFound != 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
|
|
142
|
-
index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
|
|
143
|
-
index$1.h("span", { innerHTML: emptyText || 'No data' })))),
|
|
144
|
-
searchFound == 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
|
|
145
|
-
index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
|
|
146
|
-
index$1.h("span", { innerHTML: emptyText || 'No Data Found' })))))),
|
|
147
|
-
infoFooter && data && data.length > 0 && (index$1.h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
const { state: state$1 } = index$2.createStore({
|
|
151
|
-
value: new Map(),
|
|
152
|
-
});
|
|
153
|
-
const setValue$1 = val => {
|
|
154
|
-
const { id, dataSource, options } = val;
|
|
155
|
-
const { type, treeview, checkboxes, searchable, value, name, label, size, disabled, readonly, highlight, required, hidden, fullWidth, height, maxHeight, minHeight, width, infoFooter, variableText, template, allOpen, keyControl, checkAll, linkedComponent, placeholder, searchPlaceholder, searchIsOnlyChilds, clearable, caption, noCaption, captionType, captionError, placement, } = options;
|
|
156
|
-
const itemOptions = { size, checkboxes, template, allOpen, highlight, treeview };
|
|
157
|
-
const data = {
|
|
158
|
-
id: generate.snq(() => id, generate.Generate.UID),
|
|
159
|
-
dataSource: dataSource && dataSource.length > 0 && recursive$1(dataSource, itemOptions),
|
|
160
|
-
options: {
|
|
161
|
-
type,
|
|
162
|
-
treeview,
|
|
163
|
-
checkboxes,
|
|
164
|
-
searchable,
|
|
165
|
-
value,
|
|
166
|
-
name,
|
|
167
|
-
label,
|
|
168
|
-
size,
|
|
169
|
-
disabled,
|
|
170
|
-
readonly,
|
|
171
|
-
highlight,
|
|
172
|
-
required,
|
|
173
|
-
hidden,
|
|
174
|
-
fullWidth,
|
|
175
|
-
height,
|
|
176
|
-
maxHeight,
|
|
177
|
-
minHeight,
|
|
178
|
-
width,
|
|
179
|
-
infoFooter,
|
|
180
|
-
variableText,
|
|
181
|
-
template,
|
|
182
|
-
allOpen,
|
|
183
|
-
keyControl,
|
|
184
|
-
checkAll,
|
|
185
|
-
linkedComponent,
|
|
186
|
-
placeholder,
|
|
187
|
-
searchPlaceholder,
|
|
188
|
-
searchIsOnlyChilds,
|
|
189
|
-
clearable,
|
|
190
|
-
caption,
|
|
191
|
-
noCaption,
|
|
192
|
-
captionType,
|
|
193
|
-
captionError,
|
|
194
|
-
placement,
|
|
195
|
-
},
|
|
196
|
-
totalItems: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 && calculateTotalItems(dataSource, options.treeview),
|
|
197
|
-
totalRoots: dataSource === null || dataSource === void 0 ? void 0 : dataSource.length,
|
|
198
|
-
};
|
|
199
|
-
state$1.value.set(data.id, data);
|
|
200
|
-
};
|
|
201
|
-
const recursive$1 = (data, options, parentId, parentIndex = "0.") => {
|
|
202
|
-
let recData = [];
|
|
203
|
-
if (data && data.length > 0) {
|
|
204
|
-
recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: generate.snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
|
|
205
|
-
? { items: generate.snq(() => recursive$1(item.items, options, item.id, `${parentIndex}${index}`), []) }
|
|
206
|
-
: { items: [] })), { ct: `${parentIndex}${index}` })));
|
|
207
|
-
}
|
|
208
|
-
return recData;
|
|
209
|
-
};
|
|
210
|
-
const removeValue$1 = _id => {
|
|
211
|
-
state$1.value.delete(_id);
|
|
212
|
-
};
|
|
213
|
-
const getValue$1 = id => generate.snq(() => state$1.value.get(id), {});
|
|
214
|
-
const calculateTotalItems = (dataSource, treeview) => {
|
|
215
|
-
let total = 0;
|
|
216
|
-
let selectableItems = 0;
|
|
217
|
-
dataSource.forEach(item => {
|
|
218
|
-
if (treeview || (!treeview && item.type != "group")) {
|
|
219
|
-
total += 1;
|
|
220
|
-
if (!item.disabled) {
|
|
221
|
-
selectableItems += 1;
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
if ((treeview || (!treeview && item.type == "group")) && item.items) {
|
|
225
|
-
const result = calculateTotalItems(item.items, treeview);
|
|
226
|
-
total += result.total;
|
|
227
|
-
selectableItems += result.selectableItems;
|
|
228
|
-
}
|
|
229
|
-
});
|
|
230
|
-
return { total, selectableItems };
|
|
231
|
-
};
|
|
232
|
-
const getData = id => {
|
|
233
|
-
let data = [];
|
|
234
|
-
const value = getValue$1(id);
|
|
235
|
-
if (value) {
|
|
236
|
-
const { dataSource } = value;
|
|
237
|
-
data = dataSource;
|
|
238
|
-
}
|
|
239
|
-
return data;
|
|
240
|
-
};
|
|
241
|
-
const getDataPagination$1 = (id, limit = 3, ids) => {
|
|
242
|
-
let data = [];
|
|
243
|
-
const value = getValue$1(id);
|
|
244
|
-
if (value) {
|
|
245
|
-
const { dataSource } = value;
|
|
246
|
-
data = !ids ? dataSource.slice(0, limit) : dataSource.filter(item => ids.indexOf(item.id) > -1).slice(0, limit);
|
|
247
|
-
}
|
|
248
|
-
return data;
|
|
249
|
-
};
|
|
250
|
-
const openGroup = (id, groupId, items, status) => {
|
|
251
|
-
let dataSource;
|
|
252
|
-
if (items) {
|
|
253
|
-
dataSource = items;
|
|
254
|
-
}
|
|
255
|
-
else {
|
|
256
|
-
const value = getValue$1(id);
|
|
257
|
-
dataSource = value.dataSource;
|
|
258
|
-
}
|
|
259
|
-
if (dataSource) {
|
|
260
|
-
dataSource.forEach(item => {
|
|
261
|
-
if (status != undefined) {
|
|
262
|
-
item.open = status;
|
|
263
|
-
}
|
|
264
|
-
else if (item.id == groupId) {
|
|
265
|
-
item.open = !item.open;
|
|
266
|
-
item.isSearching = item.open;
|
|
267
|
-
if (!item.open && item.items) {
|
|
268
|
-
openGroup(id, groupId, item.items, false);
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
else if (item.items) {
|
|
272
|
-
openGroup(id, groupId, item.items);
|
|
273
|
-
}
|
|
274
|
-
});
|
|
275
|
-
}
|
|
276
|
-
};
|
|
277
|
-
const removeOtherTags = (id, ids, items) => {
|
|
278
|
-
ids = Array.isArray(ids) ? ids : [ids];
|
|
279
|
-
let dataSource;
|
|
280
|
-
if (items) {
|
|
281
|
-
dataSource = items;
|
|
282
|
-
}
|
|
283
|
-
else {
|
|
284
|
-
const value = getValue$1(id);
|
|
285
|
-
dataSource = value.dataSource;
|
|
286
|
-
}
|
|
287
|
-
if (dataSource) {
|
|
288
|
-
ids.forEach(otherTagIds => {
|
|
289
|
-
dataSource.forEach(child => {
|
|
290
|
-
if (child.id == otherTagIds) {
|
|
291
|
-
child.checked = false;
|
|
292
|
-
child.itemObject.checked = false;
|
|
293
|
-
}
|
|
294
|
-
else if (child.items) {
|
|
295
|
-
onRemoveItems(id, otherTagIds, child.items);
|
|
296
|
-
}
|
|
297
|
-
});
|
|
298
|
-
});
|
|
299
|
-
}
|
|
300
|
-
};
|
|
301
|
-
const onRemoveItems = (id, itemId, items) => {
|
|
302
|
-
if (items) {
|
|
303
|
-
items.forEach(item => {
|
|
304
|
-
if (item.id == itemId) {
|
|
305
|
-
item.checked = false;
|
|
306
|
-
item.itemObject.checked = false;
|
|
307
|
-
indeterminateStatus(id, item.parentId);
|
|
308
|
-
}
|
|
309
|
-
else if (item.items) {
|
|
310
|
-
onRemoveItems(id, itemId, item.items);
|
|
311
|
-
}
|
|
312
|
-
});
|
|
313
|
-
}
|
|
314
|
-
};
|
|
315
|
-
const addChecked = (id, ids) => {
|
|
316
|
-
const value = getValue$1(id);
|
|
317
|
-
if (value) {
|
|
318
|
-
ids.forEach(item => {
|
|
319
|
-
checkedItem(id, item);
|
|
320
|
-
});
|
|
321
|
-
}
|
|
322
|
-
};
|
|
323
|
-
const checkedItem = (id, itemId) => {
|
|
324
|
-
findItem(id, itemId);
|
|
325
|
-
};
|
|
326
|
-
const findItem = (id, itemId, items) => {
|
|
327
|
-
itemId = Array.isArray(itemId) ? itemId : [itemId];
|
|
328
|
-
let dataSource;
|
|
329
|
-
if (items) {
|
|
330
|
-
dataSource = items;
|
|
331
|
-
}
|
|
332
|
-
else {
|
|
333
|
-
const value = getValue$1(id);
|
|
334
|
-
dataSource = value.dataSource;
|
|
335
|
-
}
|
|
336
|
-
if (dataSource) {
|
|
337
|
-
dataSource.forEach(item => {
|
|
338
|
-
if (itemId.includes(item.id)) {
|
|
339
|
-
checkedProcess(id, item);
|
|
340
|
-
if (item.parentId) {
|
|
341
|
-
indeterminateStatus(id, item.parentId);
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
else if (item.items) {
|
|
345
|
-
findItem(id, itemId, item.items);
|
|
346
|
-
}
|
|
347
|
-
});
|
|
348
|
-
}
|
|
349
|
-
};
|
|
350
|
-
const checkedProcess = (id, item, status) => {
|
|
351
|
-
const value = getValue$1(id);
|
|
352
|
-
if (value) {
|
|
353
|
-
const treeview = value.options.treeview;
|
|
354
|
-
if (item) {
|
|
355
|
-
// && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
|
|
356
|
-
if (treeview || (!treeview && item.type != "group")) {
|
|
357
|
-
if (!item.disabled) {
|
|
358
|
-
if (status != undefined) {
|
|
359
|
-
item.checked = status;
|
|
360
|
-
}
|
|
361
|
-
else {
|
|
362
|
-
item.checked = !item.checked;
|
|
363
|
-
}
|
|
364
|
-
item.itemObject.checked = item.checked;
|
|
365
|
-
item.indeterminate = item.checked ? "determinate" : "uncheck";
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
if (item.items) {
|
|
369
|
-
item.items.forEach(child => {
|
|
370
|
-
checkedProcess(id, child, status == undefined ? item.checked : status);
|
|
371
|
-
});
|
|
372
|
-
}
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
};
|
|
376
|
-
const indeterminateStatus = (id, itemId, items) => {
|
|
377
|
-
let dataSource;
|
|
378
|
-
if (items) {
|
|
379
|
-
dataSource = items;
|
|
380
|
-
}
|
|
381
|
-
else {
|
|
382
|
-
const value = getValue$1(id);
|
|
383
|
-
dataSource = value.dataSource;
|
|
384
|
-
}
|
|
385
|
-
if (dataSource) {
|
|
386
|
-
dataSource.forEach(item => {
|
|
387
|
-
if (item.id == itemId) {
|
|
388
|
-
let allChecked = true;
|
|
389
|
-
let allUnchecked = true;
|
|
390
|
-
if (item.items) {
|
|
391
|
-
item.items.map(child => {
|
|
392
|
-
(child.checked || child.indeterminate === "indeterminate") && (allUnchecked = false);
|
|
393
|
-
!child.checked && (allChecked = false);
|
|
394
|
-
});
|
|
395
|
-
}
|
|
396
|
-
const indeterminateState = !allChecked && !allUnchecked ? "indeterminate" : allChecked ? "determinate" : "uncheck";
|
|
397
|
-
item.indeterminate = indeterminateState;
|
|
398
|
-
item.checked = indeterminateState == "determinate" ? true : false;
|
|
399
|
-
item.itemObject.checked = item.checked;
|
|
400
|
-
if (item.parentId) {
|
|
401
|
-
indeterminateStatus(id, item.parentId);
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
else if (item.items) {
|
|
405
|
-
indeterminateStatus(id, itemId, item.items);
|
|
406
|
-
}
|
|
407
|
-
});
|
|
408
|
-
}
|
|
409
|
-
};
|
|
410
|
-
const filterData = (id, ids, items, searchOtherTag) => {
|
|
411
|
-
let checkeds = [];
|
|
412
|
-
let visibled = [];
|
|
413
|
-
getValue$1(id).isSearchOtherTag = searchOtherTag;
|
|
414
|
-
let dataSource;
|
|
415
|
-
if (items) {
|
|
416
|
-
dataSource = items;
|
|
417
|
-
}
|
|
418
|
-
else {
|
|
419
|
-
const value = getValue$1(id);
|
|
420
|
-
dataSource = value.dataSource;
|
|
421
|
-
}
|
|
422
|
-
if (dataSource) {
|
|
423
|
-
dataSource.forEach(item => {
|
|
424
|
-
if (ids) {
|
|
425
|
-
item.hidden = true;
|
|
426
|
-
// const filter = ids.find((find) => find.id === item.id)
|
|
427
|
-
var filter;
|
|
428
|
-
for (let index = 0; index < ids.length; index++) {
|
|
429
|
-
if (ids[index].id === item.id) {
|
|
430
|
-
filter = ids[index];
|
|
431
|
-
break;
|
|
432
|
-
}
|
|
433
|
-
}
|
|
434
|
-
if (filter) {
|
|
435
|
-
item.hidden = false;
|
|
436
|
-
if (!getValue$1(id).isSearchOtherTag) {
|
|
437
|
-
item.isSearching = true;
|
|
438
|
-
}
|
|
439
|
-
visibled.push(item);
|
|
440
|
-
if (item.checked) {
|
|
441
|
-
checkeds.push(item);
|
|
442
|
-
}
|
|
443
|
-
if (filter.items) {
|
|
444
|
-
const { checkedItems, visibledItems } = filterData(id, filter.items, item.items, searchOtherTag);
|
|
445
|
-
if (checkedItems) {
|
|
446
|
-
checkeds = [...new Set([...checkeds, ...checkedItems])];
|
|
447
|
-
}
|
|
448
|
-
if (visibledItems) {
|
|
449
|
-
visibled = [...new Set([...visibled, ...visibledItems])];
|
|
450
|
-
}
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
else {
|
|
455
|
-
item.hidden = false;
|
|
456
|
-
if (item.items) {
|
|
457
|
-
filterData(id, null, item.items);
|
|
458
|
-
}
|
|
459
|
-
visibled.push(item);
|
|
460
|
-
item.isSearching = false;
|
|
461
|
-
}
|
|
462
|
-
});
|
|
463
|
-
}
|
|
464
|
-
return { checkedItems: checkeds !== null && checkeds !== void 0 ? checkeds : [], visibledItems: visibled !== null && visibled !== void 0 ? visibled : [] };
|
|
465
|
-
};
|
|
466
|
-
const getSelected = (id, items) => {
|
|
467
|
-
let dataSource;
|
|
468
|
-
let selected = null;
|
|
469
|
-
if (items) {
|
|
470
|
-
dataSource = items;
|
|
471
|
-
}
|
|
472
|
-
else {
|
|
473
|
-
const value = getValue$1(id);
|
|
474
|
-
dataSource = value.dataSource;
|
|
475
|
-
}
|
|
476
|
-
if (dataSource) {
|
|
477
|
-
dataSource.forEach(item => {
|
|
478
|
-
if (item.selected) {
|
|
479
|
-
selected = item.itemObject;
|
|
480
|
-
}
|
|
481
|
-
else if (item.items) {
|
|
482
|
-
const found = getSelected(id, item.items);
|
|
483
|
-
if (found) {
|
|
484
|
-
selected = found;
|
|
485
|
-
}
|
|
486
|
-
}
|
|
487
|
-
});
|
|
488
|
-
}
|
|
489
|
-
return selected;
|
|
490
|
-
};
|
|
491
|
-
const getCheckedList = (id, items) => {
|
|
492
|
-
let dataSource;
|
|
493
|
-
let checkedList = [];
|
|
494
|
-
let nestedResult = [];
|
|
495
|
-
if (items) {
|
|
496
|
-
dataSource = items;
|
|
497
|
-
}
|
|
498
|
-
else {
|
|
499
|
-
const value = getValue$1(id);
|
|
500
|
-
dataSource = value.dataSource;
|
|
501
|
-
}
|
|
502
|
-
if (dataSource) {
|
|
503
|
-
dataSource.forEach(item => {
|
|
504
|
-
var _a;
|
|
505
|
-
const newItem = Object.assign(Object.assign({}, item.itemObject), { ct: item.ct });
|
|
506
|
-
let foundChild = [];
|
|
507
|
-
let foundItem = [];
|
|
508
|
-
if (item.checked) {
|
|
509
|
-
checkedList.push(newItem);
|
|
510
|
-
foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
|
|
511
|
-
}
|
|
512
|
-
if (item.items) {
|
|
513
|
-
const found = getCheckedList(id, item.items);
|
|
514
|
-
if (((_a = found === null || found === void 0 ? void 0 : found.checkedList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
515
|
-
checkedList = [...checkedList, ...found.checkedList];
|
|
516
|
-
}
|
|
517
|
-
if (found.nestedResult.length > 0) {
|
|
518
|
-
foundChild = found.nestedResult;
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
if (foundChild.length > 0) {
|
|
522
|
-
if (foundItem.length == 0) {
|
|
523
|
-
foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
|
|
524
|
-
}
|
|
525
|
-
foundItem[0].items = foundChild;
|
|
526
|
-
nestedResult.push(foundItem[0]);
|
|
527
|
-
}
|
|
528
|
-
else {
|
|
529
|
-
if (foundItem.length > 0) {
|
|
530
|
-
foundItem[0].items = foundChild;
|
|
531
|
-
nestedResult.push(foundItem[0]);
|
|
532
|
-
}
|
|
533
|
-
}
|
|
534
|
-
});
|
|
535
|
-
}
|
|
536
|
-
return { checkedList: (checkedList === null || checkedList === void 0 ? void 0 : checkedList.length) > 0 ? checkedList : null, nestedResult: nestedResult };
|
|
537
|
-
};
|
|
538
|
-
const selectedItem = (id, itemId, items) => {
|
|
539
|
-
let dataSource;
|
|
540
|
-
let selected = [];
|
|
541
|
-
if (items) {
|
|
542
|
-
dataSource = items;
|
|
543
|
-
}
|
|
544
|
-
else {
|
|
545
|
-
const value = getValue$1(id);
|
|
546
|
-
dataSource = value.dataSource;
|
|
547
|
-
}
|
|
548
|
-
if (dataSource) {
|
|
549
|
-
dataSource.forEach(item => {
|
|
550
|
-
if (itemId) {
|
|
551
|
-
if (item.id == itemId) {
|
|
552
|
-
// if (!item.selected){
|
|
553
|
-
item.selected = true;
|
|
554
|
-
item.itemObject.selected = item.selected;
|
|
555
|
-
// }
|
|
556
|
-
}
|
|
557
|
-
else {
|
|
558
|
-
if (item.selected) {
|
|
559
|
-
item.selected = false;
|
|
560
|
-
item.itemObject.selected = item.selected;
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
}
|
|
564
|
-
if (item.items) {
|
|
565
|
-
const found = selectedItem(id, itemId, item.items);
|
|
566
|
-
if ((found === null || found === void 0 ? void 0 : found.length) > 0) {
|
|
567
|
-
selected = [...selected, ...found];
|
|
568
|
-
}
|
|
569
|
-
}
|
|
570
|
-
if (item.selected) {
|
|
571
|
-
selected.push(item.itemObject);
|
|
572
|
-
}
|
|
573
|
-
});
|
|
574
|
-
}
|
|
575
|
-
return selected && selected.length > 0 ? selected : null;
|
|
576
|
-
};
|
|
577
|
-
const setClear = (id, items) => {
|
|
578
|
-
let dataSource;
|
|
579
|
-
if (items) {
|
|
580
|
-
dataSource = items;
|
|
581
|
-
}
|
|
582
|
-
else {
|
|
583
|
-
const value = getValue$1(id);
|
|
584
|
-
dataSource = value.dataSource;
|
|
585
|
-
}
|
|
586
|
-
if (dataSource) {
|
|
587
|
-
dataSource.forEach(item => {
|
|
588
|
-
var _a, _b, _c;
|
|
589
|
-
item.checked && (item.checked = false);
|
|
590
|
-
item.selected && (item.selected = false);
|
|
591
|
-
item.indeterminate && (item.indeterminate = "uncheck");
|
|
592
|
-
((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
|
|
593
|
-
((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
|
|
594
|
-
((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = "uncheck");
|
|
595
|
-
if (item.items) {
|
|
596
|
-
setClear(id, item.items);
|
|
597
|
-
}
|
|
598
|
-
});
|
|
599
|
-
}
|
|
600
|
-
};
|
|
601
|
-
const selectAll = (id, status) => {
|
|
602
|
-
var _a, _b;
|
|
603
|
-
if (status == undefined) {
|
|
604
|
-
const totalItems = getValue$1(id).totalItems;
|
|
605
|
-
const checkedItems = ((_b = (_a = getCheckedList(id)) === null || _a === void 0 ? void 0 : _a.checkedList) === null || _b === void 0 ? void 0 : _b.length) || 0;
|
|
606
|
-
status = totalItems.selectableItems !== checkedItems;
|
|
607
|
-
}
|
|
608
|
-
const dataSource = getValue$1(id).dataSource;
|
|
609
|
-
if (dataSource) {
|
|
610
|
-
dataSource.forEach(item => {
|
|
611
|
-
checkedProcess(id, item, status);
|
|
612
|
-
});
|
|
613
|
-
}
|
|
614
|
-
};
|
|
615
|
-
const updateOptions = (id, options) => {
|
|
616
|
-
Object.keys(getValue$1(id).options).forEach(key => {
|
|
617
|
-
getValue$1(id).options[key] = options[key];
|
|
618
|
-
});
|
|
619
|
-
};
|
|
620
|
-
const removeState = id => {
|
|
621
|
-
return Promise.resolve(state$1.value.delete(id));
|
|
622
|
-
};
|
|
623
|
-
const listState = {
|
|
624
|
-
setValue: setValue$1,
|
|
625
|
-
removeValue: removeValue$1,
|
|
626
|
-
getValue: getValue$1,
|
|
627
|
-
getData,
|
|
628
|
-
getDataPagination: getDataPagination$1,
|
|
629
|
-
openGroup,
|
|
630
|
-
checkedItem,
|
|
631
|
-
filterData,
|
|
632
|
-
getSelected,
|
|
633
|
-
getCheckedList,
|
|
634
|
-
selectedItem,
|
|
635
|
-
addChecked,
|
|
636
|
-
setClear,
|
|
637
|
-
selectAll,
|
|
638
|
-
removeOtherTags,
|
|
639
|
-
onRemoveItems,
|
|
640
|
-
updateOptions,
|
|
641
|
-
removeState,
|
|
642
|
-
};
|
|
643
|
-
|
|
644
|
-
class KeyControl {
|
|
645
|
-
constructor(keyCode, element, elementName, childElementName) {
|
|
646
|
-
this.elementName = '';
|
|
647
|
-
this.childElementName = '';
|
|
648
|
-
this.keyCode = keyCode;
|
|
649
|
-
this.element = element;
|
|
650
|
-
this.elementName = elementName;
|
|
651
|
-
this.childElementName = childElementName;
|
|
652
|
-
}
|
|
653
|
-
getKeyCode() {
|
|
654
|
-
return this.keyCode;
|
|
655
|
-
}
|
|
656
|
-
getElementName() {
|
|
657
|
-
return this.elementName;
|
|
658
|
-
}
|
|
659
|
-
getChildElementName() {
|
|
660
|
-
return this.childElementName;
|
|
661
|
-
}
|
|
662
|
-
getFocusedElementName() {
|
|
663
|
-
return this.getElementName() + '.focused';
|
|
664
|
-
}
|
|
665
|
-
getFocusedElement() {
|
|
666
|
-
return this.element.querySelectorAll(this.getFocusedElementName())[0] || null;
|
|
667
|
-
}
|
|
668
|
-
getFirstElement() {
|
|
669
|
-
return this.element.querySelectorAll(this.getElementName())[0] || null;
|
|
670
|
-
}
|
|
671
|
-
getNextElement() {
|
|
672
|
-
var _a;
|
|
673
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) || this.getFirstElement();
|
|
674
|
-
}
|
|
675
|
-
getPreviousElement() {
|
|
676
|
-
var _a;
|
|
677
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) || this.getFirstElement();
|
|
678
|
-
}
|
|
679
|
-
getChildElement() {
|
|
680
|
-
var _a;
|
|
681
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName())[0]) || null;
|
|
682
|
-
}
|
|
683
|
-
getParentElement(element) {
|
|
684
|
-
if (element && element) {
|
|
685
|
-
const isRootElement = element && element.attributes['data-isroot'];
|
|
686
|
-
if (isRootElement) {
|
|
687
|
-
return element;
|
|
688
|
-
}
|
|
689
|
-
return this.getParentElement(element.parentNode);
|
|
690
|
-
}
|
|
691
|
-
}
|
|
692
|
-
focusElementIsOpen() {
|
|
693
|
-
var _a;
|
|
694
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.classList.contains('bcm-list__item--open')) || false;
|
|
695
|
-
}
|
|
696
|
-
isRootElement() {
|
|
697
|
-
var _a;
|
|
698
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName()).length) > 0;
|
|
699
|
-
}
|
|
700
|
-
isRootElementIsOpen() {
|
|
701
|
-
return this.getFocusedElement().classList.contains('bcm-list__item--open');
|
|
702
|
-
}
|
|
703
|
-
getFocusedChildElement() {
|
|
704
|
-
var _a;
|
|
705
|
-
return ((_a = this.getChildElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.focused')[0]) || null;
|
|
706
|
-
}
|
|
707
|
-
isLastElement() {
|
|
708
|
-
var _a;
|
|
709
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null;
|
|
710
|
-
}
|
|
711
|
-
focusParentElementFirstChild() {
|
|
712
|
-
var _a, _b;
|
|
713
|
-
return this.setFocus((_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.firstChild);
|
|
714
|
-
}
|
|
715
|
-
isFirstElement() {
|
|
716
|
-
var _a;
|
|
717
|
-
return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) === null;
|
|
718
|
-
}
|
|
719
|
-
focusRootElement() {
|
|
720
|
-
var _a, _b, _c;
|
|
721
|
-
return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.firstChild);
|
|
722
|
-
}
|
|
723
|
-
nextRootElement() {
|
|
724
|
-
var _a, _b, _c;
|
|
725
|
-
return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.nextElementSibling);
|
|
726
|
-
}
|
|
727
|
-
findFocusElementParent() {
|
|
728
|
-
return this.getFocusedElement().parentNode.querySelectorAll('.bcm-list__item--open');
|
|
729
|
-
}
|
|
730
|
-
getLastElement() {
|
|
731
|
-
return this.element.querySelectorAll(this.getElementName())[this.element.querySelectorAll(this.getElementName()).length - 1] || null;
|
|
732
|
-
}
|
|
733
|
-
setFocus(element) {
|
|
734
|
-
element.focus();
|
|
735
|
-
}
|
|
736
|
-
}
|
|
737
|
-
|
|
738
|
-
class ListKeyControl extends KeyControl {
|
|
739
|
-
constructor(keyCode, element, treeview, checkBoxes) {
|
|
740
|
-
super(keyCode, element, '.bcm-list__item', '.bcm-list__item-childs');
|
|
741
|
-
this.isTreeview = false;
|
|
742
|
-
this.isCheckBoxes = false;
|
|
743
|
-
this.isTreeview = treeview;
|
|
744
|
-
this.isCheckBoxes = checkBoxes;
|
|
745
|
-
}
|
|
746
|
-
keyUpControl() {
|
|
747
|
-
if (this.isTreeview) {
|
|
748
|
-
this.keyUpTreeview();
|
|
749
|
-
}
|
|
750
|
-
else {
|
|
751
|
-
if (this.isFirstElement()) {
|
|
752
|
-
this.setFocus(this.getLastElement());
|
|
753
|
-
}
|
|
754
|
-
else {
|
|
755
|
-
this.setFocus(this.getPreviousElement());
|
|
756
|
-
}
|
|
757
|
-
}
|
|
758
|
-
}
|
|
759
|
-
keyDownTreeView() {
|
|
760
|
-
var _a;
|
|
761
|
-
if (this.isTreeview) {
|
|
762
|
-
if (this.isRootElement() && this.isRootElementIsOpen()) {
|
|
763
|
-
const childs = this.getChildElement();
|
|
764
|
-
if (childs) {
|
|
765
|
-
this.setFocus(childs.firstChild);
|
|
766
|
-
}
|
|
767
|
-
}
|
|
768
|
-
else {
|
|
769
|
-
if (this.isLastElement() && this.getParentElement(this.getFocusedElement())) {
|
|
770
|
-
this.setFocus((_a = this.getParentElement(this.getFocusedElement())) === null || _a === void 0 ? void 0 : _a.nextElementSibling);
|
|
771
|
-
}
|
|
772
|
-
else {
|
|
773
|
-
this.setFocus(this.getNextElement());
|
|
774
|
-
}
|
|
775
|
-
}
|
|
776
|
-
}
|
|
777
|
-
}
|
|
778
|
-
keyUpTreeview() {
|
|
779
|
-
if (this.isFirstElement()) {
|
|
780
|
-
const parent = this.getParentElement(this.getFocusedElement());
|
|
781
|
-
this.setFocus(parent);
|
|
782
|
-
}
|
|
783
|
-
else {
|
|
784
|
-
const previousElement = this.getPreviousElement();
|
|
785
|
-
if (previousElement) {
|
|
786
|
-
if (previousElement.classList.contains('bcm-list__item--open')) {
|
|
787
|
-
const getChildElement = previousElement.querySelectorAll(this.getChildElementName())[0];
|
|
788
|
-
console.log({ getChildElement });
|
|
789
|
-
this.setFocus(getChildElement.lastChild);
|
|
790
|
-
}
|
|
791
|
-
else {
|
|
792
|
-
this.setFocus(previousElement);
|
|
793
|
-
}
|
|
794
|
-
}
|
|
795
|
-
}
|
|
796
|
-
}
|
|
797
|
-
keyDownControl() {
|
|
798
|
-
if (this.isTreeview) {
|
|
799
|
-
this.keyDownTreeView();
|
|
800
|
-
}
|
|
801
|
-
else {
|
|
802
|
-
if (this.isLastElement()) {
|
|
803
|
-
this.setFocus(this.getFirstElement());
|
|
804
|
-
}
|
|
805
|
-
else {
|
|
806
|
-
this.setFocus(this.getNextElement());
|
|
807
|
-
}
|
|
808
|
-
}
|
|
809
|
-
}
|
|
810
|
-
keyRightControl() {
|
|
811
|
-
if (this.isTreeview) {
|
|
812
|
-
if (!this.isRootElementIsOpen() && this.isRootElement()) {
|
|
813
|
-
const { id } = this.getFocusedElement();
|
|
814
|
-
this.openGroup(id);
|
|
815
|
-
}
|
|
816
|
-
}
|
|
817
|
-
}
|
|
818
|
-
keyLeftControl() {
|
|
819
|
-
if (this.isTreeview) {
|
|
820
|
-
if (this.isRootElementIsOpen() && this.isRootElement()) {
|
|
821
|
-
const { id } = this.getFocusedElement();
|
|
822
|
-
this.openGroup(id);
|
|
823
|
-
}
|
|
824
|
-
}
|
|
825
|
-
}
|
|
826
|
-
keyEnterControl() { }
|
|
827
|
-
keySpaceControl() {
|
|
828
|
-
if (this.isCheckBoxes) {
|
|
829
|
-
const { id } = this.getFocusedElement();
|
|
830
|
-
this.checkedItem(id);
|
|
831
|
-
}
|
|
832
|
-
}
|
|
833
|
-
keyDown() {
|
|
834
|
-
switch (this.getKeyCode()) {
|
|
835
|
-
case bcm.Bcm$1.KeyCode.up:
|
|
836
|
-
this.keyUpControl();
|
|
837
|
-
break;
|
|
838
|
-
case bcm.Bcm$1.KeyCode.down:
|
|
839
|
-
this.keyDownControl();
|
|
840
|
-
break;
|
|
841
|
-
case bcm.Bcm$1.KeyCode.left:
|
|
842
|
-
this.keyLeftControl();
|
|
843
|
-
break;
|
|
844
|
-
case bcm.Bcm$1.KeyCode.right:
|
|
845
|
-
this.keyRightControl();
|
|
846
|
-
break;
|
|
847
|
-
case bcm.Bcm$1.KeyCode.enter:
|
|
848
|
-
this.keyEnterControl();
|
|
849
|
-
break;
|
|
850
|
-
case bcm.Bcm$1.KeyCode.space:
|
|
851
|
-
this.keySpaceControl();
|
|
852
|
-
break;
|
|
853
|
-
}
|
|
854
|
-
}
|
|
855
|
-
keyUp() { }
|
|
856
|
-
}
|
|
857
|
-
|
|
858
|
-
const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}.bcm-list{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;--width:256px;--height:256px;--max-height:inherit;--min-height:inherit;min-width:90px;display:flex;flex-direction:column;margin:0 0 8px 0}.bcm-list__listbox .bcm-list__container{height:var(--height);max-height:var(--max-height);min-height:var(--min-height)}.bcm-list.full-width{width:100%}.bcm-list__size-small .bcm-list__input{height:24px;font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable{font-size:10px;line-height:calc(10px + 8px)}.bcm-list__size-medium .bcm-list__input{height:32px;font-size:14px;line-height:calc(14px + 8px)}.bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-large .bcm-list__input{height:40px;font-size:16px;line-height:calc(16px + 8px)}.bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable{font-size:14px;line-height:calc(14px + 8px)}.bcm-list:hover{outline:none}.bcm-list:hover .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list:focus-visible{outline:none}.bcm-list:focus-visible .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);background-color:var(--bcm-new-ds-color-white)}.bcm-list:active{outline:none}.bcm-list:active .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list__container{--width:256px;--height:256px;width:var(--width);height:var(--height);background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-list__container main{padding:0 8px;flex:1;overflow:auto;display:flex;flex-direction:column}.bcm-list__container-search{margin:0 8px}.bcm-list__container-search:after{margin:4px 0}.bcm-list__container-no-data{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding-bottom:4px}.bcm-list__container.error{border-color:var(--bcm-color-red-6)}.bcm-list__container.full-width{width:100%}.bcm-list__container.bcm-list__type-linked-component,.bcm-list__container.bcm-list__type-select,.bcm-list__container.bcm-list__type-autocomplete{display:none;opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);z-index:10800}.bcm-list__container.bcm-list__type-linked-component.is-open,.bcm-list__container.bcm-list__type-select.is-open,.bcm-list__container.bcm-list__type-autocomplete.is-open{transition:transform 50ms;display:flex}.bcm-list__container.bcm-list__type-linked-component.is-open-animation,.bcm-list__container.bcm-list__type-select.is-open-animation,.bcm-list__container.bcm-list__type-autocomplete.is-open-animation{opacity:1;transform:translateY(0);visibility:visible}.bcm-list__container.bcm-list__type-linked-component{margin-top:2px}.bcm-list__label{line-height:1}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-white);user-select:none;cursor:pointer;padding:0 8px;height:32px;overflow:hidden;position:relative;transition:background-color 100ms, border-color 100ms}.bcm-list__input-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bcm-color-grey-1);opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;z-index:-1}.bcm-list__input-spinner.is-open{opacity:1;visibility:visible;z-index:1}.bcm-list__input-container{flex:1;display:block;overflow:hidden}.bcm-list__input-container.value-empty{color:#6B7280}.bcm-list__input-container.type-single,.bcm-list__input-container.value-empty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-list__input-placeholder{color:#6B7280}.bcm-list__input-tag-container{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;grid-gap:2px;line-height:1}.bcm-list__input-buttons{display:flex;align-items:center;justify-content:flex-end;grid-gap:4px}.bcm-list__input-buttons-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 4px 0 4px;font-size:16px;color:var(--bcm-new-ds-color-slate-500)}.bcm-list__input-buttons-button.caret-is{transform:rotate(360deg);transition:transform 0.2s ease-in-out}.bcm-list__input-buttons-button.caret-is-open{transform:rotate(180deg)}.bcm-list__input-buttons:not(.disabled) .bcm-list__input-buttons-button:hover{cursor:pointer;color:var(--bcm-new-ds-color-slate-600)}.bcm-list__input-autocomplete{position:relative;padding-right:0}.bcm-list__input-autocomplete .bcm-list-input-selected-text{background-color:#ffffff;display:flex;align-items:center;justify-content:flex-start;width:calc(100% - 24px);height:100%;padding:0 calc(8px + 4px);position:absolute;top:0;left:0}.bcm-list__input-autocomplete .bcm-list__input-container{height:100%;display:flex;flex-direction:row}.bcm-list__input-autocomplete .bcm-list__input-container .bcm-list__input-tag-container{width:auto}.bcm-list__input-autocomplete .bcm-input,.bcm-list__input-autocomplete .bcm-list__autocomplete{height:100%;min-width:70px;width:100%}.bcm-list__input-autocomplete .bcm-input__container,.bcm-list__input-autocomplete .bcm-list__autocomplete__container{height:100%;border:none;padding:0;width:100%}.bcm-list__input-autocomplete .bcm-input__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-input__container:not(.disabled):hover,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled):hover{border:none;box-shadow:none}.bcm-list__autocomplete{width:100%;position:relative}.bcm-list.full-width .bcm-list__container,.bcm-list.full-width .bcm-list__input{width:100%}.bcm-list.error .bcm-list__input{border-color:var(--bcm-color-red-6)}.bcm-list.disabled .bcm-list__container,.bcm-list.disabled .bcm-list__input{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-list.disabled .bcm-tag__content.dismissable .close-button{cursor:default}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button bcm-icon{color:var(--bcm-new-ds-color-slate-100)}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button:hover bcm-icon{color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:hover{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked){background-color:var(--bcm-new-ds-color-slate-200);border-color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:focus-visible{border-color:var(--bcm-new-ds-color-blue-500);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item{padding:2px 0}.bcm-list__item.disabled{user-select:none}.bcm-list__item:focus{outline:none}.bcm-list__item:focus-visible>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item:focus-visible>.bcm-list__item-content:not(.disabled){color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item-content{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;cursor:pointer;border-radius:4px;padding:0;padding-left:4px;color:var(--bcm-new-ds-color-slate-700);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-new-ds-color-slate-400);background-color:var(--bcm-new-ds-color-slate-200);user-select:none;cursor:not-allowed}.bcm-list__item-content.readonly{color:var(--bcm-new-ds-color-slate-500);background-color:var(--bcm-new-ds-color-slate-100);cursor:default}.bcm-list__item-content.readonly .bcm-list__item-content-collapse-icon{color:var(--bcm-new-ds-color-slate-700);cursor:pointer}.bcm-list__item-content.selected{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item-content.selected:hover:not(.disabled):not(.readonly){color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item-content:hover:not(.disabled):not(.readonly){background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item-content:active:not(.disabled):not(.readonly){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item-content-collapse-icon{width:16px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:16px}.bcm-list__item-content-collapse-icon.child{cursor:pointer}.bcm-list__item-content-text{user-select:none;padding:8px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.bcm-list__item-content-text.treeview{padding:8px 0}.bcm-list__item-content-text-checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;margin-right:8px}.bcm-list__item-content-text-checkbox .bcm-checkbox{margin:0}.bcm-list__item-content-text-inner{width:100%}.bcm-list__item-content-text mark{padding:0;margin:0;font-size:inherit;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-yellow-4)}.bcm-list__item-childs{padding-left:16px}.bcm-list__item-small{padding:2px 0 2px 8px;font-size:10px;line-height:calc(10px + 8px)}.bcm-list__item-small .bcm-list__item-content-text{padding:3px 4px}.bcm-list__item-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__item-medium .bcm-list__item-content-text{padding:6px 4px}.bcm-list__item-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-list__item-large .bcm-list__item-content-text{padding:9px 4px}.bcm-list__item--group{border-radius:4px}.bcm-list__item--group:focus>.bcm-list__item-content:not(.disabled){background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);border-radius:4px 4px 0 0;cursor:default;font-size:14px;line-height:calc(14px + 8px);font-weight:500;position:sticky;top:0}.bcm-list__item--group>.bcm-list__item-content>.bcm-list__item-content-text{padding:4px 8px 4px 16px}.bcm-list__item--group>.bcm-list__item-content:hover,.bcm-list__item--group>.bcm-list__item-content:focus{color:var(--bcm-new-ds-color-slate-800);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-content-unclickable:hover{color:var(--bcm-new-ds-color-slate-700);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-childs{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);padding-bottom:8px;border-radius:0 0 4px 4px;padding-left:8px}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content{background-color:var(--bcm-new-ds-color-white);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:hover{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:active{background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:focus-visible{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected{background-color:var(--bcm-new-ds-color-blue-500);color:var(--bcm-new-ds-color-white)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:active{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-list__linked{display:none}.bcm-list .bcm-tag--other .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-info-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-new-ds-color-slate-100);color:var(--bcm-new-ds-color-slate-600);border-radius:0 0 4px 4px}";
|
|
859
|
-
|
|
860
|
-
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
861
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
862
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
863
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
864
|
-
else
|
|
865
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
866
|
-
if (d = decorators[i])
|
|
867
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
868
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
869
|
-
};
|
|
870
|
-
const BcmList = class {
|
|
871
|
-
constructor(hostRef) {
|
|
872
|
-
index$1.registerInstance(this, hostRef);
|
|
873
|
-
this.bcmChecklist = index$1.createEvent(this, "bcm-checklist", 7);
|
|
874
|
-
this.bcmSelected = index$1.createEvent(this, "bcm-selected", 7);
|
|
875
|
-
this.change = index$1.createEvent(this, "bcm-change", 7);
|
|
876
|
-
this.open = index$1.createEvent(this, "bcm-open", 3);
|
|
877
|
-
this.close = index$1.createEvent(this, "bcm-close", 3);
|
|
878
|
-
this.listClose = index$1.createEvent(this, "bcm-list-close", 7);
|
|
879
|
-
this.listOpen = index$1.createEvent(this, "bcm-list-open", 7);
|
|
880
|
-
this.debounce = null;
|
|
881
|
-
this.debounceHandler = generate.Generate.debounceInput(() => this.listenResize(), 300, false);
|
|
882
|
-
this._id = generate.Generate.UID();
|
|
883
|
-
this.tempId = generate.Generate.UID();
|
|
884
|
-
this.type = bcm.Bcm.ListType.listbox;
|
|
885
|
-
this.treeview = false;
|
|
886
|
-
this.checkboxes = false;
|
|
887
|
-
this.searchable = false;
|
|
888
|
-
this.value = null;
|
|
889
|
-
this.inputText = undefined;
|
|
890
|
-
this.name = undefined;
|
|
891
|
-
this.label = undefined;
|
|
892
|
-
this.size = bcm.Bcm.Size.medium;
|
|
893
|
-
this.disabled = false;
|
|
894
|
-
this.readonly = false;
|
|
895
|
-
this.highlight = false;
|
|
896
|
-
this.highlightText = undefined;
|
|
897
|
-
this.required = false;
|
|
898
|
-
this.hidden = false;
|
|
899
|
-
this.fullWidth = false;
|
|
900
|
-
this.height = "256px";
|
|
901
|
-
this.maxHeight = "500px";
|
|
902
|
-
this.minHeight = "150px";
|
|
903
|
-
this.width = "256px";
|
|
904
|
-
this.tooltip = undefined;
|
|
905
|
-
this.infoFooter = false;
|
|
906
|
-
this.variableText = "item";
|
|
907
|
-
this.template = undefined;
|
|
908
|
-
this.allOpen = false;
|
|
909
|
-
this.keyControl = false;
|
|
910
|
-
this.checkAll = true;
|
|
911
|
-
this.stopDeepClean = false;
|
|
912
|
-
this.openIntersecting = false;
|
|
913
|
-
this.linkedComponent = undefined;
|
|
914
|
-
this.isOpen = false;
|
|
915
|
-
this.isOpenAnimation = false;
|
|
916
|
-
this.calculatedViewport = false;
|
|
917
|
-
this.isSelectedOther = false;
|
|
918
|
-
this.isHaveOtherTag = false;
|
|
919
|
-
this.placeholder = "Choose an option";
|
|
920
|
-
this.searchPlaceholder = "Search";
|
|
921
|
-
this.searchIsOnlyChilds = false;
|
|
922
|
-
this.minSearchLength = 2;
|
|
923
|
-
this.clearable = false;
|
|
924
|
-
this.caption = undefined;
|
|
925
|
-
this.noCaption = false;
|
|
926
|
-
this.captionType = bcm.Bcm.Status.default;
|
|
927
|
-
this.captionError = undefined;
|
|
928
|
-
this.emptyText = undefined;
|
|
929
|
-
this.emptyIcon = "fad fa-folder-open";
|
|
930
|
-
this.captionCache = undefined;
|
|
931
|
-
this.captionTypeCache = undefined;
|
|
932
|
-
this.tick = {};
|
|
933
|
-
this.totalData = 0;
|
|
934
|
-
this.totalRootData = 0;
|
|
935
|
-
this.limit = 20;
|
|
936
|
-
this.searchGetParents = undefined;
|
|
937
|
-
this.searchResultLimit = 20;
|
|
938
|
-
this.searchFound = null;
|
|
939
|
-
this.returnFilterData = {};
|
|
940
|
-
this.returnOtherData = {};
|
|
941
|
-
this.options = {
|
|
942
|
-
rootMargin: "30px",
|
|
943
|
-
};
|
|
944
|
-
this.tagContainerWidth = 0;
|
|
945
|
-
this.selectAllItem = {
|
|
946
|
-
id: "select-all-" + this._id,
|
|
947
|
-
text: "Select All",
|
|
948
|
-
value: "select-all",
|
|
949
|
-
checked: false,
|
|
950
|
-
disabled: false,
|
|
951
|
-
icon: "",
|
|
952
|
-
status: bcm.Bcm.Status.default,
|
|
953
|
-
indeterminate: "uncheck",
|
|
954
|
-
};
|
|
955
|
-
this.shouldTriggerChange = undefined;
|
|
956
|
-
this.placement = bcm.Bcm.Placement["bottom-start"];
|
|
957
|
-
this.disableChangeEvent = false;
|
|
958
|
-
this.data = [];
|
|
959
|
-
window.addEventListener("scroll", this.handleWheel.bind(this), true);
|
|
960
|
-
window.addEventListener("wheel", this.handleWheel.bind(this), true);
|
|
961
|
-
window.addEventListener("resize", this.handleResize.bind(this), true);
|
|
962
|
-
}
|
|
963
|
-
connectedCallback() {
|
|
964
|
-
if (this.height != "256px") {
|
|
965
|
-
if (this.height.indexOf("px") > -1) {
|
|
966
|
-
this.limit = Math.floor(+this.height.replace("px", "") / 10);
|
|
967
|
-
}
|
|
968
|
-
else {
|
|
969
|
-
this.limit = Math.floor(+(window.innerHeight / 10));
|
|
970
|
-
}
|
|
971
|
-
this.searchResultLimit = this.limit;
|
|
972
|
-
this.markForCheck();
|
|
973
|
-
}
|
|
974
|
-
const checkElementWithDom = document.querySelectorAll(`#bcm-list-${this._id}`);
|
|
975
|
-
(checkElementWithDom === null || checkElementWithDom === void 0 ? void 0 : checkElementWithDom.length) > 1 && checkElementWithDom.forEach((item, index) => index > 0 && item.remove());
|
|
976
|
-
}
|
|
977
|
-
componentWillRender() {
|
|
978
|
-
this.calculateLocation();
|
|
979
|
-
}
|
|
980
|
-
componentShouldUpdate(newVal, oldVal, propName) {
|
|
981
|
-
if (Object.keys(this.getOptions()).indexOf(propName) > -1 && newVal !== oldVal) {
|
|
982
|
-
this.updateOptions();
|
|
983
|
-
}
|
|
984
|
-
}
|
|
985
|
-
get containerWidth() {
|
|
986
|
-
var _a, _b;
|
|
987
|
-
return (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width;
|
|
988
|
-
}
|
|
989
|
-
get tagCount() {
|
|
990
|
-
return this.containerWidth > 0 ? Math.floor(+(this.containerWidth - 100) / 85) : 0;
|
|
991
|
-
}
|
|
992
|
-
get tagData() {
|
|
993
|
-
return generate.snq(() => {
|
|
994
|
-
var _a;
|
|
995
|
-
return (_a = this.value) === null || _a === void 0 ? void 0 : _a.map(item => ({
|
|
996
|
-
value: item.id,
|
|
997
|
-
label: stringHelper.StringHelper.textLimitter(item.text, 7),
|
|
998
|
-
text: item.tooltipMessage || item.tagTitle || generate.Generate.domParser(item.text),
|
|
999
|
-
}));
|
|
1000
|
-
}, []);
|
|
1001
|
-
}
|
|
1002
|
-
async componentDidLoad() {
|
|
1003
|
-
await this.initState();
|
|
1004
|
-
// if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
|
|
1005
|
-
// const list = this.el.querySelector(`#bcm-list-${this._id}`);
|
|
1006
|
-
// if (list) {
|
|
1007
|
-
// document.body.appendChild(list);
|
|
1008
|
-
// }
|
|
1009
|
-
// }
|
|
1010
|
-
}
|
|
1011
|
-
disconnectedCallback() {
|
|
1012
|
-
this.isOpen = false;
|
|
1013
|
-
if (this.stopDeepClean)
|
|
1014
|
-
return;
|
|
1015
|
-
listState.removeState(this._id);
|
|
1016
|
-
this.el.innerHTML = "";
|
|
1017
|
-
if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
|
|
1018
|
-
const list = document.querySelectorAll(`#bcm-list-${this._id}`);
|
|
1019
|
-
if (list === null || list === void 0 ? void 0 : list.length) {
|
|
1020
|
-
list.forEach(item => item.remove());
|
|
1021
|
-
this.el.remove();
|
|
1022
|
-
}
|
|
1023
|
-
}
|
|
1024
|
-
}
|
|
1025
|
-
watchId(_, oldVal) {
|
|
1026
|
-
// console.info('Changed component id:', oldVal + ' -> ' + newVal);
|
|
1027
|
-
listState.removeState(oldVal);
|
|
1028
|
-
this.initState();
|
|
1029
|
-
}
|
|
1030
|
-
handleValueChange(newVal, oldVal) {
|
|
1031
|
-
var _a, _b;
|
|
1032
|
-
if (generate.Generate.objectIsEmpty(this.returnFilterData)) {
|
|
1033
|
-
this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
|
|
1034
|
-
}
|
|
1035
|
-
if (this.checkboxes) {
|
|
1036
|
-
if (!validators.Validators.compareTwoArrayIsSame(newVal, oldVal)) {
|
|
1037
|
-
this.bcmChecklist.emit(this.value);
|
|
1038
|
-
if (!this.disableChangeEvent) {
|
|
1039
|
-
if (this.shouldTriggerChange) {
|
|
1040
|
-
const val = ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length)
|
|
1041
|
-
? [...this.value].map(item => (Object.assign(Object.assign({}, item), (this.shouldTriggerChange && { shouldTriggerChange: this.shouldTriggerChange }))))
|
|
1042
|
-
: null;
|
|
1043
|
-
this.change.emit(val);
|
|
1044
|
-
}
|
|
1045
|
-
else {
|
|
1046
|
-
this.change.emit(this.value);
|
|
1047
|
-
}
|
|
1048
|
-
}
|
|
1049
|
-
}
|
|
1050
|
-
}
|
|
1051
|
-
else {
|
|
1052
|
-
if ((newVal === null || newVal === void 0 ? void 0 : newVal.id) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.id)) {
|
|
1053
|
-
!this.disableChangeEvent &&
|
|
1054
|
-
this.change.emit(this.value
|
|
1055
|
-
? Object.assign(Object.assign({}, this.value), (this.shouldTriggerChange && { shouldTriggerChange: this.shouldTriggerChange })) : null);
|
|
1056
|
-
}
|
|
1057
|
-
}
|
|
1058
|
-
}
|
|
1059
|
-
watchReturnFilterData(newVal) {
|
|
1060
|
-
var _a;
|
|
1061
|
-
const { checkedItems, visibledItems } = newVal;
|
|
1062
|
-
if (checkedItems && visibledItems) {
|
|
1063
|
-
this.handleIndeterminate(checkedItems.length, visibledItems.length);
|
|
1064
|
-
}
|
|
1065
|
-
else {
|
|
1066
|
-
this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
|
|
1067
|
-
}
|
|
1068
|
-
}
|
|
1069
|
-
async handleOpen() {
|
|
1070
|
-
if (this.isOpen) {
|
|
1071
|
-
this.detectClone();
|
|
1072
|
-
if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
|
|
1073
|
-
const list = this.el.querySelector(`#bcm-list-${this._id}`);
|
|
1074
|
-
if (list) {
|
|
1075
|
-
const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
|
|
1076
|
-
bcmOverlayContainer.appendChild(list);
|
|
1077
|
-
}
|
|
1078
|
-
}
|
|
1079
|
-
this.open.emit();
|
|
1080
|
-
this.calculateLocation();
|
|
1081
|
-
this.onSelectSearch();
|
|
1082
|
-
await utils.delay(50);
|
|
1083
|
-
this.isOpenAnimation = true;
|
|
1084
|
-
}
|
|
1085
|
-
else {
|
|
1086
|
-
this.isOpenAnimation = false;
|
|
1087
|
-
this.listScrollToTop();
|
|
1088
|
-
this.close.emit();
|
|
1089
|
-
this.listClose.emit();
|
|
1090
|
-
await utils.delay(100);
|
|
1091
|
-
this.unSelectOther();
|
|
1092
|
-
}
|
|
1093
|
-
}
|
|
1094
|
-
listScrollToTop() {
|
|
1095
|
-
const list = document.querySelector(`#bcm-list-${this._id}`);
|
|
1096
|
-
if (list) {
|
|
1097
|
-
list.querySelector(".scrolling").scrollTop = 0;
|
|
1098
|
-
}
|
|
1099
|
-
}
|
|
1100
|
-
async dataChanged(newValue, oldValue) {
|
|
1101
|
-
if (!validators.Validators.compareTwoArrayIsSame(newValue, oldValue)) {
|
|
1102
|
-
await this.initState();
|
|
1103
|
-
}
|
|
1104
|
-
}
|
|
1105
|
-
isIntersecting(e) {
|
|
1106
|
-
const target = e === null || e === void 0 ? void 0 : e.target;
|
|
1107
|
-
if (target && target.id === this._id) {
|
|
1108
|
-
this.listenResize();
|
|
1109
|
-
}
|
|
1110
|
-
}
|
|
1111
|
-
handleSlotItems(e) {
|
|
1112
|
-
var _a;
|
|
1113
|
-
if (((_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
1114
|
-
this.data = e.detail;
|
|
1115
|
-
}
|
|
1116
|
-
}
|
|
1117
|
-
handleChange(e) {
|
|
1118
|
-
if (e.target.id == `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
|
|
1119
|
-
e.stopImmediatePropagation();
|
|
1120
|
-
}
|
|
1121
|
-
}
|
|
1122
|
-
handleResize() {
|
|
1123
|
-
this.calculateLocation();
|
|
1124
|
-
this.debounceHandler();
|
|
1125
|
-
}
|
|
1126
|
-
handleWheel(event) {
|
|
1127
|
-
if (this.isOpen) {
|
|
1128
|
-
const list = document.querySelector(`#bcm-list-${this._id}`);
|
|
1129
|
-
const isClickInside = list && generate.Generate.findEventPath(event, list);
|
|
1130
|
-
if (isClickInside) {
|
|
1131
|
-
if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
|
|
1132
|
-
this.calculateLocation();
|
|
1133
|
-
}
|
|
1134
|
-
}
|
|
1135
|
-
else {
|
|
1136
|
-
this.hide();
|
|
1137
|
-
}
|
|
1138
|
-
}
|
|
1139
|
-
}
|
|
1140
|
-
clearAutocomplete() {
|
|
1141
|
-
if (this.type == "autocomplete") {
|
|
1142
|
-
const autocompleteInput = this.getAutoCompleteInput();
|
|
1143
|
-
if (autocompleteInput) {
|
|
1144
|
-
autocompleteInput.handleClear(false);
|
|
1145
|
-
}
|
|
1146
|
-
}
|
|
1147
|
-
}
|
|
1148
|
-
async handleSelectOtherTag(e) {
|
|
1149
|
-
if (this.disabled)
|
|
1150
|
-
return;
|
|
1151
|
-
const { id, checked } = e.detail;
|
|
1152
|
-
this.isSelectedOther = checked;
|
|
1153
|
-
if (id) {
|
|
1154
|
-
checked ? this.filterOtherList(id) : this.unSelectOther();
|
|
1155
|
-
this.isOpen = true;
|
|
1156
|
-
}
|
|
1157
|
-
}
|
|
1158
|
-
async handleDeleteTag(e) {
|
|
1159
|
-
var _a;
|
|
1160
|
-
if (this.disabled)
|
|
1161
|
-
return;
|
|
1162
|
-
const { id } = e.detail;
|
|
1163
|
-
this.isSelectedOther && this.unSelectOther();
|
|
1164
|
-
Array.isArray(id) ? listState.removeOtherTags(this._id, id) : listState.checkedItem(this._id, id);
|
|
1165
|
-
this.value = (await this.getCheckedList()).checkedList;
|
|
1166
|
-
this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
|
|
1167
|
-
}
|
|
1168
|
-
async handleSelectTag(_) {
|
|
1169
|
-
if (this.disabled)
|
|
1170
|
-
return;
|
|
1171
|
-
this.clearAutocomplete();
|
|
1172
|
-
this.onSelectSearch();
|
|
1173
|
-
this.unSelectOther();
|
|
1174
|
-
}
|
|
1175
|
-
handleClick(event) {
|
|
1176
|
-
var _a;
|
|
1177
|
-
if (this.disabled)
|
|
1178
|
-
return;
|
|
1179
|
-
const list = document.querySelector(`#bcm-list-${this._id}`);
|
|
1180
|
-
const isClickInside = generate.Generate.findEventPath(event, this.el) || (list && generate.Generate.findEventPath(event, list));
|
|
1181
|
-
if (isClickInside) {
|
|
1182
|
-
if (this.debounce !== null) {
|
|
1183
|
-
event.preventDefault();
|
|
1184
|
-
event.stopPropagation();
|
|
1185
|
-
clearTimeout(this.debounce);
|
|
1186
|
-
this.debounce = null;
|
|
1187
|
-
}
|
|
1188
|
-
this.debounce = setTimeout(() => {
|
|
1189
|
-
this.debounce = null;
|
|
1190
|
-
}, 300);
|
|
1191
|
-
}
|
|
1192
|
-
if (!isClickInside) {
|
|
1193
|
-
if (this.type == "autocomplete") {
|
|
1194
|
-
const autocompleteInput = this.getAutoCompleteInput();
|
|
1195
|
-
if (autocompleteInput) {
|
|
1196
|
-
if (this.checkboxes) {
|
|
1197
|
-
autocompleteInput.setValue("");
|
|
1198
|
-
}
|
|
1199
|
-
else {
|
|
1200
|
-
autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || "");
|
|
1201
|
-
}
|
|
1202
|
-
}
|
|
1203
|
-
}
|
|
1204
|
-
}
|
|
1205
|
-
const clickToTag = generate.Generate.findEventPathWithKey(event, "className", ["bcm-tag"]);
|
|
1206
|
-
const clickToOtherTag = generate.Generate.findEventPathWithKey(event, "className", ["bcm-tag bcm-tag--other"]);
|
|
1207
|
-
const clickToSelect = generate.Generate.findEventPathWithKey(event, "id", [`bcm-list-input-${this._id}`, `bcm-list-label-${this._id}`]);
|
|
1208
|
-
const clickToTagDismiss = generate.Generate.findEventPathWithKey(event, "className", ["right close-button"]);
|
|
1209
|
-
if (clickToSelect && !clickToTagDismiss && this.type != "autocomplete") {
|
|
1210
|
-
this.isOpen = clickToTag || clickToOtherTag ? true : !this.isOpen;
|
|
1211
|
-
}
|
|
1212
|
-
if (list) {
|
|
1213
|
-
if (this.isOpen) {
|
|
1214
|
-
if (!list.contains(event.target) && !this.el.contains(event.target)) {
|
|
1215
|
-
this.isOpen = false;
|
|
1216
|
-
// this.unSelectOther()
|
|
1217
|
-
}
|
|
1218
|
-
}
|
|
1219
|
-
}
|
|
1220
|
-
}
|
|
1221
|
-
bcmOnSearchClear(event) {
|
|
1222
|
-
var _a, _b;
|
|
1223
|
-
if (this.type == "autocomplete") {
|
|
1224
|
-
if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
|
|
1225
|
-
if (event.detail) {
|
|
1226
|
-
this.setClear();
|
|
1227
|
-
}
|
|
1228
|
-
}
|
|
1229
|
-
}
|
|
1230
|
-
}
|
|
1231
|
-
bcmOnSearch(event) {
|
|
1232
|
-
var _a, _b, _c, _d, _e, _f;
|
|
1233
|
-
if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
|
|
1234
|
-
this.searchGetParents = generate.snq(() => { var _a; return (_a = event.detail) === null || _a === void 0 ? void 0 : _a.parentIndex; }, null);
|
|
1235
|
-
this.searchResultLimit = 10;
|
|
1236
|
-
this.searchFound = ((_c = event.detail) === null || _c === void 0 ? void 0 : _c.matching) != null ? (_d = event.detail) === null || _d === void 0 ? void 0 : _d.matching.length : null;
|
|
1237
|
-
this.returnFilterData = listState.filterData(this._id, (_e = event.detail) === null || _e === void 0 ? void 0 : _e.nestedResult);
|
|
1238
|
-
if (this.searchFound > 0 && this.highlight) {
|
|
1239
|
-
this.highlightText = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.value;
|
|
1240
|
-
}
|
|
1241
|
-
if (this.type == "autocomplete") {
|
|
1242
|
-
this.isOpen = true;
|
|
1243
|
-
}
|
|
1244
|
-
if (!event.detail.result) {
|
|
1245
|
-
if (this.type == "autocomplete") {
|
|
1246
|
-
this.isOpen = false;
|
|
1247
|
-
}
|
|
1248
|
-
else {
|
|
1249
|
-
this.returnFilterData = {};
|
|
1250
|
-
listState.filterData(this._id, null);
|
|
1251
|
-
}
|
|
1252
|
-
// this.isSelectedOther = false
|
|
1253
|
-
this.searchResultLimit = null;
|
|
1254
|
-
this.highlightText = null;
|
|
1255
|
-
}
|
|
1256
|
-
this.markForCheck();
|
|
1257
|
-
}
|
|
1258
|
-
}
|
|
1259
|
-
//keyboard navigation
|
|
1260
|
-
handleKeyDown(ev) {
|
|
1261
|
-
const keycode = ev.keyCode || ev.which;
|
|
1262
|
-
if (keycode === bcm.Bcm.KeyCode.escape) {
|
|
1263
|
-
if (this.isOpen) {
|
|
1264
|
-
this.isOpen = false;
|
|
1265
|
-
ev.preventDefault();
|
|
1266
|
-
ev.stopPropagation();
|
|
1267
|
-
ev.stopImmediatePropagation();
|
|
1268
|
-
}
|
|
1269
|
-
}
|
|
1270
|
-
if (this.keyControl) {
|
|
1271
|
-
const keyboard = new ListKeyControl(keycode, this.el, this.treeview, this.checkboxes);
|
|
1272
|
-
keyboard.openGroup = openGroupId => {
|
|
1273
|
-
this.openGroup(openGroupId);
|
|
1274
|
-
};
|
|
1275
|
-
keyboard.checkedItem = checkedItemId => {
|
|
1276
|
-
this.checkedItem(checkedItemId);
|
|
1277
|
-
};
|
|
1278
|
-
keyboard.keyDown();
|
|
1279
|
-
}
|
|
1280
|
-
}
|
|
1281
|
-
handleKeyUp(ev) {
|
|
1282
|
-
if (this.keyControl) {
|
|
1283
|
-
const focusedList = generate.Generate.findEventPath(ev, this.el);
|
|
1284
|
-
if (focusedList) {
|
|
1285
|
-
const list = document.getElementById(`bcm-list-${this._id}`);
|
|
1286
|
-
if (list) {
|
|
1287
|
-
const items = list.querySelectorAll(".bcm-list__item.focused");
|
|
1288
|
-
if (items.length > 0) {
|
|
1289
|
-
const main = list.querySelector("main");
|
|
1290
|
-
const itemHeight = items[0].offsetHeight;
|
|
1291
|
-
const listHeight = main.offsetHeight;
|
|
1292
|
-
const itemTop = items[0].offsetTop;
|
|
1293
|
-
if (itemTop > listHeight) {
|
|
1294
|
-
main.scrollTop = itemTop - listHeight / 2 + itemHeight / 2;
|
|
1295
|
-
}
|
|
1296
|
-
if (itemTop < listHeight) {
|
|
1297
|
-
main.scrollTop = itemTop - listHeight / 2 - itemHeight / 2;
|
|
1298
|
-
}
|
|
1299
|
-
}
|
|
1300
|
-
}
|
|
1301
|
-
}
|
|
1302
|
-
}
|
|
1303
|
-
}
|
|
1304
|
-
async set(data, trigger = true) {
|
|
1305
|
-
if (data) {
|
|
1306
|
-
this.shouldTriggerChange = trigger;
|
|
1307
|
-
if (Array.isArray(data)) {
|
|
1308
|
-
this.addChecked(data);
|
|
1309
|
-
}
|
|
1310
|
-
if (typeof data === "string" || typeof data === "number") {
|
|
1311
|
-
this.selectedItem(data);
|
|
1312
|
-
}
|
|
1313
|
-
}
|
|
1314
|
-
else {
|
|
1315
|
-
this.setClear();
|
|
1316
|
-
}
|
|
1317
|
-
}
|
|
1318
|
-
async get() {
|
|
1319
|
-
var _a, _b;
|
|
1320
|
-
return this.value ? (this.checkboxes ? (_b = (_a = ((await this.getCheckedList()))) === null || _a === void 0 ? void 0 : _a.checkedList) === null || _b === void 0 ? void 0 : _b.map(item => item.id) : this.value.id) : null;
|
|
1321
|
-
}
|
|
1322
|
-
async getCheckedList() {
|
|
1323
|
-
return Promise.resolve(listState.getCheckedList(this._id));
|
|
1324
|
-
}
|
|
1325
|
-
async getSelected() {
|
|
1326
|
-
return Promise.resolve(listState.getSelected(this._id));
|
|
1327
|
-
}
|
|
1328
|
-
async getValue() {
|
|
1329
|
-
return Promise.resolve(this.value);
|
|
1330
|
-
}
|
|
1331
|
-
async triggerChange(action) {
|
|
1332
|
-
this.shouldTriggerChange = action;
|
|
1333
|
-
}
|
|
1334
|
-
async addChecked(ids = [], save = false, emit = true) {
|
|
1335
|
-
if (ids && ids.length > 0) {
|
|
1336
|
-
if (!save) {
|
|
1337
|
-
listState.setClear(this._id);
|
|
1338
|
-
await utils.delay(10);
|
|
1339
|
-
}
|
|
1340
|
-
await listState.addChecked(this._id, ids);
|
|
1341
|
-
await utils.delay(10);
|
|
1342
|
-
emit && (this.value = (await this.getCheckedList()).checkedList);
|
|
1343
|
-
this.markForCheck();
|
|
1344
|
-
}
|
|
1345
|
-
return Promise.resolve(this.value);
|
|
1346
|
-
}
|
|
1347
|
-
async selected(id) {
|
|
1348
|
-
if (id) {
|
|
1349
|
-
return Promise.resolve(await this.selectedItem(id));
|
|
1350
|
-
}
|
|
1351
|
-
return false;
|
|
1352
|
-
}
|
|
1353
|
-
async setClear(e) {
|
|
1354
|
-
listState.setClear(this._id);
|
|
1355
|
-
this.value = null;
|
|
1356
|
-
this.inputText = "";
|
|
1357
|
-
this.isOpen = false;
|
|
1358
|
-
this.selectAllItem.indeterminate = "uncheck";
|
|
1359
|
-
this.markForCheck();
|
|
1360
|
-
if (e) {
|
|
1361
|
-
e.stopPropagation();
|
|
1362
|
-
e.preventDefault();
|
|
1363
|
-
}
|
|
1364
|
-
await utils.delay(10);
|
|
1365
|
-
return Promise.resolve();
|
|
1366
|
-
}
|
|
1367
|
-
async resetCaption() {
|
|
1368
|
-
await utils.delay(10);
|
|
1369
|
-
this.caption = this.captionCache;
|
|
1370
|
-
this.captionType = this.captionTypeCache;
|
|
1371
|
-
this.captionError = null;
|
|
1372
|
-
await utils.delay(10);
|
|
1373
|
-
return Promise.resolve();
|
|
1374
|
-
}
|
|
1375
|
-
detectClone() {
|
|
1376
|
-
const list = document.querySelectorAll(`#bcm-list-${this._id}`);
|
|
1377
|
-
if (list.length > 0) {
|
|
1378
|
-
list.forEach((item) => {
|
|
1379
|
-
const tempid = item.getAttribute("temp-id");
|
|
1380
|
-
if (tempid !== `bcm-list-${this.tempId}`) {
|
|
1381
|
-
console.warn(`[bcm-list] - Detected duplicate temp-id="${tempid}"`);
|
|
1382
|
-
item.remove();
|
|
1383
|
-
}
|
|
1384
|
-
});
|
|
1385
|
-
}
|
|
1386
|
-
}
|
|
1387
|
-
async show() {
|
|
1388
|
-
this.isOpen = true;
|
|
1389
|
-
return Promise.resolve();
|
|
1390
|
-
}
|
|
1391
|
-
async hide() {
|
|
1392
|
-
this.isOpen = false;
|
|
1393
|
-
return Promise.resolve();
|
|
1394
|
-
}
|
|
1395
|
-
updateOptions() {
|
|
1396
|
-
listState.updateOptions(this._id, this);
|
|
1397
|
-
}
|
|
1398
|
-
handleIndeterminate(checkeds, total) {
|
|
1399
|
-
this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? (checkeds === total ? "check" : "indeterminate") : "uncheck", checked: this.checkboxes && checkeds > 0 ? (checkeds === total ? true : false) : false });
|
|
1400
|
-
}
|
|
1401
|
-
listenResize() {
|
|
1402
|
-
this.calculateLocation();
|
|
1403
|
-
this.markForCheck();
|
|
1404
|
-
}
|
|
1405
|
-
async unSelectOther() {
|
|
1406
|
-
await this.onClearSearch();
|
|
1407
|
-
this.isSelectedOther = false;
|
|
1408
|
-
this.searchFound = null;
|
|
1409
|
-
this.returnFilterData = {};
|
|
1410
|
-
listState.filterData(this._id, null);
|
|
1411
|
-
await utils.delay(10);
|
|
1412
|
-
return Promise.resolve();
|
|
1413
|
-
}
|
|
1414
|
-
async onClearSearch() {
|
|
1415
|
-
const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
|
|
1416
|
-
if (searchInput) {
|
|
1417
|
-
await searchInput.handleClear();
|
|
1418
|
-
}
|
|
1419
|
-
return Promise.resolve();
|
|
1420
|
-
}
|
|
1421
|
-
async onSelectSearch() {
|
|
1422
|
-
const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
|
|
1423
|
-
if (searchInput) {
|
|
1424
|
-
await utils.delay(100);
|
|
1425
|
-
searchInput.onBcmFocus();
|
|
1426
|
-
searchInput.onBcmSelect();
|
|
1427
|
-
}
|
|
1428
|
-
}
|
|
1429
|
-
async filterOtherList(ids) {
|
|
1430
|
-
const checklist = (await this.getCheckedList()).nestedResult;
|
|
1431
|
-
const filter = generate.Generate.convertIdsToNestedData(ids, checklist);
|
|
1432
|
-
this.returnFilterData = await listState.filterData(this._id, filter, null, true);
|
|
1433
|
-
this.searchFound = (ids === null || ids === void 0 ? void 0 : ids.length) || 0;
|
|
1434
|
-
this.limit = 500;
|
|
1435
|
-
this.searchGetParents = null;
|
|
1436
|
-
await utils.delay(1000);
|
|
1437
|
-
this.markForCheck();
|
|
1438
|
-
}
|
|
1439
|
-
async initState() {
|
|
1440
|
-
var _a, _b, _c;
|
|
1441
|
-
this.onClearSearch();
|
|
1442
|
-
await listState.setValue({
|
|
1443
|
-
id: this._id,
|
|
1444
|
-
dataSource: this.data && generate.snq(() => (typeof this.data == "string" ? JSON.parse(this.data) : this.data), []),
|
|
1445
|
-
options: this,
|
|
1446
|
-
});
|
|
1447
|
-
const { totalRoots, totalItems } = listState.getValue(this._id);
|
|
1448
|
-
this.totalData = (totalItems === null || totalItems === void 0 ? void 0 : totalItems.total) || 0;
|
|
1449
|
-
this.totalRootData = totalRoots || 0;
|
|
1450
|
-
this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
|
|
1451
|
-
if (!this.checkboxes) {
|
|
1452
|
-
this.inputText = generate.Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
|
|
1453
|
-
}
|
|
1454
|
-
// checkli olan subparentların indeterminate kontrolü için
|
|
1455
|
-
if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
1456
|
-
const checkedIDs = [];
|
|
1457
|
-
this.value.forEach(item => {
|
|
1458
|
-
if (!item.items || item.items.length === 0) {
|
|
1459
|
-
checkedIDs.push(item.id);
|
|
1460
|
-
}
|
|
1461
|
-
});
|
|
1462
|
-
await this.addChecked(checkedIDs, false, false);
|
|
1463
|
-
}
|
|
1464
|
-
await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
|
|
1465
|
-
await this.markForCheck();
|
|
1466
|
-
}
|
|
1467
|
-
async markForCheck() {
|
|
1468
|
-
await utils.delay(10);
|
|
1469
|
-
this.tick = generate.Generate.UID();
|
|
1470
|
-
}
|
|
1471
|
-
getOptions() {
|
|
1472
|
-
return generate.snq(() => listState.getValue(this._id).options, {});
|
|
1473
|
-
}
|
|
1474
|
-
getItems() {
|
|
1475
|
-
if (this.isSelectedOther) {
|
|
1476
|
-
return this.returnFilterData["checkedItems"];
|
|
1477
|
-
}
|
|
1478
|
-
return generate.snq(() => listState.getData(this._id), []);
|
|
1479
|
-
}
|
|
1480
|
-
getLimitedItems(ids) {
|
|
1481
|
-
return generate.snq(() => listState.getDataPagination(this._id, this.searchResultLimit || this.limit, ids), []);
|
|
1482
|
-
}
|
|
1483
|
-
openGroup(parentId) {
|
|
1484
|
-
listState.openGroup(this._id, parentId);
|
|
1485
|
-
this.markForCheck();
|
|
1486
|
-
}
|
|
1487
|
-
focusItem(e) {
|
|
1488
|
-
if (e.target.classList.contains("bcm-list__item")) {
|
|
1489
|
-
const item = e.target;
|
|
1490
|
-
const list = document.getElementById(`bcm-list-${this._id}`);
|
|
1491
|
-
if (list) {
|
|
1492
|
-
const items = list.querySelectorAll(".bcm-list__item");
|
|
1493
|
-
if (items.length > 0) {
|
|
1494
|
-
const selectedItem = list.querySelector(".bcm-list__item.focused");
|
|
1495
|
-
if (selectedItem) {
|
|
1496
|
-
selectedItem.classList.remove("focused");
|
|
1497
|
-
}
|
|
1498
|
-
item.classList.add("focused");
|
|
1499
|
-
}
|
|
1500
|
-
}
|
|
1501
|
-
}
|
|
1502
|
-
}
|
|
1503
|
-
async selectedItem(itemId) {
|
|
1504
|
-
var _a;
|
|
1505
|
-
if (!this.checkboxes) {
|
|
1506
|
-
this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
|
|
1507
|
-
this.inputText = generate.Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
|
|
1508
|
-
this.isOpen = false;
|
|
1509
|
-
this.markForCheck();
|
|
1510
|
-
if (this.type == "autocomplete" && this.value) {
|
|
1511
|
-
// await delay(100)
|
|
1512
|
-
// this.resetCaption()
|
|
1513
|
-
const autocompleteInput = this.getAutoCompleteInput();
|
|
1514
|
-
if (autocompleteInput) {
|
|
1515
|
-
setTimeout(() => {
|
|
1516
|
-
var _a;
|
|
1517
|
-
autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || "");
|
|
1518
|
-
this.isOpen = false;
|
|
1519
|
-
}, 100);
|
|
1520
|
-
}
|
|
1521
|
-
}
|
|
1522
|
-
}
|
|
1523
|
-
return Promise.resolve(this.value);
|
|
1524
|
-
}
|
|
1525
|
-
async checkedItem(itemId) {
|
|
1526
|
-
const isCheckSelectAll = itemId === "select-all-" + this._id;
|
|
1527
|
-
if (!isCheckSelectAll) {
|
|
1528
|
-
listState.checkedItem(this._id, itemId);
|
|
1529
|
-
}
|
|
1530
|
-
else {
|
|
1531
|
-
listState.selectAll(this._id);
|
|
1532
|
-
}
|
|
1533
|
-
this.value = (await this.getCheckedList()).checkedList;
|
|
1534
|
-
this.changeVisibleCheckeds();
|
|
1535
|
-
this.markForCheck();
|
|
1536
|
-
}
|
|
1537
|
-
changeVisibleCheckeds() {
|
|
1538
|
-
const { visibledItems } = this.returnFilterData;
|
|
1539
|
-
this.returnFilterData = {
|
|
1540
|
-
visibledItems,
|
|
1541
|
-
checkedItems: (visibledItems && visibledItems.filter(item => item.checked)) || [],
|
|
1542
|
-
};
|
|
1543
|
-
}
|
|
1544
|
-
getAutoCompleteInput() {
|
|
1545
|
-
return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
|
|
1546
|
-
}
|
|
1547
|
-
dataScrollEvent(event) {
|
|
1548
|
-
let count = 0;
|
|
1549
|
-
let io = new IntersectionObserver((data) => {
|
|
1550
|
-
if (count === 0) {
|
|
1551
|
-
count++;
|
|
1552
|
-
if (data[0].isIntersecting) {
|
|
1553
|
-
this.limit += 15;
|
|
1554
|
-
this.searchResultLimit += 15;
|
|
1555
|
-
io.disconnect();
|
|
1556
|
-
io = null;
|
|
1557
|
-
}
|
|
1558
|
-
}
|
|
1559
|
-
}, this.options);
|
|
1560
|
-
io.observe(event.target.lastElementChild);
|
|
1561
|
-
}
|
|
1562
|
-
async calculateLocation() {
|
|
1563
|
-
var _a, _b;
|
|
1564
|
-
if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
|
|
1565
|
-
const list = document.getElementById(`bcm-list-${this._id}`);
|
|
1566
|
-
// list && (list.style.height = '256px') //sebebi neydi ki!
|
|
1567
|
-
var placement = this.placement;
|
|
1568
|
-
const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
|
|
1569
|
-
const targetElement = document.getElementById(targetElementId);
|
|
1570
|
-
if (list && targetElement) {
|
|
1571
|
-
popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
|
|
1572
|
-
await utils.delay(10);
|
|
1573
|
-
let pos = popoverPlacement.setPosition(placement, targetElement);
|
|
1574
|
-
let captionAreaHeight = 0;
|
|
1575
|
-
let labelAreaHeight = 0;
|
|
1576
|
-
if (this.linkedComponent) {
|
|
1577
|
-
const linked = document.getElementById(this.linkedComponent);
|
|
1578
|
-
if (linked) {
|
|
1579
|
-
if (!linked["noCaption"]) {
|
|
1580
|
-
const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".bcm-caption-area")) || linked.querySelector(".bcm-caption-area");
|
|
1581
|
-
if (captionArea) {
|
|
1582
|
-
captionAreaHeight = captionArea.offsetHeight || captionArea.clientHeight;
|
|
1583
|
-
}
|
|
1584
|
-
}
|
|
1585
|
-
const labelArea = ((_b = linked.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".bcm-label")) || linked.querySelector(".bcm-label");
|
|
1586
|
-
if (labelArea) {
|
|
1587
|
-
labelAreaHeight = labelArea.offsetHeight || labelArea.clientHeight;
|
|
1588
|
-
}
|
|
1589
|
-
}
|
|
1590
|
-
}
|
|
1591
|
-
if (this.fullWidth) {
|
|
1592
|
-
list.style.width = targetElement.offsetWidth + "px";
|
|
1593
|
-
}
|
|
1594
|
-
else {
|
|
1595
|
-
list.style.width = this.width || "auto";
|
|
1596
|
-
}
|
|
1597
|
-
if (this.height.indexOf("%") > -1) {
|
|
1598
|
-
list.style.height = numberHelper.NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + "px";
|
|
1599
|
-
}
|
|
1600
|
-
else {
|
|
1601
|
-
list.style.height = this.height;
|
|
1602
|
-
}
|
|
1603
|
-
list.style.minHeight = this.minHeight;
|
|
1604
|
-
// const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
|
|
1605
|
-
const calculatedMaxHeight = placement.split("-")[0] == "top" ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
|
|
1606
|
-
if (this.maxHeight.indexOf("%") > -1) {
|
|
1607
|
-
list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + "px";
|
|
1608
|
-
}
|
|
1609
|
-
else {
|
|
1610
|
-
list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + "px";
|
|
1611
|
-
}
|
|
1612
|
-
popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
|
|
1613
|
-
await utils.delay(10);
|
|
1614
|
-
pos = popoverPlacement.setPosition(placement, targetElement);
|
|
1615
|
-
list.style.top = (placement.split("-")[0] == "top" ? pos[0] - list.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + "px";
|
|
1616
|
-
// list.style.left = pos[1] + 'px';
|
|
1617
|
-
list.style.left = placement.split("-")[1] == "end" ? pos[1] - list.offsetWidth + "px" : pos[1] + "px";
|
|
1618
|
-
list.classList.toggle("bcm-list--top", placement.split("-")[0] == "top");
|
|
1619
|
-
this.calculatedViewport = true;
|
|
1620
|
-
}
|
|
1621
|
-
}
|
|
1622
|
-
}
|
|
1623
|
-
handleTransitionEnd(e) {
|
|
1624
|
-
const { isOpen, type } = this;
|
|
1625
|
-
const propertName = e === null || e === void 0 ? void 0 : e.propertyName;
|
|
1626
|
-
if (isOpen && type == "select" && propertName == "transform") {
|
|
1627
|
-
this.listOpen.emit();
|
|
1628
|
-
}
|
|
1629
|
-
}
|
|
1630
|
-
render() {
|
|
1631
|
-
const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
|
|
1632
|
-
const hostClasses = index.classnames("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
|
|
1633
|
-
"error": this.captionType == bcm.Bcm.Status.error,
|
|
1634
|
-
"full-width": fullWidth,
|
|
1635
|
-
"bcm-list__linked": this.linkedComponent,
|
|
1636
|
-
hidden,
|
|
1637
|
-
readonly,
|
|
1638
|
-
disabled,
|
|
1639
|
-
});
|
|
1640
|
-
const bcmListContainer = index.classnames("bcm-list__container", this.linkedComponent ? "bcm-list__type-linked-component" : `bcm-list__type-${this.type}`, {
|
|
1641
|
-
"is-open": this.isOpen && this.calculatedViewport,
|
|
1642
|
-
"is-open-animation": this.isOpenAnimation,
|
|
1643
|
-
"error": this.captionType == bcm.Bcm.Status.error,
|
|
1644
|
-
"full-width": fullWidth,
|
|
1645
|
-
hidden,
|
|
1646
|
-
readonly,
|
|
1647
|
-
disabled,
|
|
1648
|
-
});
|
|
1649
|
-
const bcmListInput = index.classnames("bcm-list__input");
|
|
1650
|
-
const openedType = this.type == "select" || this.type == "autocomplete" || this.linkedComponent;
|
|
1651
|
-
return (index$1.h(index$1.Host, { class: hostClasses, tabindex: "0", style: {
|
|
1652
|
-
"--width": fullWidth ? "100%" : this.width,
|
|
1653
|
-
"--height": openedType ? "100%" : this.height,
|
|
1654
|
-
"--max-height": openedType ? "inherit" : this.maxHeight,
|
|
1655
|
-
"--min-height": openedType ? "inherit" : this.minHeight,
|
|
1656
|
-
} }, index$1.h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (index$1.h("div", null, index$1.h("bcm-label", { tooltip: this.tooltip, size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, index$1.h("span", { class: index.classnames("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (index$1.h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), index$1.h("span", { class: index.classnames("bcm-list__input-buttons", {
|
|
1657
|
-
disabled: disabled,
|
|
1658
|
-
}) }, this.clearable && this.value && (index$1.h("div", { class: "bcm-list__input-buttons-button" }, index$1.h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), index$1.h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, index$1.h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: index.classnames(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, index$1.h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && index$1.h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), index$1.h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), index$1.h(ListTemplate, { type: this.type, highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e) }), index$1.h(captionTemplate.CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
|
|
1659
|
-
}
|
|
1660
|
-
get el() { return index$1.getElement(this); }
|
|
1661
|
-
static get watchers() { return {
|
|
1662
|
-
"_id": ["watchId"],
|
|
1663
|
-
"value": ["handleValueChange"],
|
|
1664
|
-
"returnFilterData": ["watchReturnFilterData"],
|
|
1665
|
-
"isOpen": ["handleOpen"],
|
|
1666
|
-
"data": ["dataChanged"]
|
|
1667
|
-
}; }
|
|
1668
|
-
};
|
|
1669
|
-
__decorate([
|
|
1670
|
-
isLoadDecorator.IsLoad()
|
|
1671
|
-
], BcmList.prototype, "el", void 0);
|
|
1672
|
-
__decorate([
|
|
1673
|
-
jsonParseDecarator.JsonParse("data", true)
|
|
1674
|
-
], BcmList.prototype, "dataChanged", null);
|
|
1675
|
-
BcmList.style = listCss;
|
|
1676
|
-
|
|
1677
|
-
const rcOverflowCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.rc-overflow{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%}.rc-overflow-item{transition:all 0.3s ease;padding:0 2px;display:flex;align-items:center;justify-content:center}";
|
|
1678
|
-
|
|
1679
|
-
const BcmRcOverflow = class {
|
|
1680
|
-
constructor(hostRef) {
|
|
1681
|
-
index$1.registerInstance(this, hostRef);
|
|
1682
|
-
this.selectOtherTag = index$1.createEvent(this, "bcm-select-other-tag", 7);
|
|
1683
|
-
this.selectTag = index$1.createEvent(this, "bcm-select-tag", 7);
|
|
1684
|
-
this.deleteTag = index$1.createEvent(this, "bcm-delete-tag", 7);
|
|
1685
|
-
this.renderItem = item => {
|
|
1686
|
-
return index$3.react.createElement("bcm-tooltip", {
|
|
1687
|
-
placement: "bottom",
|
|
1688
|
-
message: item.text,
|
|
1689
|
-
trigger: "hover",
|
|
1690
|
-
}, index$3.react.createElement("div", {
|
|
1691
|
-
id: item.value + "-tag",
|
|
1692
|
-
className: "bcm-tag",
|
|
1693
|
-
onClick: ({ target }) => this.onClickControl(target, item, false),
|
|
1694
|
-
}, index$3.react.createElement("span", { className: "bcm-tag__content dismissable" },
|
|
1695
|
-
// .bcm-tag__content span {
|
|
1696
|
-
// display: block;
|
|
1697
|
-
// max-width: 38px;
|
|
1698
|
-
// white-space: nowrap;
|
|
1699
|
-
// overflow: hidden;
|
|
1700
|
-
// text-overflow: ellipsis;
|
|
1701
|
-
index$3.react.createElement("div", { className: "value tw-block tw-max-w-[38px] tw-overflow-hidden tw-overflow-ellipsis tw-whitespace-nowrap" }, item.text), index$3.react.createElement("span", {
|
|
1702
|
-
className: "right close-button",
|
|
1703
|
-
}, index$3.react.createElement("bcm-icon", {
|
|
1704
|
-
icon: "fa fa-times",
|
|
1705
|
-
})))));
|
|
1706
|
-
};
|
|
1707
|
-
this.renderRest = items => {
|
|
1708
|
-
const titles = (items === null || items === void 0 ? void 0 : items.sort((a, b) => +a.ct - +b.ct).slice(0, 15).map(item => stringHelper.StringHelper.textLimitter(item.text, 40, true)).toString().split(",").join("\r\n")) + (items.length > 15 ? "\r\n..." : "");
|
|
1709
|
-
return index$3.react.createElement("bcm-tooltip", {
|
|
1710
|
-
placement: "bottom",
|
|
1711
|
-
message: titles,
|
|
1712
|
-
trigger: "hover",
|
|
1713
|
-
}, index$3.react.createElement("div", {
|
|
1714
|
-
className: "bcm-tag bcm-tag--other",
|
|
1715
|
-
onClick: ({ target }) => this.onClickControl(target, items, true),
|
|
1716
|
-
}, index$3.react.createElement("span", { className: `bcm-tag__content dismissable ${this.checked ? "checkable checked" : ""}` }, index$3.react.createElement("span", { className: "value" }, `+${items === null || items === void 0 ? void 0 : items.length}`), index$3.react.createElement("span", { className: "right close-button" }, index$3.react.createElement("bcm-icon", {
|
|
1717
|
-
icon: "fa fa-times",
|
|
1718
|
-
})))));
|
|
1719
|
-
};
|
|
1720
|
-
this._id = generate.Generate.UID();
|
|
1721
|
-
this.maxCount = 1;
|
|
1722
|
-
this.data = [];
|
|
1723
|
-
this.checked = false;
|
|
1724
|
-
}
|
|
1725
|
-
isClickDismiss(e) {
|
|
1726
|
-
return e["s-hn"] === "BCM-ICON";
|
|
1727
|
-
}
|
|
1728
|
-
onClickControl(e, item, isOtherTag = false) {
|
|
1729
|
-
const isClickClose = this.isClickDismiss(e);
|
|
1730
|
-
isClickClose && this.deleteTag.emit({ id: Array.isArray(item) ? item.map(i => i.value) : item.value }) && this.checked && (this.checked = false);
|
|
1731
|
-
!isOtherTag && this.selectTag.emit({ id: item.value }) && this.checked && (this.checked = false);
|
|
1732
|
-
if (isOtherTag && !isClickClose) {
|
|
1733
|
-
this.checked = !this.checked;
|
|
1734
|
-
this.selectOtherTag.emit({ id: item === null || item === void 0 ? void 0 : item.map(i => i.value), checked: this.checked });
|
|
1735
|
-
}
|
|
1736
|
-
}
|
|
1737
|
-
componentWillRender() {
|
|
1738
|
-
const { data, renderItem, renderRest, maxCount } = this;
|
|
1739
|
-
this.overflowInstance = index$3.react.createElement(Overflow.ForwardOverflow, {
|
|
1740
|
-
data,
|
|
1741
|
-
renderItem,
|
|
1742
|
-
renderRest,
|
|
1743
|
-
maxCount,
|
|
1744
|
-
});
|
|
1745
|
-
index$3.reactDom.render(this.overflowInstance, this.el);
|
|
1746
|
-
}
|
|
1747
|
-
get el() { return index$1.getElement(this); }
|
|
1748
|
-
};
|
|
1749
|
-
BcmRcOverflow.style = rcOverflowCss;
|
|
1750
|
-
|
|
1751
|
-
const { state } = index$2.createStore({
|
|
1752
|
-
value: new Map(),
|
|
1753
|
-
});
|
|
1754
|
-
const setValue = val => {
|
|
1755
|
-
const { id, dataSource } = val;
|
|
1756
|
-
const data = {
|
|
1757
|
-
id: generate.snq(() => id, generate.Generate.UID),
|
|
1758
|
-
dataSource: dataSource && dataSource.length > 0 && recursive(dataSource),
|
|
1759
|
-
searchIsOnlyChilds: val.searchIsOnlyChilds,
|
|
1760
|
-
};
|
|
1761
|
-
state.value.set(data.id, data);
|
|
1762
|
-
};
|
|
1763
|
-
const recursive = (data, parentId) => {
|
|
1764
|
-
let recData = [];
|
|
1765
|
-
if (data) {
|
|
1766
|
-
recData = data.map(item => (Object.assign(Object.assign(Object.assign({}, item), { parentId: generate.snq(() => parentId, null) }), (item.items && item.items.length > 0 && { items: generate.snq(() => recursive(item.items, item.id), []) }))));
|
|
1767
|
-
}
|
|
1768
|
-
return recData;
|
|
1769
|
-
};
|
|
1770
|
-
const removeValue = _id => {
|
|
1771
|
-
state.value.delete(_id);
|
|
1772
|
-
};
|
|
1773
|
-
const getValue = id => generate.snq(() => state.value.get(id), {});
|
|
1774
|
-
const getDataPagination = (id, limit = 3) => {
|
|
1775
|
-
let data = [];
|
|
1776
|
-
const value = getValue(id);
|
|
1777
|
-
if (value) {
|
|
1778
|
-
const { dataSource } = value;
|
|
1779
|
-
data = dataSource.slice(0, limit);
|
|
1780
|
-
}
|
|
1781
|
-
return data;
|
|
1782
|
-
};
|
|
1783
|
-
// //search treeview data by text
|
|
1784
|
-
// const searchData = (id, search, items?) => {
|
|
1785
|
-
// let dataSource
|
|
1786
|
-
// if (items && items.length > 0) {
|
|
1787
|
-
// dataSource = items
|
|
1788
|
-
// } else {
|
|
1789
|
-
// const value = getValue(id);
|
|
1790
|
-
// dataSource = value.dataSource;
|
|
1791
|
-
// }
|
|
1792
|
-
// let result = []
|
|
1793
|
-
// if (dataSource) {
|
|
1794
|
-
// dataSource.forEach(child => {
|
|
1795
|
-
// if (child.text.toLowerCase().includes(search.toLowerCase())) {
|
|
1796
|
-
// result.push(child)
|
|
1797
|
-
// }
|
|
1798
|
-
// result = result.concat(searchData(id, search, child.items))
|
|
1799
|
-
// })
|
|
1800
|
-
// };
|
|
1801
|
-
// return result
|
|
1802
|
-
// };
|
|
1803
|
-
//nested search
|
|
1804
|
-
const searchData = (id, searchText, items) => {
|
|
1805
|
-
let dataSource;
|
|
1806
|
-
if (items && items.length > 0) {
|
|
1807
|
-
dataSource = items;
|
|
1808
|
-
}
|
|
1809
|
-
else {
|
|
1810
|
-
const value = getValue(id);
|
|
1811
|
-
dataSource = value.dataSource;
|
|
1812
|
-
}
|
|
1813
|
-
let results = [];
|
|
1814
|
-
if (dataSource) {
|
|
1815
|
-
results.push(nestedSearch(id, dataSource, searchText));
|
|
1816
|
-
//return with their parents
|
|
1817
|
-
// dataSource.forEach(child => {
|
|
1818
|
-
// if (child.text.toLowerCase().includes(searchText.toLowerCase())) {
|
|
1819
|
-
// results.push(child)
|
|
1820
|
-
// } else if (child.items && child.items.length > 0) {
|
|
1821
|
-
// child.items = nestedSearch(child.items, searchText)
|
|
1822
|
-
// if (child.items.length > 0) {
|
|
1823
|
-
// results.push(child)
|
|
1824
|
-
// }
|
|
1825
|
-
// }
|
|
1826
|
-
// })
|
|
1827
|
-
}
|
|
1828
|
-
return {
|
|
1829
|
-
result: generate.snq(() => generate.Generate.flatArray(results[0].result), []),
|
|
1830
|
-
matching: generate.snq(() => results[0].matching, []),
|
|
1831
|
-
parentIndex: generate.snq(() => results[0].parentIndex, []),
|
|
1832
|
-
nestedResult: generate.snq(() => results[0].nestedResult, []),
|
|
1833
|
-
};
|
|
1834
|
-
};
|
|
1835
|
-
const nestedSearch = (id, items, searchText) => {
|
|
1836
|
-
let matching = [];
|
|
1837
|
-
let parentIndex = [];
|
|
1838
|
-
let result = [];
|
|
1839
|
-
let nestedResult = [];
|
|
1840
|
-
const { searchIsOnlyChilds } = getValue(id);
|
|
1841
|
-
if (items && items.length > 0) {
|
|
1842
|
-
items.forEach(child => {
|
|
1843
|
-
let isChild = searchIsOnlyChilds && child.parentId !== null;
|
|
1844
|
-
let isMatching = (child.text && stringHelper.StringHelper.slugify(child.text).includes(stringHelper.StringHelper.slugify(searchText))) ||
|
|
1845
|
-
(child.keywords && stringHelper.StringHelper.slugify(child.keywords).includes(stringHelper.StringHelper.slugify(searchText)));
|
|
1846
|
-
if (isMatching && (!searchIsOnlyChilds || (searchIsOnlyChilds && isChild))) {
|
|
1847
|
-
result.push(child.id);
|
|
1848
|
-
matching.push(child.id);
|
|
1849
|
-
parentIndex.push(child.id);
|
|
1850
|
-
nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId });
|
|
1851
|
-
if (child.items && child.items.length > 0) {
|
|
1852
|
-
const found = nestedSearch(id, child.items, searchText);
|
|
1853
|
-
if (found.matching.length > 0) {
|
|
1854
|
-
found.matching.forEach(chi => {
|
|
1855
|
-
matching.push(chi);
|
|
1856
|
-
});
|
|
1857
|
-
}
|
|
1858
|
-
}
|
|
1859
|
-
}
|
|
1860
|
-
else if (child.items && child.items.length > 0) {
|
|
1861
|
-
const found = nestedSearch(id, child.items, searchText);
|
|
1862
|
-
if (found.result.length > 0) {
|
|
1863
|
-
found.result.forEach(chi => {
|
|
1864
|
-
result.push(chi);
|
|
1865
|
-
});
|
|
1866
|
-
result.push(child.id);
|
|
1867
|
-
parentIndex.push(child.id);
|
|
1868
|
-
nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId, items: found.nestedResult });
|
|
1869
|
-
}
|
|
1870
|
-
if (found.matching.length > 0) {
|
|
1871
|
-
matching.push(...found.matching);
|
|
1872
|
-
}
|
|
1873
|
-
}
|
|
1874
|
-
});
|
|
1875
|
-
}
|
|
1876
|
-
return { result, matching, parentIndex, nestedResult };
|
|
1877
|
-
};
|
|
1878
|
-
const searchState = {
|
|
1879
|
-
setValue,
|
|
1880
|
-
removeValue,
|
|
1881
|
-
getValue,
|
|
1882
|
-
getDataPagination,
|
|
1883
|
-
searchData,
|
|
1884
|
-
};
|
|
1885
|
-
|
|
1886
|
-
const searchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
|
|
1887
|
-
|
|
1888
|
-
const BcmSearch = class {
|
|
1889
|
-
constructor(hostRef) {
|
|
1890
|
-
index$1.registerInstance(this, hostRef);
|
|
1891
|
-
this.bcmOnSearch = index$1.createEvent(this, "bcm-on-search", 7);
|
|
1892
|
-
this.bcmOnSearchClear = index$1.createEvent(this, "bcm-on-search-clear", 7);
|
|
1893
|
-
this.debounceHandler = generate.Generate.debounceInput((event) => this.onSearchValue(event, this), 300, false, () => {
|
|
1894
|
-
var _a, _b;
|
|
1895
|
-
this.isActiveClearable = ((_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.clearable;
|
|
1896
|
-
});
|
|
1897
|
-
this._id = generate.Generate.UID();
|
|
1898
|
-
this.placeholder = "Search";
|
|
1899
|
-
this.disabled = false;
|
|
1900
|
-
this.readonly = false;
|
|
1901
|
-
this.clearable = true;
|
|
1902
|
-
this.size = bcm.Bcm$1.Size.medium;
|
|
1903
|
-
this.limit = 10;
|
|
1904
|
-
this.searchIsOnlyChilds = false;
|
|
1905
|
-
this.minSearchLength = 2;
|
|
1906
|
-
this.data = [];
|
|
1907
|
-
this.tick = {};
|
|
1908
|
-
this.isActiveClearable = false;
|
|
1909
|
-
}
|
|
1910
|
-
async componentDidLoad() {
|
|
1911
|
-
await this.initState();
|
|
1912
|
-
}
|
|
1913
|
-
async dataChanged(newValue, oldValue) {
|
|
1914
|
-
// console.log('data changed', newValue, oldValue)
|
|
1915
|
-
if (newValue !== oldValue) {
|
|
1916
|
-
await this.initState();
|
|
1917
|
-
}
|
|
1918
|
-
}
|
|
1919
|
-
async initState() {
|
|
1920
|
-
await searchState.setValue({
|
|
1921
|
-
id: this._id + "-input",
|
|
1922
|
-
dataSource: this.data,
|
|
1923
|
-
searchIsOnlyChilds: this.searchIsOnlyChilds,
|
|
1924
|
-
});
|
|
1925
|
-
await this.markForCheck();
|
|
1926
|
-
}
|
|
1927
|
-
markForCheck() {
|
|
1928
|
-
this.tick = generate.Generate.UID();
|
|
1929
|
-
}
|
|
1930
|
-
handleInput() {
|
|
1931
|
-
// console.log("aheyya")
|
|
1932
|
-
}
|
|
1933
|
-
async onBcmFocus() {
|
|
1934
|
-
this.inputElement.focus();
|
|
1935
|
-
}
|
|
1936
|
-
async onBcmBlur() {
|
|
1937
|
-
this.inputElement.blur();
|
|
1938
|
-
}
|
|
1939
|
-
async onBcmSelect() {
|
|
1940
|
-
this.inputElement.select();
|
|
1941
|
-
}
|
|
1942
|
-
async setValue(newValue) {
|
|
1943
|
-
this.inputElement.value = newValue;
|
|
1944
|
-
}
|
|
1945
|
-
handleFocus() { }
|
|
1946
|
-
handleBlur() { }
|
|
1947
|
-
handleChange() { }
|
|
1948
|
-
async handleClear(eventEmit = true) {
|
|
1949
|
-
this.inputElement.value = '';
|
|
1950
|
-
const { value, id } = this.inputElement;
|
|
1951
|
-
searchState.searchData(id, value);
|
|
1952
|
-
this.isActiveClearable = false;
|
|
1953
|
-
this.bcmOnSearch.emit({ result: null, value: null, matching: null, parentIndex: null });
|
|
1954
|
-
this.bcmOnSearchClear.emit(eventEmit);
|
|
1955
|
-
await utils.delay(10);
|
|
1956
|
-
return Promise.resolve();
|
|
1957
|
-
}
|
|
1958
|
-
onSearchValue(event, instance) {
|
|
1959
|
-
const { value, id } = event.target;
|
|
1960
|
-
const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= this.minSearchLength ? searchState.searchData(id, value, null) : null;
|
|
1961
|
-
const { bcmOnSearch, inputElement } = instance;
|
|
1962
|
-
bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
|
|
1963
|
-
}
|
|
1964
|
-
render() {
|
|
1965
|
-
const { _id, placeholder, disabled, readonly } = this;
|
|
1966
|
-
return index$1.h(index$1.Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, index$1.h(inputTemplate.InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
|
|
1967
|
-
}
|
|
1968
|
-
get el() { return index$1.getElement(this); }
|
|
1969
|
-
static get watchers() { return {
|
|
1970
|
-
"data": ["dataChanged"]
|
|
1971
|
-
}; }
|
|
1972
|
-
};
|
|
1973
|
-
BcmSearch.style = searchCss;
|
|
1974
|
-
|
|
1975
|
-
exports.bcm_list = BcmList;
|
|
1976
|
-
exports.bcm_rc_overflow = BcmRcOverflow;
|
|
1977
|
-
exports.bcm_search = BcmSearch;
|