@sankhyalabs/ezui 2.10.1 → 2.12.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/ez-actions-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-alert.cjs.entry.js +1 -1
- package/dist/cjs/ez-application.cjs.entry.js +1 -1
- package/dist/cjs/ez-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/ez-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-calendar.cjs.entry.js +1 -1
- package/dist/cjs/ez-card-item.cjs.entry.js +1 -1
- package/dist/cjs/ez-check.cjs.entry.js +1 -1
- package/dist/cjs/ez-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-collapsible-box.cjs.entry.js +1 -1
- package/dist/cjs/ez-combo-box.cjs.entry.js +1 -1
- package/dist/cjs/ez-date-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-date-time-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ez-dropdown.cjs.entry.js +503 -0
- package/dist/cjs/ez-file-item.cjs.entry.js +1 -1
- package/dist/cjs/ez-filter-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-form-view.cjs.entry.js +140 -0
- package/dist/cjs/ez-form.cjs.entry.js +228 -330
- package/dist/cjs/ez-grid.cjs.entry.js +1 -1
- package/dist/cjs/ez-icon.cjs.entry.js +1 -1
- package/dist/cjs/ez-list.cjs.entry.js +1 -1
- package/dist/cjs/ez-loading-bar.cjs.entry.js +1 -1
- package/dist/cjs/ez-modal-container.cjs.entry.js +1 -1
- package/dist/cjs/ez-modal.cjs.entry.js +1 -1
- package/dist/cjs/ez-number-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-popover.cjs.entry.js +1 -1
- package/dist/cjs/ez-popup.cjs.entry.js +1 -1
- package/dist/cjs/ez-radio-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-scroller.cjs.entry.js +1 -1
- package/dist/cjs/ez-search.cjs.entry.js +1 -1
- package/dist/cjs/ez-sidebar-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-tabselector.cjs.entry.js +6 -3
- package/dist/cjs/ez-text-area.cjs.entry.js +1 -1
- package/dist/cjs/ez-text-edit.cjs.entry.js +1 -1
- package/dist/cjs/ez-text-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-time-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-toast.cjs.entry.js +1 -1
- package/dist/cjs/ez-tree.cjs.entry.js +109 -22
- package/dist/cjs/ez-upload.cjs.entry.js +1 -1
- package/dist/cjs/ez-view-stack.cjs.entry.js +1 -1
- package/dist/cjs/ezui.cjs.js +2 -2
- package/dist/cjs/{index-8646c40d.js → index-5e208fa5.js} +11 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/ez-dropdown/ez-dropdown.css +349 -0
- package/dist/collection/components/ez-dropdown/ez-dropdown.js +339 -0
- package/dist/collection/components/ez-dropdown/structure/DropdownItem.js +33 -0
- package/dist/collection/components/ez-dropdown/structure/SubmenuControl.js +241 -0
- package/dist/collection/components/ez-form/{structure/FormSheetMetadata.js → FormMetadata.js} +39 -54
- package/dist/collection/components/ez-form/ez-form.css +7 -1
- package/dist/collection/components/ez-form/ez-form.js +128 -19
- package/dist/collection/components/ez-form/interfaces/IDefaultConfig.js +1 -0
- package/dist/collection/components/ez-form/interfaces/IFieldConfig.js +1 -0
- package/dist/collection/components/ez-form/interfaces/IFormConfig.js +1 -0
- package/dist/collection/components/ez-form/interfaces/IFormSheetMetadata.js +1 -0
- package/dist/collection/components/ez-form/interfaces/IInvalidField.js +1 -0
- package/dist/collection/components/ez-form/interfaces/IRecordValidator.js +1 -0
- package/dist/collection/components/ez-form/interfaces/ITabConfig.js +1 -0
- package/dist/collection/components/ez-form/interfaces/IValidationResult.js +1 -0
- package/dist/collection/components/ez-form/interfaces/index.js +1 -0
- package/dist/collection/components/ez-form/store/form.slice.js +6 -2
- package/dist/collection/components/ez-form-view/ez-form-view.css +6 -0
- package/dist/collection/components/ez-form-view/ez-form-view.js +71 -0
- package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js +26 -0
- package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/CheckBox.tpl.js +4 -4
- package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/ComboBox.tpl.js +2 -2
- package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/DateInput.tpl.js +1 -1
- package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/NumberInput.tpl.js +3 -3
- package/dist/collection/components/ez-form-view/interfaces/IFormViewField.js +1 -0
- package/dist/collection/components/ez-form-view/interfaces/index.js +1 -0
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +5 -2
- package/dist/collection/components/ez-tree/ez-tree.css +8 -6
- package/dist/collection/components/ez-tree/ez-tree.js +89 -11
- package/dist/collection/components/ez-tree/subcomponents/DefaultTooltipResolver.js +3 -0
- package/dist/collection/components/ez-tree/subcomponents/TreeItem.js +4 -4
- package/dist/collection/components/ez-tree/subcomponents/index.js +1 -0
- package/dist/collection/components/ez-tree/types/Node.js +26 -4
- package/dist/collection/components/ez-tree/types/Tree.js +23 -2
- package/dist/custom-elements/index.d.ts +12 -0
- package/dist/custom-elements/index.js +977 -355
- package/dist/esm/ez-actions-button.entry.js +1 -1
- package/dist/esm/ez-alert.entry.js +1 -1
- package/dist/esm/ez-application.entry.js +1 -1
- package/dist/esm/ez-breadcrumb.entry.js +1 -1
- package/dist/esm/ez-button.entry.js +1 -1
- package/dist/esm/ez-calendar.entry.js +1 -1
- package/dist/esm/ez-card-item.entry.js +1 -1
- package/dist/esm/ez-check.entry.js +1 -1
- package/dist/esm/ez-chip.entry.js +1 -1
- package/dist/esm/ez-collapsible-box.entry.js +1 -1
- package/dist/esm/ez-combo-box.entry.js +1 -1
- package/dist/esm/ez-date-input.entry.js +1 -1
- package/dist/esm/ez-date-time-input.entry.js +1 -1
- package/dist/esm/ez-dialog.entry.js +1 -1
- package/dist/esm/ez-dropdown.entry.js +499 -0
- package/dist/esm/ez-file-item.entry.js +1 -1
- package/dist/esm/ez-filter-input.entry.js +1 -1
- package/dist/esm/ez-form-view.entry.js +136 -0
- package/dist/esm/ez-form.entry.js +229 -331
- package/dist/esm/ez-grid.entry.js +1 -1
- package/dist/esm/ez-icon.entry.js +1 -1
- package/dist/esm/ez-list.entry.js +1 -1
- package/dist/esm/ez-loading-bar.entry.js +1 -1
- package/dist/esm/ez-modal-container.entry.js +1 -1
- package/dist/esm/ez-modal.entry.js +1 -1
- package/dist/esm/ez-number-input.entry.js +1 -1
- package/dist/esm/ez-popover.entry.js +1 -1
- package/dist/esm/ez-popup.entry.js +1 -1
- package/dist/esm/ez-radio-button.entry.js +1 -1
- package/dist/esm/ez-scroller.entry.js +1 -1
- package/dist/esm/ez-search.entry.js +1 -1
- package/dist/esm/ez-sidebar-button.entry.js +1 -1
- package/dist/esm/ez-tabselector.entry.js +6 -3
- package/dist/esm/ez-text-area.entry.js +1 -1
- package/dist/esm/ez-text-edit.entry.js +1 -1
- package/dist/esm/ez-text-input.entry.js +1 -1
- package/dist/esm/ez-time-input.entry.js +1 -1
- package/dist/esm/ez-toast.entry.js +1 -1
- package/dist/esm/ez-tree.entry.js +109 -22
- package/dist/esm/ez-upload.entry.js +1 -1
- package/dist/esm/ez-view-stack.entry.js +1 -1
- package/dist/esm/ezui.js +2 -2
- package/dist/esm/{index-7bc778b3.js → index-c5203f95.js} +11 -0
- package/dist/esm/loader.js +2 -2
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/{p-739d60d1.entry.js → p-0c3f7bf2.entry.js} +1 -1
- package/dist/ezui/{p-171c3236.entry.js → p-0cd0545d.entry.js} +1 -1
- package/dist/ezui/{p-ad5fe50b.entry.js → p-1a27bb9f.entry.js} +1 -1
- package/dist/ezui/{p-3cfefc57.entry.js → p-1b94b9dc.entry.js} +1 -1
- package/dist/ezui/{p-f18f16e0.entry.js → p-20c01161.entry.js} +1 -1
- package/dist/ezui/{p-1634c851.entry.js → p-24717f87.entry.js} +1 -1
- package/dist/ezui/{p-7e496975.entry.js → p-3320768e.entry.js} +1 -1
- package/dist/ezui/{p-123a2bd5.entry.js → p-36ed5c45.entry.js} +1 -1
- package/dist/ezui/{p-25e83e46.entry.js → p-3b2091dd.entry.js} +1 -1
- package/dist/ezui/p-47bcc678.entry.js +1 -0
- package/dist/ezui/{p-9def6fd0.entry.js → p-47ca5e09.entry.js} +1 -1
- package/dist/ezui/{p-04fab1e9.entry.js → p-4c444816.entry.js} +1 -1
- package/dist/ezui/{p-9334a724.entry.js → p-608d13e8.entry.js} +1 -1
- package/dist/ezui/{p-50ae478a.entry.js → p-626b8940.entry.js} +1 -1
- package/dist/ezui/{p-14a04845.entry.js → p-6630eca2.entry.js} +1 -1
- package/dist/ezui/{p-9404f22b.entry.js → p-67b9a2cb.entry.js} +1 -1
- package/dist/ezui/{p-93bcc628.entry.js → p-6dec5cfa.entry.js} +1 -1
- package/dist/ezui/{p-5dc3af60.entry.js → p-6f9aba86.entry.js} +1 -1
- package/dist/ezui/p-7799666d.entry.js +1 -0
- package/dist/ezui/p-7b80df03.js +1 -0
- package/dist/ezui/{p-5c9ce8a7.entry.js → p-7d42065a.entry.js} +1 -1
- package/dist/ezui/{p-74c7f960.entry.js → p-81897c04.entry.js} +1 -1
- package/dist/ezui/p-91f8c816.entry.js +1 -0
- package/dist/ezui/p-97d2d2f6.entry.js +1 -0
- package/dist/ezui/{p-32f9f83a.entry.js → p-98c448c9.entry.js} +1 -1
- package/dist/ezui/{p-a86d00b3.entry.js → p-99aea44b.entry.js} +1 -1
- package/dist/ezui/p-a4b4645d.entry.js +1 -0
- package/dist/ezui/{p-e613d9bf.entry.js → p-ab5eee38.entry.js} +1 -1
- package/dist/ezui/{p-a2e55b33.entry.js → p-ad7151e0.entry.js} +1 -1
- package/dist/ezui/{p-f6111077.entry.js → p-ad8b7412.entry.js} +1 -1
- package/dist/ezui/{p-1a89d3ff.entry.js → p-b2e861cb.entry.js} +1 -1
- package/dist/ezui/{p-f2627de5.entry.js → p-b2efb22c.entry.js} +1 -1
- package/dist/ezui/{p-04a3b457.entry.js → p-b5557d33.entry.js} +1 -1
- package/dist/ezui/p-ba03ac61.entry.js +1 -0
- package/dist/ezui/{p-6fd5e142.entry.js → p-bc324ee8.entry.js} +1 -1
- package/dist/ezui/{p-cfcc23e6.entry.js → p-bd9792e2.entry.js} +1 -1
- package/dist/ezui/{p-7c227b86.entry.js → p-bf8a633d.entry.js} +1 -1
- package/dist/ezui/{p-ea877274.entry.js → p-c071db26.entry.js} +1 -1
- package/dist/ezui/{p-46113d5a.entry.js → p-c3529df3.entry.js} +1 -1
- package/dist/ezui/{p-b60fbad2.entry.js → p-ca7435a6.entry.js} +1 -1
- package/dist/ezui/{p-37335c51.entry.js → p-e203c89f.entry.js} +1 -1
- package/dist/ezui/{p-f2c4e811.entry.js → p-fc97f773.entry.js} +1 -1
- package/dist/types/components/ez-dropdown/ez-dropdown.d.ts +58 -0
- package/dist/types/components/ez-dropdown/structure/DropdownItem.d.ts +28 -0
- package/dist/types/components/ez-dropdown/structure/SubmenuControl.d.ts +78 -0
- package/dist/types/components/ez-form/DataBinder.d.ts +1 -1
- package/dist/types/components/ez-form/FormMetadata.d.ts +16 -0
- package/dist/types/components/ez-form/ez-form.d.ts +21 -43
- package/dist/types/components/ez-form/interfaces/IDefaultConfig.d.ts +5 -0
- package/dist/types/components/ez-form/interfaces/IFieldConfig.d.ts +13 -0
- package/dist/types/components/ez-form/interfaces/IFormConfig.d.ts +7 -0
- package/dist/types/components/ez-form/interfaces/IFormSheetMetadata.d.ts +9 -0
- package/dist/types/components/ez-form/interfaces/IInvalidField.d.ts +4 -0
- package/dist/types/components/ez-form/interfaces/IRecordValidator.d.ts +6 -0
- package/dist/types/components/ez-form/interfaces/ITabConfig.d.ts +5 -0
- package/dist/types/components/ez-form/interfaces/IValidationResult.d.ts +8 -0
- package/dist/types/components/ez-form/interfaces/index.d.ts +8 -0
- package/dist/types/components/ez-form/store/form.slice.d.ts +5 -3
- package/dist/types/components/ez-form-view/fieldbuilder/FieldBuilder.d.ts +2 -0
- package/dist/types/components/ez-form-view/fieldbuilder/templates/CheckBox.tpl.d.ts +3 -0
- package/dist/types/components/ez-form-view/fieldbuilder/templates/ComboBox.tpl.d.ts +2 -0
- package/dist/types/components/ez-form-view/fieldbuilder/templates/DateInput.tpl.d.ts +4 -0
- package/dist/types/components/ez-form-view/fieldbuilder/templates/FileInput.tpl.d.ts +2 -0
- package/dist/types/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.d.ts +3 -0
- package/dist/types/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.d.ts +2 -0
- package/dist/types/components/ez-form-view/fieldbuilder/templates/TextArea.tpl.d.ts +2 -0
- package/dist/types/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.d.ts +2 -0
- package/dist/types/components/ez-form-view/interfaces/IFormViewField.d.ts +10 -0
- package/dist/types/components/ez-form-view/interfaces/index.d.ts +1 -0
- package/dist/types/components/ez-tree/ez-tree.d.ts +13 -0
- package/dist/types/components/ez-tree/interfaces/ITreeItem.d.ts +1 -0
- package/dist/types/components/ez-tree/subcomponents/DefaultTooltipResolver.d.ts +2 -0
- package/dist/types/components/ez-tree/subcomponents/TreeItem.d.ts +2 -0
- package/dist/types/components/ez-tree/subcomponents/index.d.ts +1 -0
- package/dist/types/components/ez-tree/types/Node.d.ts +1 -0
- package/dist/types/components/ez-tree/types/Tree.d.ts +1 -0
- package/dist/types/components.d.ts +111 -2
- package/package.json +1 -1
- package/react/components.d.ts +2 -0
- package/react/components.js +2 -0
- package/react/components.js.map +1 -1
- package/dist/collection/components/ez-form/fieldbuilder/FieldBuilder.js +0 -48
- package/dist/collection/components/ez-form/structure/FormItem.js +0 -11
- package/dist/collection/components/ez-form/structure/FormSheet.js +0 -6
- package/dist/ezui/p-1cc11468.entry.js +0 -1
- package/dist/ezui/p-3c7ea91b.js +0 -1
- package/dist/ezui/p-79e409c6.entry.js +0 -1
- package/dist/ezui/p-941e9792.entry.js +0 -1
- package/dist/ezui/p-ddb1c350.entry.js +0 -1
- package/dist/types/components/ez-form/fieldbuilder/FieldBuilder.d.ts +0 -2
- package/dist/types/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.d.ts +0 -3
- package/dist/types/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.d.ts +0 -6
- package/dist/types/components/ez-form/fieldbuilder/tpl/DateInput.tpl.d.ts +0 -15
- package/dist/types/components/ez-form/fieldbuilder/tpl/FileInput.tpl.d.ts +0 -5
- package/dist/types/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.d.ts +0 -7
- package/dist/types/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.d.ts +0 -6
- package/dist/types/components/ez-form/fieldbuilder/tpl/TextArea.tpl.d.ts +0 -5
- package/dist/types/components/ez-form/fieldbuilder/tpl/TextInput.tpl.d.ts +0 -5
- package/dist/types/components/ez-form/structure/FormItem.d.ts +0 -9
- package/dist/types/components/ez-form/structure/FormSheet.d.ts +0 -10
- package/dist/types/components/ez-form/structure/FormSheetMetadata.d.ts +0 -35
- /package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/FileInput.tpl.js +0 -0
- /package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/SearchInput.tpl.js +0 -0
- /package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/TextArea.tpl.js +0 -0
- /package/dist/collection/components/{ez-form/fieldbuilder/tpl → ez-form-view/fieldbuilder/templates}/TextInput.tpl.js +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
import './ApplicationUtils-9fda4796.js';
|
|
4
4
|
import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
|
|
4
4
|
const ezAlertCss = ":host{--ez-alert-alert-container--padding-up-down:var(--space--small, 6px);--ez-alert-alert-container--padding-right-left:var(--space--medium, 12px);--ez-alert-alert-container--gap:var(--space--medium, 12px);--ez-alert-alert-container--border-radius:var(--border--radius-medium, 12px);--ez-alert-alert-container--font-color-warn:var(--color--alert-warning-900, #8C6B00);--ez-alert-alert-container--icon-warn:var(--color--alert-warning-900, #8C6B00);--ez-alert-alert-container--background-color-warn:var(--color--alert-warning-200, #FFF7D5);--ez-alert-alert-container--font-color-critical:var(--color--alert-error, #BD0025);--ez-alert-alert-container--icon-critical:var(--color--alert-error, #BD0025);--ez-alert-alert-container--background-color-critical:var(--color--alert-error-200, #F7E0E5);--ez-alert-alert-container--font-color-success:var(--color--alert-success, #157A00);--ez-alert-alert-container--icon-success:var(--color--alert-success, #157A00);--ez-alert-alert-container--background-color-success:var(--color--alert-success-200, #E7F6E0);font-size:var(--text--small, 12px);font-family:var(--font-pattern, \"Roboto\");width:100%;hyphens:auto;display:block}.alert-container{display:flex;align-items:center;gap:var(--ez-alert-alert-container--gap);padding:var(--ez-alert-alert-container--padding-up-down) var(--ez-alert-alert-container--padding-right-left);border-radius:var(--ez-alert-alert-container--border-radius)}.warn{background-color:var(--ez-alert-alert-container--background-color-warn);color:var(--ez-alert-alert-container--font-color-warn)}.critical{background-color:var(--ez-alert-alert-container--background-color-critical);color:var(--ez-alert-alert-container--font-color-critical)}.success{background-color:var(--ez-alert-alert-container--background-color-success);color:var(--ez-alert-alert-container--font-color-success)}ez-icon{--ez-icon--color:inherit}.alert-container__icon-warn{--ez-icon--color:var(--ez-alert-alert-container--icon-warn)}.alert-container__icon-critical{--ez-icon--color:var(--ez-alert-alert-container--icon-critical)}.alert-container__icon-success{--ez-icon--color:var(--ez-alert-alert-container--icon-success)}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
|
|
4
4
|
const ezBreadcrumbCss = ":host{--breadcrumb__item--label--color--title-primary:var(--color--title-primary, #2B3A54);--breadcrumb__item--label--color--active:var(--color--primary, '#008561');--breadcrumb__item--label--font-weight:var(--text-weight--large, 600);display:block;font-size:var(--text--medium, 14px);font-family:var(--font-pattern, \"Roboto\");font-weight:var(--text-weight--medium, 400)}.breadcrumb__list{list-style-type:none;display:inline-block;margin:0;padding:0}.breadcrumb__item{display:inline-flex;align-items:center;cursor:pointer}.breadcrumb__item--label{color:var(--breadcrumb__item--label--color--title-primary);margin:0px}.breadcrumb__item--icon{padding-right:3px;color:var(--breadcrumb__item--label--color--title-primary)}.breadcrumb__item--chevron{padding:0px 6px;cursor:default}.active{color:var(--breadcrumb__item--label--color--active);font-weight:var(--breadcrumb__item--label--font-weight);cursor:default}.active-icon{--icon--color:var(--breadcrumb__item--label--color--active);cursor:default}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
|
|
4
4
|
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--width:'auto';--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--justify-content:center;--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{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);width:var(--ez-button--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);justify-content:var(--ez-button--justify-content)}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: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)}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, f as forceUpdate, h } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, f as forceUpdate, h } from './index-c5203f95.js';
|
|
2
2
|
import { FloatingManager } from '@sankhyalabs/core';
|
|
3
3
|
|
|
4
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{display:flex;flex-direction:column;z-index:var(--more-visible, 2);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;padding:0px;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);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;scrollbar-width:none}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{display:flex;justify-content:space-between;padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);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);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}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
|
|
4
4
|
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)}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
import { C as CheckMode } from './CheckMode-bdb2ec19.js';
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
|
|
4
4
|
const ezChipCss = ":host{--ez-label-chip--height:30px;--ez-label-chip__label--font-size:var(--text--medium, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--text-weight--medium, 400);--ez-label-chip__label--space--medium:var(--space--medium, 12px);--ez-label-chip__label--title--primary:var(--title--primary, #2B3A54);--ez-label-chip__label--text--primary:var(--text--primary, #626e82);--ez-label-chip__label__container--border-radius:var(--border--radius-large, 24px);--ez-label-chip__label__container--border:1px solid;--ez-label-chip__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-label-chip__label__container--background-color:var(--color--primary-300);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--default--border-color--active:var(--color--primary, #007a5a);--ez-label-chip__label__container--default--background-color--hover:var(--color--primary-300, #f2faf8);--ez-label-chip__label__container--default--color--hover:var(--color--primary, #f2faf8);--ez-label-chip__label__container--text--disabled:var(--text--disable, #AFB6C0);--ez-label-chip__label__container--default--border-color--active:var(--color--primary)}.lbl{display:flex;white-space:nowrap;align-items:center;cursor:pointer;user-select:none;color:var(--ez-label-chip__label--title--primary);height:var(--ez-label-chip--height);font-family:var(--ez-label-chip__label--font-family);font-size:var(--ez-label-chip__label--font-size);font-weight:var(--ez-label-chip__label--font-weight)}.lbl--active{color:var(--ez-label-chip__label__container--default--color--hover)}.lbl--disabled{color:var(--ez-label-chip__label__container--text--disabled)}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;background-color:#FFFFFF;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);border-color:var(--ez-label-chip__label__container--border-color-strokes);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium);outline-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__content{display:flex;align-items:center;flex-wrap:wrap;--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--disabled{cursor:default;border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__container--active{border-color:var(--ez-label-chip__label__container--default--background-color--hover);background-color:var(--ez-label-chip__label__container--default--background-color--hover);color:var(--ez-label-chip__label__container--default--color--hover);fill:var(--ez-label-chip__label__container--default--color--hover);--ez-icon--color:var(--ez-label-chip__label__container--default--color--hover)}.label__container:hover{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container--disabled:hover{cursor:default;border:var(--ez-label-chip__label__container--border);border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__content__icon{display:flex;cursor:pointer;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--row-reverse{flex-direction:row-reverse}.label__container .btn-close{padding:0px 0px 0px 8px}.label__container--row-reverse .btn-close{padding:0px 8px 0px 0px}.cursor-disable{cursor:default}ez-icon{--ez-icon--color:inherit}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
import { A as ApplicationUtils } from './ApplicationUtils-9fda4796.js';
|
|
4
4
|
import './DialogType-54a62731.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
import { A as ApplicationUtils } from './ApplicationUtils-9fda4796.js';
|
|
4
4
|
import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { DateUtils, ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { DateUtils, TimeFormatter, ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-c5203f95.js';
|
|
2
2
|
import { D as DialogType } from './DialogType-54a62731.js';
|
|
3
3
|
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
4
4
|
|
|
@@ -0,0 +1,499 @@
|
|
|
1
|
+
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-c5203f95.js';
|
|
2
|
+
import { ElementIDUtils, ObjectUtils } from '@sankhyalabs/core';
|
|
3
|
+
|
|
4
|
+
const DropdownItem = ({ item, hasIcon, hasChildren, isLockedLevels, onSubActionClick }) => {
|
|
5
|
+
return (h("div", { class: "ez-dropdown__item-wrapper", title: item.label },
|
|
6
|
+
getContentLeft(item, hasIcon),
|
|
7
|
+
h("span", { class: "ez-dropdown__item-label" }, item.label),
|
|
8
|
+
getContentRight(item, hasChildren, isLockedLevels, onSubActionClick)));
|
|
9
|
+
};
|
|
10
|
+
const getContentLeft = (item, hasIcon) => {
|
|
11
|
+
if (item == undefined || !hasIcon) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
if (item.iconName) {
|
|
15
|
+
return (h("ez-icon", Object.assign({ class: "ez-dropdown__icon-left", iconName: item.iconName, size: "medium" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownItemIcon` })));
|
|
16
|
+
}
|
|
17
|
+
return (h("ez-icon", { class: "ez-dropdown__icon-left ez-dropdown__hidden", size: "medium" }));
|
|
18
|
+
};
|
|
19
|
+
const getContentRight = (item, hasChildren, isLockedLevels, onClick) => {
|
|
20
|
+
var _a, _b;
|
|
21
|
+
if (item == undefined) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && item.subAction != undefined && Object.keys(item.subAction).length > 0) {
|
|
25
|
+
return (h("span", Object.assign({ onClick: () => onClick(item), title: item.subAction.label, class: `ez-dropdown__link ez-dropdown__link--${item.subAction.type || "primary"}` }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.subAction.id}_ezDropdownItemSubAction` }), item.subAction.label));
|
|
26
|
+
}
|
|
27
|
+
if (isLockedLevels || !hasChildren) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
31
|
+
return (h("ez-icon", Object.assign({ class: "ez-dropdown__icon-right", iconName: "chevron-right", size: "medium" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownIconOpenChildren` })));
|
|
32
|
+
}
|
|
33
|
+
return (h("ez-icon", { class: "ez-dropdown__icon-right ez-dropdown__hidden", size: "medium" }));
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
class SubmenuControl {
|
|
37
|
+
constructor() { }
|
|
38
|
+
//---------------------------------------------
|
|
39
|
+
// Public methods
|
|
40
|
+
//---------------------------------------------
|
|
41
|
+
/**
|
|
42
|
+
* Método responsável por fechar submenus abertos e abrir o submenu desejado.
|
|
43
|
+
* @param menu - Item de menu selecionado para abrir o submenu.
|
|
44
|
+
*/
|
|
45
|
+
show(menu) {
|
|
46
|
+
const submenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(".ez-dropdown__submenu");
|
|
47
|
+
if (menu == undefined || submenu == undefined) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
submenu.classList.remove("ez-dropdown__submenu--hide");
|
|
51
|
+
this.setPosition(menu);
|
|
52
|
+
this.setScrollContainer(menu);
|
|
53
|
+
this.setMaxHeight(submenu);
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Método responsável por fechar um determinado submenu aberto.
|
|
57
|
+
* @param menu - Item de menu selecionado com o submenu aberto.
|
|
58
|
+
*/
|
|
59
|
+
hide(menu) {
|
|
60
|
+
if (menu == undefined) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const submenuSelector = ".ez-dropdown__submenu:not(.ez-dropdown__submenu--hide)";
|
|
64
|
+
const submenuElement = menu.querySelector(submenuSelector);
|
|
65
|
+
this.reset(submenuElement);
|
|
66
|
+
this.hideChild(submenuElement);
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Método responsável por fechar todos os submenus filhos de um determinado submenu.
|
|
70
|
+
* @param submenu - Elemento HTML do submenu pai.
|
|
71
|
+
*/
|
|
72
|
+
hideChild(submenu) {
|
|
73
|
+
if (submenu == undefined) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
submenu.querySelectorAll(".ez-dropdown__submenu")
|
|
77
|
+
.forEach((child) => {
|
|
78
|
+
this.reset(child);
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Método responsável por posicionar o submenu na tela.
|
|
83
|
+
* @param menu - Item da lista selecionado para abrir o submenu.
|
|
84
|
+
*/
|
|
85
|
+
setPosition(menu) {
|
|
86
|
+
const submenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(".ez-dropdown__submenu");
|
|
87
|
+
const dropdown = menu === null || menu === void 0 ? void 0 : menu.closest(".ez-dropdown");
|
|
88
|
+
if (submenu == undefined || dropdown == undefined) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
submenu.style.top = this.getPositionTop(menu);
|
|
92
|
+
submenu.style.left = this.getPositionRight(dropdown);
|
|
93
|
+
const bounding = submenu === null || submenu === void 0 ? void 0 : submenu.getBoundingClientRect();
|
|
94
|
+
const docWidth = document.body.clientWidth;
|
|
95
|
+
if ((bounding === null || bounding === void 0 ? void 0 : bounding.right) > docWidth) {
|
|
96
|
+
this.updatePosition(dropdown, submenu);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
/**
|
|
100
|
+
* Método responsável por controlar a altura máxima do dropdown.
|
|
101
|
+
* @param element - Elemento HTML pai do dropdown que será renderizado.
|
|
102
|
+
*/
|
|
103
|
+
setMaxHeight(element) {
|
|
104
|
+
var _a;
|
|
105
|
+
const parentElement = (element === null || element === void 0 ? void 0 : element.shadowRoot) || element;
|
|
106
|
+
const dropdown = parentElement === null || parentElement === void 0 ? void 0 : parentElement.querySelector(".ez-dropdown");
|
|
107
|
+
const docHeight = document.body.clientHeight;
|
|
108
|
+
let submenu;
|
|
109
|
+
let bounding;
|
|
110
|
+
if ((parentElement === null || parentElement === void 0 ? void 0 : parentElement["tagName"]) != undefined) {
|
|
111
|
+
submenu = parentElement;
|
|
112
|
+
bounding = submenu === null || submenu === void 0 ? void 0 : submenu.getBoundingClientRect();
|
|
113
|
+
}
|
|
114
|
+
else {
|
|
115
|
+
bounding = dropdown === null || dropdown === void 0 ? void 0 : dropdown.getBoundingClientRect();
|
|
116
|
+
}
|
|
117
|
+
if (dropdown == undefined || bounding == undefined) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Menu aberto irá ultrapassar a altura da página?
|
|
122
|
+
*/
|
|
123
|
+
if ((bounding.y + bounding.height) > docHeight) {
|
|
124
|
+
/**
|
|
125
|
+
* Menu aberto é um submenu?
|
|
126
|
+
* Sim: realiza o calculo com base na altura do menu pai
|
|
127
|
+
* Não: recalcula a altura do menu para atualizar a barra de rolagem
|
|
128
|
+
*/
|
|
129
|
+
if (submenu != undefined) {
|
|
130
|
+
const dropdownParent = submenu.closest(".ez-dropdown");
|
|
131
|
+
const boundingParent = dropdownParent === null || dropdownParent === void 0 ? void 0 : dropdownParent.getBoundingClientRect();
|
|
132
|
+
const marginTop = parseFloat(((_a = getComputedStyle(submenu)) === null || _a === void 0 ? void 0 : _a.marginTop) || "0");
|
|
133
|
+
if (dropdownParent == undefined || boundingParent == undefined) {
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* Submenu aberto ao ser reposicionado ficará acima da altura do menu pai?
|
|
138
|
+
* Sim: posiciona o submenu na altura do menu pai e recalcula a sua altura para atualizar a barra de rolagem
|
|
139
|
+
* Não: posiciona o submenu entre a altura do menu pai e o rodapé da página
|
|
140
|
+
*/
|
|
141
|
+
if ((boundingParent.y + bounding.height) > docHeight) {
|
|
142
|
+
submenu.style.top = (boundingParent.y - marginTop) + "px";
|
|
143
|
+
dropdown.style.maxHeight = (docHeight - boundingParent.y) + "px";
|
|
144
|
+
}
|
|
145
|
+
else {
|
|
146
|
+
submenu.style.top = (docHeight - bounding.height - marginTop) + "px";
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
let maxHeight = docHeight - bounding.y;
|
|
151
|
+
if (maxHeight < 0) {
|
|
152
|
+
maxHeight = bounding.height - docHeight;
|
|
153
|
+
}
|
|
154
|
+
dropdown.style.maxHeight = maxHeight + "px";
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
this.setSpacerContainer(dropdown);
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* Método responsável por atribuir a classe de espaçamento entre o conteúdo e o scroll.
|
|
161
|
+
* @param dropdown - Elemento HTML pai do container que receberá a classe.
|
|
162
|
+
*/
|
|
163
|
+
setSpacerContainer(dropdown) {
|
|
164
|
+
const container = dropdown === null || dropdown === void 0 ? void 0 : dropdown.querySelector(".ez-dropdown__container");
|
|
165
|
+
if (container == undefined) {
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
if (container.scrollHeight > container.clientHeight) {
|
|
169
|
+
container.classList.add("ez-dropdown__container--spacer");
|
|
170
|
+
}
|
|
171
|
+
else {
|
|
172
|
+
container.classList.remove("ez-dropdown__container--spacer");
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
/**
|
|
176
|
+
* Método responsável por resetar um determinado submenu aberto.
|
|
177
|
+
* @param submenu - Elemento HTML do submenu que será resetado.
|
|
178
|
+
*/
|
|
179
|
+
reset(submenu) {
|
|
180
|
+
if (submenu == undefined) {
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
submenu.classList.add("ez-dropdown__submenu--hide");
|
|
184
|
+
submenu.style.left = "";
|
|
185
|
+
submenu.style.top = "";
|
|
186
|
+
const dropdown = submenu.querySelector(".ez-dropdown");
|
|
187
|
+
this.resetDropdown(dropdown);
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
190
|
+
* Método responsável por resetar um determinado dropdown renderizado.
|
|
191
|
+
* @param dropdown - Elemento HTML do dropdown que será resetado.
|
|
192
|
+
*/
|
|
193
|
+
resetDropdown(dropdown) {
|
|
194
|
+
if (dropdown == undefined) {
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
197
|
+
dropdown.style.maxHeight = "";
|
|
198
|
+
this.setSpacerContainer(dropdown);
|
|
199
|
+
}
|
|
200
|
+
//---------------------------------------------
|
|
201
|
+
// Private methods
|
|
202
|
+
//---------------------------------------------
|
|
203
|
+
/**
|
|
204
|
+
* Método responsável por controlar o scroll do container do submenu aberto.
|
|
205
|
+
* @param menu - Item da lista selecionado para abrir o submenu.
|
|
206
|
+
*/
|
|
207
|
+
setScrollContainer(menu) {
|
|
208
|
+
const container = menu === null || menu === void 0 ? void 0 : menu.closest(".ez-dropdown__container");
|
|
209
|
+
if (container == undefined) {
|
|
210
|
+
return;
|
|
211
|
+
}
|
|
212
|
+
container.onscroll = this.onScrollContainer.bind(this);
|
|
213
|
+
}
|
|
214
|
+
/**
|
|
215
|
+
* Método responsável por fechar os submenus filhos ao movimentar o scroll.
|
|
216
|
+
* @param event - Evento de scroll disparado pelo Elemento HTML pai.
|
|
217
|
+
*/
|
|
218
|
+
onScrollContainer(event) {
|
|
219
|
+
const target = event === null || event === void 0 ? void 0 : event.target;
|
|
220
|
+
this.hideChild(target);
|
|
221
|
+
}
|
|
222
|
+
/**
|
|
223
|
+
* Método responsável por retornar a posição superior (top) de um elemento HTML na tela.
|
|
224
|
+
* @param hostElement - Elemento HTML que será capturado o valor de sua posição superior (top) na tela.
|
|
225
|
+
* @returns Valor da posição superior (top) de um determinado elemento HTML.
|
|
226
|
+
*/
|
|
227
|
+
getPositionTop(hostElement) {
|
|
228
|
+
const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
|
|
229
|
+
if (boundingHost == undefined) {
|
|
230
|
+
return;
|
|
231
|
+
}
|
|
232
|
+
return boundingHost.y + "px";
|
|
233
|
+
}
|
|
234
|
+
/**
|
|
235
|
+
* Método responsável por retornar a posição direita (right) de um elemento HTML na tela.
|
|
236
|
+
* @param hostElement - Elemento HTML que será capturado o valor de sua posição direita (right) na tela.
|
|
237
|
+
* @returns Valor da posição direita (right) de um determinado elemento HTML.
|
|
238
|
+
*/
|
|
239
|
+
getPositionRight(hostElement) {
|
|
240
|
+
const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
|
|
241
|
+
if (boundingHost == undefined) {
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
244
|
+
return (boundingHost.x + boundingHost.width) + "px";
|
|
245
|
+
}
|
|
246
|
+
/**
|
|
247
|
+
* Método responsável por retornar a posição esquerda (left) de um elemento HTML desconsiderando a largura de outro elemento HTML.
|
|
248
|
+
* @param hostElement - Elemento HTML que será capturado o valor de sua posição esquerda (left) na tela.
|
|
249
|
+
* @param targetElement - Elemento HTML que será capturado o valor de sua largura (width).
|
|
250
|
+
* @returns Valor da posição esquerda (left) de um determinado elemento HTML desconsiderando a largura de outro elemento HTML.
|
|
251
|
+
*/
|
|
252
|
+
getPositionLeft(hostElement, targetElement) {
|
|
253
|
+
const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
|
|
254
|
+
const boundingTarget = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getBoundingClientRect();
|
|
255
|
+
if (boundingHost == undefined || boundingTarget == undefined) {
|
|
256
|
+
return;
|
|
257
|
+
}
|
|
258
|
+
return (boundingHost.x - boundingTarget.width) + "px";
|
|
259
|
+
}
|
|
260
|
+
/**
|
|
261
|
+
* Método responsável por atualizar a posição de um elemento HTML que renderizou fora da tela.
|
|
262
|
+
* @param hostElement - Elemento HTML que será a referência de posição dentro da tela.
|
|
263
|
+
* @param targetElement - Elemento HTML que será reposicionado na tela.
|
|
264
|
+
*/
|
|
265
|
+
updatePosition(hostElement, targetElement) {
|
|
266
|
+
const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
|
|
267
|
+
const boundingTarget = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getBoundingClientRect();
|
|
268
|
+
if (boundingHost == undefined || boundingTarget == undefined) {
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
if (boundingHost.x < boundingTarget.right) {
|
|
272
|
+
targetElement.style.left = this.getPositionLeft(hostElement, targetElement);
|
|
273
|
+
this.updatePosition(hostElement, targetElement);
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
const ezDropdownCss = ":host{--ez-dropdown--z-index:var(--more-visible, 2);--ez-dropdown--padding:var(--space--small, 6px);--ez-dropdown--box-shadow:var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));--ez-dropdown--border-radius:var(--border--radius-medium, 12px);--ez-dropdown--background-color:var(--background--xlight, #fff);--ez-dropdown--font-family:var(--font-pattern, 'Roboto');--ez-dropdown--max-width:320px;--ez-dropdown--max-height:440px;--ez-dropdown__item--padding:var(--space--small, 6px);--ez-dropdown__item--gap:var(--space--small, 6px);--ez-dropdown__item--border-radius:var(--border--radius-small, 6px);--ez-dropdown__item--color:var(--title--primary, #2b3a54);--ez-dropdown__item--font-weight:var(--text-weight--medium, 400);--ez-dropdown__item--font-size:var(--text--medium, 14px);--ez-dropdown__item--line-height:calc(var(--ez-dropdown__item--font-size) + 4px);--ez-dropdown__item--background-color:var(--background--medium, #f0f3f7);--ez-dropdown__item--transition:var(--transition, .2s linear);--ez-dropdown__item-label--margin-right:var(--space--medium, 12px);--ez-dropdown__icon--size:var(--icon--medium, 18px);--ez-dropdown__divider--background-color:var(--color--disable-secondary, #f2f5f8);--ez-dropdown__divider--margin:var(--space--extra-small, 3px) 0;--ez-dropdown__group-label--color:var(--text--secondary, #A2ABB9);--ez-dropdown__group-label--font-weight:var(--text-weight--large, 600);--ez-dropdown__group-label--font-size:var(--text--small, 12px);--ez-dropdown__group-label--line-height:var(--text--medium, 14px);--ez-dropdown__group-label--padding:var(--space--small, 6px);--ez-dropdown__submenu--z-index:var(--most-visible, 3);--ez-dropdown__link--font-weight:var(--text-weight--large, 600);--ez-dropdown__link--primary--color:var(--color--primary, #008561);--ez-dropdown__link--critical--color:var(--color-alert--error-800, #BD0025);--ez-dropdown__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-dropdown__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-dropdown__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-dropdown__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-dropdown__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-dropdown__scrollbar--width:var(--space--small, 6px);--ez-dropdown__scrollbar--padding-right:var(--space--extra-small, 3px);display:flex;flex-direction:column;height:fit-content;user-select:none;box-sizing:border-box;position:fixed;z-index:var(--ez-dropdown--z-index)}:host *{box-sizing:border-box}.ez-dropdown{display:flex;padding:var(--ez-dropdown--padding);box-shadow:var(--ez-dropdown--box-shadow);border-radius:var(--ez-dropdown--border-radius);background-color:var(--ez-dropdown--background-color);max-width:var(--ez-dropdown--max-width);max-height:var(--ez-dropdown--max-height)}.ez-dropdown *{font-family:var(--ez-dropdown--font-family)}.ez-dropdown__container{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;flex:auto;scrollbar-color:var(--ez-dropdown__scrollbar--color-clicked) var(--ez-dropdown__scrollbar--color-background)}.ez-dropdown__container::-webkit-scrollbar{background-color:var(--ez-dropdown__scrollbar--color-background);width:var(--ez-dropdown__scrollbar--width);max-width:var(--ez-dropdown__scrollbar--width);min-width:var(--ez-dropdown__scrollbar--width)}.ez-dropdown__container::-webkit-scrollbar-track{background-color:var(--ez-dropdown__scrollbar--color-background);border-radius:var(--ez-dropdown__scrollbar--border-radius)}.ez-dropdown__container::-webkit-scrollbar-thumb{background-color:var(--ez-dropdown__scrollbar--color-default);border-radius:var(--ez-dropdown__scrollbar--border-radius)}.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:hover,.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-dropdown__scrollbar--color-hover)}.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:active,.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-dropdown__scrollbar--color-clicked)}.ez-dropdown__container--spacer{padding-right:var(--ez-dropdown__scrollbar--padding-right)}.ez-dropdown__item{display:flex;align-items:center;background-color:transparent;border-radius:var(--ez-dropdown__item--border-radius);transition:var(--ez-dropdown__item--transition)}.ez-dropdown__item:hover{background-color:var(--ez-dropdown__item--background-color)}.ez-dropdown__item-wrapper{display:flex;align-items:center;position:relative;cursor:pointer;width:100%;margin:0;white-space:nowrap;gap:var(--ez-dropdown__item--gap);color:var(--ez-dropdown__item--color);font-weight:var(--ez-dropdown__item--font-weight);font-size:var(--ez-dropdown__item--font-size);line-height:var(--ez-dropdown__item--line-height);padding:var(--ez-dropdown__item--padding)}.ez-dropdown__item-wrapper ez-icon{display:flex;justify-content:center;align-items:center;width:var(--ez-dropdown__icon--size);height:var(--ez-dropdown__icon--size);min-width:var(--ez-dropdown__icon--size);min-height:var(--ez-dropdown__icon--size)}.ez-dropdown__item-content{display:flex;align-items:center;flex:auto;overflow:hidden;gap:var(--ez-dropdown__item--gap)}.ez-dropdown__item-label{text-align:left;text-overflow:ellipsis;overflow:hidden;flex:auto}.ez-dropdown__item-label:not(:last-child){margin-right:var(--ez-dropdown__item-label--margin-right)}.ez-dropdown__item-content+.ez-dropdown__link{margin-left:var(--ez-dropdown__item-label--margin-right);margin-right:var(--ez-dropdown__item--padding)}.ez-dropdown__item-builder{flex:auto}.ez-dropdown__divider{width:100%;height:2px;border-radius:1px;border:none;display:block;background-color:var(--ez-dropdown__divider--background-color);margin:var(--ez-dropdown__divider--margin)}.ez-dropdown__hidden{visibility:hidden}.ez-dropdown__group{display:flex;flex-direction:column}.ez-dropdown__group-label{display:block;width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ez-dropdown__group-label--color);font-weight:var(--ez-dropdown__group-label--font-weight);font-size:var(--ez-dropdown__group-label--font-size);line-height:var(--ez-dropdown__group-label--line-height);padding:var(--ez-dropdown__group-label--padding)}.ez-dropdown__icon-right{margin-left:auto}.ez-dropdown__submenu{position:fixed;z-index:var(--ez-dropdown__submenu--z-index);margin-top:calc(var(--ez-dropdown__item--padding) * -1)}.ez-dropdown__submenu--hide{display:none}.ez-dropdown__link{display:block;margin-left:auto;cursor:pointer;text-overflow:ellipsis;overflow:hidden;font-weight:var(--ez-dropdown__link--font-weight);max-width:calc(var(--ez-dropdown--max-width) * 0.43)}.ez-dropdown__link--primary{color:var(--ez-dropdown__link--primary--color)}.ez-dropdown__link--critical{color:var(--ez-dropdown__link--critical--color)}.ez-dropdown__link:hover{text-decoration:underline}";
|
|
279
|
+
|
|
280
|
+
let EzDropdown = class {
|
|
281
|
+
constructor(hostRef) {
|
|
282
|
+
registerInstance(this, hostRef);
|
|
283
|
+
this.ezClick = createEvent(this, "ezClick", 7);
|
|
284
|
+
this.ezSubActionClick = createEvent(this, "ezSubActionClick", 7);
|
|
285
|
+
this._itemList = {};
|
|
286
|
+
this._submenuList = [];
|
|
287
|
+
this._openedMenuList = {};
|
|
288
|
+
/**
|
|
289
|
+
* Limitador de níveis de menu + submenu.
|
|
290
|
+
* Valor 0, null ou undefined desativa o limitador.
|
|
291
|
+
*/
|
|
292
|
+
this._levelLimits = 3;
|
|
293
|
+
/**
|
|
294
|
+
* Lista de itens que vão ser apresentados no dropdown.
|
|
295
|
+
*/
|
|
296
|
+
this.items = [];
|
|
297
|
+
}
|
|
298
|
+
//---------------------------------------------
|
|
299
|
+
// Private methods
|
|
300
|
+
//---------------------------------------------
|
|
301
|
+
defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren) {
|
|
302
|
+
return (h(DropdownItem, { item: item, hasIcon: hasIcon, hasChildren: hasChildren, isLockedLevels: isLockedLevels, onSubActionClick: this.onSubActionClick.bind(this) }));
|
|
303
|
+
}
|
|
304
|
+
getMaxOrder(items) {
|
|
305
|
+
if (items == undefined || items.length === 0) {
|
|
306
|
+
return -1;
|
|
307
|
+
}
|
|
308
|
+
return Math.max(...items.map((item) => {
|
|
309
|
+
var _a;
|
|
310
|
+
const order = (_a = item.group) === null || _a === void 0 ? void 0 : _a["order"];
|
|
311
|
+
return order != undefined && order >= 0 ? order : -1;
|
|
312
|
+
}));
|
|
313
|
+
}
|
|
314
|
+
hasIcon(items) {
|
|
315
|
+
return items === null || items === void 0 ? void 0 : items.some((item) => (item.iconName || "") !== "");
|
|
316
|
+
}
|
|
317
|
+
hasGroup(items) {
|
|
318
|
+
return items === null || items === void 0 ? void 0 : items.some((item) => (item.group || "") !== "");
|
|
319
|
+
}
|
|
320
|
+
hasChildren(items) {
|
|
321
|
+
return items === null || items === void 0 ? void 0 : items.some((item) => (item.children || []).length > 0);
|
|
322
|
+
}
|
|
323
|
+
isLockedLevels(level) {
|
|
324
|
+
if (!this._levelLimits) {
|
|
325
|
+
return false;
|
|
326
|
+
}
|
|
327
|
+
return level === (this._levelLimits + 1);
|
|
328
|
+
}
|
|
329
|
+
getItemsByGroup(items, level) {
|
|
330
|
+
let itemsByGroup = {};
|
|
331
|
+
const maxOrder = this.getMaxOrder(items);
|
|
332
|
+
items.forEach((item) => {
|
|
333
|
+
const label = item.group && item.group["label"] != undefined ? item.group["label"] || "noGroup" : item.group || "noGroup";
|
|
334
|
+
const order = item.group && item.group["order"] != undefined ? item.group["order"] : item.group ? (maxOrder + 1) : (maxOrder + 2);
|
|
335
|
+
let groupObj = itemsByGroup[label];
|
|
336
|
+
if (groupObj == undefined) {
|
|
337
|
+
groupObj = {
|
|
338
|
+
items: [],
|
|
339
|
+
order
|
|
340
|
+
};
|
|
341
|
+
}
|
|
342
|
+
this.validateItem(item, level);
|
|
343
|
+
groupObj.items.push(item);
|
|
344
|
+
itemsByGroup[label] = groupObj;
|
|
345
|
+
});
|
|
346
|
+
return ObjectUtils.sortByProperty(itemsByGroup, "order");
|
|
347
|
+
}
|
|
348
|
+
validateItem(item, level) {
|
|
349
|
+
if (this._itemList == undefined) {
|
|
350
|
+
this._itemList = {};
|
|
351
|
+
}
|
|
352
|
+
if (item.type == undefined) {
|
|
353
|
+
item.type = "item";
|
|
354
|
+
}
|
|
355
|
+
if (item.id == undefined) {
|
|
356
|
+
const itemId = `level_${level}_${item.type}`;
|
|
357
|
+
const counter = Object.keys(this._itemList).filter((key) => key.includes(itemId)).length;
|
|
358
|
+
item.id = `${itemId}_${counter + 1}`;
|
|
359
|
+
}
|
|
360
|
+
if (item.label == undefined) {
|
|
361
|
+
item.label = "";
|
|
362
|
+
}
|
|
363
|
+
if (item.subAction != undefined) {
|
|
364
|
+
if (item.subAction.id == undefined) {
|
|
365
|
+
const subId = `subAction_${item.id}`;
|
|
366
|
+
item.subAction.id = subId;
|
|
367
|
+
}
|
|
368
|
+
if (item.subAction.label == undefined) {
|
|
369
|
+
item.subAction.label = "";
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
if (this._itemList[item.id] == undefined) {
|
|
373
|
+
this._itemList[item.id] = {};
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
getItemsRender(groupItems, level, hasIcon, hasChildren) {
|
|
377
|
+
if (groupItems == undefined) {
|
|
378
|
+
return;
|
|
379
|
+
}
|
|
380
|
+
let counterLevel = level;
|
|
381
|
+
let isLockedLevels = false;
|
|
382
|
+
if (hasChildren) {
|
|
383
|
+
counterLevel++;
|
|
384
|
+
isLockedLevels = this.isLockedLevels(counterLevel);
|
|
385
|
+
}
|
|
386
|
+
return groupItems.map((item) => {
|
|
387
|
+
var _a;
|
|
388
|
+
return (item.type !== "divider"
|
|
389
|
+
? h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item) }, this.itemBuilder
|
|
390
|
+
? h("div", { class: "ez-dropdown__item-builder", innerHTML: this.itemBuilder(item, level) })
|
|
391
|
+
: this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
392
|
+
!isLockedLevels &&
|
|
393
|
+
hasChildren &&
|
|
394
|
+
h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
|
|
395
|
+
: h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownDivider` })));
|
|
396
|
+
});
|
|
397
|
+
}
|
|
398
|
+
renderDropdown(branchItems = this.items, level = 1) {
|
|
399
|
+
if (branchItems == undefined || this.isLockedLevels(level)) {
|
|
400
|
+
return;
|
|
401
|
+
}
|
|
402
|
+
const itemsByGroup = this.getItemsByGroup(branchItems, level);
|
|
403
|
+
const hasGroup = this.hasGroup(branchItems);
|
|
404
|
+
const hasIcon = this.hasIcon(branchItems);
|
|
405
|
+
const hasChildren = this.hasChildren(branchItems);
|
|
406
|
+
return (h("div", { class: "ez-dropdown", "data-level": level }, h("div", { class: "ez-dropdown__container" }, Object.keys(itemsByGroup)
|
|
407
|
+
.map((groupLabel) => {
|
|
408
|
+
return (h("div", Object.assign({ class: "ez-dropdown__group" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownGroup`) }), groupLabel !== "noGroup" &&
|
|
409
|
+
h("label", { class: "ez-dropdown__group-label", title: groupLabel }, groupLabel), hasGroup &&
|
|
410
|
+
groupLabel === "noGroup" &&
|
|
411
|
+
h("hr", { class: "ez-dropdown__divider" }), this.getItemsRender(itemsByGroup[groupLabel].items, level, hasIcon, hasChildren)));
|
|
412
|
+
}))));
|
|
413
|
+
}
|
|
414
|
+
hasOpenedSubmenu(level) {
|
|
415
|
+
const openedLevels = Object.keys(this._openedMenuList);
|
|
416
|
+
return openedLevels.includes(level.toString())
|
|
417
|
+
|| openedLevels.some((openedLevel) => Number(openedLevel) > level);
|
|
418
|
+
}
|
|
419
|
+
hasSubmenuOpened() {
|
|
420
|
+
var _a;
|
|
421
|
+
return (_a = this._submenuList) === null || _a === void 0 ? void 0 : _a.some((submenu) => !submenu.classList.contains("ez-dropdown__submenu--hide"));
|
|
422
|
+
}
|
|
423
|
+
setEvents() {
|
|
424
|
+
document.removeEventListener('click', this.onHideAllSubmenu.bind(this));
|
|
425
|
+
document.addEventListener('click', this.onHideAllSubmenu.bind(this));
|
|
426
|
+
document.removeEventListener('scroll', this.onSubmenuReposition.bind(this));
|
|
427
|
+
document.addEventListener('scroll', this.onSubmenuReposition.bind(this));
|
|
428
|
+
}
|
|
429
|
+
//---------------------------------------------
|
|
430
|
+
// Event handlers
|
|
431
|
+
//---------------------------------------------
|
|
432
|
+
onShowSubmenu(evt, item) {
|
|
433
|
+
var _a;
|
|
434
|
+
if (evt == undefined) {
|
|
435
|
+
return;
|
|
436
|
+
}
|
|
437
|
+
const menu = this._itemList[item.id];
|
|
438
|
+
if (!(menu === null || menu === void 0 ? void 0 : menu.classList.contains("ez-dropdown__item"))) {
|
|
439
|
+
return;
|
|
440
|
+
}
|
|
441
|
+
const level = Number(menu.dataset.level || "0");
|
|
442
|
+
if (this.hasOpenedSubmenu(level)) {
|
|
443
|
+
this._submenuControl.hide(this._openedMenuList[level]);
|
|
444
|
+
delete this._openedMenuList[level];
|
|
445
|
+
}
|
|
446
|
+
if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
447
|
+
return;
|
|
448
|
+
}
|
|
449
|
+
this._openedMenuList[menu.dataset.level] = menu;
|
|
450
|
+
this._submenuControl.show(menu);
|
|
451
|
+
}
|
|
452
|
+
onItemClick(evt, item) {
|
|
453
|
+
const target = evt === null || evt === void 0 ? void 0 : evt.target;
|
|
454
|
+
if (target === null || target === void 0 ? void 0 : target.classList.contains("ez-dropdown__link")) {
|
|
455
|
+
return;
|
|
456
|
+
}
|
|
457
|
+
this.value = item;
|
|
458
|
+
this.ezClick.emit(item);
|
|
459
|
+
}
|
|
460
|
+
onSubActionClick(item) {
|
|
461
|
+
this.ezSubActionClick.emit(item.subAction);
|
|
462
|
+
}
|
|
463
|
+
onHideAllSubmenu(evt = undefined) {
|
|
464
|
+
const target = evt === null || evt === void 0 ? void 0 : evt.target;
|
|
465
|
+
if (this.hasSubmenuOpened() && (target == undefined || (!target.closest(".ez-dropdown") && target.tagName !== "EZ-DROPDOWN"))) {
|
|
466
|
+
this._openedMenuList = {};
|
|
467
|
+
this._submenuList.forEach(this._submenuControl.reset.bind(this._submenuControl));
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
onSubmenuReposition() {
|
|
471
|
+
if (this._openedMenuList != undefined) {
|
|
472
|
+
Object.keys(this._openedMenuList).forEach((key) => {
|
|
473
|
+
const menu = this._openedMenuList[key];
|
|
474
|
+
this._submenuControl.setPosition(menu);
|
|
475
|
+
});
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
//---------------------------------------------
|
|
479
|
+
// Lifecycle web component
|
|
480
|
+
//---------------------------------------------
|
|
481
|
+
componentDidLoad() {
|
|
482
|
+
ElementIDUtils.addIDInfo(this._element);
|
|
483
|
+
this._submenuControl = new SubmenuControl();
|
|
484
|
+
this._submenuControl.setMaxHeight(this._element);
|
|
485
|
+
}
|
|
486
|
+
componentDidUpdate() {
|
|
487
|
+
this._submenuControl.setMaxHeight(this._element);
|
|
488
|
+
}
|
|
489
|
+
componentDidRender() {
|
|
490
|
+
this.setEvents();
|
|
491
|
+
}
|
|
492
|
+
render() {
|
|
493
|
+
return (h(Host, null, this.renderDropdown()));
|
|
494
|
+
}
|
|
495
|
+
get _element() { return getElement(this); }
|
|
496
|
+
};
|
|
497
|
+
EzDropdown.style = ezDropdownCss;
|
|
498
|
+
|
|
499
|
+
export { EzDropdown as ez_dropdown };
|