@limetech/lime-elements 37.53.0 → 37.53.2
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/CHANGELOG.md +19 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-date-picker.cjs.entry.js +5 -20
- package/dist/cjs/limel-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +24 -20
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-table.cjs.entry.js +32 -10
- package/dist/cjs/limel-table.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/date-picker/date-picker.js +5 -24
- package/dist/collection/components/date-picker/date-picker.js.map +1 -1
- package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js +4 -1
- package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js.map +1 -1
- package/dist/collection/components/date-picker/pickers/Picker.js +20 -19
- package/dist/collection/components/date-picker/pickers/Picker.js.map +1 -1
- package/dist/collection/components/table/table-selection.js +16 -8
- package/dist/collection/components/table/table-selection.js.map +1 -1
- package/dist/collection/components/table/table.js +24 -6
- package/dist/collection/components/table/table.js.map +1 -1
- package/dist/collection/components/table/table.types.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-date-picker.entry.js +5 -20
- package/dist/esm/limel-date-picker.entry.js.map +1 -1
- package/dist/esm/limel-flatpickr-adapter.entry.js +24 -20
- package/dist/esm/limel-flatpickr-adapter.entry.js.map +1 -1
- package/dist/esm/limel-table.entry.js +32 -10
- package/dist/esm/limel-table.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/index.esm.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/p-5224d7bb.entry.js +2 -0
- package/dist/lime-elements/p-5224d7bb.entry.js.map +1 -0
- package/dist/lime-elements/{p-42b6ba6d.entry.js → p-5a035a41.entry.js} +3 -3
- package/dist/lime-elements/p-5a035a41.entry.js.map +1 -0
- package/dist/lime-elements/{p-cc5d8b3f.entry.js → p-852e7a2b.entry.js} +2 -2
- package/dist/lime-elements/p-852e7a2b.entry.js.map +1 -0
- package/dist/types/components/date-picker/date-picker.d.ts +0 -2
- package/dist/types/components/date-picker/pickers/Picker.d.ts +3 -2
- package/dist/types/components/table/table-selection.d.ts +4 -2
- package/dist/types/components/table/table.d.ts +4 -3
- package/dist/types/components/table/table.types.d.ts +7 -0
- package/dist/types/components.d.ts +4 -4
- package/package.json +1 -1
- package/dist/lime-elements/p-42b6ba6d.entry.js.map +0 -1
- package/dist/lime-elements/p-b76d8f4f.entry.js +0 -2
- package/dist/lime-elements/p-b76d8f4f.entry.js.map +0 -1
- package/dist/lime-elements/p-cc5d8b3f.entry.js.map +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[1,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"required\":[516],\"allowResize\":[516,\"allow-resize\"]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"formattedValue\":[32],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"message\":[1],\"timeout\":[2],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"show\":[64]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-dynamic-label_4.cjs\",[[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-action-bar_4.cjs\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}],[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"],\"invalidLink\":[32]}],[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-prosemirror-adapter.cjs\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1]}]]],[\"limel-icon_2.cjs\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"parent\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}],[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"value\":[514],\"indeterminate\":[516]}]]],[\"limel-badge_3.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}]]],[\"limel-breadcrumbs_5.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]]]"), options);
|
|
17
|
+
return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[1,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"required\":[516],\"allowResize\":[516,\"allow-resize\"]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"message\":[1],\"timeout\":[2],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"show\":[64]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-dynamic-label_4.cjs\",[[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-action-bar_4.cjs\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}],[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"],\"invalidLink\":[32]}],[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-prosemirror-adapter.cjs\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1]}]]],[\"limel-icon_2.cjs\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"parent\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}],[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"value\":[514],\"indeterminate\":[516]}]]],[\"limel-badge_3.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}]]],[\"limel-breadcrumbs_5.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]]]"), options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -63,7 +63,6 @@ export class DatePicker {
|
|
|
63
63
|
this.format = undefined;
|
|
64
64
|
this.language = 'en';
|
|
65
65
|
this.formatter = undefined;
|
|
66
|
-
this.formattedValue = undefined;
|
|
67
66
|
this.internalFormat = undefined;
|
|
68
67
|
this.showPortal = false;
|
|
69
68
|
this.handleCalendarChange = this.handleCalendarChange.bind(this);
|
|
@@ -81,7 +80,6 @@ export class DatePicker {
|
|
|
81
80
|
componentWillLoad() {
|
|
82
81
|
this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());
|
|
83
82
|
this.updateInternalFormatAndType();
|
|
84
|
-
this.formattedValue = this.formatValue(this.value);
|
|
85
83
|
}
|
|
86
84
|
componentWillUpdate() {
|
|
87
85
|
this.updateInternalFormatAndType();
|
|
@@ -94,29 +92,22 @@ export class DatePicker {
|
|
|
94
92
|
inputProps.trailingIcon = 'clear_symbol';
|
|
95
93
|
}
|
|
96
94
|
if (this.useNative) {
|
|
97
|
-
return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.
|
|
95
|
+
return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
|
|
98
96
|
}
|
|
99
97
|
const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
|
|
98
|
+
const formatter = this.formatter || this.formatValue;
|
|
100
99
|
return [
|
|
101
|
-
h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.
|
|
102
|
-
h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter:
|
|
100
|
+
h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
|
|
101
|
+
h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: formatter, onChange: this.handleCalendarChange })),
|
|
103
102
|
];
|
|
104
103
|
}
|
|
105
|
-
onValueChange(newValue, oldValue) {
|
|
106
|
-
if (newValue !== oldValue && newValue !== this.formattedValue) {
|
|
107
|
-
this.formattedValue = this.formatValue(this.value);
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
104
|
updateInternalFormatAndType() {
|
|
111
105
|
this.nativeType = nativeTypeForConsumerType[this.type || 'default'];
|
|
112
106
|
this.nativeFormat = nativeFormatForType[this.nativeType];
|
|
113
107
|
if (this.useNative) {
|
|
114
108
|
this.internalFormat = this.nativeFormat;
|
|
115
109
|
}
|
|
116
|
-
else if (this.formatter) {
|
|
117
|
-
this.formatValue = this.formatter;
|
|
118
|
-
}
|
|
119
|
-
else if (this.format) {
|
|
110
|
+
else if (this.formatter || this.format) {
|
|
120
111
|
this.internalFormat = this.format;
|
|
121
112
|
}
|
|
122
113
|
else {
|
|
@@ -126,7 +117,6 @@ export class DatePicker {
|
|
|
126
117
|
nativeChangeHandler(event) {
|
|
127
118
|
event.stopPropagation();
|
|
128
119
|
const date = this.dateFormatter.parseDate(event.detail, this.internalFormat);
|
|
129
|
-
this.formattedValue = event.detail;
|
|
130
120
|
this.change.emit(date);
|
|
131
121
|
}
|
|
132
122
|
showCalendar(event) {
|
|
@@ -171,7 +161,6 @@ export class DatePicker {
|
|
|
171
161
|
}
|
|
172
162
|
handleCalendarChange(event) {
|
|
173
163
|
const date = event.detail;
|
|
174
|
-
this.formattedValue = this.formatValue(date);
|
|
175
164
|
event.stopPropagation();
|
|
176
165
|
if (this.pickerIsAutoClosing()) {
|
|
177
166
|
this.hideCalendar();
|
|
@@ -197,7 +186,6 @@ export class DatePicker {
|
|
|
197
186
|
return this.type !== 'datetime' && this.type !== 'time';
|
|
198
187
|
}
|
|
199
188
|
clearValue() {
|
|
200
|
-
this.formattedValue = '';
|
|
201
189
|
this.change.emit(null);
|
|
202
190
|
}
|
|
203
191
|
static get is() { return "limel-date-picker"; }
|
|
@@ -442,7 +430,6 @@ export class DatePicker {
|
|
|
442
430
|
}
|
|
443
431
|
static get states() {
|
|
444
432
|
return {
|
|
445
|
-
"formattedValue": {},
|
|
446
433
|
"internalFormat": {},
|
|
447
434
|
"showPortal": {}
|
|
448
435
|
};
|
|
@@ -470,11 +457,5 @@ export class DatePicker {
|
|
|
470
457
|
}];
|
|
471
458
|
}
|
|
472
459
|
static get elementRef() { return "host"; }
|
|
473
|
-
static get watchers() {
|
|
474
|
-
return [{
|
|
475
|
-
"propName": "value",
|
|
476
|
-
"methodName": "onValueChange"
|
|
477
|
-
}];
|
|
478
|
-
}
|
|
479
460
|
}
|
|
480
461
|
//# sourceMappingURL=date-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './dateFormatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private formattedValue: string;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n\n this.formattedValue = this.formatValue(this.value);\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n value={this.formattedValue}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={this.helperText}\n required={this.required}\n value={this.formattedValue}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={this.formatValue}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n @Watch('value')\n protected onValueChange(newValue: string, oldValue: string) {\n if (newValue !== oldValue && newValue !== this.formattedValue) {\n this.formattedValue = this.formatValue(this.value);\n }\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter) {\n this.formatValue = this.formatter;\n } else if (this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat,\n );\n this.formattedValue = event.detail;\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n },\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field'),\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n this.formattedValue = this.formatValue(date);\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.formattedValue = '';\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"]}
|
|
1
|
+
{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './dateFormatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n value={this.formatValue(this.value)}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n const formatter = this.formatter || this.formatValue;\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={this.helperText}\n required={this.required}\n value={this.value ? formatter(this.value) : ''}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={formatter}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter || this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat,\n );\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n },\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field'),\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"]}
|
|
@@ -50,12 +50,15 @@ export class DatePickerCalendar {
|
|
|
50
50
|
this.picker = new DatetimePicker(this.format, this.language, this.change);
|
|
51
51
|
break;
|
|
52
52
|
}
|
|
53
|
-
this.picker.
|
|
53
|
+
this.picker.formatter = this.formatter;
|
|
54
54
|
}
|
|
55
55
|
componentDidUpdate() {
|
|
56
56
|
if (!this.flatPickrCreated) {
|
|
57
57
|
this.createFlatpickr();
|
|
58
58
|
}
|
|
59
|
+
else if (!this.isOpen) {
|
|
60
|
+
this.picker.setValue(this.value);
|
|
61
|
+
}
|
|
59
62
|
this.tryFixConfusingWidthBug();
|
|
60
63
|
}
|
|
61
64
|
tryFixConfusingWidthBug() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatpickr-adapter.js","sourceRoot":"","sources":["../../../../src/components/date-picker/flatpickr-adapter/flatpickr-adapter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,SAAS,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD;;;;;;GAMG;AAMH,MAAM,OAAO,kBAAkB;;IAgDnB,qBAAgB,GAAY,KAAK,CAAC;;gBArClB,UAAU;;;;oBAyBL,IAAI;;;EAgB1B,iBAAiB;IACpB,QAAQ,IAAI,CAAC,IAAI,EAAE;MACf,KAAK,MAAM;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,cAAc,CAC5B,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,CACd,CAAC;QACF,MAAM;MAEV,KAAK,MAAM;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,UAAU,CACxB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,CACd,CAAC;QACF,MAAM;MAEV,KAAK,MAAM;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,UAAU,CACxB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,CACd,CAAC;QACF,MAAM;MAEV,KAAK,OAAO;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,WAAW,CACzB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,EACX,SAAS,CACZ,CAAC;QACF,MAAM;MAEV,KAAK,SAAS;QACV,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,CAC3B,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,EACX,SAAS,CACZ,CAAC;QACF,MAAM;MACV,KAAK,MAAM;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,UAAU,CACxB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,EACX,SAAS,CACZ,CAAC;QACF,MAAM;MAEV,KAAK,UAAU,CAAC;MAChB;QACI,IAAI,CAAC,MAAM,GAAG,IAAI,cAAc,CAC5B,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,CACd,CAAC;QACF,MAAM;KACb;IAED,IAAI,CAAC,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"flatpickr-adapter.js","sourceRoot":"","sources":["../../../../src/components/date-picker/flatpickr-adapter/flatpickr-adapter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { DateType, Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { DatePicker as DateOnlyPicker } from '../pickers/DatePicker';\nimport { DatetimePicker } from '../pickers/DatetimePicker';\nimport { MonthPicker } from '../pickers/MonthPicker';\nimport { Picker } from '../pickers/Picker';\nimport { QuarterPicker } from '../pickers/QuarterPicker';\nimport { TimePicker } from '../pickers/TimePicker';\nimport { WeekPicker } from '../pickers/WeekPicker';\nimport { YearPicker } from '../pickers/YearPicker';\n\n/**\n * This component is internal and only supposed to be used by\n * the limel-date-picker. This component is needed in order for us\n * to render the flatpickr calendar in a portal.\n *\n * @private\n */\n@Component({\n tag: 'limel-flatpickr-adapter',\n shadow: true,\n styleUrl: 'flatpickr-adapter.scss',\n})\nexport class DatePickerCalendar {\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop()\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop()\n public format: string;\n\n /**\n * Set to `true` if the calendar should be open.\n */\n @Prop()\n public isOpen: boolean;\n\n /**\n * The native input element to use with flatpickr.\n */\n @Prop()\n public inputElement: HTMLElement;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop()\n public language: Languages = 'en';\n\n @Prop()\n public formatter!: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n public change: EventEmitter<Date>;\n\n private picker: Picker;\n private flatPickrCreated: boolean = false;\n\n private container: HTMLElement;\n\n public componentWillLoad() {\n switch (this.type) {\n case 'date':\n this.picker = new DateOnlyPicker(\n this.format,\n this.language,\n this.change,\n );\n break;\n\n case 'time':\n this.picker = new TimePicker(\n this.format,\n this.language,\n this.change,\n );\n break;\n\n case 'week':\n this.picker = new WeekPicker(\n this.format,\n this.language,\n this.change,\n );\n break;\n\n case 'month':\n this.picker = new MonthPicker(\n this.format,\n this.language,\n this.change,\n translate,\n );\n break;\n\n case 'quarter':\n this.picker = new QuarterPicker(\n this.format,\n this.language,\n this.change,\n translate,\n );\n break;\n case 'year':\n this.picker = new YearPicker(\n this.format,\n this.language,\n this.change,\n translate,\n );\n break;\n\n case 'datetime':\n default:\n this.picker = new DatetimePicker(\n this.format,\n this.language,\n this.change,\n );\n break;\n }\n\n this.picker.formatter = this.formatter;\n }\n\n public componentDidUpdate() {\n if (!this.flatPickrCreated) {\n this.createFlatpickr();\n } else if (!this.isOpen) {\n this.picker.setValue(this.value);\n }\n\n this.tryFixConfusingWidthBug();\n }\n\n private tryFixConfusingWidthBug() {\n // Sometimes the datepickr renders with the width set to 1px.\n // We've not been able to understand why but believe it has\n // to do with the internal implementation of flatpickr.\n // The fix below is an ugly fix that seems to solve this\n // issue for us.\n const ONE_SECOND = 1000;\n const TEN_PIXELS = 10;\n if (this.isOpen) {\n setTimeout(() => {\n if (this.isOpen) {\n const flatpickrElement = this.container.querySelector(\n 'div.flatpickr-calendar',\n );\n const { width } = flatpickrElement.getBoundingClientRect();\n if (width < TEN_PIXELS) {\n this.destroyFlatpickr();\n this.createFlatpickr();\n }\n }\n }, ONE_SECOND);\n }\n }\n\n private createFlatpickr() {\n if (!this.inputElement) {\n // The input element is programatically set on this element\n // after its been rendered.\n return;\n }\n\n this.picker.init(this.inputElement, this.container, this.value);\n this.flatPickrCreated = true;\n }\n\n private destroyFlatpickr() {\n this.picker.destroy();\n }\n\n public disconnectedCallback() {\n this.picker.destroy();\n }\n\n public render() {\n return (\n <div\n class=\"container\"\n ref={(el) => (this.container = el)}\n style={{\n '--today-label': `\"${translate.get('date-picker.today')}\"`,\n }}\n />\n );\n }\n}\n"]}
|
|
@@ -9,6 +9,7 @@ import 'moment/locale/nl';
|
|
|
9
9
|
import 'moment/locale/sv';
|
|
10
10
|
import moment from 'moment/moment';
|
|
11
11
|
import { isAndroidDevice, isIOSDevice } from '../../../util/device';
|
|
12
|
+
const ARIA_DATE_FORMAT = 'F j, Y';
|
|
12
13
|
export class Picker {
|
|
13
14
|
constructor(dateFormat, language, change) {
|
|
14
15
|
this.change = change;
|
|
@@ -22,31 +23,20 @@ export class Picker {
|
|
|
22
23
|
this.getWeek = this.getWeek.bind(this);
|
|
23
24
|
this.handleClose = this.handleClose.bind(this);
|
|
24
25
|
this.handleOnClose = this.handleOnClose.bind(this);
|
|
25
|
-
this.parseDate = this.parseDate.bind(this);
|
|
26
26
|
this.getFlatpickrLang = this.getFlatpickrLang.bind(this);
|
|
27
27
|
}
|
|
28
28
|
init(element, container, value) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
disableMobile: !this.nativePicker,
|
|
32
|
-
formatDate: this.nativePicker ? undefined : this.formatDate,
|
|
33
|
-
parseDate: this.nativePicker ? undefined : this.parseDate,
|
|
34
|
-
appendTo: container,
|
|
35
|
-
onClose: this.handleOnClose,
|
|
36
|
-
defaultDate: value,
|
|
37
|
-
onValueUpdate: this.handleClose,
|
|
38
|
-
inline: !this.nativePicker,
|
|
39
|
-
locale: FlatpickrLanguages[this.getFlatpickrLang()] ||
|
|
40
|
-
FlatpickrLanguages.en,
|
|
41
|
-
getWeek: this.getWeek,
|
|
42
|
-
};
|
|
43
|
-
config = Object.assign(Object.assign({}, config), this.getConfig(this.nativePicker));
|
|
29
|
+
const config = Object.assign({ clickOpens: this.nativePicker, disableMobile: !this.nativePicker, formatDate: this.nativePicker ? undefined : this.formatDate, appendTo: container, onClose: this.handleOnClose, defaultDate: value, onValueUpdate: this.handleClose, inline: !this.nativePicker, locale: FlatpickrLanguages[this.getFlatpickrLang()] ||
|
|
30
|
+
FlatpickrLanguages.en, getWeek: this.getWeek }, this.getConfig(this.nativePicker));
|
|
44
31
|
// Week numbers designate weeks as starting with Monday and
|
|
45
32
|
// ending with Sunday. To make the week numbers make sense,
|
|
46
33
|
// the calendar has to show weeks in the same way.
|
|
47
34
|
config.locale.firstDayOfWeek = 1;
|
|
48
35
|
this.flatpickr = flatpickr(element, config);
|
|
49
36
|
}
|
|
37
|
+
setValue(value) {
|
|
38
|
+
this.flatpickr.setDate(value, false);
|
|
39
|
+
}
|
|
50
40
|
redraw() {
|
|
51
41
|
this.flatpickr.redraw();
|
|
52
42
|
}
|
|
@@ -80,12 +70,23 @@ export class Picker {
|
|
|
80
70
|
getPickerDate(selectedDates) {
|
|
81
71
|
return selectedDates[0] ? new Date(selectedDates[0].toJSON()) : null;
|
|
82
72
|
}
|
|
73
|
+
get formatDate() {
|
|
74
|
+
const longDateFormat = new Intl.DateTimeFormat(this.language, {
|
|
75
|
+
dateStyle: 'long',
|
|
76
|
+
});
|
|
77
|
+
return (date, format) => {
|
|
78
|
+
if (!date) {
|
|
79
|
+
return '';
|
|
80
|
+
}
|
|
81
|
+
if (format === ARIA_DATE_FORMAT) {
|
|
82
|
+
return longDateFormat.format(date);
|
|
83
|
+
}
|
|
84
|
+
return this.formatter(date);
|
|
85
|
+
};
|
|
86
|
+
}
|
|
83
87
|
getWeek(date) {
|
|
84
88
|
return moment(date).isoWeek();
|
|
85
89
|
}
|
|
86
|
-
parseDate(date) {
|
|
87
|
-
return moment(date, this.dateFormat, this.getMomentLang()).toDate();
|
|
88
|
-
}
|
|
89
90
|
handleOnClose() {
|
|
90
91
|
this.flatpickr.element.focus();
|
|
91
92
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/pickers/Picker.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AAErD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,OAAgB,MAAM;EASxB,YACI,UAAkB,EAClB,QAAgB,EACN,MAA0B;IAA1B,WAAM,GAAN,MAAM,CAAoB;IAR9B,aAAQ,GAAW,IAAI,CAAC;IAU9B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzB,MAAM,QAAQ,GAAG,WAAW,EAAE,IAAI,eAAe,EAAE,CAAC;IACpD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;IAC7B,IAAI,UAAU,EAAE;MACZ,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;KAChC;IAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/pickers/Picker.ts"],"names":[],"mappings":"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","sourcesContent":["import flatpickr from 'flatpickr';\nimport FlatpickrLanguages from 'flatpickr/dist/l10n';\nimport { EventEmitter } from '@stencil/core';\nimport 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { isAndroidDevice, isIOSDevice } from '../../../util/device';\n\nconst ARIA_DATE_FORMAT = 'F j, Y';\n\nexport abstract class Picker {\n public formatter: (date: Date) => string;\n\n protected dateFormat: string;\n protected language: string = 'en';\n\n protected flatpickr: flatpickr.Instance;\n protected nativePicker: boolean;\n\n public constructor(\n dateFormat: string,\n language: string,\n protected change: EventEmitter<Date>,\n ) {\n this.language = language;\n const isMobile = isIOSDevice() || isAndroidDevice();\n this.nativePicker = isMobile;\n if (dateFormat) {\n this.dateFormat = dateFormat;\n }\n\n this.getWeek = this.getWeek.bind(this);\n this.handleClose = this.handleClose.bind(this);\n this.handleOnClose = this.handleOnClose.bind(this);\n this.getFlatpickrLang = this.getFlatpickrLang.bind(this);\n }\n\n public init(element: HTMLElement, container: HTMLElement, value?: Date) {\n const config: flatpickr.Options.Options = {\n clickOpens: this.nativePicker,\n disableMobile: !this.nativePicker,\n formatDate: this.nativePicker ? undefined : this.formatDate,\n appendTo: container,\n onClose: this.handleOnClose,\n defaultDate: value,\n onValueUpdate: this.handleClose,\n inline: !this.nativePicker,\n locale:\n FlatpickrLanguages[this.getFlatpickrLang()] ||\n FlatpickrLanguages.en,\n getWeek: this.getWeek,\n ...this.getConfig(this.nativePicker),\n };\n\n // Week numbers designate weeks as starting with Monday and\n // ending with Sunday. To make the week numbers make sense,\n // the calendar has to show weeks in the same way.\n (config.locale as flatpickr.CustomLocale).firstDayOfWeek = 1;\n\n this.flatpickr = flatpickr(element, config) as flatpickr.Instance;\n }\n\n public setValue(value: Date) {\n this.flatpickr.setDate(value, false);\n }\n\n public redraw() {\n this.flatpickr.redraw();\n }\n\n public destroy() {\n if (!this.flatpickr) {\n return;\n }\n\n this.flatpickr.destroy();\n }\n\n public abstract getConfig(\n useNativePicker: boolean,\n ): flatpickr.Options.Options;\n\n protected handleClose(selectedDates): Promise<any> {\n return new Promise((resolve) => {\n setTimeout(() => {\n const pickerDate = this.getPickerDate(selectedDates);\n this.change.emit(pickerDate);\n resolve(pickerDate);\n }, 0);\n });\n }\n\n protected getFlatpickrLang() {\n if (this.language === 'nb') {\n return 'no';\n }\n\n return this.language;\n }\n\n protected getMomentLang() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n private getPickerDate(selectedDates) {\n return selectedDates[0] ? new Date(selectedDates[0].toJSON()) : null;\n }\n\n private get formatDate() {\n const longDateFormat = new Intl.DateTimeFormat(this.language, {\n dateStyle: 'long',\n });\n\n return (date: Date | null, format: string): string => {\n if (!date) {\n return '';\n }\n\n if (format === ARIA_DATE_FORMAT) {\n return longDateFormat.format(date);\n }\n\n return this.formatter(date);\n };\n }\n\n private getWeek(date) {\n return moment(date).isoWeek();\n }\n\n private handleOnClose() {\n this.flatpickr.element.focus();\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { setElementProperties } from './columns';
|
|
2
2
|
import { Selection } from './selection';
|
|
3
|
-
import { isEqual } from 'lodash-es';
|
|
4
3
|
const LIMEL_CHECKBOX = 'limel-checkbox';
|
|
4
|
+
const getRowId = (data) => { var _a; return (_a = data.id) !== null && _a !== void 0 ? _a : data; };
|
|
5
5
|
/**
|
|
6
6
|
* Provides row selection to Tabulator with shift-click support for range selections
|
|
7
7
|
*/
|
|
@@ -36,7 +36,13 @@ export class TableSelection {
|
|
|
36
36
|
else {
|
|
37
37
|
this.updateRowSelectors(this.selection.toggleSelection(rowPosition));
|
|
38
38
|
}
|
|
39
|
-
this.selectEvent.emit(this.selection.items);
|
|
39
|
+
this.selectEvent.emit(this.selection.items.map(this.getRowData));
|
|
40
|
+
};
|
|
41
|
+
this.getRowData = (item) => {
|
|
42
|
+
if (typeof item === 'object') {
|
|
43
|
+
return item;
|
|
44
|
+
}
|
|
45
|
+
return this.getTable().getRow(item).getData();
|
|
40
46
|
};
|
|
41
47
|
this.updateRowSelectors = (changeSet) => {
|
|
42
48
|
changeSet.indexes
|
|
@@ -60,7 +66,7 @@ export class TableSelection {
|
|
|
60
66
|
this.getRowByIndex = (index) => {
|
|
61
67
|
return this.getTable().getRowFromPosition(index, true);
|
|
62
68
|
};
|
|
63
|
-
this.selection = new Selection((index) => this.getRowByIndex(index).getData());
|
|
69
|
+
this.selection = new Selection((index) => getRowId(this.getRowByIndex(index).getData()));
|
|
64
70
|
}
|
|
65
71
|
/**
|
|
66
72
|
* @returns Returns `true` when the selection is non-empty, otherwise `false`
|
|
@@ -79,13 +85,15 @@ export class TableSelection {
|
|
|
79
85
|
*
|
|
80
86
|
* @param data - The selected items
|
|
81
87
|
*/
|
|
82
|
-
setSelection(data) {
|
|
83
|
-
|
|
88
|
+
setSelection(data = []) {
|
|
89
|
+
const newItems = data.map(getRowId);
|
|
90
|
+
if (this.selection.size === data.length &&
|
|
91
|
+
this.selection.items.every((oldItem, index) => oldItem === newItems[index])) {
|
|
84
92
|
return;
|
|
85
93
|
}
|
|
86
|
-
this.selection.items =
|
|
94
|
+
this.selection.items = newItems;
|
|
87
95
|
const rows = this.getActiveRows();
|
|
88
|
-
rows.forEach((row) => this.updateRowSelector(row, this.selection.has(row.getData())));
|
|
96
|
+
rows.forEach((row) => this.updateRowSelector(row, this.selection.has(getRowId(row.getData()))));
|
|
89
97
|
}
|
|
90
98
|
/**
|
|
91
99
|
* Prepends a checkbox column used for row selection to the given column definitions
|
|
@@ -116,7 +124,7 @@ export class TableSelection {
|
|
|
116
124
|
return (cell) => {
|
|
117
125
|
const element = this.pool.get(LIMEL_CHECKBOX);
|
|
118
126
|
setElementProperties(element, {
|
|
119
|
-
checked: this.selection.has(cell.getData()),
|
|
127
|
+
checked: this.selection.has(getRowId(cell.getData())),
|
|
120
128
|
});
|
|
121
129
|
element.style.display = 'inline-block';
|
|
122
130
|
return element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-selection.js","sourceRoot":"","sources":["../../../src/components/table/table-selection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAsB,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"table-selection.js","sourceRoot":"","sources":["../../../src/components/table/table-selection.ts"],"names":[],"mappings":"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","sourcesContent":["import { EventEmitter } from '@stencil/core';\nimport Tabulator from 'tabulator-tables';\nimport { setElementProperties } from './columns';\nimport { ElementPool } from './element-pool';\nimport { Selection, SelectionChangeSet } from './selection';\nimport { RowData } from './table.types';\n\nconst LIMEL_CHECKBOX = 'limel-checkbox';\n\nconst getRowId = (data: RowData) => data.id ?? data;\n\n/**\n * Provides row selection to Tabulator with shift-click support for range selections\n */\nexport class TableSelection {\n private selection: Selection;\n\n /**\n * Creates an instance of the TableSelection class\n *\n * @param getTable - Function that returns the Tabulator instance\n * @param pool - The element pool used to cache the checkbox components\n * @param selectEvent - The event emitter to use when checkboxes are toggled\n */\n constructor(\n private getTable: () => Tabulator,\n private pool: ElementPool,\n private selectEvent: EventEmitter<RowData[]>,\n ) {\n this.selection = new Selection((index) =>\n getRowId(this.getRowByIndex(index).getData()),\n );\n }\n\n /**\n * @returns Returns `true` when the selection is non-empty, otherwise `false`\n */\n get hasSelection(): boolean {\n return this.selection.size > 0;\n }\n\n /**\n * Clears the selection\n */\n public clear(): void {\n this.selection.clear();\n }\n\n /**\n * Sets the selected items\n *\n * @param data - The selected items\n */\n public setSelection(data: RowData[] = []): void {\n const newItems = data.map(getRowId);\n if (\n this.selection.size === data.length &&\n this.selection.items.every(\n (oldItem, index) => oldItem === newItems[index],\n )\n ) {\n return;\n }\n\n this.selection.items = newItems;\n const rows = this.getActiveRows();\n rows.forEach((row) =>\n this.updateRowSelector(\n row,\n this.selection.has(getRowId(row.getData())),\n ),\n );\n }\n\n /**\n * Prepends a checkbox column used for row selection to the given column definitions\n *\n * @param columnDefinitions - The column definition for the table\n * @returns The column definitions with the checkbox column prepended to it\n */\n public getColumnDefinitions(\n columnDefinitions: Tabulator.ColumnDefinition[],\n ): Tabulator.ColumnDefinition[] {\n return [this.getRowSelectorColumnDefinition(), ...columnDefinitions];\n }\n\n private getRowSelectorColumnDefinition(): Tabulator.ColumnDefinition {\n return {\n title: '',\n formatter: this.getRowSelectorFormatter(),\n cellClick: this.rowSelectorCellClick,\n headerClick: this.headerClick,\n headerSort: false,\n cssClass: 'limel-table--row-selector',\n resizable: false,\n htmlOutput: false,\n clipboard: false,\n };\n }\n\n private headerClick(ev: Event): void {\n ev.stopPropagation();\n }\n\n private getRowSelectorFormatter() {\n return (cell: Tabulator.CellComponent) => {\n const element = this.pool.get(LIMEL_CHECKBOX);\n setElementProperties(element, {\n checked: this.selection.has(getRowId(cell.getData())),\n });\n element.style.display = 'inline-block';\n\n return element;\n };\n }\n\n /**\n * Tabulator cell click handler that updates the selection for the clicked\n * row and toggles the selection from the last clicked row if the shift key\n * is pressed down.\n *\n * @param ev - The pointer event\n * @param cell - The clicked cell component\n */\n protected rowSelectorCellClick = (\n ev: PointerEvent,\n cell: Tabulator.CellComponent,\n ): void => {\n ev.stopPropagation();\n ev.preventDefault();\n\n const clickedRow = cell.getRow();\n const rowPosition = clickedRow.getPosition(true);\n\n if (ev.shiftKey) {\n this.updateRowSelectors(\n this.selection.toggleSelectionFromLastIndex(rowPosition),\n );\n } else {\n this.updateRowSelectors(\n this.selection.toggleSelection(rowPosition),\n );\n }\n\n this.selectEvent.emit(this.selection.items.map(this.getRowData));\n };\n\n private getRowData = (item: RowData | RowData['id']) => {\n if (typeof item === 'object') {\n return item;\n }\n\n return this.getTable().getRow(item).getData();\n };\n\n private updateRowSelectors = (changeSet: SelectionChangeSet): void => {\n changeSet.indexes\n .map(this.getRowByIndex)\n .forEach((row) => this.updateRowSelector(row, changeSet.selected));\n };\n\n private updateRowSelector = (\n row: Tabulator.RowComponent,\n checked: boolean,\n ): void => {\n const cell = row.getCells()[0];\n if (cell) {\n const checkBox = cell.getElement().querySelector(LIMEL_CHECKBOX);\n checkBox.checked = checked;\n }\n };\n\n private getActiveRows: () => Tabulator.RowComponent[] = () => {\n const table = this.getTable();\n if (!table) {\n return [];\n }\n\n return table.getRows('active');\n };\n\n private getRowByIndex = (index: number) => {\n return this.getTable().getRowFromPosition(index, true);\n };\n}\n"]}
|