@sankhyalabs/sankhyablocks 1.1.28 → 1.3.1
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/LICENSE +21 -21
- package/README.md +75 -75
- package/dist/cjs/index-4720dab8.js +735 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/sankhyablocks.cjs.js +2 -2
- package/dist/cjs/snk-application.cjs.entry.js +668 -653
- package/dist/collection/collection-manifest.json +5 -34
- package/dist/collection/components/snk-application/snk-application.css +5 -5
- package/dist/collection/components/snk-application/snk-application.js +492 -492
- package/dist/collection/index.js +1 -1
- package/dist/collection/lib/http/data-fetcher/DataFetcher.js +158 -158
- package/dist/collection/lib/http/data-fetcher/fetchers/application-config-fetcher.js +23 -23
- package/dist/collection/lib/http/data-fetcher/fetchers/dataunit-fetcher.js +188 -188
- package/dist/collection/lib/http/data-fetcher/fetchers/form-config-fetcher.js +25 -25
- package/dist/collection/lib/http/data-fetcher/fetchers/grid-config-fetcher.js +2 -2
- package/dist/collection/lib/http/data-fetcher/fetchers/parameters-fecher.js +59 -59
- package/dist/collection/lib/http/data-fetcher/fetchers/resource-fetcher.js +30 -30
- package/dist/collection/lib/http/data-fetcher/state/LoadStateManager.js +66 -66
- package/dist/collection/lib/utils/pesquisa.js +16 -16
- package/dist/collection/lib/utils/urlutils.js +23 -23
- package/dist/collection/lib/workspace/workspace.js +7 -7
- package/dist/components/snk-application.js +655 -640
- package/dist/esm/index-72d4e2e0.js +709 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/sankhyablocks.js +2 -2
- package/dist/esm/snk-application.entry.js +626 -611
- package/dist/sankhyablocks/p-5d8ddbda.entry.js +57 -0
- package/dist/sankhyablocks/p-a33afc3b.js +2 -0
- package/dist/sankhyablocks/sankhyablocks.esm.js +1 -1
- package/dist/types/components/snk-application/snk-application.d.ts +44 -44
- package/dist/types/index.d.ts +1 -1
- package/dist/types/lib/http/data-fetcher/DataFetcher.d.ts +15 -15
- package/dist/types/lib/http/data-fetcher/fetchers/application-config-fetcher.d.ts +6 -6
- package/dist/types/lib/http/data-fetcher/fetchers/dataunit-fetcher.d.ts +12 -12
- package/dist/types/lib/http/data-fetcher/fetchers/form-config-fetcher.d.ts +5 -5
- package/dist/types/lib/http/data-fetcher/fetchers/grid-config-fetcher.d.ts +2 -2
- package/dist/types/lib/http/data-fetcher/fetchers/parameters-fecher.d.ts +13 -13
- package/dist/types/lib/http/data-fetcher/fetchers/resource-fetcher.d.ts +6 -6
- package/dist/types/lib/http/data-fetcher/state/LoadStateManager.d.ts +23 -23
- package/dist/types/lib/utils/pesquisa.d.ts +2 -2
- package/dist/types/lib/utils/urlutils.d.ts +4 -4
- package/dist/types/lib/workspace/workspace.d.ts +4 -4
- package/package.json +63 -52
- package/react/.keepfolder +1 -0
- package/react/components.d.ts +3 -32
- package/react/components.js +5 -34
- package/react/components.js.map +1 -1
- package/react/react-component-lib/createComponent.d.ts +10 -10
- package/react/react-component-lib/createComponent.js +58 -74
- package/react/react-component-lib/createComponent.js.map +1 -1
- package/react/react-component-lib/createOverlayComponent.d.ts +20 -21
- package/react/react-component-lib/createOverlayComponent.js +88 -108
- package/react/react-component-lib/createOverlayComponent.js.map +1 -1
- package/react/react-component-lib/index.d.ts +2 -2
- package/react/react-component-lib/index.js +2 -2
- package/react/react-component-lib/interfaces.d.ts +29 -29
- package/react/react-component-lib/utils/attachProps.d.ts +12 -12
- package/react/react-component-lib/utils/attachProps.js +95 -97
- package/react/react-component-lib/utils/attachProps.js.map +1 -1
- package/react/react-component-lib/utils/case.d.ts +2 -2
- package/react/react-component-lib/utils/case.js +6 -6
- package/react/react-component-lib/utils/dev.d.ts +2 -2
- package/react/react-component-lib/utils/dev.js +12 -12
- package/react/react-component-lib/utils/index.d.ts +7 -10
- package/react/react-component-lib/utils/index.js +20 -33
- package/react/react-component-lib/utils/index.js.map +1 -1
- package/dist/cjs/ApplicationUtils-05b74ee9.js +0 -39
- package/dist/cjs/AssetsUtils-7e3c38f9.js +0 -24
- package/dist/cjs/CSSVarsUtils-75ca9c64.js +0 -19
- package/dist/cjs/_commonjsHelpers-537d719a.js +0 -20
- package/dist/cjs/ez-action-chip.cjs.entry.js +0 -27
- package/dist/cjs/ez-application.cjs.entry.js +0 -26
- package/dist/cjs/ez-button_4.cjs.entry.js +0 -660
- package/dist/cjs/ez-calendar.cjs.entry.js +0 -223
- package/dist/cjs/ez-collapsible-box.cjs.entry.js +0 -47
- package/dist/cjs/ez-combo-box.cjs.entry.js +0 -278
- package/dist/cjs/ez-date-input.cjs.entry.js +0 -102
- package/dist/cjs/ez-date-time-input.cjs.entry.js +0 -145
- package/dist/cjs/ez-dialog.cjs.entry.js +0 -89
- package/dist/cjs/ez-form.cjs.entry.js +0 -785
- package/dist/cjs/ez-grid.cjs.entry.js +0 -110485
- package/dist/cjs/ez-icon.cjs.entry.js +0 -41
- package/dist/cjs/ez-label-chip.cjs.entry.js +0 -104
- package/dist/cjs/ez-modal_2.cjs.entry.js +0 -316
- package/dist/cjs/ez-number-input.cjs.entry.js +0 -86
- package/dist/cjs/ez-popover.cjs.entry.js +0 -120
- package/dist/cjs/ez-popup.cjs.entry.js +0 -48
- package/dist/cjs/ez-search.cjs.entry.js +0 -64
- package/dist/cjs/ez-tabselector.cjs.entry.js +0 -198
- package/dist/cjs/ez-text-area.cjs.entry.js +0 -114
- package/dist/cjs/ez-text-input.cjs.entry.js +0 -201
- package/dist/cjs/ez-time-input.cjs.entry.js +0 -118
- package/dist/cjs/ez-toast.cjs.entry.js +0 -44
- package/dist/cjs/ez-upload.cjs.entry.js +0 -356
- package/dist/cjs/index-682c98b2.js +0 -1771
- package/dist/cjs/test-du.cjs.entry.js +0 -76
- package/dist/components/ApplicationUtils.js +0 -37
- package/dist/components/AssetsUtils.js +0 -22
- package/dist/components/CSSVarsUtils.js +0 -17
- package/dist/components/_commonjsHelpers.js +0 -17
- package/dist/components/ez-action-chip.js +0 -44
- package/dist/components/ez-application.js +0 -39
- package/dist/components/ez-button.js +0 -6
- package/dist/components/ez-button2.js +0 -105
- package/dist/components/ez-calendar.js +0 -6
- package/dist/components/ez-calendar2.js +0 -242
- package/dist/components/ez-check.js +0 -6
- package/dist/components/ez-check2.js +0 -94
- package/dist/components/ez-collapsible-box.js +0 -67
- package/dist/components/ez-combo-box.js +0 -6
- package/dist/components/ez-combo-box2.js +0 -311
- package/dist/components/ez-date-input.js +0 -135
- package/dist/components/ez-date-time-input.js +0 -179
- package/dist/components/ez-dialog.js +0 -124
- package/dist/components/ez-form.js +0 -6
- package/dist/components/ez-form2.js +0 -807
- package/dist/components/ez-grid.js +0 -110576
- package/dist/components/ez-icon.js +0 -6
- package/dist/components/ez-icon2.js +0 -56
- package/dist/components/ez-label-chip.js +0 -125
- package/dist/components/ez-list.js +0 -6
- package/dist/components/ez-list2.js +0 -523
- package/dist/components/ez-modal.js +0 -6
- package/dist/components/ez-modal2.js +0 -82
- package/dist/components/ez-number-input.js +0 -115
- package/dist/components/ez-popover.js +0 -145
- package/dist/components/ez-popup.js +0 -67
- package/dist/components/ez-search.js +0 -100
- package/dist/components/ez-tabselector.js +0 -6
- package/dist/components/ez-tabselector2.js +0 -213
- package/dist/components/ez-text-area.js +0 -137
- package/dist/components/ez-text-input.js +0 -6
- package/dist/components/ez-text-input2.js +0 -223
- package/dist/components/ez-time-input.js +0 -153
- package/dist/components/ez-toast.js +0 -64
- package/dist/components/ez-upload.js +0 -382
- package/dist/components/grid-config.js +0 -6
- package/dist/components/grid-config2.js +0 -318
- package/dist/components/select-box.js +0 -6
- package/dist/components/select-box2.js +0 -47
- package/dist/components/test-du.js +0 -101
- package/dist/esm/ApplicationUtils-e0b6d857.js +0 -37
- package/dist/esm/AssetsUtils-6e6624dc.js +0 -22
- package/dist/esm/CSSVarsUtils-0787c3f3.js +0 -17
- package/dist/esm/_commonjsHelpers-9943807e.js +0 -17
- package/dist/esm/ez-action-chip.entry.js +0 -23
- package/dist/esm/ez-application.entry.js +0 -22
- package/dist/esm/ez-button_4.entry.js +0 -653
- package/dist/esm/ez-calendar.entry.js +0 -219
- package/dist/esm/ez-collapsible-box.entry.js +0 -43
- package/dist/esm/ez-combo-box.entry.js +0 -274
- package/dist/esm/ez-date-input.entry.js +0 -98
- package/dist/esm/ez-date-time-input.entry.js +0 -141
- package/dist/esm/ez-dialog.entry.js +0 -85
- package/dist/esm/ez-form.entry.js +0 -781
- package/dist/esm/ez-grid.entry.js +0 -110481
- package/dist/esm/ez-icon.entry.js +0 -37
- package/dist/esm/ez-label-chip.entry.js +0 -100
- package/dist/esm/ez-modal_2.entry.js +0 -311
- package/dist/esm/ez-number-input.entry.js +0 -82
- package/dist/esm/ez-popover.entry.js +0 -116
- package/dist/esm/ez-popup.entry.js +0 -44
- package/dist/esm/ez-search.entry.js +0 -60
- package/dist/esm/ez-tabselector.entry.js +0 -194
- package/dist/esm/ez-text-area.entry.js +0 -110
- package/dist/esm/ez-text-input.entry.js +0 -197
- package/dist/esm/ez-time-input.entry.js +0 -114
- package/dist/esm/ez-toast.entry.js +0 -40
- package/dist/esm/ez-upload.entry.js +0 -352
- package/dist/esm/index-35088a3f.js +0 -1740
- package/dist/esm/test-du.entry.js +0 -72
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-action-chip/ez-action-chip.css +0 -67
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-application/ez-application.css +0 -3
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-button/ez-button.css +0 -180
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-calendar/ez-calendar.css +0 -319
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-check/ez-check.css +0 -327
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +0 -162
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-combo-box/ez-combo-box.css +0 -217
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-date-input/ez-date-input.css +0 -49
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-date-time-input/ez-date-time-input.css +0 -44
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-dialog/ez-dialog.css +0 -527
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-form/ez-form.css +0 -5
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-grid/ez-grid.css +0 -31
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.css +0 -129
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-grid/subcomponents/select-box/select-box.css +0 -10
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-icon/ez-icon.css +0 -176
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-label-chip/ez-label-chip.css +0 -139
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-list/ez-list.css +0 -335
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-modal/ez-modal.css +0 -358
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-number-input/ez-number-input.css +0 -4
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-popover/ez-popover.css +0 -44
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-popup/ez-popup.css +0 -405
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-search/ez-search.css +0 -3
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-tabselector/ez-tabselector.css +0 -138
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-text-area/ez-text-area.css +0 -165
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-text-input/ez-text-input.css +0 -196
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-time-input/ez-time-input.css +0 -10
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-toast/ez-toast.css +0 -127
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-upload/ez-upload.css +0 -568
- package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/test-du/test-du.css +0 -3
- package/dist/sankhyablocks/p-0183d259.entry.js +0 -1
- package/dist/sankhyablocks/p-01f23a70.entry.js +0 -1
- package/dist/sankhyablocks/p-07c32f68.entry.js +0 -1
- package/dist/sankhyablocks/p-0f90499d.entry.js +0 -1
- package/dist/sankhyablocks/p-105724a3.entry.js +0 -1
- package/dist/sankhyablocks/p-112455b1.js +0 -1
- package/dist/sankhyablocks/p-2ac02d48.entry.js +0 -1
- package/dist/sankhyablocks/p-35364a97.entry.js +0 -1
- package/dist/sankhyablocks/p-3f6aa9a7.entry.js +0 -1
- package/dist/sankhyablocks/p-4811bc0a.entry.js +0 -369
- package/dist/sankhyablocks/p-5f9af495.entry.js +0 -1
- package/dist/sankhyablocks/p-60967cf0.js +0 -1
- package/dist/sankhyablocks/p-70ad6c16.entry.js +0 -1
- package/dist/sankhyablocks/p-710bfffe.entry.js +0 -1
- package/dist/sankhyablocks/p-73397a0f.entry.js +0 -57
- package/dist/sankhyablocks/p-811b4b9d.js +0 -1
- package/dist/sankhyablocks/p-813fe4f7.js +0 -1
- package/dist/sankhyablocks/p-85a9446b.js +0 -2
- package/dist/sankhyablocks/p-89a1100f.entry.js +0 -1
- package/dist/sankhyablocks/p-8b543003.entry.js +0 -1
- package/dist/sankhyablocks/p-9750632b.entry.js +0 -1
- package/dist/sankhyablocks/p-a96272f7.entry.js +0 -1
- package/dist/sankhyablocks/p-ac8842e5.entry.js +0 -1
- package/dist/sankhyablocks/p-ba64cc41.entry.js +0 -1
- package/dist/sankhyablocks/p-c1ede043.entry.js +0 -1
- package/dist/sankhyablocks/p-d90ebb85.entry.js +0 -1
- package/dist/sankhyablocks/p-e5355a29.entry.js +0 -1
- package/dist/sankhyablocks/p-ef04b633.entry.js +0 -1
- package/dist/sankhyablocks/p-f6db07fb.entry.js +0 -1
- package/dist/sankhyablocks/p-f80cabc7.entry.js +0 -1
- package/dist/sankhyablocks/p-fcd9bd92.entry.js +0 -1
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, f as forceUpdate, h } from './index-35088a3f.js';
|
|
2
|
-
import { FloatingManager } from '@sankhyalabs/core';
|
|
3
|
-
|
|
4
|
-
const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px) var(--space--small, 6px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-container--z-index:var(--more-visible, 2);--ez-calendar__header-line--stroke:1px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--ez-calendar__nav-btn--previous-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--ez-calendar__nav-btn--next-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--ez-calendar__cell--margin:0px 1.5px;--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:1.5px 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--primary, #E2F4EF);--ez-calendar__cell--over--color:var(--color--primary-300, #008561);--ez-calendar__cell--outset--color:var(--color--disable-primary, #E5EAF0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--primary-300, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar__container{display:flex;z-index:var(--more-visible, 2)}.calendar{z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-calendar__body--background-color);padding:var(--ez-calendar__body--padding);border-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__header{display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color)}.calendar__btn-next,.calendar__btn-previous{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-webkit-mask-image:var(--ez-calendar__nav-btn--next-image);mask-image:var(--ez-calendar__nav-btn--next-image)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--extra-small, 10px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);padding:var(--ez-calendar__cell--padding);margin:var(--ez-calendar__cell--margin);min-width:var(--ez-calendar__cell--width);border-radius:var(--ez-calendar__cell--border-radius)}.calendar__cell:hover{background-color:var(--ez-calendar__cell--over--background-color);color:var(--ez-calendar__cell--over--color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);padding:0px;font-family:var(--ez-calendar--font-family);text-shadow:var(--ez-calendar--text-shadow);color:var(--ez-calendar__btn-today--color);border-radius:var(--ez-calendar__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendar-time{margin-left:-10px;display:flex;flex-direction:column;padding:12px 0px 0px 10px;background-color:var(--ez-calendar__time--background-color);border-top-right-radius:var(--ez-calendar__body--border-radius);border-bottom-right-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__column{height:136px;padding:0px;margin:0px;overflow:auto}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.separatorTime{color:#A2ABB9;padding:0px 1px;line-height:16px;font-size:17px;font-weight:normal}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}.calendar__column .calendar__cell{margin:0px;padding:1.5px 1.5px}";
|
|
5
|
-
|
|
6
|
-
const EzCalendar = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.ezChange = createEvent(this, "ezChange", 7);
|
|
10
|
-
this._firstRender = true;
|
|
11
|
-
this._todayLabel = "Hoje";
|
|
12
|
-
this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
|
|
13
|
-
this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
|
|
14
|
-
this._hoursLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
|
|
15
|
-
this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
|
|
16
|
-
/**
|
|
17
|
-
* A data selecionada no calendário
|
|
18
|
-
*/
|
|
19
|
-
this.value = new Date();
|
|
20
|
-
/**
|
|
21
|
-
* No modo floating o calendário só se tornará visível
|
|
22
|
-
* quando o método show() for acionado.
|
|
23
|
-
*/
|
|
24
|
-
this.floating = false;
|
|
25
|
-
/**
|
|
26
|
-
* Exibe ou não as horas e minutos no calendario
|
|
27
|
-
*/
|
|
28
|
-
this.time = false;
|
|
29
|
-
/**
|
|
30
|
-
* Exibe ou não os segundos no calendario
|
|
31
|
-
*/
|
|
32
|
-
this.showSeconds = false;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* Usado no modo floating. Faz com que o componente seja exibido.
|
|
36
|
-
* É possível determinar ajustes de posicionamento através dos parâmetros
|
|
37
|
-
* top, left, bottom e right. Esses parâmetros devem ser informados como
|
|
38
|
-
* strings no formato css.
|
|
39
|
-
*/
|
|
40
|
-
async show(top, left, bottom, right) {
|
|
41
|
-
if (this.floating) {
|
|
42
|
-
this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
|
|
43
|
-
window.requestAnimationFrame(() => {
|
|
44
|
-
this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
45
|
-
});
|
|
46
|
-
this.scroll();
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
|
|
51
|
-
*/
|
|
52
|
-
async fitVertical(topOffset, bottomOffset) {
|
|
53
|
-
const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
|
|
54
|
-
const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
|
|
55
|
-
if (availableBottom) {
|
|
56
|
-
this.show(topOffset + "px", undefined, "unset");
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
this.show("unset", undefined, bottomOffset + "px");
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
/**
|
|
63
|
-
* Usado no modo floating. Faz com que o componente seja ocultado.
|
|
64
|
-
*/
|
|
65
|
-
async hide() {
|
|
66
|
-
if (this._floatingID !== undefined) {
|
|
67
|
-
FloatingManager.close(this._floatingID);
|
|
68
|
-
this._floatingID = undefined;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
valueChanged() {
|
|
72
|
-
if (this.value) {
|
|
73
|
-
this._currentPosition.setTime(this.value.getTime());
|
|
74
|
-
this._currentPosition.setDate(1);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
getMonthLabel() {
|
|
78
|
-
return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
|
|
79
|
-
}
|
|
80
|
-
isSelectedDate(d) {
|
|
81
|
-
if (this.value) {
|
|
82
|
-
return this.value.getDate() == d.getDate() && this.value.getMonth() == d.getMonth() && this.value.getFullYear() == d.getFullYear();
|
|
83
|
-
}
|
|
84
|
-
return false;
|
|
85
|
-
}
|
|
86
|
-
changeMonth(offset) {
|
|
87
|
-
this._currentPosition.setMonth(this._currentPosition.getMonth() + offset);
|
|
88
|
-
forceUpdate(this);
|
|
89
|
-
}
|
|
90
|
-
selectDate(d) {
|
|
91
|
-
let newDate = d;
|
|
92
|
-
if (this.value && (this.time || this.showSeconds)) {
|
|
93
|
-
newDate.setHours(this.value.getHours());
|
|
94
|
-
newDate.setMinutes(this.value.getMinutes());
|
|
95
|
-
if (this.showSeconds) {
|
|
96
|
-
newDate.setSeconds(this.value.getSeconds());
|
|
97
|
-
}
|
|
98
|
-
else {
|
|
99
|
-
newDate.setSeconds(0);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
this.value = newDate;
|
|
103
|
-
this.ezChange.emit(this.value);
|
|
104
|
-
}
|
|
105
|
-
selectHours(hour) {
|
|
106
|
-
if (!this.value) {
|
|
107
|
-
this.value = new Date();
|
|
108
|
-
}
|
|
109
|
-
this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), hour, this.value.getMinutes(), this.value.getSeconds());
|
|
110
|
-
this.ezChange.emit(this.value);
|
|
111
|
-
}
|
|
112
|
-
selectMinutes(minute) {
|
|
113
|
-
if (!this.value) {
|
|
114
|
-
this.value = new Date();
|
|
115
|
-
}
|
|
116
|
-
this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), minute, this.value.getSeconds());
|
|
117
|
-
this.ezChange.emit(this.value);
|
|
118
|
-
}
|
|
119
|
-
selectSeconds(second) {
|
|
120
|
-
if (!this.value) {
|
|
121
|
-
this.value = new Date();
|
|
122
|
-
}
|
|
123
|
-
this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), this.value.getMinutes(), second);
|
|
124
|
-
this.ezChange.emit(this.value);
|
|
125
|
-
}
|
|
126
|
-
updateScroll(element) {
|
|
127
|
-
if (element) {
|
|
128
|
-
const { scrollHeight, clientHeight, scrollTop } = element;
|
|
129
|
-
const remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
|
|
130
|
-
if (remainingScroll > 0) {
|
|
131
|
-
element.classList.add("endHidden");
|
|
132
|
-
}
|
|
133
|
-
else {
|
|
134
|
-
element.classList.remove("endHidden");
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
componentDidRender() {
|
|
139
|
-
if (this.floating && this._firstRender) {
|
|
140
|
-
this._calendarHeight = this._box.clientHeight;
|
|
141
|
-
this._box.remove();
|
|
142
|
-
this._firstRender = false;
|
|
143
|
-
}
|
|
144
|
-
this.updateScroll(this._hoursScroll);
|
|
145
|
-
this.updateScroll(this._minutesScroll);
|
|
146
|
-
this.updateScroll(this._secondsScroll);
|
|
147
|
-
}
|
|
148
|
-
componentDidLoad() {
|
|
149
|
-
this.scroll();
|
|
150
|
-
}
|
|
151
|
-
scroll() {
|
|
152
|
-
if (this.time || this.showSeconds) {
|
|
153
|
-
this._hoursScroll.scrollTop = this._hoursSelect.offsetTop - 64;
|
|
154
|
-
this._minutesScroll.scrollTop = this._minutesSelect.offsetTop - 64;
|
|
155
|
-
this.updateScroll(this._hoursScroll);
|
|
156
|
-
this.updateScroll(this._minutesScroll);
|
|
157
|
-
if (this.showSeconds) {
|
|
158
|
-
this._secondsScroll.scrollTop = this._secondsSelect.offsetTop - 64;
|
|
159
|
-
this.updateScroll(this._secondsScroll);
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
render() {
|
|
164
|
-
if (this._currentPosition == null) {
|
|
165
|
-
this._currentPosition = new Date();
|
|
166
|
-
if (this.value) {
|
|
167
|
-
this._currentPosition.setTime(this.value.getTime());
|
|
168
|
-
}
|
|
169
|
-
this._currentPosition.setDate(1);
|
|
170
|
-
}
|
|
171
|
-
const firstDate = new Date();
|
|
172
|
-
firstDate.setTime(this._currentPosition.getTime());
|
|
173
|
-
firstDate.setDate(1 - firstDate.getDay());
|
|
174
|
-
return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
|
|
175
|
-
const date = new Date();
|
|
176
|
-
date.setTime(firstDate.getTime());
|
|
177
|
-
date.setDate(date.getDate() + offset + index);
|
|
178
|
-
let classNames = "calendar__cell";
|
|
179
|
-
if (this._currentPosition.getMonth() != date.getMonth()) {
|
|
180
|
-
classNames += " calendar__cell--secondary";
|
|
181
|
-
}
|
|
182
|
-
else if (this.isSelectedDate(date)) {
|
|
183
|
-
classNames += " calendar__cell--selected";
|
|
184
|
-
}
|
|
185
|
-
return h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
|
|
186
|
-
})))), h("div", { class: "calendar__footer" }, h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))), (this.time || this.showSeconds) &&
|
|
187
|
-
h("div", { class: "calendar-time" }, h("div", { class: "calendar-time__header" }, h("div", null, "H"), h("div", { class: "separatorTime" }, ":"), h("div", null, "M"), this.showSeconds &&
|
|
188
|
-
h("div", { class: "separatorTime" }, ":"), this.showSeconds &&
|
|
189
|
-
h("div", null, "S")), h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } }, h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index) => {
|
|
190
|
-
if (index === this.value.getHours()) {
|
|
191
|
-
return (h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
|
|
192
|
-
}
|
|
193
|
-
else {
|
|
194
|
-
return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
|
|
195
|
-
}
|
|
196
|
-
})), h("div", { class: "calendar__column", ref: elem => this._minutesScroll = elem, onScroll: () => this.updateScroll(this._minutesScroll) }, this._minutosLabel.map((offset, index) => {
|
|
197
|
-
if (index === this.value.getMinutes()) {
|
|
198
|
-
return (h("div", { style: { display: 'flex' }, ref: elem => this._minutesSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
|
|
199
|
-
}
|
|
200
|
-
else {
|
|
201
|
-
return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
|
|
202
|
-
}
|
|
203
|
-
})), this.showSeconds &&
|
|
204
|
-
h("div", { class: "calendar__column", ref: elem => this._secondsScroll = elem, onScroll: () => this.updateScroll(this._secondsScroll) }, this._minutosLabel.map((offset, index) => {
|
|
205
|
-
if (index === this.value.getSeconds()) {
|
|
206
|
-
return (h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
|
|
207
|
-
}
|
|
208
|
-
else {
|
|
209
|
-
return (h("div", { class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
|
|
210
|
-
}
|
|
211
|
-
})))))));
|
|
212
|
-
}
|
|
213
|
-
static get watchers() { return {
|
|
214
|
-
"value": ["valueChanged"]
|
|
215
|
-
}; }
|
|
216
|
-
};
|
|
217
|
-
EzCalendar.style = ezCalendarCss;
|
|
218
|
-
|
|
219
|
-
export { EzCalendar as ez_calendar };
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-35088a3f.js';
|
|
2
|
-
|
|
3
|
-
const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--height:42px;--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box__btn--image--xsmall:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"12px\" width=\"7.5px\"><path d=\"M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z\"/></svg>');--ez-collapsible-box__btn--image--small:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"14px\" width=\"8.68px\"><path d=\"M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z\"/></svg>');--ez-collapsible-box__btn--image--medium:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--ez-collapsible-box__btn--image--large:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"18px\" width=\"11.25px\"><path d=\"M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z\"/></svg>');--ez-collapsible-box__btn--image--xlarge:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"20px\" width=\"12.5px\"><path d=\"M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z\"/></svg>');--ez-collapsible-box__btn--fill:var(--ez-collapsible-box--color);--ez-collapsible-box__btn--width:10px;--ez-collapsible-box__btn--height:16px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box__title{width:100%;align-self:center;display:flex;box-sizing:border-box}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;width:100%;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__label--icon-right{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__btn{outline:none;border:none;background-color:unset;cursor:pointer;padding:1px 6px}.collapsible-box__btn::after{content:'';display:flex;background-color:var(--ez-collapsible-box__btn--fill);width:var(--ez-collapsible-box__btn--width);height:var(--ez-collapsible-box__btn--height);transition:transform var(--transition);transform:rotate(90deg)}.collapsible-box__btn--xsmall::after{width:7.5px;height:12px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--xsmall);mask-image:var(--ez-collapsible-box__btn--image--xsmall)}.collapsible-box__btn--small::after{width:8.68px;height:14px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--small);mask-image:var(--ez-collapsible-box__btn--image--small)}.collapsible-box__btn--medium::after{width:10px;height:16px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--medium);mask-image:var(--ez-collapsible-box__btn--image--medium)}.collapsible-box__btn--large::after{width:11.25px;height:18px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--large);mask-image:var(--ez-collapsible-box__btn--image--large)}.collapsible-box__btn--xlarge::after{width:12.5px;height:20px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--xlarge);mask-image:var(--ez-collapsible-box__btn--image--xlarge)}.collapsible-box__btn--collapsed::after{transform:rotate(0deg)}.font--xsmall{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--xlarge{font-size:20px}";
|
|
4
|
-
|
|
5
|
-
const EzCollapsibleBox = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.ezChange = createEvent(this, "ezChange", 7);
|
|
9
|
-
/**
|
|
10
|
-
* Valor externalizado que garante a exibição ou não do componente
|
|
11
|
-
*/
|
|
12
|
-
this.value = false;
|
|
13
|
-
/**
|
|
14
|
-
* Define o tamanho do texto e do ícone do componente.
|
|
15
|
-
*/
|
|
16
|
-
this.headerSize = "small";
|
|
17
|
-
/**
|
|
18
|
-
* Define o local onde o ícone será renderizado.
|
|
19
|
-
*/
|
|
20
|
-
this.iconPlacement = "left";
|
|
21
|
-
}
|
|
22
|
-
observeValue() {
|
|
23
|
-
this.ezChange.emit(this.value);
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Esconde ou revela o conteúdo do componente
|
|
27
|
-
*/
|
|
28
|
-
async showHide() {
|
|
29
|
-
this.value = !this.value;
|
|
30
|
-
}
|
|
31
|
-
render() {
|
|
32
|
-
return (h(Host, null, this.iconPlacement == "right" ?
|
|
33
|
-
h("div", { class: "collapsible-box__title" }, h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label), h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }))
|
|
34
|
-
:
|
|
35
|
-
h("div", { class: "collapsible-box__title" }, h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }), h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label)), !this.value ? h("slot", null) : null));
|
|
36
|
-
}
|
|
37
|
-
static get watchers() { return {
|
|
38
|
-
"value": ["observeValue"]
|
|
39
|
-
}; }
|
|
40
|
-
};
|
|
41
|
-
EzCollapsibleBox.style = ezCollapsibleBoxCss;
|
|
42
|
-
|
|
43
|
-
export { EzCollapsibleBox as ez_collapsible_box };
|
|
@@ -1,274 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-35088a3f.js';
|
|
2
|
-
import { FloatingManager } from '@sankhyalabs/core';
|
|
3
|
-
import { C as CSSVarsUtils } from './CSSVarsUtils-0787c3f3.js';
|
|
4
|
-
|
|
5
|
-
const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn-search--background-color:var(--text--primary, #626e82);--ez-combo-box__btn-search-disabled--background-color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-search-hover--background-color:var(--color--primary, #4e4e4e);--ez-combo-box__btn-options--background-color:var(--text--primary, #626e82);--ez-combo-box__btn-options-disabled--background-color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-options-hover--background-color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #919191);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium));--ez-combo-box__drop-down-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"16px\"><path d=\"M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z\"/></svg>');--ez-combo-box__search-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"22px\" width=\"22px\"><path d=\"m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z\"/></svg>');--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}.list-container{position:relative;width:100%}.options-list{box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-combo-box--background-color--xlight);padding:var(--ez-combo-box--space--small);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);scroll-behavior:smooth;max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small));overflow:auto}.item{text-align:left;display:flex;justify-content:space-between;align-items:center;border-radius:var(--ez-combo-box--border-radius-small);padding:0 var(--ez-combo-box--space--small);list-style-type:none;min-height:var(--ez-combo-box__list-height)}.item--label{text-align:left;flex-basis:85%;flex-grow:1;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item--value{text-align:right;flex-basis:15%;flex-grow:0;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn-open-options{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-options:disabled{cursor:unset}.btn-open-options::after{content:'';display:flex;background-color:var(--ez-combo-box__btn-options--background-color);width:16px;height:16px;-webkit-mask-image:var(--ez-combo-box__drop-down-image);mask-image:var(--ez-combo-box__drop-down-image)}.btn-open-options:disabled:after{background-color:var(--ez-combo-box__btn-options-disabled--background-color)}.btn-open-options:enabled:hover::after{background-color:var(--ez-combo-box__btn-options-hover--background-color)}.btn-open-search{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-search:disabled{cursor:unset}.btn-open-search::after{content:'';display:flex;background-color:var(--ez-combo-box__btn-search--background-color);width:22px;height:22px;-webkit-mask-image:var(--ez-combo-box__search-image);mask-image:var(--ez-combo-box__search-image)}.btn-open-search:disabled:after{background-color:var(--ez-combo-box__btn-search-disabled--background-color)}.btn-open-search:enabled:hover::after{background-color:var(--ez-combo-box__btn-search-hover--background-color)}";
|
|
6
|
-
|
|
7
|
-
const EzComboBox = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
registerInstance(this, hostRef);
|
|
10
|
-
this.ezChange = createEvent(this, "ezChange", 7);
|
|
11
|
-
/**
|
|
12
|
-
* Deixa o campo disponível ou não para interação com usuário.
|
|
13
|
-
*/
|
|
14
|
-
this.enabled = true;
|
|
15
|
-
/**
|
|
16
|
-
* Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
|
|
17
|
-
*/
|
|
18
|
-
this.showSelectedValue = false;
|
|
19
|
-
/**
|
|
20
|
-
* Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
|
|
21
|
-
*/
|
|
22
|
-
this.showOptionValue = false;
|
|
23
|
-
/**
|
|
24
|
-
* Remove a opção vazia da lista de opções
|
|
25
|
-
*/
|
|
26
|
-
this.suppressEmptyOption = false;
|
|
27
|
-
/**
|
|
28
|
-
* Permite exibir a mensagem de erro.
|
|
29
|
-
*/
|
|
30
|
-
this.canShowError = true;
|
|
31
|
-
}
|
|
32
|
-
internalUpdate() {
|
|
33
|
-
if (this._inputElement) {
|
|
34
|
-
this._inputElement.value = this.getText();
|
|
35
|
-
}
|
|
36
|
-
this.hideOptions();
|
|
37
|
-
this._criteria = undefined;
|
|
38
|
-
this._preSelection = undefined;
|
|
39
|
-
this.updateVisibleOptions();
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* Realiza o foco no componente de seleção
|
|
43
|
-
*/
|
|
44
|
-
async setFocus() {
|
|
45
|
-
this._inputElement.setFocus();
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* Remove o foco no componente de seleção
|
|
49
|
-
*/
|
|
50
|
-
async setBlur() {
|
|
51
|
-
this._inputElement.setBlur();
|
|
52
|
-
}
|
|
53
|
-
getText() {
|
|
54
|
-
let text = "";
|
|
55
|
-
const selected = this.getSelectedOption();
|
|
56
|
-
if (selected) {
|
|
57
|
-
text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
|
|
58
|
-
}
|
|
59
|
-
return text;
|
|
60
|
-
}
|
|
61
|
-
getSelectedOption() {
|
|
62
|
-
if (typeof this.value === "string" || this.value instanceof String) {
|
|
63
|
-
return this._visibleOptions.find(o => o.value === this.value);
|
|
64
|
-
}
|
|
65
|
-
return this.value;
|
|
66
|
-
}
|
|
67
|
-
updateVisibleOptions() {
|
|
68
|
-
let opts = this._source || [];
|
|
69
|
-
if (!this.searchMode && this._criteria) {
|
|
70
|
-
const upperCriteria = this._criteria.toUpperCase();
|
|
71
|
-
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
72
|
-
}
|
|
73
|
-
if (this.suppressEmptyOption) {
|
|
74
|
-
this._visibleOptions = opts;
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
buildItem(opt, index) {
|
|
81
|
-
return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, h("span", { class: "item--label", title: opt.label }, opt.label), this.showOptionValue ? h("span", { class: "item--value", title: opt.value }, opt.value) : undefined);
|
|
82
|
-
}
|
|
83
|
-
showOptions() {
|
|
84
|
-
if (!this.enabled) {
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
88
|
-
//posição errada no futuro. Preferi fazer simples no começo,
|
|
89
|
-
//porque não quis onerar o text input com essa funcionalidade...
|
|
90
|
-
const top = (this.errorMessage || !this.canShowError) ? "0px" : "-17px";
|
|
91
|
-
this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
92
|
-
window.requestAnimationFrame(() => {
|
|
93
|
-
this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
94
|
-
});
|
|
95
|
-
}
|
|
96
|
-
hideOptions() {
|
|
97
|
-
if (this._floatingID !== undefined) {
|
|
98
|
-
FloatingManager.close(this._floatingID);
|
|
99
|
-
}
|
|
100
|
-
this._floatingID = undefined;
|
|
101
|
-
}
|
|
102
|
-
isOptionsVisible() {
|
|
103
|
-
return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
|
|
104
|
-
}
|
|
105
|
-
nextOption() {
|
|
106
|
-
if (this.searchMode && !this.isOptionsVisible()) {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
this.showOptions();
|
|
110
|
-
this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
|
|
111
|
-
this.scrollToOption(this._visibleOptions[this._preSelection], true);
|
|
112
|
-
}
|
|
113
|
-
previousOption() {
|
|
114
|
-
this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
|
|
115
|
-
this.scrollToOption(this._visibleOptions[this._preSelection], false);
|
|
116
|
-
}
|
|
117
|
-
scrollToOption(opt, down) {
|
|
118
|
-
window.requestAnimationFrame(() => {
|
|
119
|
-
const liElem = this._optionsList.querySelector(`li#item_${opt.value}`);
|
|
120
|
-
if (liElem) {
|
|
121
|
-
const parent = liElem.parentElement;
|
|
122
|
-
const parentRect = parent.getBoundingClientRect();
|
|
123
|
-
const itemRect = liElem.getBoundingClientRect();
|
|
124
|
-
if (down && itemRect.bottom > parentRect.bottom) {
|
|
125
|
-
parent.scrollTop = itemRect.top;
|
|
126
|
-
}
|
|
127
|
-
else if (!down && itemRect.top < parentRect.top) {
|
|
128
|
-
parent.scrollTop = 0;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
selectCurrentOption() {
|
|
134
|
-
if (this._preSelection !== undefined) {
|
|
135
|
-
this.selectOption(this._visibleOptions[this._preSelection]);
|
|
136
|
-
this._preSelection = undefined;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
selectOption(opt) {
|
|
140
|
-
const currentOpt = this.getSelectedOption();
|
|
141
|
-
if (currentOpt !== opt) {
|
|
142
|
-
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
|
|
143
|
-
this.value = adjustedOpt;
|
|
144
|
-
this.errorMessage = "";
|
|
145
|
-
this.ezChange.emit(adjustedOpt);
|
|
146
|
-
}
|
|
147
|
-
else {
|
|
148
|
-
this.internalUpdate();
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
updateSource(source) {
|
|
152
|
-
if (source instanceof Promise) {
|
|
153
|
-
source.then(result => this.updateSource(result));
|
|
154
|
-
this.updateVisibleOptions();
|
|
155
|
-
}
|
|
156
|
-
else {
|
|
157
|
-
this._source = source;
|
|
158
|
-
this.updateVisibleOptions();
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
loadOptions(mode, argument = "") {
|
|
162
|
-
this._criteria = argument;
|
|
163
|
-
if (this.optionLoader) {
|
|
164
|
-
this.updateSource(this.optionLoader({ mode, argument }));
|
|
165
|
-
}
|
|
166
|
-
else {
|
|
167
|
-
this.updateSource(this.options);
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
cancelPreselection() {
|
|
171
|
-
if (!this._inputElement.value && this.value) {
|
|
172
|
-
this.selectOption(undefined);
|
|
173
|
-
}
|
|
174
|
-
else {
|
|
175
|
-
this.internalUpdate();
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
//---------------------------------------------
|
|
179
|
-
// Lifecycle web component
|
|
180
|
-
//---------------------------------------------
|
|
181
|
-
componentWillLoad() {
|
|
182
|
-
if (this.options === undefined) {
|
|
183
|
-
this.options = [];
|
|
184
|
-
const optionsTags = this.el.querySelectorAll("option");
|
|
185
|
-
if (optionsTags) {
|
|
186
|
-
optionsTags.forEach(e => {
|
|
187
|
-
let label = e.innerText;
|
|
188
|
-
let value = e.getAttribute("value");
|
|
189
|
-
if (!value) {
|
|
190
|
-
value = label;
|
|
191
|
-
}
|
|
192
|
-
this.options.push({ label, value });
|
|
193
|
-
e.hidden = true;
|
|
194
|
-
});
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
if (this.searchMode) {
|
|
198
|
-
this.updateSource([]);
|
|
199
|
-
}
|
|
200
|
-
else {
|
|
201
|
-
this.loadOptions("PRELOAD");
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
componentDidRender() {
|
|
205
|
-
if (this._floatingID === undefined) {
|
|
206
|
-
this._optionsList.remove();
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
componentDidLoad() {
|
|
210
|
-
CSSVarsUtils.applyVarsTextInput(this.el, this._inputElement);
|
|
211
|
-
}
|
|
212
|
-
//---------------------------------------------
|
|
213
|
-
// Event handlers
|
|
214
|
-
//---------------------------------------------
|
|
215
|
-
onTextInputChangeHandler(event) {
|
|
216
|
-
if (!this._criteria) {
|
|
217
|
-
this._inputElement.value = event.data;
|
|
218
|
-
}
|
|
219
|
-
const argument = event.target.value;
|
|
220
|
-
this._criteria = argument;
|
|
221
|
-
if (this._criteria) {
|
|
222
|
-
if (this.searchMode) {
|
|
223
|
-
if (this._changeDeboucingTimeout) {
|
|
224
|
-
window.clearTimeout(this._changeDeboucingTimeout);
|
|
225
|
-
}
|
|
226
|
-
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
227
|
-
this.loadOptions("PREDICTIVE", argument);
|
|
228
|
-
}, 200);
|
|
229
|
-
}
|
|
230
|
-
else {
|
|
231
|
-
this.updateVisibleOptions();
|
|
232
|
-
}
|
|
233
|
-
this.showOptions();
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
onTextInputClickHandler() {
|
|
237
|
-
if (!this.searchMode) {
|
|
238
|
-
this.showOptions();
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
keyDownHandler(event) {
|
|
242
|
-
switch (event.key) {
|
|
243
|
-
case "ArrowDown":
|
|
244
|
-
this.nextOption();
|
|
245
|
-
break;
|
|
246
|
-
case "ArrowUp":
|
|
247
|
-
this.previousOption();
|
|
248
|
-
break;
|
|
249
|
-
case "Enter":
|
|
250
|
-
this.selectCurrentOption();
|
|
251
|
-
break;
|
|
252
|
-
case "Escape":
|
|
253
|
-
this.cancelPreselection();
|
|
254
|
-
break;
|
|
255
|
-
}
|
|
256
|
-
event.stopPropagation();
|
|
257
|
-
}
|
|
258
|
-
onTextInputFocusOutHandler() {
|
|
259
|
-
this.cancelPreselection();
|
|
260
|
-
}
|
|
261
|
-
render() {
|
|
262
|
-
return (h(Host, null, h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage }, this.searchMode ?
|
|
263
|
-
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
264
|
-
:
|
|
265
|
-
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
|
|
266
|
-
}
|
|
267
|
-
get el() { return getElement(this); }
|
|
268
|
-
static get watchers() { return {
|
|
269
|
-
"value": ["internalUpdate"]
|
|
270
|
-
}; }
|
|
271
|
-
};
|
|
272
|
-
EzComboBox.style = ezComboBoxCss;
|
|
273
|
-
|
|
274
|
-
export { EzComboBox as ez_combo_box };
|