@sankhyalabs/ezui 1.2.0-beta.9 → 2.0.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/cjs/{ApplicationUtils-2ac1b73e.js → ApplicationUtils-edc62c5c.js} +4 -1
- package/dist/cjs/CheckMode-ecb90b87.js +7 -0
- package/dist/cjs/{DialogType-a1e288e6.js → DialogType-aa435c52.js} +1 -0
- package/dist/cjs/ez-actions-button.cjs.entry.js +68 -17
- package/dist/cjs/ez-application.cjs.entry.js +1 -1
- package/dist/cjs/ez-button.cjs.entry.js +13 -11
- package/dist/cjs/ez-calendar.cjs.entry.js +5 -5
- package/dist/cjs/ez-card-item.cjs.entry.js +1 -1
- package/dist/cjs/ez-check.cjs.entry.js +11 -9
- package/dist/cjs/ez-chip.cjs.entry.js +17 -7
- package/dist/cjs/ez-collapsible-box.cjs.entry.js +85 -7
- package/dist/cjs/ez-combo-box.cjs.entry.js +51 -20
- package/dist/cjs/ez-date-input.cjs.entry.js +13 -18
- package/dist/cjs/ez-date-time-input.cjs.entry.js +12 -17
- package/dist/cjs/ez-dialog.cjs.entry.js +43 -8
- package/dist/cjs/ez-filter-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-form.cjs.entry.js +99 -486
- package/dist/cjs/ez-grid-config.cjs.entry.js +8 -9
- package/dist/cjs/ez-grid.cjs.entry.js +1067 -1165
- package/dist/cjs/ez-icon.cjs.entry.js +3 -3
- package/dist/cjs/ez-list.cjs.entry.js +2 -4
- package/dist/cjs/ez-loading-bar.cjs.entry.js +1 -1
- package/dist/cjs/ez-modal-container.cjs.entry.js +58 -0
- package/dist/cjs/ez-modal.cjs.entry.js +1 -1
- package/dist/cjs/ez-number-input.cjs.entry.js +4 -4
- package/dist/cjs/ez-popover.cjs.entry.js +6 -6
- package/dist/cjs/ez-popup.cjs.entry.js +8 -4
- package/dist/cjs/ez-radio-button.cjs.entry.js +3 -3
- package/dist/cjs/ez-scroller.cjs.entry.js +2 -2
- package/dist/cjs/ez-search.cjs.entry.js +1 -1
- package/dist/cjs/ez-select-box.cjs.entry.js +1 -1
- package/dist/cjs/ez-tabselector.cjs.entry.js +8 -7
- package/dist/cjs/ez-text-area.cjs.entry.js +7 -7
- package/dist/cjs/ez-text-edit.cjs.entry.js +103 -0
- package/dist/cjs/ez-text-input.cjs.entry.js +14 -4
- package/dist/cjs/ez-time-input.cjs.entry.js +7 -7
- package/dist/cjs/ez-toast.cjs.entry.js +2 -2
- package/dist/cjs/ez-upload.cjs.entry.js +4 -4
- package/dist/cjs/ez-view-stack.cjs.entry.js +10 -7
- package/dist/cjs/ezui.cjs.js +4 -112
- package/dist/cjs/loader.cjs.js +2 -18
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/ez-actions-button/ez-actions-button.css +49 -20
- package/dist/collection/components/ez-actions-button/ez-actions-button.js +219 -23
- package/dist/collection/components/ez-button/ez-button.css +0 -6
- package/dist/collection/components/ez-button/ez-button.js +11 -9
- package/dist/collection/components/ez-calendar/ez-calendar.css +17 -20
- package/dist/collection/components/ez-check/CheckMode.js +5 -0
- package/dist/collection/components/ez-check/ez-check.css +23 -24
- package/dist/collection/components/ez-check/ez-check.js +10 -8
- package/dist/collection/components/ez-chip/ez-chip.css +4 -2
- package/dist/collection/components/ez-chip/ez-chip.js +16 -6
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +16 -0
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js +226 -7
- package/dist/collection/components/ez-combo-box/ez-combo-box.css +1 -22
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +51 -20
- package/dist/collection/components/ez-date-input/ez-date-input.js +8 -13
- package/dist/collection/components/ez-date-time-input/ez-date-time-input.js +8 -13
- package/dist/collection/components/ez-dialog/DialogType.js +1 -0
- package/dist/collection/components/ez-dialog/ez-dialog.css +19 -25
- package/dist/collection/components/ez-dialog/ez-dialog.js +41 -6
- package/dist/collection/components/ez-form/DataBinder.js +1 -0
- package/dist/collection/components/ez-form/ez-form.js +22 -13
- package/dist/collection/components/ez-form/fieldbuilder/FieldBuilder.js +3 -3
- package/dist/collection/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.js +2 -1
- package/dist/collection/components/ez-form/fieldbuilder/tpl/DateInput.tpl.js +4 -4
- package/dist/collection/components/ez-form/structure/FormSheetMetadata.js +25 -15
- package/dist/collection/components/ez-grid/controller/DataUnitBridge.js +3 -0
- package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +45 -12
- package/dist/collection/components/ez-grid/controller/ag-grid/components/cellRenderer.js +31 -0
- package/dist/collection/components/ez-grid/ez-grid.js +40 -3
- package/dist/collection/components/ez-grid/subcomponents/ez-grid-config/ez-grid-config.css +38 -27
- package/dist/collection/components/ez-grid/subcomponents/ez-grid-config/ez-grid-config.js +1 -2
- package/dist/collection/components/ez-grid/subcomponents/ez-select-box/ez-select-box.js +5 -4
- package/dist/collection/components/ez-list/ez-list.css +12 -4
- package/dist/collection/components/ez-modal-container/ez-modal-container.css +38 -0
- package/dist/collection/components/ez-modal-container/ez-modal-container.js +190 -0
- package/dist/collection/components/ez-modal-container/index.js +2 -0
- package/dist/collection/components/ez-modal-container/modal-action.js +8 -0
- package/dist/collection/components/ez-modal-container/modal-button-status.js +7 -0
- package/dist/collection/components/ez-popover/ez-popover.css +1 -1
- package/dist/collection/components/ez-popup/ez-popup.css +6 -1
- package/dist/collection/components/ez-popup/ez-popup.js +26 -4
- package/dist/collection/components/ez-radio-button/ez-radio-button.css +16 -5
- package/dist/collection/components/ez-radio-button/ez-radio-button.js +1 -1
- package/dist/collection/components/ez-scroller/ez-scroller.css +2 -2
- package/dist/collection/components/ez-search/ez-search.js +6 -6
- package/dist/collection/components/ez-tabselector/ez-tabselector.css +10 -1
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +7 -3
- package/dist/collection/components/ez-text-area/ez-text-area.css +6 -3
- package/dist/collection/components/ez-text-area/ez-text-area.js +5 -5
- package/dist/collection/components/ez-text-edit/ez-text-edit.css +19 -0
- package/dist/collection/components/ez-text-edit/ez-text-edit.js +188 -0
- package/dist/collection/components/ez-text-input/ez-text-input.css +18 -2
- package/dist/collection/components/ez-text-input/ez-text-input.js +28 -0
- package/dist/collection/components/ez-toast/ez-toast.css +1 -1
- package/dist/collection/components/ez-upload/ez-upload.css +1 -1
- package/dist/collection/components/ez-view-stack/ez-view-stack.js +12 -6
- package/dist/collection/utils/ApplicationUtils.js +3 -0
- package/dist/collection/utils/index.js +1 -0
- package/dist/custom-elements/index.d.ts +12 -0
- package/dist/custom-elements/index.js +1589 -4002
- package/dist/{ezui/ApplicationUtils-30a69eb0.js → esm/ApplicationUtils-205ac4bc.js} +4 -2
- package/dist/esm/CheckMode-bdb2ec19.js +7 -0
- package/dist/esm/{DialogType-72afa679.js → DialogType-4059dc4d.js} +1 -0
- package/dist/esm/ez-actions-button.entry.js +68 -17
- package/dist/esm/ez-application.entry.js +1 -1
- package/dist/esm/ez-button.entry.js +13 -11
- package/dist/esm/ez-calendar.entry.js +3 -3
- package/dist/esm/ez-card-item.entry.js +1 -1
- package/dist/esm/ez-check.entry.js +11 -9
- package/dist/esm/ez-chip.entry.js +17 -7
- package/dist/esm/ez-collapsible-box.entry.js +85 -7
- package/dist/esm/ez-combo-box.entry.js +48 -17
- package/dist/esm/ez-date-input.entry.js +10 -15
- package/dist/esm/ez-date-time-input.entry.js +10 -15
- package/dist/esm/ez-dialog.entry.js +43 -8
- package/dist/esm/ez-filter-input.entry.js +1 -1
- package/dist/esm/ez-form.entry.js +65 -452
- package/dist/esm/ez-grid-config.entry.js +6 -7
- package/dist/esm/ez-grid.entry.js +1033 -1131
- package/dist/esm/ez-icon.entry.js +2 -2
- package/dist/esm/ez-list.entry.js +2 -4
- package/dist/esm/ez-loading-bar.entry.js +1 -1
- package/dist/esm/ez-modal-container.entry.js +54 -0
- package/dist/esm/ez-modal.entry.js +1 -1
- package/dist/esm/ez-number-input.entry.js +2 -2
- package/dist/esm/ez-popover.entry.js +3 -3
- package/dist/esm/ez-popup.entry.js +8 -4
- package/dist/esm/ez-radio-button.entry.js +3 -3
- package/dist/esm/ez-scroller.entry.js +2 -2
- package/dist/esm/ez-search.entry.js +1 -1
- package/dist/esm/ez-select-box.entry.js +1 -1
- package/dist/esm/ez-tabselector.entry.js +8 -7
- package/dist/esm/ez-text-area.entry.js +7 -7
- package/dist/esm/ez-text-edit.entry.js +99 -0
- package/dist/esm/ez-text-input.entry.js +13 -3
- package/dist/esm/ez-time-input.entry.js +2 -2
- package/dist/esm/ez-toast.entry.js +2 -2
- package/dist/esm/ez-upload.entry.js +4 -4
- package/dist/esm/ez-view-stack.entry.js +10 -7
- package/dist/esm/ezui.js +4 -112
- package/dist/esm/loader.js +2 -18
- package/dist/ezui/ezui.esm.js +1 -125
- package/dist/ezui/index.esm.js +0 -1
- package/dist/ezui/p-04a41a44.entry.js +1 -0
- package/dist/ezui/p-0b44cf1c.js +1 -0
- package/dist/ezui/p-0c7203d5.entry.js +1 -0
- package/dist/ezui/p-2213da1f.entry.js +1 -0
- package/dist/ezui/p-2c6398b3.entry.js +1 -0
- package/dist/ezui/p-2ccad880.entry.js +1 -0
- package/dist/ezui/p-333d79c4.entry.js +1 -0
- package/dist/ezui/p-3987f8d8.entry.js +1 -0
- package/dist/ezui/{p-81eb2738.entry.js → p-42c6493e.entry.js} +1 -1
- package/dist/ezui/{p-b4ad3b15.entry.js → p-482c3dd8.entry.js} +1 -1
- package/dist/ezui/p-5bdb1a41.entry.js +1 -0
- package/dist/ezui/{p-b2cf7db2.entry.js → p-63d567cc.entry.js} +1 -1
- package/dist/ezui/p-659616e4.entry.js +1 -0
- package/dist/ezui/p-6608b9a5.entry.js +1 -0
- package/dist/ezui/p-77ec47ac.entry.js +1 -0
- package/dist/ezui/p-9b9ebf95.entry.js +1 -0
- package/dist/ezui/{p-3a0dd69f.entry.js → p-ae5af8f9.entry.js} +1 -1
- package/dist/ezui/p-b853763b.js +1 -0
- package/dist/ezui/p-be06251d.entry.js +1 -0
- package/dist/ezui/{p-e7d03a0d.entry.js → p-bffae598.entry.js} +1 -1
- package/dist/ezui/p-cd4677d4.entry.js +1 -0
- package/dist/ezui/p-cfcc23e6.entry.js +1 -0
- package/dist/ezui/p-dfcf55e0.entry.js +1 -0
- package/dist/ezui/p-e1148f5c.js +1 -0
- package/dist/ezui/p-e1f2b5da.entry.js +1 -0
- package/dist/ezui/p-e230bfd2.entry.js +1 -0
- package/dist/ezui/{p-c0dd9a2e.entry.js → p-e3ee814c.entry.js} +1 -1
- package/dist/ezui/p-e697ffd5.entry.js +1 -0
- package/dist/ezui/{p-4eb273f8.entry.js → p-efa32bcc.entry.js} +1 -1
- package/dist/types/components/ez-actions-button/ez-actions-button.d.ts +42 -9
- package/dist/types/components/ez-check/CheckMode.d.ts +4 -0
- package/dist/types/components/ez-chip/ez-chip.d.ts +2 -1
- package/dist/types/components/ez-collapsible-box/ez-collapsible-box.d.ts +46 -1
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +15 -5
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +0 -1
- package/dist/types/components/ez-date-time-input/ez-date-time-input.d.ts +0 -1
- package/dist/types/components/ez-dialog/DialogType.d.ts +1 -0
- package/dist/types/components/ez-dialog/ez-dialog.d.ts +3 -0
- package/dist/types/components/ez-form/DataBinder.d.ts +2 -2
- package/dist/types/components/ez-form/ez-form.d.ts +21 -11
- package/dist/types/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.d.ts +3 -3
- package/dist/types/components/ez-form/fieldbuilder/tpl/DateInput.tpl.d.ts +4 -2
- package/dist/types/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.d.ts +2 -5
- package/dist/types/components/ez-form/structure/FormSheetMetadata.d.ts +3 -3
- package/dist/types/components/ez-grid/controller/EzGridController.d.ts +11 -0
- package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +4 -1
- package/dist/types/components/ez-grid/controller/ag-grid/components/cellRenderer.d.ts +9 -0
- package/dist/types/components/ez-grid/ez-grid.d.ts +8 -3
- package/dist/types/components/ez-grid/subcomponents/ez-select-box/ez-select-box.d.ts +2 -6
- package/dist/types/components/ez-modal-container/ez-modal-container.d.ts +47 -0
- package/dist/types/components/ez-modal-container/index.d.ts +2 -0
- package/dist/types/components/ez-modal-container/modal-action.d.ts +7 -0
- package/dist/types/components/ez-modal-container/modal-button-status.d.ts +6 -0
- package/dist/types/components/ez-popup/ez-popup.d.ts +4 -0
- package/dist/types/components/ez-search/ez-search.d.ts +3 -3
- package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +2 -0
- package/dist/types/components/ez-text-edit/ez-text-edit.d.ts +39 -0
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +5 -0
- package/dist/types/components/ez-view-stack/ez-view-stack.d.ts +5 -1
- package/dist/types/components.d.ts +274 -28
- package/dist/types/utils/ApplicationUtils.d.ts +1 -0
- package/dist/types/utils/index.d.ts +1 -0
- package/package.json +5 -5
- package/react/components.d.ts +2 -0
- package/react/components.js +2 -0
- package/react/components.js.map +1 -1
- package/dist/cjs/ApplicationUtils-475b50d9.js +0 -63
- package/dist/cjs/app-globals-3a1e7e63.js +0 -5
- package/dist/cjs/css-shim-3bfdba4f.js +0 -6
- package/dist/cjs/dom-8ac1ad03.js +0 -75
- package/dist/cjs/index-2ec1da82.js +0 -2307
- package/dist/cjs/index-55178184.js +0 -6
- package/dist/cjs/index-d9c5cb88.js +0 -3068
- package/dist/cjs/shadow-css-41d9783d.js +0 -390
- package/dist/esm/ApplicationUtils-30a69eb0.js +0 -61
- package/dist/esm/ApplicationUtils-a4a76132.js +0 -60
- package/dist/esm/app-globals-0f993ce5.js +0 -3
- package/dist/esm/css-shim-20dbffa5.js +0 -4
- package/dist/esm/dom-c5ed0ba5.js +0 -73
- package/dist/esm/index-1e9d524f.js +0 -3031
- package/dist/esm/index-b96183c8.js +0 -2295
- package/dist/esm/index-f32470b5.js +0 -3
- package/dist/esm/shadow-css-8c625855.js +0 -388
- package/dist/ezui/CSSVarsUtils-00f67f32.js +0 -70
- package/dist/ezui/DialogType-72afa679.js +0 -8
- package/dist/ezui/app-globals-0f993ce5.js +0 -3
- package/dist/ezui/css-shim-20dbffa5.js +0 -4
- package/dist/ezui/dom-c5ed0ba5.js +0 -73
- package/dist/ezui/ez-actions-button.entry.js +0 -98
- package/dist/ezui/ez-application.entry.js +0 -22
- package/dist/ezui/ez-button.entry.js +0 -73
- package/dist/ezui/ez-calendar.entry.js +0 -219
- package/dist/ezui/ez-card-item.entry.js +0 -40
- package/dist/ezui/ez-check.entry.js +0 -72
- package/dist/ezui/ez-chip.entry.js +0 -97
- package/dist/ezui/ez-collapsible-box.entry.js +0 -57
- package/dist/ezui/ez-combo-box.entry.js +0 -439
- package/dist/ezui/ez-date-input.entry.js +0 -159
- package/dist/ezui/ez-date-time-input.entry.js +0 -214
- package/dist/ezui/ez-dialog.entry.js +0 -108
- package/dist/ezui/ez-filter-input.entry.js +0 -75
- package/dist/ezui/ez-form.entry.js +0 -1395
- package/dist/ezui/ez-grid-config.entry.js +0 -433
- package/dist/ezui/ez-grid.entry.js +0 -115422
- package/dist/ezui/ez-icon.entry.js +0 -37
- package/dist/ezui/ez-list.entry.js +0 -516
- package/dist/ezui/ez-loading-bar.entry.js +0 -24
- package/dist/ezui/ez-modal.entry.js +0 -67
- package/dist/ezui/ez-number-input.entry.js +0 -148
- package/dist/ezui/ez-popover.entry.js +0 -141
- package/dist/ezui/ez-popup.entry.js +0 -49
- package/dist/ezui/ez-radio-button.entry.js +0 -45
- package/dist/ezui/ez-scroller.entry.js +0 -101
- package/dist/ezui/ez-search.entry.js +0 -83
- package/dist/ezui/ez-select-box.entry.js +0 -18
- package/dist/ezui/ez-tabselector.entry.js +0 -195
- package/dist/ezui/ez-text-area.entry.js +0 -158
- package/dist/ezui/ez-text-input.entry.js +0 -235
- package/dist/ezui/ez-time-input.entry.js +0 -164
- package/dist/ezui/ez-toast.entry.js +0 -84
- package/dist/ezui/ez-upload.entry.js +0 -379
- package/dist/ezui/ez-view-stack.entry.js +0 -74
- package/dist/ezui/index-1e9d524f.js +0 -3031
- package/dist/ezui/index-b96183c8.js +0 -2295
- package/dist/ezui/index-f32470b5.js +0 -3
- package/dist/ezui/p-2f02347d.entry.js +0 -1
- package/dist/ezui/p-416bedbe.entry.js +0 -1
- package/dist/ezui/p-544f0c63.entry.js +0 -1
- package/dist/ezui/p-62110996.entry.js +0 -1
- package/dist/ezui/p-719e9ef9.entry.js +0 -1
- package/dist/ezui/p-787fbdfe.js +0 -1
- package/dist/ezui/p-9d5be6a7.entry.js +0 -1
- package/dist/ezui/p-a27dafa4.entry.js +0 -1
- package/dist/ezui/p-aba3fa6c.entry.js +0 -1
- package/dist/ezui/p-adbe4188.js +0 -1
- package/dist/ezui/p-af43be42.entry.js +0 -1
- package/dist/ezui/p-b7467ad6.entry.js +0 -1
- package/dist/ezui/p-c019e137.entry.js +0 -1
- package/dist/ezui/p-c9d2060e.entry.js +0 -1
- package/dist/ezui/p-cccd8cde.entry.js +0 -1
- package/dist/ezui/p-d0671e14.entry.js +0 -1
- package/dist/ezui/p-e0f06d73.entry.js +0 -1
- package/dist/ezui/p-e59adce6.entry.js +0 -1
- package/dist/ezui/p-ed835b36.entry.js +0 -1
- package/dist/ezui/shadow-css-8c625855.js +0 -388
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-1e9d524f.js';
|
|
2
|
-
import { F as FloatingManager } from './index-b96183c8.js';
|
|
3
|
-
import './index-f32470b5.js';
|
|
4
|
-
import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
|
|
5
|
-
import './ApplicationUtils-30a69eb0.js';
|
|
6
|
-
import './DialogType-72afa679.js';
|
|
7
|
-
|
|
8
|
-
const ezActionsButtonCss = ":host{--ez-actions-button__box--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__box--background-color:var(--background--xlight, #fff);--ez-actions-button__box--padding:var(--space-small, 6px);--ez-actions-button__box--top-margin:var(--space-extra-small, 3px);--ez-actions-button__action--min-width:400px;--ez-actions-button__action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.actions-list{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;z-index:var(--more-visible, 1);padding:var(--ez-actions-button__box--padding);margin-top:var(--ez-actions-button__box--top-margin);background-color:var(--ez-actions-button__box--background-color);border-radius:var(--ez-actions-button__box--border-radius);box-shadow:var(--ez-actions-button__box--box-shadow)}.btn-action{--ez-button--min-width:var(--ez-actions-button__action--min-width);--ez-button--background-color:var(--ez-actions-button__action--background-color)}";
|
|
9
|
-
|
|
10
|
-
let EzActionsButton = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
registerInstance(this, hostRef);
|
|
13
|
-
this.ezAction = createEvent(this, "ezAction", 7);
|
|
14
|
-
/**
|
|
15
|
-
* Deixa o campo disponível ou não para interação com usuário.
|
|
16
|
-
*/
|
|
17
|
-
this.enabled = true;
|
|
18
|
-
this.innerClickCheck = (floatingContainer, node) => {
|
|
19
|
-
if (node && floatingContainer) {
|
|
20
|
-
if (node === floatingContainer) {
|
|
21
|
-
return true;
|
|
22
|
-
}
|
|
23
|
-
const children = floatingContainer.children;
|
|
24
|
-
for (let i = 0; i < children.length; i++) {
|
|
25
|
-
if (children[i].shadowRoot.contains(node)) {
|
|
26
|
-
return true;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
return false;
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
showActions() {
|
|
34
|
-
if (!this.enabled) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, { autoClose: true, innerClickTest: this.innerClickCheck });
|
|
38
|
-
const docWidth = document.body.clientWidth;
|
|
39
|
-
const bounding = this._actionsList.getBoundingClientRect();
|
|
40
|
-
if (bounding.right > docWidth) {
|
|
41
|
-
FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, { autoClose: true, innerClickTest: this.innerClickCheck, left: (docWidth - bounding.width) + "px" });
|
|
42
|
-
}
|
|
43
|
-
window.requestAnimationFrame(() => {
|
|
44
|
-
this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
hideActions() {
|
|
48
|
-
if (this._floatingID != undefined) {
|
|
49
|
-
FloatingManager.close(this._floatingID);
|
|
50
|
-
}
|
|
51
|
-
this._floatingID = undefined;
|
|
52
|
-
}
|
|
53
|
-
//---------------------------------------------
|
|
54
|
-
// Event handlers
|
|
55
|
-
//---------------------------------------------
|
|
56
|
-
handlerButtonClick() {
|
|
57
|
-
this.showActions();
|
|
58
|
-
}
|
|
59
|
-
actionClick(action) {
|
|
60
|
-
this.hideActions();
|
|
61
|
-
this.ezAction.emit(action);
|
|
62
|
-
}
|
|
63
|
-
//---------------------------------------------
|
|
64
|
-
// Lifecycle web component
|
|
65
|
-
//---------------------------------------------
|
|
66
|
-
componentWillLoad() {
|
|
67
|
-
if (this.actions == undefined) {
|
|
68
|
-
this.actions = [];
|
|
69
|
-
const optionsTags = this._element.querySelectorAll("action");
|
|
70
|
-
if (optionsTags) {
|
|
71
|
-
optionsTags.forEach((e) => {
|
|
72
|
-
let label = e.innerText;
|
|
73
|
-
let value = e.getAttribute("value");
|
|
74
|
-
if (!value) {
|
|
75
|
-
value = label;
|
|
76
|
-
}
|
|
77
|
-
this.actions.push({ label, value });
|
|
78
|
-
e.hidden = true;
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
componentDidLoad() {
|
|
84
|
-
CSSVarsUtils.applyVarsButton(this._element, this._button);
|
|
85
|
-
}
|
|
86
|
-
componentDidRender() {
|
|
87
|
-
if (this._floatingID == undefined) {
|
|
88
|
-
this._actionsList.remove();
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
render() {
|
|
92
|
-
return (h(Host, null, h("ez-button", { ref: elem => this._button = elem, enabled: this.enabled, mode: "icon", iconName: "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "actions-list", ref: elem => this._actionsList = elem }, this.actions.map(action => h("ez-button", { class: "btn-action", size: "small", label: action.label, onClick: () => this.actionClick(action) }))))));
|
|
93
|
-
}
|
|
94
|
-
get _element() { return getElement(this); }
|
|
95
|
-
};
|
|
96
|
-
EzActionsButton.style = ezActionsButtonCss;
|
|
97
|
-
|
|
98
|
-
export { EzActionsButton as ez_actions_button };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, e as createEvent, h } from './index-1e9d524f.js';
|
|
2
|
-
|
|
3
|
-
const ezApplicationCss = "";
|
|
4
|
-
|
|
5
|
-
let EzApplication = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.applicationLoaded = createEvent(this, "applicationLoaded", 7);
|
|
9
|
-
}
|
|
10
|
-
componentWillLoad() {
|
|
11
|
-
//Initizalize application
|
|
12
|
-
}
|
|
13
|
-
componentDidLoad() {
|
|
14
|
-
this.applicationLoaded.emit(true);
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
return (h("div", null));
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
EzApplication.style = ezApplicationCss;
|
|
21
|
-
|
|
22
|
-
export { EzApplication as ez_application };
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-1e9d524f.js';
|
|
2
|
-
|
|
3
|
-
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:0px;--ez-button--padding-bottom:0px;--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:focus{outline:none;outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
|
|
4
|
-
|
|
5
|
-
let EzButton = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
/**
|
|
9
|
-
* Deixa o botão disponível ou não para interação com o usuário.
|
|
10
|
-
*/
|
|
11
|
-
this.enabled = true;
|
|
12
|
-
/**
|
|
13
|
-
* Define o modo de uso do botão; opções: icon, link e regular
|
|
14
|
-
*/
|
|
15
|
-
this.mode = "regular";
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Realiza o foco no botão
|
|
19
|
-
*/
|
|
20
|
-
async setFocus() {
|
|
21
|
-
this._button.focus();
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Remove o foco no botão
|
|
25
|
-
*/
|
|
26
|
-
async setBlur() {
|
|
27
|
-
this._button.blur();
|
|
28
|
-
}
|
|
29
|
-
getIconSize(sizeParam = "medium") {
|
|
30
|
-
const sizeList = ["small", "medium", "large"];
|
|
31
|
-
const sizeLowerCase = this.size && this.size.toLowerCase();
|
|
32
|
-
return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
|
|
33
|
-
}
|
|
34
|
-
handleSlotChange(ev) {
|
|
35
|
-
const slot = ev.target;
|
|
36
|
-
const content = slot.assignedElements()[0];
|
|
37
|
-
if (this.mode == "link") {
|
|
38
|
-
content.style.display = "inline";
|
|
39
|
-
if (slot.name == "leftIcon") {
|
|
40
|
-
content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
|
|
41
|
-
}
|
|
42
|
-
else if (slot.name == "rightIcon") {
|
|
43
|
-
content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
else {
|
|
47
|
-
content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
render() {
|
|
51
|
-
if (this.mode == "icon") {
|
|
52
|
-
return (h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
53
|
-
if (!this.enabled)
|
|
54
|
-
evt.stopPropagation();
|
|
55
|
-
} })));
|
|
56
|
-
}
|
|
57
|
-
else if (this.mode == "label-icon") {
|
|
58
|
-
return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
59
|
-
if (!this.enabled)
|
|
60
|
-
evt.stopPropagation();
|
|
61
|
-
} })), h("label", { title: this.label }, this.label)));
|
|
62
|
-
}
|
|
63
|
-
else if (this.mode == "link") {
|
|
64
|
-
return (h("a", { class: this.getIconSize(), ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
65
|
-
}
|
|
66
|
-
else {
|
|
67
|
-
return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
EzButton.style = ezButtonCss;
|
|
72
|
-
|
|
73
|
-
export { EzButton as ez_button };
|
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, e as createEvent, i as forceUpdate, h } from './index-1e9d524f.js';
|
|
2
|
-
import { F as FloatingManager } from './index-b96183c8.js';
|
|
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;color:var(--ez-calendar--color)}.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
|
-
let 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
|
-
observeValue() {
|
|
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", { "data-day": day, 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", { "data-hour": offset, 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", { "data-hour": offset, 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", { "data-minute": offset, 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", { "data-minute": offset, 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", { "data-second": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
|
|
207
|
-
}
|
|
208
|
-
else {
|
|
209
|
-
return (h("div", { "data-second": offset, class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
|
|
210
|
-
}
|
|
211
|
-
})))))));
|
|
212
|
-
}
|
|
213
|
-
static get watchers() { return {
|
|
214
|
-
"value": ["observeValue"]
|
|
215
|
-
}; }
|
|
216
|
-
};
|
|
217
|
-
EzCalendar.style = ezCalendarCss;
|
|
218
|
-
|
|
219
|
-
export { EzCalendar as ez_calendar };
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, e as createEvent, h, f as Host } from './index-1e9d524f.js';
|
|
2
|
-
|
|
3
|
-
const ezCardItemCss = ":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #2B3A54);--ez-card-item__key--color:var(--text--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{display:flex;align-items:center;line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom);gap:var(--space--small, 6px)}.card-item__key{color:var(--ez-card-item__key--color)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n 4px 0px 0px 0px var(--ez-card-item__highlight--color)}";
|
|
4
|
-
|
|
5
|
-
let EzCardItem = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.ezClick = createEvent(this, "ezClick", 7);
|
|
9
|
-
}
|
|
10
|
-
componentWillRender() {
|
|
11
|
-
this.createDetailList();
|
|
12
|
-
}
|
|
13
|
-
createDetailList() {
|
|
14
|
-
var _a, _b, _c;
|
|
15
|
-
this._details = { detailsLeft: [], detailsRight: [] };
|
|
16
|
-
let cont = 0;
|
|
17
|
-
if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
|
|
18
|
-
for (const attribute in this.item.details) {
|
|
19
|
-
cont < 3 ?
|
|
20
|
-
this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
|
|
21
|
-
this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
|
|
22
|
-
cont++;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
buildDetailContent(detail) {
|
|
27
|
-
return h("div", { class: "card-item__detail" }, h("label", { class: "card-item__detail-label" }, detail.label), ": ", h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
|
|
28
|
-
}
|
|
29
|
-
render() {
|
|
30
|
-
return (h(Host, null, this.item &&
|
|
31
|
-
h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("label", { class: "card-item__title" }, h("span", { class: "card-item__key", innerHTML: this.item.key }), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details" }, h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
|
|
32
|
-
return this.buildDetailContent(detail);
|
|
33
|
-
})), h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
|
|
34
|
-
return this.buildDetailContent(detail);
|
|
35
|
-
}))))));
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
EzCardItem.style = ezCardItemCss;
|
|
39
|
-
|
|
40
|
-
export { EzCardItem as ez_card_item };
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, e as createEvent, h, f as Host } from './index-1e9d524f.js';
|
|
2
|
-
|
|
3
|
-
const ezCheckCss = ":host{--ez-check--box--width:18px;--ez-check--box--height:18px;--ez-check--width:calc(var(--ez-check--box--width) + 14px);--ez-check--height:calc(var(--ez-check--box--width) + 14px);--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:19px;--ez-switch--pin--height:19px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--disabled--checked--background-color:var(--color--primary-300);--ez-switch--checked--background-color:var(--color--primary);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-primary);--ez-switch--pin--checked--background-color:var(--background--xlight);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-switch--pin--border-color:var(--text--primary);--ez-switch--pin--disabled--border-color:var(--text--secondary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;width:100%;align-items:center;margin:0}input.regularMode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.regularMode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regularMode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regularMode:disabled{cursor:auto;background:none}input.regularMode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regularMode:disabled::before{border:var(--ez-check--disabled--border)}input.regularMode:checked:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regularMode:checked:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regularMode:checked::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regularMode:checked:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regularMode:checked::after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regularMode:checked:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switchMode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switchMode:disabled{background-color:var(--ez-switch--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switchMode:checked:disabled{background-color:var(--ez-switch--disabled--checked--background-color)}input.switchMode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(-2px) translateY(-4px);border-radius:50%;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switchMode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switchMode:checked{transition:background-color var(--transition), border var(--transition);background-color:var(--ez-switch--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switchMode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width) - 2px) / 2);background-color:var(--ez-switch--pin--focus--background-color)}input.switchMode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switchMode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px))}input.switchMode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switchMode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);text-shadow:var(--text-shadow);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;padding-left:var(--space--small)}.label--disabled{color:var(--ez-check--label--disabled--color)}";
|
|
4
|
-
|
|
5
|
-
let EzCheck = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.ezChange = createEvent(this, "ezChange", 7);
|
|
9
|
-
/**
|
|
10
|
-
* Deixa o campo disponível ou não para interação com o usuário.
|
|
11
|
-
*/
|
|
12
|
-
this.enabled = true;
|
|
13
|
-
/**
|
|
14
|
-
* Existem dois modos de visualização: regular e switch.
|
|
15
|
-
* Se esta propriedade for omitida, o componete assume o formato "regular".
|
|
16
|
-
* No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
|
|
17
|
-
* No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
|
|
18
|
-
*/
|
|
19
|
-
this.mode = "regular";
|
|
20
|
-
}
|
|
21
|
-
observeMode() {
|
|
22
|
-
if (this.mode === "switch") {
|
|
23
|
-
this._inputElem.classList.remove("regularMode");
|
|
24
|
-
this._inputElem.classList.add("switchMode");
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
this._inputElem.classList.remove("switchMode");
|
|
28
|
-
this._inputElem.classList.add("regularMode");
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
//---------------------------------------------
|
|
32
|
-
// Public methods
|
|
33
|
-
//---------------------------------------------
|
|
34
|
-
/**
|
|
35
|
-
* Devolve o modo escolhido para o componente
|
|
36
|
-
*/
|
|
37
|
-
async getMode() {
|
|
38
|
-
return this.mode;
|
|
39
|
-
}
|
|
40
|
-
/**
|
|
41
|
-
* Faz o foco no componente de input
|
|
42
|
-
*/
|
|
43
|
-
async setFocus() {
|
|
44
|
-
this._inputElem.focus();
|
|
45
|
-
}
|
|
46
|
-
componentDidLoad() {
|
|
47
|
-
this.observeMode();
|
|
48
|
-
}
|
|
49
|
-
changeValue() {
|
|
50
|
-
if (!this.enabled) {
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
this.value = !this.value;
|
|
54
|
-
this.ezChange.emit(this.value);
|
|
55
|
-
}
|
|
56
|
-
getLabelClasses() {
|
|
57
|
-
let classes = "label";
|
|
58
|
-
if (!this.enabled) {
|
|
59
|
-
classes += " label--disabled";
|
|
60
|
-
}
|
|
61
|
-
return classes;
|
|
62
|
-
}
|
|
63
|
-
render() {
|
|
64
|
-
return (h(Host, null, h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
|
|
65
|
-
}
|
|
66
|
-
static get watchers() { return {
|
|
67
|
-
"mode": ["observeMode"]
|
|
68
|
-
}; }
|
|
69
|
-
};
|
|
70
|
-
EzCheck.style = ezCheckCss;
|
|
71
|
-
|
|
72
|
-
export { EzCheck as ez_check };
|