wj-elements 0.3.0 → 0.3.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/dist/animations.js.map +1 -1
- package/dist/base-path.js.map +1 -1
- package/dist/date.js.map +1 -1
- package/dist/element-utils.js.map +1 -1
- package/dist/event.js.map +1 -1
- package/dist/form-associated-element-DEQ4y-jn.js.map +1 -1
- package/dist/icon-DVyMc4Wv.js.map +1 -1
- package/dist/localize.js.map +1 -1
- package/dist/{index.d.ts → packages/index.d.ts} +1 -0
- package/dist/{translations → packages/translations}/sk-sk.d.ts +5 -0
- package/dist/packages/utils/router-links.d.ts +8 -0
- package/dist/{wje-button → packages/wje-button}/button.element.d.ts +12 -1
- package/dist/{wje-dialog → packages/wje-dialog}/dialog.element.d.ts +2 -0
- package/dist/{wje-menu-item → packages/wje-menu-item}/menu-item.element.d.ts +3 -2
- package/dist/{wje-router-link → packages/wje-router-link}/router-link.element.d.ts +2 -1
- package/dist/{wje-tab → packages/wje-tab}/tab.element.d.ts +2 -1
- package/dist/{wje-tree-item → packages/wje-tree-item}/tree-item.element.d.ts +13 -0
- package/dist/permissions.js.map +1 -1
- package/dist/{popup.element-Cl6QeG8M.js → popup.element-DklicGea.js} +129 -96
- package/dist/popup.element-DklicGea.js.map +1 -0
- package/dist/{router-links-CJnOdbas.js → router-links-DU0wTw84.js} +15 -3
- package/dist/router-links-DU0wTw84.js.map +1 -0
- package/dist/universal-service.js.map +1 -1
- package/dist/utils.js.map +1 -1
- package/dist/wje-accordion-item.js.map +1 -1
- package/dist/wje-accordion.js.map +1 -1
- package/dist/wje-animation.js.map +1 -1
- package/dist/wje-aside.js.map +1 -1
- package/dist/wje-avatar.js.map +1 -1
- package/dist/wje-badge.js.map +1 -1
- package/dist/wje-breadcrumb.js.map +1 -1
- package/dist/wje-breadcrumbs.js.map +1 -1
- package/dist/wje-button-group.js.map +1 -1
- package/dist/wje-button.js +43 -18
- package/dist/wje-button.js.map +1 -1
- package/dist/wje-card-content.js.map +1 -1
- package/dist/wje-card-controls.js.map +1 -1
- package/dist/wje-card-header.js.map +1 -1
- package/dist/wje-card-subtitle.js.map +1 -1
- package/dist/wje-card-title.js.map +1 -1
- package/dist/wje-card.js.map +1 -1
- package/dist/wje-carousel-item.js.map +1 -1
- package/dist/wje-carousel.js.map +1 -1
- package/dist/wje-checkbox.js.map +1 -1
- package/dist/wje-chip.js.map +1 -1
- package/dist/wje-col.js.map +1 -1
- package/dist/wje-color-picker.js +2 -2
- package/dist/wje-color-picker.js.map +1 -1
- package/dist/wje-container.js.map +1 -1
- package/dist/wje-copy-button.js.map +1 -1
- package/dist/wje-dialog.js +20 -16
- package/dist/wje-dialog.js.map +1 -1
- package/dist/wje-divider.js.map +1 -1
- package/dist/wje-dropdown.js +1 -1
- package/dist/wje-dropdown.js.map +1 -1
- package/dist/wje-element.js.map +1 -1
- package/dist/wje-file-upload-item.js.map +1 -1
- package/dist/wje-file-upload.js.map +1 -1
- package/dist/wje-footer.js.map +1 -1
- package/dist/wje-form.js.map +1 -1
- package/dist/wje-format-digital.js.map +1 -1
- package/dist/wje-grid.js.map +1 -1
- package/dist/wje-header.js.map +1 -1
- package/dist/wje-icon-library.js.map +1 -1
- package/dist/wje-icon-picker.js.map +1 -1
- package/dist/wje-img-comparer.js.map +1 -1
- package/dist/wje-img.js.map +1 -1
- package/dist/wje-infinite-scroll.js.map +1 -1
- package/dist/wje-input-file.js.map +1 -1
- package/dist/wje-input.js.map +1 -1
- package/dist/wje-item.js.map +1 -1
- package/dist/wje-kanban.js.map +1 -1
- package/dist/wje-label.js.map +1 -1
- package/dist/wje-level-indicator.js.map +1 -1
- package/dist/wje-list.js.map +1 -1
- package/dist/wje-main.js.map +1 -1
- package/dist/wje-masonry.js.map +1 -1
- package/dist/wje-master.js +8 -3
- package/dist/wje-master.js.map +1 -1
- package/dist/wje-menu-button.js.map +1 -1
- package/dist/wje-menu-item.js +17 -3
- package/dist/wje-menu-item.js.map +1 -1
- package/dist/wje-menu-label.js.map +1 -1
- package/dist/wje-menu.js.map +1 -1
- package/dist/wje-option.js +11 -0
- package/dist/wje-option.js.map +1 -1
- package/dist/wje-options.js.map +1 -1
- package/dist/wje-orgchart-group.js.map +1 -1
- package/dist/wje-orgchart-item.js.map +1 -1
- package/dist/wje-orgchart.js.map +1 -1
- package/dist/wje-pagination.js.map +1 -1
- package/dist/wje-popup.js +1 -1
- package/dist/wje-progress-bar.js.map +1 -1
- package/dist/wje-qr-code.js +3 -3
- package/dist/wje-qr-code.js.map +1 -1
- package/dist/wje-radio-group.js.map +1 -1
- package/dist/wje-radio.js.map +1 -1
- package/dist/wje-rate.js.map +1 -1
- package/dist/wje-relative-time.js.map +1 -1
- package/dist/wje-reorder-dropzone.js.map +1 -1
- package/dist/wje-reorder-handle.js.map +1 -1
- package/dist/wje-reorder-item.js.map +1 -1
- package/dist/wje-reorder.js.map +1 -1
- package/dist/wje-route.js.map +1 -1
- package/dist/wje-router-link.js +12 -2
- package/dist/wje-router-link.js.map +1 -1
- package/dist/wje-router-outlet.js +15 -5
- package/dist/wje-router-outlet.js.map +1 -1
- package/dist/wje-routerx.js +132 -73
- package/dist/wje-routerx.js.map +1 -1
- package/dist/wje-row.js.map +1 -1
- package/dist/wje-select.js +1 -1
- package/dist/wje-select.js.map +1 -1
- package/dist/wje-slider.js.map +1 -1
- package/dist/wje-sliding-container.js.map +1 -1
- package/dist/wje-split-view.js.map +1 -1
- package/dist/wje-status.js.map +1 -1
- package/dist/wje-step.js.map +1 -1
- package/dist/wje-stepper.js.map +1 -1
- package/dist/wje-store.js.map +1 -1
- package/dist/wje-tab-group.js.map +1 -1
- package/dist/wje-tab-panel.js.map +1 -1
- package/dist/wje-tab.js +12 -2
- package/dist/wje-tab.js.map +1 -1
- package/dist/wje-textarea.js.map +1 -1
- package/dist/wje-thumbnail.js.map +1 -1
- package/dist/wje-toast.js.map +1 -1
- package/dist/wje-toggle.js.map +1 -1
- package/dist/wje-toolbar-action.js.map +1 -1
- package/dist/wje-toolbar.js.map +1 -1
- package/dist/wje-tooltip.js +1 -1
- package/dist/wje-tooltip.js.map +1 -1
- package/dist/wje-tree-item.js +32 -3
- package/dist/wje-tree-item.js.map +1 -1
- package/dist/wje-tree.js.map +1 -1
- package/dist/wje-visually-hidden.js.map +1 -1
- package/package.json +2 -2
- package/dist/popup.element-Cl6QeG8M.js.map +0 -1
- package/dist/router-links-CJnOdbas.js.map +0 -1
- /package/dist/{internals → packages/internals}/form-associated-element.d.ts +0 -0
- /package/dist/{localize → packages/localize}/localize.d.ts +0 -0
- /package/dist/{translations → packages/translations}/en-gb.d.ts +0 -0
- /package/dist/{utils → packages/utils}/animations.d.ts +0 -0
- /package/dist/{utils → packages/utils}/base-path.d.ts +0 -0
- /package/dist/{utils → packages/utils}/date.d.ts +0 -0
- /package/dist/{utils → packages/utils}/element-utils.d.ts +0 -0
- /package/dist/{utils → packages/utils}/event.d.ts +0 -0
- /package/dist/{utils → packages/utils}/icon-library.d.ts +0 -0
- /package/dist/{utils → packages/utils}/localize.d.ts +0 -0
- /package/dist/{utils → packages/utils}/permissions.d.ts +0 -0
- /package/dist/{utils → packages/utils}/universal-service.d.ts +0 -0
- /package/dist/{utils → packages/utils}/utils.d.ts +0 -0
- /package/dist/{wje-accordion → packages/wje-accordion}/accordion.d.ts +0 -0
- /package/dist/{wje-accordion → packages/wje-accordion}/accordion.element.d.ts +0 -0
- /package/dist/{wje-accordion-item → packages/wje-accordion-item}/accordion-item.d.ts +0 -0
- /package/dist/{wje-accordion-item → packages/wje-accordion-item}/accordion-item.element.d.ts +0 -0
- /package/dist/{wje-animation → packages/wje-animation}/animation.d.ts +0 -0
- /package/dist/{wje-animation → packages/wje-animation}/animation.element.d.ts +0 -0
- /package/dist/{wje-aside → packages/wje-aside}/aside.d.ts +0 -0
- /package/dist/{wje-aside → packages/wje-aside}/aside.element.d.ts +0 -0
- /package/dist/{wje-avatar → packages/wje-avatar}/avatar.d.ts +0 -0
- /package/dist/{wje-avatar → packages/wje-avatar}/avatar.element.d.ts +0 -0
- /package/dist/{wje-avatar → packages/wje-avatar}/service/service.d.ts +0 -0
- /package/dist/{wje-badge → packages/wje-badge}/badge.d.ts +0 -0
- /package/dist/{wje-badge → packages/wje-badge}/badge.element.d.ts +0 -0
- /package/dist/{wje-breadcrumb → packages/wje-breadcrumb}/breadcrumb.d.ts +0 -0
- /package/dist/{wje-breadcrumb → packages/wje-breadcrumb}/breadcrumb.element.d.ts +0 -0
- /package/dist/{wje-breadcrumbs → packages/wje-breadcrumbs}/breadcrumbs.d.ts +0 -0
- /package/dist/{wje-breadcrumbs → packages/wje-breadcrumbs}/breadcrumbs.element.d.ts +0 -0
- /package/dist/{wje-button → packages/wje-button}/button.d.ts +0 -0
- /package/dist/{wje-button-group → packages/wje-button-group}/button-group.d.ts +0 -0
- /package/dist/{wje-button-group → packages/wje-button-group}/button-group.element.d.ts +0 -0
- /package/dist/{wje-card → packages/wje-card}/card.d.ts +0 -0
- /package/dist/{wje-card → packages/wje-card}/card.element.d.ts +0 -0
- /package/dist/{wje-card-content → packages/wje-card-content}/card-content.d.ts +0 -0
- /package/dist/{wje-card-content → packages/wje-card-content}/card-content.element.d.ts +0 -0
- /package/dist/{wje-card-controls → packages/wje-card-controls}/card-controls.d.ts +0 -0
- /package/dist/{wje-card-controls → packages/wje-card-controls}/card-controls.element.d.ts +0 -0
- /package/dist/{wje-card-header → packages/wje-card-header}/card-header.d.ts +0 -0
- /package/dist/{wje-card-header → packages/wje-card-header}/card-header.element.d.ts +0 -0
- /package/dist/{wje-card-subtitle → packages/wje-card-subtitle}/card-subtitle.d.ts +0 -0
- /package/dist/{wje-card-subtitle → packages/wje-card-subtitle}/card-subtitle.element.d.ts +0 -0
- /package/dist/{wje-card-title → packages/wje-card-title}/card-title.d.ts +0 -0
- /package/dist/{wje-card-title → packages/wje-card-title}/card-title.element.d.ts +0 -0
- /package/dist/{wje-carousel → packages/wje-carousel}/carousel.d.ts +0 -0
- /package/dist/{wje-carousel → packages/wje-carousel}/carousel.element.d.ts +0 -0
- /package/dist/{wje-carousel-item → packages/wje-carousel-item}/carousel-item.d.ts +0 -0
- /package/dist/{wje-carousel-item → packages/wje-carousel-item}/carousel-item.element.d.ts +0 -0
- /package/dist/{wje-checkbox → packages/wje-checkbox}/checkbox.d.ts +0 -0
- /package/dist/{wje-checkbox → packages/wje-checkbox}/checkbox.element.d.ts +0 -0
- /package/dist/{wje-chip → packages/wje-chip}/chip.d.ts +0 -0
- /package/dist/{wje-chip → packages/wje-chip}/chip.element.d.ts +0 -0
- /package/dist/{wje-col → packages/wje-col}/col.d.ts +0 -0
- /package/dist/{wje-col → packages/wje-col}/col.element.d.ts +0 -0
- /package/dist/{wje-color-picker → packages/wje-color-picker}/color-picker.d.ts +0 -0
- /package/dist/{wje-color-picker → packages/wje-color-picker}/color-picker.element.d.ts +0 -0
- /package/dist/{wje-container → packages/wje-container}/container.d.ts +0 -0
- /package/dist/{wje-container → packages/wje-container}/container.element.d.ts +0 -0
- /package/dist/{wje-copy-button → packages/wje-copy-button}/copy-button.d.ts +0 -0
- /package/dist/{wje-copy-button → packages/wje-copy-button}/copy-button.element.d.ts +0 -0
- /package/dist/{wje-copy-button → packages/wje-copy-button}/service/service.d.ts +0 -0
- /package/dist/{wje-dialog → packages/wje-dialog}/dialog.d.ts +0 -0
- /package/dist/{wje-divider → packages/wje-divider}/divider.d.ts +0 -0
- /package/dist/{wje-divider → packages/wje-divider}/divider.element.d.ts +0 -0
- /package/dist/{wje-dropdown → packages/wje-dropdown}/dropdown.d.ts +0 -0
- /package/dist/{wje-dropdown → packages/wje-dropdown}/dropdown.element.d.ts +0 -0
- /package/dist/{wje-element → packages/wje-element}/element.d.ts +0 -0
- /package/dist/{wje-file-upload → packages/wje-file-upload}/file-upload.d.ts +0 -0
- /package/dist/{wje-file-upload → packages/wje-file-upload}/file-upload.element.d.ts +0 -0
- /package/dist/{wje-file-upload → packages/wje-file-upload}/service/service.d.ts +0 -0
- /package/dist/{wje-file-upload-item → packages/wje-file-upload-item}/file-upload-item.d.ts +0 -0
- /package/dist/{wje-file-upload-item → packages/wje-file-upload-item}/file-upload-item.element.d.ts +0 -0
- /package/dist/{wje-footer → packages/wje-footer}/footer.d.ts +0 -0
- /package/dist/{wje-footer → packages/wje-footer}/footer.element.d.ts +0 -0
- /package/dist/{wje-form → packages/wje-form}/form.d.ts +0 -0
- /package/dist/{wje-form → packages/wje-form}/form.element.d.ts +0 -0
- /package/dist/{wje-format-digital → packages/wje-format-digital}/format-digital.d.ts +0 -0
- /package/dist/{wje-format-digital → packages/wje-format-digital}/format-digital.element.d.ts +0 -0
- /package/dist/{wje-grid → packages/wje-grid}/grid.d.ts +0 -0
- /package/dist/{wje-grid → packages/wje-grid}/grid.element.d.ts +0 -0
- /package/dist/{wje-header → packages/wje-header}/header.d.ts +0 -0
- /package/dist/{wje-header → packages/wje-header}/header.element.d.ts +0 -0
- /package/dist/{wje-icon → packages/wje-icon}/icon.d.ts +0 -0
- /package/dist/{wje-icon → packages/wje-icon}/icon.element.d.ts +0 -0
- /package/dist/{wje-icon → packages/wje-icon}/service/library.d.ts +0 -0
- /package/dist/{wje-icon → packages/wje-icon}/service/service.d.ts +0 -0
- /package/dist/{wje-icon-picker → packages/wje-icon-picker}/icon-picker.d.ts +0 -0
- /package/dist/{wje-icon-picker → packages/wje-icon-picker}/icon-picker.element.d.ts +0 -0
- /package/dist/{wje-img → packages/wje-img}/img.d.ts +0 -0
- /package/dist/{wje-img → packages/wje-img}/img.element.d.ts +0 -0
- /package/dist/{wje-img-comparer → packages/wje-img-comparer}/img-comparer.d.ts +0 -0
- /package/dist/{wje-img-comparer → packages/wje-img-comparer}/img-comparer.element.d.ts +0 -0
- /package/dist/{wje-img-comparer → packages/wje-img-comparer}/service/service.d.ts +0 -0
- /package/dist/{wje-infinite-scroll → packages/wje-infinite-scroll}/infinite-scroll.d.ts +0 -0
- /package/dist/{wje-infinite-scroll → packages/wje-infinite-scroll}/infinite-scroll.element.d.ts +0 -0
- /package/dist/{wje-input → packages/wje-input}/input.d.ts +0 -0
- /package/dist/{wje-input → packages/wje-input}/input.element.d.ts +0 -0
- /package/dist/{wje-input-file → packages/wje-input-file}/input-file.d.ts +0 -0
- /package/dist/{wje-input-file → packages/wje-input-file}/input-file.element.d.ts +0 -0
- /package/dist/{wje-item → packages/wje-item}/item.d.ts +0 -0
- /package/dist/{wje-item → packages/wje-item}/item.element.d.ts +0 -0
- /package/dist/{wje-kanban → packages/wje-kanban}/kanban.d.ts +0 -0
- /package/dist/{wje-kanban → packages/wje-kanban}/kanban.element.d.ts +0 -0
- /package/dist/{wje-label → packages/wje-label}/label.d.ts +0 -0
- /package/dist/{wje-label → packages/wje-label}/label.element.d.ts +0 -0
- /package/dist/{wje-level-indicator → packages/wje-level-indicator}/level-indicator.d.ts +0 -0
- /package/dist/{wje-level-indicator → packages/wje-level-indicator}/level-indicator.element.d.ts +0 -0
- /package/dist/{wje-list → packages/wje-list}/list.d.ts +0 -0
- /package/dist/{wje-list → packages/wje-list}/list.element.d.ts +0 -0
- /package/dist/{wje-main → packages/wje-main}/main.d.ts +0 -0
- /package/dist/{wje-main → packages/wje-main}/main.element.d.ts +0 -0
- /package/dist/{wje-masonry → packages/wje-masonry}/masonry.d.ts +0 -0
- /package/dist/{wje-masonry → packages/wje-masonry}/masonry.element.d.ts +0 -0
- /package/dist/{wje-masonry → packages/wje-masonry}/service/service.d.ts +0 -0
- /package/dist/{wje-menu → packages/wje-menu}/menu.d.ts +0 -0
- /package/dist/{wje-menu → packages/wje-menu}/menu.element.d.ts +0 -0
- /package/dist/{wje-menu-button → packages/wje-menu-button}/menu-button.d.ts +0 -0
- /package/dist/{wje-menu-button → packages/wje-menu-button}/menu-button.element.d.ts +0 -0
- /package/dist/{wje-menu-item → packages/wje-menu-item}/menu-item.d.ts +0 -0
- /package/dist/{wje-menu-label → packages/wje-menu-label}/menu-label.d.ts +0 -0
- /package/dist/{wje-menu-label → packages/wje-menu-label}/menu-label.element.d.ts +0 -0
- /package/dist/{wje-option → packages/wje-option}/option.d.ts +0 -0
- /package/dist/{wje-option → packages/wje-option}/option.element.d.ts +0 -0
- /package/dist/{wje-options → packages/wje-options}/options.d.ts +0 -0
- /package/dist/{wje-options → packages/wje-options}/options.element.d.ts +0 -0
- /package/dist/{wje-orgchart → packages/wje-orgchart}/orgchart.d.ts +0 -0
- /package/dist/{wje-orgchart → packages/wje-orgchart}/orgchart.element.d.ts +0 -0
- /package/dist/{wje-orgchart-group → packages/wje-orgchart-group}/orgchart-group.d.ts +0 -0
- /package/dist/{wje-orgchart-group → packages/wje-orgchart-group}/orgchart-group.element.d.ts +0 -0
- /package/dist/{wje-orgchart-item → packages/wje-orgchart-item}/orgchart-item.d.ts +0 -0
- /package/dist/{wje-orgchart-item → packages/wje-orgchart-item}/orgchart-item.element.d.ts +0 -0
- /package/dist/{wje-pagination → packages/wje-pagination}/pagination.d.ts +0 -0
- /package/dist/{wje-pagination → packages/wje-pagination}/pagination.element.d.ts +0 -0
- /package/dist/{wje-pagination → packages/wje-pagination}/service/service.d.ts +0 -0
- /package/dist/{wje-panel → packages/wje-panel}/panel.d.ts +0 -0
- /package/dist/{wje-panel → packages/wje-panel}/panel.element.d.ts +0 -0
- /package/dist/{wje-popup → packages/wje-popup}/popup.d.ts +0 -0
- /package/dist/{wje-popup → packages/wje-popup}/popup.element.d.ts +0 -0
- /package/dist/{wje-progress-bar → packages/wje-progress-bar}/progress-bar.d.ts +0 -0
- /package/dist/{wje-progress-bar → packages/wje-progress-bar}/progress-bar.element.d.ts +0 -0
- /package/dist/{wje-qr-code → packages/wje-qr-code}/qr-code.d.ts +0 -0
- /package/dist/{wje-qr-code → packages/wje-qr-code}/qr-code.element.d.ts +0 -0
- /package/dist/{wje-radio → packages/wje-radio}/radio.d.ts +0 -0
- /package/dist/{wje-radio → packages/wje-radio}/radio.element.d.ts +0 -0
- /package/dist/{wje-radio-group → packages/wje-radio-group}/radio-group.d.ts +0 -0
- /package/dist/{wje-radio-group → packages/wje-radio-group}/radio-group.element.d.ts +0 -0
- /package/dist/{wje-rate → packages/wje-rate}/rate.d.ts +0 -0
- /package/dist/{wje-rate → packages/wje-rate}/rate.element.d.ts +0 -0
- /package/dist/{wje-relative-time → packages/wje-relative-time}/relative-time.d.ts +0 -0
- /package/dist/{wje-relative-time → packages/wje-relative-time}/relative-time.element.d.ts +0 -0
- /package/dist/{wje-reorder → packages/wje-reorder}/reorder.d.ts +0 -0
- /package/dist/{wje-reorder → packages/wje-reorder}/reorder.element.d.ts +0 -0
- /package/dist/{wje-reorder-dropzone → packages/wje-reorder-dropzone}/reorder-dropzone.d.ts +0 -0
- /package/dist/{wje-reorder-dropzone → packages/wje-reorder-dropzone}/reorder-dropzone.element.d.ts +0 -0
- /package/dist/{wje-reorder-handle → packages/wje-reorder-handle}/reorder-handle.d.ts +0 -0
- /package/dist/{wje-reorder-handle → packages/wje-reorder-handle}/reorder-handle.element.d.ts +0 -0
- /package/dist/{wje-reorder-item → packages/wje-reorder-item}/reorder-item.d.ts +0 -0
- /package/dist/{wje-reorder-item → packages/wje-reorder-item}/reorder-item.element.d.ts +0 -0
- /package/dist/{wje-route → packages/wje-route}/route.d.ts +0 -0
- /package/dist/{wje-route → packages/wje-route}/route.element.d.ts +0 -0
- /package/dist/{wje-router → packages/wje-router}/router.d.ts +0 -0
- /package/dist/{wje-router → packages/wje-router}/router.element.d.ts +0 -0
- /package/dist/{wje-router-link → packages/wje-router-link}/router-link.d.ts +0 -0
- /package/dist/{wje-router-outlet → packages/wje-router-outlet}/router-outlet.d.ts +0 -0
- /package/dist/{wje-router-outlet → packages/wje-router-outlet}/router-outlet.element.d.ts +0 -0
- /package/dist/{wje-row → packages/wje-row}/row.d.ts +0 -0
- /package/dist/{wje-row → packages/wje-row}/row.element.d.ts +0 -0
- /package/dist/{wje-select → packages/wje-select}/select.d.ts +0 -0
- /package/dist/{wje-select → packages/wje-select}/select.element.d.ts +0 -0
- /package/dist/{wje-slider → packages/wje-slider}/slider.d.ts +0 -0
- /package/dist/{wje-slider → packages/wje-slider}/slider.element.d.ts +0 -0
- /package/dist/{wje-sliding-container → packages/wje-sliding-container}/sliding-container.d.ts +0 -0
- /package/dist/{wje-sliding-container → packages/wje-sliding-container}/sliding-container.element.d.ts +0 -0
- /package/dist/{wje-split-view → packages/wje-split-view}/service/service.d.ts +0 -0
- /package/dist/{wje-split-view → packages/wje-split-view}/split-view.d.ts +0 -0
- /package/dist/{wje-split-view → packages/wje-split-view}/split-view.element.d.ts +0 -0
- /package/dist/{wje-status → packages/wje-status}/status.d.ts +0 -0
- /package/dist/{wje-status → packages/wje-status}/status.element.d.ts +0 -0
- /package/dist/{wje-step → packages/wje-step}/step.d.ts +0 -0
- /package/dist/{wje-step → packages/wje-step}/step.element.d.ts +0 -0
- /package/dist/{wje-stepper → packages/wje-stepper}/stepper.d.ts +0 -0
- /package/dist/{wje-stepper → packages/wje-stepper}/stepper.element.d.ts +0 -0
- /package/dist/{wje-store → packages/wje-store}/default-store-actions.d.ts +0 -0
- /package/dist/{wje-store → packages/wje-store}/pubsub.d.ts +0 -0
- /package/dist/{wje-store → packages/wje-store}/store.d.ts +0 -0
- /package/dist/{wje-tab → packages/wje-tab}/tab.d.ts +0 -0
- /package/dist/{wje-tab-group → packages/wje-tab-group}/tab-group.d.ts +0 -0
- /package/dist/{wje-tab-group → packages/wje-tab-group}/tab-group.element.d.ts +0 -0
- /package/dist/{wje-tab-panel → packages/wje-tab-panel}/tab-panel.d.ts +0 -0
- /package/dist/{wje-tab-panel → packages/wje-tab-panel}/tab-panel.element.d.ts +0 -0
- /package/dist/{wje-textarea → packages/wje-textarea}/textarea.d.ts +0 -0
- /package/dist/{wje-textarea → packages/wje-textarea}/textarea.element.d.ts +0 -0
- /package/dist/{wje-thumbnail → packages/wje-thumbnail}/thumbnail.d.ts +0 -0
- /package/dist/{wje-thumbnail → packages/wje-thumbnail}/thumbnail.element.d.ts +0 -0
- /package/dist/{wje-timeline → packages/wje-timeline}/timeline.d.ts +0 -0
- /package/dist/{wje-timeline → packages/wje-timeline}/timeline.element.d.ts +0 -0
- /package/dist/{wje-timeline-item → packages/wje-timeline-item}/timeline-item.d.ts +0 -0
- /package/dist/{wje-timeline-item → packages/wje-timeline-item}/timeline-item.element.d.ts +0 -0
- /package/dist/{wje-toast → packages/wje-toast}/toast.d.ts +0 -0
- /package/dist/{wje-toast → packages/wje-toast}/toast.element.d.ts +0 -0
- /package/dist/{wje-toggle → packages/wje-toggle}/toggle.d.ts +0 -0
- /package/dist/{wje-toggle → packages/wje-toggle}/toggle.element.d.ts +0 -0
- /package/dist/{wje-toolbar → packages/wje-toolbar}/toolbar.d.ts +0 -0
- /package/dist/{wje-toolbar → packages/wje-toolbar}/toolbar.element.d.ts +0 -0
- /package/dist/{wje-toolbar-action → packages/wje-toolbar-action}/toolbar-action.d.ts +0 -0
- /package/dist/{wje-toolbar-action → packages/wje-toolbar-action}/toolbar-action.element.d.ts +0 -0
- /package/dist/{wje-tooltip → packages/wje-tooltip}/tooltip.d.ts +0 -0
- /package/dist/{wje-tooltip → packages/wje-tooltip}/tooltip.element.d.ts +0 -0
- /package/dist/{wje-tree → packages/wje-tree}/tree.d.ts +0 -0
- /package/dist/{wje-tree → packages/wje-tree}/tree.element.d.ts +0 -0
- /package/dist/{wje-tree-item → packages/wje-tree-item}/tree-item.d.ts +0 -0
- /package/dist/{wje-visually-hidden → packages/wje-visually-hidden}/visually-hidden.d.ts +0 -0
- /package/dist/{wje-visually-hidden → packages/wje-visually-hidden}/visually-hidden.element.d.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-split-view.js","sources":["../packages/wje-split-view/service/service.js","../packages/wje-split-view/split-view.element.js","../packages/wje-split-view/split-view.js"],"sourcesContent":["export function drag(container, options) {\n function move(pointerEvent) {\n const dims = container.getBoundingClientRect();\n const defaultView = container.ownerDocument.defaultView;\n const offsetX = dims.left + defaultView.pageXOffset;\n const offsetY = dims.top + defaultView.pageYOffset;\n const x = pointerEvent.pageX - offsetX;\n const y = pointerEvent.pageY - offsetY;\n if (options?.onMove) {\n options.onMove(x, y);\n }\n }\n\n function stop() {\n document.removeEventListener('pointermove', move);\n document.removeEventListener('pointerup', stop);\n\n if (options?.onStop) {\n options.onStop();\n }\n }\n\n document.addEventListener('pointermove', move, { passive: true });\n document.addEventListener('pointerup', stop);\n\n if (options?.initialEvent instanceof PointerEvent) {\n move(options.initialEvent);\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `SplitView` is a custom web component that represents a split view.\n * @summary This element represents a split view.\n * @documentation https://elements.webjet.sk/components/split-view\n * @status stable\n * @augments WJElement\n * @slot start - Slot for the start view.\n * @slot end - Slot for the end view.\n * @slot divider - Slot for the divider.\n * @csspart wje-divider - The divider of the split view.\n * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).\n * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.\n * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.\n * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.\n * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.\n * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.\n * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).\n * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.\n * @tag wje-split-view\n */\n\nexport default class SplitView extends WJElement {\n /**\n * Creates an instance of SplitView.\n * @class\n */\n constructor() {\n super();\n }\n\n set initial(value) {\n this.setAttribute('initial', value);\n }\n\n get initial() {\n return +this.getAttribute('initial') || 50;\n }\n\n className = 'SplitView';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component for the split view.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-split-view');\n\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n let divider = document.createElement('slot');\n divider.setAttribute('name', 'divider');\n\n let dividerElement = document.createElement('div');\n dividerElement.classList.add('wje-divider');\n dividerElement.setAttribute('part', 'divider');\n dividerElement.setAttribute('role', 'separator');\n dividerElement.setAttribute('aria-orientation', this.hasAttribute('vertical') ? 'vertical' : 'horizontal');\n dividerElement.setAttribute('aria-valuemin', '0');\n dividerElement.setAttribute('aria-valuemax', '100');\n dividerElement.setAttribute('aria-valuenow', `${this.initial}`);\n dividerElement.appendChild(divider);\n dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n native.appendChild(start);\n native.appendChild(dividerElement);\n native.appendChild(end);\n\n fragment.appendChild(native);\n\n this.dividerElement = dividerElement;\n\n return fragment;\n }\n\n /**\n * Sets up the event listeners after the component is drawn.\n */\n afterDraw() {\n this.detectSize();\n\n if (this.min) this.style.setProperty('--wje-split-view-min', this.pixelsToPercentage(this.min) + '%');\n\n if (this.max) this.style.setProperty('--wje-split-view-max', 100 - this.pixelsToPercentage(this.max) + '%');\n\n if (this.initial) {\n this.style.setProperty('--wje-split-view-calc-a', this.pixelsToPercentage(this.initial) + '%');\n this.style.setProperty('--wje-split-view-calc-b', 100 - this.pixelsToPercentage(this.initial) + '%');\n }\n\n this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));\n }\n\n /**\n * Handles the drag event.\n * @param {Event} e The event object.\n */\n handleDrag = (e) => {\n if (this.hasAttribute('disabled')) return;\n\n drag(this, {\n onMove: (x, y) => {\n let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n let sizeA = this.pixelsToPercentage(newPositionInPixels);\n let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n\n this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n if (this.dividerElement) {\n this.dividerElement.setAttribute('aria-valuenow', `${Math.round(sizeA)}`);\n }\n },\n initialEvent: e,\n });\n };\n\n /**\n * Detects the size of the split view.\n */\n detectSize() {\n const { width, height } = this.getBoundingClientRect();\n\n this.size = this.hasAttribute('vertical') ? height : width;\n }\n\n /**\n * Converts pixels to a percentage.\n * @param {number} value The pixel value.\n * @returns {number} The percentage value.\n */\n pixelsToPercentage(value) {\n return (value / this.size) * 100;\n }\n}\n","import SplitView from './split-view.element.js';\n\nexport default SplitView;\n\nSplitView.define('wje-split-view', SplitView);\n"],"names":[],"mappings":";;;;AAAO,SAAS,KAAK,WAAW,SAAS;AACrC,WAAS,KAAK,cAAc;AACxB,UAAM,OAAO,UAAU,sBAAuB;AAC9C,UAAM,cAAc,UAAU,cAAc;AAC5C,UAAM,UAAU,KAAK,OAAO,YAAY;AACxC,UAAM,UAAU,KAAK,MAAM,YAAY;AACvC,UAAM,IAAI,aAAa,QAAQ;AAC/B,UAAM,IAAI,aAAa,QAAQ;AAC/B,QAAI,mCAAS,QAAQ;AACjB,cAAQ,OAAO,GAAG,CAAC;AAAA,IAC/B;AAAA,EACA;AAEI,WAAS,OAAO;AACZ,aAAS,oBAAoB,eAAe,IAAI;AAChD,aAAS,oBAAoB,aAAa,IAAI;AAE9C,QAAI,mCAAS,QAAQ;AACjB,cAAQ,OAAQ;AAAA,IAC5B;AAAA,EACA;AAEI,WAAS,iBAAiB,eAAe,MAAM,EAAE,SAAS,MAAM;AAChE,WAAS,iBAAiB,aAAa,IAAI;AAE3C,OAAI,mCAAS,yBAAwB,cAAc;AAC/C,SAAK,QAAQ,YAAY;AAAA,EACjC;AACA;;ACDe,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK7C,cAAc;AACV,UAAO;AAWX,qCAAY;AA0FZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,UAAI,KAAK,aAAa,UAAU,EAAG;AAEnC,WAAK,MAAM;AAAA,QACP,QAAQ,CAAC,GAAG,MAAM;AACd,cAAI,sBAAsB,KAAK,aAAa,UAAU,IAAI,IAAI;AAC9D,cAAI,QAAQ,KAAK,mBAAmB,mBAAmB;AACvD,cAAI,QAAQ,MAAM,KAAK,mBAAmB,mBAAmB;AAE7D,eAAK,MAAM,YAAY,2BAA2B,QAAQ,GAAG;AAC7D,eAAK,MAAM,YAAY,2BAA2B,QAAQ,GAAG;AAC7D,cAAI,KAAK,gBAAgB;AACrB,iBAAK,eAAe,aAAa,iBAAiB,GAAG,KAAK,MAAM,KAAK,CAAC,EAAE;AAAA,UAC5F;AAAA,QACa;AAAA,QACD,cAAc;AAAA,MAC1B,CAAS;AAAA,IACJ;AAAA,EArHL;AAAA,EAEI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA,EAEI,IAAI,UAAU;AACV,WAAO,CAAC,KAAK,aAAa,SAAS,KAAK;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,mBAAmB;AAExC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,aAAa,QAAQ,SAAS;AAEtC,QAAI,iBAAiB,SAAS,cAAc,KAAK;AACjD,mBAAe,UAAU,IAAI,aAAa;AAC1C,mBAAe,aAAa,QAAQ,SAAS;AAC7C,mBAAe,aAAa,QAAQ,WAAW;AAC/C,mBAAe,aAAa,oBAAoB,KAAK,aAAa,UAAU,IAAI,aAAa,YAAY;AACzG,mBAAe,aAAa,iBAAiB,GAAG;AAChD,mBAAe,aAAa,iBAAiB,KAAK;AAClD,mBAAe,aAAa,iBAAiB,GAAG,KAAK,OAAO,EAAE;AAC9D,mBAAe,YAAY,OAAO;AAClC,mBAAe,iBAAiB,aAAa,KAAK,YAAY,KAAK;AAEnE,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,cAAc;AACjC,WAAO,YAAY,GAAG;AAEtB,aAAS,YAAY,MAAM;AAE3B,SAAK,iBAAiB;AAEtB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,WAAY;AAEjB,QAAI,KAAK,IAAK,MAAK,MAAM,YAAY,wBAAwB,KAAK,mBAAmB,KAAK,GAAG,IAAI,GAAG;AAEpG,QAAI,KAAK,IAAK,MAAK,MAAM,YAAY,wBAAwB,MAAM,KAAK,mBAAmB,KAAK,GAAG,IAAI,GAAG;AAE1G,QAAI,KAAK,SAAS;AACd,WAAK,MAAM,YAAY,2BAA2B,KAAK,mBAAmB,KAAK,OAAO,IAAI,GAAG;AAC7F,WAAK,MAAM,YAAY,2BAA2B,MAAM,KAAK,mBAAmB,KAAK,OAAO,IAAI,GAAG;AAAA,IAC/G;AAEQ,SAAK,iBAAiB,IAAI,eAAe,CAAC,YAAY,KAAK,aAAa,OAAO,CAAC;AAAA,EACxF;AAAA;AAAA;AAAA;AAAA,EA4BI,aAAa;AACT,UAAM,EAAE,OAAO,WAAW,KAAK,sBAAuB;AAEtD,SAAK,OAAO,KAAK,aAAa,UAAU,IAAI,SAAS;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,mBAAmB,OAAO;AACtB,WAAQ,QAAQ,KAAK,OAAQ;AAAA,EACrC;AACA;ACtKA,UAAU,OAAO,kBAAkB,SAAS;"}
|
|
1
|
+
{"version":3,"file":"wje-split-view.js","sources":["../packages/wje-split-view/service/service.js","../packages/wje-split-view/split-view.element.js","../packages/wje-split-view/split-view.js"],"sourcesContent":["export function drag(container, options) {\n function move(pointerEvent) {\n const dims = container.getBoundingClientRect();\n const defaultView = container.ownerDocument.defaultView;\n const offsetX = dims.left + defaultView.pageXOffset;\n const offsetY = dims.top + defaultView.pageYOffset;\n const x = pointerEvent.pageX - offsetX;\n const y = pointerEvent.pageY - offsetY;\n if (options?.onMove) {\n options.onMove(x, y);\n }\n }\n\n function stop() {\n document.removeEventListener('pointermove', move);\n document.removeEventListener('pointerup', stop);\n\n if (options?.onStop) {\n options.onStop();\n }\n }\n\n document.addEventListener('pointermove', move, { passive: true });\n document.addEventListener('pointerup', stop);\n\n if (options?.initialEvent instanceof PointerEvent) {\n move(options.initialEvent);\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `SplitView` is a custom web component that represents a split view.\n * @summary This element represents a split view.\n * @documentation https://elements.webjet.sk/components/split-view\n * @status stable\n * @augments WJElement\n * @slot start - Slot for the start view.\n * @slot end - Slot for the end view.\n * @slot divider - Slot for the divider.\n * @csspart wje-divider - The divider of the split view.\n * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).\n * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.\n * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.\n * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.\n * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.\n * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.\n * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).\n * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.\n * @tag wje-split-view\n */\n\nexport default class SplitView extends WJElement {\n /**\n * Creates an instance of SplitView.\n * @class\n */\n constructor() {\n super();\n }\n\n set initial(value) {\n this.setAttribute('initial', value);\n }\n\n get initial() {\n return +this.getAttribute('initial') || 50;\n }\n\n className = 'SplitView';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component for the split view.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-split-view');\n\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n let divider = document.createElement('slot');\n divider.setAttribute('name', 'divider');\n\n let dividerElement = document.createElement('div');\n dividerElement.classList.add('wje-divider');\n dividerElement.setAttribute('part', 'divider');\n dividerElement.setAttribute('role', 'separator');\n dividerElement.setAttribute('aria-orientation', this.hasAttribute('vertical') ? 'vertical' : 'horizontal');\n dividerElement.setAttribute('aria-valuemin', '0');\n dividerElement.setAttribute('aria-valuemax', '100');\n dividerElement.setAttribute('aria-valuenow', `${this.initial}`);\n dividerElement.appendChild(divider);\n dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n native.appendChild(start);\n native.appendChild(dividerElement);\n native.appendChild(end);\n\n fragment.appendChild(native);\n\n this.dividerElement = dividerElement;\n\n return fragment;\n }\n\n /**\n * Sets up the event listeners after the component is drawn.\n */\n afterDraw() {\n this.detectSize();\n\n if (this.min) this.style.setProperty('--wje-split-view-min', this.pixelsToPercentage(this.min) + '%');\n\n if (this.max) this.style.setProperty('--wje-split-view-max', 100 - this.pixelsToPercentage(this.max) + '%');\n\n if (this.initial) {\n this.style.setProperty('--wje-split-view-calc-a', this.pixelsToPercentage(this.initial) + '%');\n this.style.setProperty('--wje-split-view-calc-b', 100 - this.pixelsToPercentage(this.initial) + '%');\n }\n\n this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));\n }\n\n /**\n * Handles the drag event.\n * @param {Event} e The event object.\n */\n handleDrag = (e) => {\n if (this.hasAttribute('disabled')) return;\n\n drag(this, {\n onMove: (x, y) => {\n let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n let sizeA = this.pixelsToPercentage(newPositionInPixels);\n let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n\n this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n if (this.dividerElement) {\n this.dividerElement.setAttribute('aria-valuenow', `${Math.round(sizeA)}`);\n }\n },\n initialEvent: e,\n });\n };\n\n /**\n * Detects the size of the split view.\n */\n detectSize() {\n const { width, height } = this.getBoundingClientRect();\n\n this.size = this.hasAttribute('vertical') ? height : width;\n }\n\n /**\n * Converts pixels to a percentage.\n * @param {number} value The pixel value.\n * @returns {number} The percentage value.\n */\n pixelsToPercentage(value) {\n return (value / this.size) * 100;\n }\n}\n","import SplitView from './split-view.element.js';\n\nexport default SplitView;\n\nSplitView.define('wje-split-view', SplitView);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-status.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-status.js","sources":["../packages/wje-status/status.element.js","../packages/wje-status/status.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Status element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/status\n * @status stable\n * @augments WJElement\n * @slot - The status main content.\n * @slot start - The status start content.\n * @slot end - The status end content.\n * @csspart native - The native part of the status.\n * @csspart bullet - The bullet part of the status.\n * @tag wje-status\n */\nexport default class Status extends WJElement {\n /**\n * Creates an instance of Status.\n */\n constructor() {\n super();\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'Status';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'status' });\n }\n\n /**\n * Draws the component for the status.\n * @returns {object} fragment - The document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-status');\n\n let bullet = document.createElement('div');\n bullet.setAttribute('part', 'bullet');\n bullet.classList.add('bullet');\n\n let slot = document.createElement('slot');\n\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n bullet.appendChild(slot);\n\n native.appendChild(start);\n native.appendChild(bullet);\n native.appendChild(end);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import Status from './status.element.js';\n\nexport default Status;\n\nStatus.define('wje-status', Status);\n"],"names":[],"mappings":";;;;;AAee,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,
|
|
1
|
+
{"version":3,"file":"wje-status.js","sources":["../packages/wje-status/status.element.js","../packages/wje-status/status.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Status element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/status\n * @status stable\n * @augments WJElement\n * @slot - The status main content.\n * @slot start - The status start content.\n * @slot end - The status end content.\n * @csspart native - The native part of the status.\n * @csspart bullet - The bullet part of the status.\n * @tag wje-status\n */\nexport default class Status extends WJElement {\n /**\n * Creates an instance of Status.\n */\n constructor() {\n super();\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'Status';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'status' });\n }\n\n /**\n * Draws the component for the status.\n * @returns {object} fragment - The document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-status');\n\n let bullet = document.createElement('div');\n bullet.setAttribute('part', 'bullet');\n bullet.classList.add('bullet');\n\n let slot = document.createElement('slot');\n\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n bullet.appendChild(slot);\n\n native.appendChild(start);\n native.appendChild(bullet);\n native.appendChild(end);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import Status from './status.element.js';\n\nexport default Status;\n\nStatus.define('wje-status', Status);\n"],"names":[],"mappings":";;;;;AAee,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,SAAQ,CAAE;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AAEpC,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,QAAQ;AAE7B,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,YAAY,IAAI;AAEvB,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,MAAM;AACzB,WAAO,YAAY,GAAG;AAEtB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AACJ;AC3EA,OAAO,OAAO,cAAc,MAAM;"}
|
package/dist/wje-step.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-step.js","sources":["../packages/wje-step/step.element.js","../packages/wje-step/step.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Step` is a custom web component that represents a step.\n * @summary This element represents a step.\n * @documentation https://elements.webjet.sk/components/step\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the step.\n * @slot - The default slot for the step.\n * @tag wje-step\n */\nexport default class Step extends WJElement {\n /**\n * Creates an instance of Step.\n */\n constructor() {\n super();\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'Step';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @returns {CSSStyleSheet} The CSS stylesheet.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Returns the list of observed attributes.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.className = 'step-native';\n native.setAttribute('part', 'native');\n\n const slot = document.createElement('slot');\n\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import Step from './step.element.js';\n\nexport default Step;\n\nStep.define('wje-step', Step);\n"],"names":[],"mappings":";;;;;AAae,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,
|
|
1
|
+
{"version":3,"file":"wje-step.js","sources":["../packages/wje-step/step.element.js","../packages/wje-step/step.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Step` is a custom web component that represents a step.\n * @summary This element represents a step.\n * @documentation https://elements.webjet.sk/components/step\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the step.\n * @slot - The default slot for the step.\n * @tag wje-step\n */\nexport default class Step extends WJElement {\n /**\n * Creates an instance of Step.\n */\n constructor() {\n super();\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'Step';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @returns {CSSStyleSheet} The CSS stylesheet.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Returns the list of observed attributes.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.className = 'step-native';\n native.setAttribute('part', 'native');\n\n const slot = document.createElement('slot');\n\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import Step from './step.element.js';\n\nexport default Step;\n\nStep.define('wje-step', Step);\n"],"names":[],"mappings":";;;;;AAae,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,YAAY;AACnB,WAAO,aAAa,QAAQ,QAAQ;AAEpC,UAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AACJ;ACzDA,KAAK,OAAO,YAAY,IAAI;"}
|
package/dist/wje-stepper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-stepper.js","sources":["../packages/wje-stepper/stepper.element.js","../packages/wje-stepper/stepper.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nlet stepperId = 0;\n\n/**\n * `Stepper` is a custom web component that represents a stepper.\n * @summary This element represents a stepper.\n * @documentation https://elements.webjet.sk/components/stepper\n * @status stable\n * @augments WJElement\n * @attribute {string} active - The active color for the stepper.\n * @attribute {string} done - The done color for the stepper.\n * @slot - The default slot for the stepper.\n * @csspart native - The native part of the stepper.\n * @csspart header - The header part of the stepper.\n * @csspart content - The content part of the stepper.\n * @tag wje-stepper\n */\nexport default class Stepper extends WJElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.currentStep = 0;\n\n\t\tthis.localizer = new Localizer(this);\n\t\tthis.steps = [];\n\t\tthis.headerSteps = [];\n\t\tthis._stepperId = ++stepperId;\n\n\t}\n\n\t/**\n\t * Sets the start index for an operation or a process. This method assigns\n\t * the provided value to the attribute 'start-index'.\n\t * @param {number|string} value The value to set for the 'start-index' attribute.\n\t */\n\tset startIndex(value) {\n\t\tthis.setAttribute('start-index', value);\n\t}\n\n\t/**\n\t * Retrieves the starting index value stored as an attribute.\n\t * If the attribute 'start-index' exists and is not null, it parses the value as an integer and returns it.\n\t * If the attribute does not exist, it returns the default value of 0.\n\t * @returns {number} The starting index as an integer, or 0 if the attribute is not present.\n\t */\n\tget startIndex() {\n\t\tconst index = this.getAttribute('start-index');\n\t\treturn index !== null ? +index : 0;\n\t}\n\n\tget active() {\n\t\tif (this.hasAttribute('active')) return this.getAttribute('active');\n\n\t\treturn 'primary';\n\t}\n\n\tget done() {\n\t\tif (this.hasAttribute('done')) return this.getAttribute('done');\n\n\t\treturn 'success';\n\t}\n\n\tclassName = 'Stepper';\n\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/**\n\t * Draws the component for the stepper.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tconst native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.className = 'native-stepper';\n\n\t\tconst header = document.createElement('div');\n\t\theader.setAttribute('part', 'header');\n\t\theader.className = 'header';\n\t\theader.setAttribute('role', 'tablist');\n\n\t\tconst content = document.createElement('div');\n\t\tcontent.setAttribute('part', 'content');\n\t\tcontent.className = 'content';\n\n\t\tconst steps = Array.from(this.children);\n\n\t\tsteps?.forEach((step, index) => {\n\t\t\tif (step.nodeName === 'WJE-STEP') {\n\t\t\t\tthis.headerSteps.push(this.processStep(index, step, header, steps));\n\t\t\t}\n\t\t});\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tconst navButtons = document.createElement('div');\n\t\tnavButtons.className = 'nav-buttons';\n\n\t\tconst prevButton = document.createElement('wje-button');\n\t\tprevButton.setAttribute('label', this.localizer.translate('wj.stepper.button.previous'));\n\t\tprevButton.innerHTML = this.localizer.translate('wj.stepper.button.previous');\n\n\t\tlet nextButton = document.createElement('wje-button');\n\t\tnextButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n\t\tnextButton.innerHTML = this.localizer.translate('wj.stepper.button.next');\n\n\t\tlet finishButton = document.createElement('wje-button');\n\t\tfinishButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n\t\tfinishButton.innerHTML = this.localizer.translate('wj.stepper.button.finish');\n\t\tfinishButton.setAttribute('color', 'primary');\n\n\t\tconst navButtonPrevSlot = document.createElement('slot');\n\t\tnavButtonPrevSlot.setAttribute('name', 'prev');\n\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\tnavButtonPrevSlot.hidden = this.currentStep === 0;\n\n\t\tconst navButtonNextSlot = document.createElement('slot');\n\t\tnavButtonNextSlot.setAttribute('name', 'next');\n\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\tnavButtonNextSlot.hidden = this.currentStep === this.steps.length - 1;\n\n\t\tconst navButtonFinishSlot = document.createElement('slot');\n\t\tnavButtonFinishSlot.setAttribute('name', 'finish');\n\t\tnavButtonFinishSlot.appendChild(nextButton);\n\t\tnavButtonFinishSlot.hidden = this.currentStep !== this.steps.length - 1;\n\n\t\tconst isNextLocked = this.headerSteps[this.currentStep + 1]?.hasAttribute('locked');\n\t\tnavButtonNextSlot.toggleAttribute('disabled', !!isNextLocked);\n\t\tnavButtonFinishSlot.toggleAttribute('disabled', !!isNextLocked);\n\n\t\tif (steps.length > 1) {\n\t\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\t\tnavButtonFinishSlot.appendChild(finishButton);\n\t\t\tnavButtonFinishSlot.style.display = 'none';\n\n\t\t} else {\n\t\t\tnavButtonPrevSlot.hidden = true;\n\t\t\tnavButtonNextSlot.hidden = true;\n\t\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\t\tnavButtonFinishSlot.appendChild(finishButton);\n\t\t}\n\n\t\tcontent.appendChild(slot);\n\n\t\tnative.appendChild(header);\n\t\tnative.appendChild(content);\n\t\tnative.appendChild(navButtons);\n\n\t\tnavButtons.appendChild(navButtonPrevSlot);\n\t\tnavButtons.appendChild(navButtonNextSlot);\n\t\tnavButtons.appendChild(navButtonFinishSlot);\n\n\t\tfragment.appendChild(native);\n\n\t\tthis.header = header;\n\t\tthis.prev = navButtonPrevSlot;\n\t\tthis.next = navButtonNextSlot;\n\t\tthis.finish = navButtonFinishSlot;\n\n\t\treturn fragment;\n\t}\n\n\tprocessStep(index, step, header, steps) {\n\t\tconst nav = document.createElement('div');\n\t\tnav.className = 'step-header';\n\t\tnav.setAttribute('role', 'tab');\n\t\tnav.addEventListener('click', (e) => {\n\t\t\tthis.goToStep(index)\n\t\t});\n\n\t\tconst badge = document.createElement('wje-badge');\n\t\tbadge.setAttribute('label', (index + 1).toString());\n\t\tbadge.className = 'step-badge';\n\t\tbadge.innerHTML = index + 1;\n\n\t\tconst label = document.createElement('span');\n\t\tlabel.innerText = step.getAttribute('label') || `${this.localizer.translate('wj.stepper.step')} ${index + 1}`; // default label\n\n\t\tconst panelId = step.id || `wje-stepper-${this._stepperId}-panel-${index}`;\n\t\tconst tabId = nav.id || `wje-stepper-${this._stepperId}-tab-${index}`;\n\t\tstep.id = panelId;\n\t\tnav.id = tabId;\n\t\tnav.setAttribute('aria-controls', panelId);\n\t\tstep.setAttribute('role', 'tabpanel');\n\t\tstep.setAttribute('aria-labelledby', tabId);\n\n\t\t// set active step\n\t\tif (index === this.currentStep || step.hasAttribute('active')) {\n\t\t\tthis.setStepActive(nav, badge, index);\n\t\t} else {\n\t\t\tnav.setAttribute('aria-selected', 'false');\n\t\t\tnav.setAttribute('tabindex', '-1');\n\t\t}\n\n\t\tif (step.hasAttribute('disabled')) {\n\t\t\tnav.setAttribute('disabled', '');\n\t\t\tthis.setStepLocked(nav, badge);\n\t\t} else {\n\t\t\tnav.classList.add('pointer');\n\t\t}\n\n\t\tnav.appendChild(badge);\n\t\tnav.appendChild(label);\n\n\t\theader.appendChild(nav);\n\n\t\tif (index < steps.length - 1) {\n\t\t\tconst arrowIcon = document.createElement('wje-icon');\n\t\t\tarrowIcon.setAttribute('name', 'chevron-right');\n\t\t\tarrowIcon.classList.add('arrow-icon');\n\t\t\tarrowIcon.setAttribute('size', 'small');\n\n\t\t\theader.appendChild(arrowIcon);\n\t\t}\n\n\t\tstep.classList.add('step');\n\t\tif (index !== this.currentStep) {\n\t\t\tstep.style.display = 'none';\n\t\t\tstep.setAttribute('aria-hidden', 'true');\n\t\t} else {\n\t\t\tstep.setAttribute('aria-hidden', 'false');\n\t\t}\n\n\t\tthis.steps.push(step);\n\n\t\treturn nav\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tafterDraw() {\n\t\tif (this.steps.length <= 1) {\n\t\t\tthis.prev.hidden = true;\n\t\t}\n\n\t\tevent.addListener(this.prev, 'click', '', () => this.navigate(-1));\n\t\tevent.addListener(this.next, 'click', '', () => this.navigate(1));\n\t\tevent.addListener(this.finish, 'click', '', () => this.navigate(1));\n\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.goToStep(this.startIndex);\n\t\t});\n\t}\n\n\t/**\n\t * Navigates to a different step in a multi-step process based on the provided direction.\n\t * @param {number} direction The navigation direction.\n\t * Use a positive value to move forward or a negative value to move backward.\n\t */\n\tnavigate(direction) {\n\t\tthis.goToStep(this.currentStep + direction);\n\t}\n\n\t/**\n\t * Navigates to a specific step in a workflow or process.\n\t * Executes a set of operations before and after the step transition.\n\t * @param {number} stepIndex The index of the step to navigate to.\n\t * @returns {void} This method does not return a value.\n\t */\n\tgoToStep(stepIndex) {\n\t\tPromise.resolve(this.beforeOpen(stepIndex, this.currentStep)).then((res) => {\n\t\t\tthis._executeGoToStep(stepIndex);\n\n\t\t\tPromise.resolve(this.afterOpen(stepIndex, this.currentStep));\n\t\t})\n\t\t.catch(console.error);\n\t}\n\n\t_executeGoToStep(stepIndex = 0) {\n\t\tif (stepIndex >= 0 && stepIndex < this.steps.length) {\n\t\t\tif (this.headerSteps[stepIndex].hasAttribute('disabled')) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (stepIndex > this.currentStep) {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('stepper:next', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('stepper:prev', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tthis.headerSteps.forEach((step, index) => {\n\t\t\t\tlet badge = step.querySelector('wje-badge');\n\n\t\t\t\tthis.setStepDefault(step, badge, index);\n\t\t\t\tif (index < stepIndex) this.setStepDone(step, badge);\n\t\t\t\tif (index > stepIndex && step.hasAttribute('disabled')) this.setStepLocked(step, badge, index);\n\t\t\t});\n\n\t\t\tthis.setStepActive(this.headerSteps[stepIndex], null, stepIndex);\n\t\t\tthis.setContentActive(stepIndex);\n\n\t\t\tthis.currentStep = stepIndex;\n\t\t\tthis.prev.hidden = this.currentStep === 0;\n\n\t\t\tconst isNextLocked = this.headerSteps[this.currentStep + 1]?.hasAttribute('locked');\n\t\t\tthis.next.toggleAttribute('disabled', !!isNextLocked);\n\t\t\tthis.finish.toggleAttribute('disabled', !!isNextLocked);\n\n\t\t\tif (this.currentStep === this.steps.length - 1) {\n\t\t\t\tthis.next.hidden = true;\n\t\t\t\tthis.finish.hidden = false;\n\t\t\t\tthis.finish.style.display = 'block';\n\t\t\t} else {\n\t\t\t\tthis.next.hidden = false;\n\t\t\t\tthis.finish.hidden = true;\n\t\t\t\tthis.finish.style.display = 'none';\n\t\t\t}\n\t\t} else if (stepIndex === this.steps.length) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('stepper:finish', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t * Resets a step to its default state by clearing its active and done attributes.\n\t * Updates the step's badge to show its index and removes any color styling.\n\t * @param {HTMLElement} nav The navigation element representing the step.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t * @param {number} [stepIndex] The index of the step, used to set the badge content.\n\t */\n\tsetStepDefault(nav, badge = null, stepIndex = 0) {\n\t\tnav.removeAttribute('active');\n\t\tnav.removeAttribute('done');\n\t\tnav.setAttribute('aria-selected', 'false');\n\t\tnav.setAttribute('tabindex', '-1');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = stepIndex + 1;\n\t\tbadge.removeAttribute('color');\n\t}\n\n\t/**\n\t * Sets a step as active by adding the `active` attribute and updating the step's badge.\n\t * @param {HTMLElement} nav The navigation element representing the step to activate.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t * @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.\n\t */\n\tsetStepActive(nav, badge = null, stepIndex = null) {\n\t\tnav.setAttribute('active', '');\n\t\tnav.setAttribute('aria-selected', 'true');\n\t\tnav.setAttribute('tabindex', '0');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = stepIndex + 1;\n\t\tbadge.setAttribute('color', this.active);\n\t}\n\n\t/**\n\t * Activates the content of a specific step by displaying it and hiding all others.\n\t * @param {number} stepIndex The index of the step whose content should be displayed.\n\t */\n\tsetContentActive(stepIndex) {\n\t\tthis.steps?.forEach((step, index) => {\n\t\t\tif (index === stepIndex) {\n\t\t\t\tstep.style.display = 'block';\n\t\t\t\tstep.setAttribute('aria-hidden', 'false');\n\t\t\t} else {\n\t\t\t\tstep.style.display = 'none';\n\t\t\t\tstep.setAttribute('aria-hidden', 'true');\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Returns the DOM element of a step by index.\n\t * @param {number} stepIndex\n\t * @returns {HTMLElement}\n\t */\n\tgetStepElement(stepIndex) {\n\t\treturn this.steps?.[stepIndex];\n\t}\n\n\t/**\n\t * Appends or replaces content inside the step container.\n\t * @param {number} stepIndex\n\t * @param {Node|string|Node[]} content DOM node(s) or HTML string to insert.\n\t * @param {{ replace?: boolean }} [options]\n\t */\n\trenderStepContent(stepIndex, content, options = {}) {\n\t\tconst stepEl = this.getStepElement(stepIndex);\n\t\tif (!stepEl) return;\n\n\t\tconst { replace = false } = options;\n\n\t\tlet frag = document.createDocumentFragment();\n\t\tif (typeof content === 'string') {\n\t\t\tconst tpl = document.createElement('template');\n\t\t\ttpl.innerHTML = content;\n\t\t\tfrag.append(tpl.content);\n\t\t} else if (Array.isArray(content)) {\n\t\t\tcontent.forEach(node => {\n\t\t\t\tif (node instanceof Node) frag.appendChild(node);\n\t\t\t});\n\t\t} else if (content instanceof Node) {\n\t\t\tfrag.append(content);\n\t\t}\n\n\t\tif (replace) {\n\t\t\tstepEl.replaceChildren(frag);\n\t\t} else {\n\t\t\tstepEl.append(frag);\n\t\t}\n\t}\n\n\t/**\n\t * Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.\n\t * @param {HTMLElement} nav The navigation element representing the completed step.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t */\n\tsetStepDone(nav, badge = null) {\n\t\tnav.setAttribute('done', '');\n\n\t\tconst checkIcon = document.createElement('wje-icon');\n\t\tcheckIcon.setAttribute('name', 'check');\n\t\tcheckIcon.setAttribute('color', this.done);\n\t\tcheckIcon.setAttribute('size', 'medium');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\n\t\tbadge.setAttribute('color', this.done);\n\t\tbadge.innerHTML = '';\n\t\tbadge.appendChild(checkIcon);\n\t}\n\n\tsetStepLocked(nav, badge = null) {\n\t\tnav.setAttribute('disabled', '');\n\t\tnav.setAttribute('locked', '');\n\n\t\tconst lockIcon = document.createElement('wje-icon');\n\t\tlockIcon.setAttribute('name', 'lock');\n\t\tlockIcon.setAttribute('color', \"danger\");\n\t\tlockIcon.setAttribute('size', 'medium');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = '';\n\t\tbadge.removeAttribute('color');\n\t\tbadge.classList.add('disabled');\n\t\tbadge.appendChild(lockIcon);\n\t}\n\n\t/**\n\t * A callback function that is executed before opening a step in a process.\n\t * This allows for custom behavior or logic to be applied before the step is displayed.\n\t * @callback beforeOpen\n\t * @param {number} stepIndex The index of the step that is about to be opened.\n\t * @param {object} currentStep The current step data or configuration object before opening the new step.\n\t */\n\tbeforeOpen = (stepIndex, currentStep) => {\n\t\t// Override to add custom behavior before opening a step.\n\t}\n\n\t/**\n\t * Callback function executed after a step is opened.\n\t * This function can be overridden to implement custom behavior\n\t * that should take place immediately after a step is opened.\n\t * @function afterOpen\n\t * @param {number} stepIndex The index of the step that has been opened.\n\t * @param {object} currentStep The object representing the current step that has been opened.\n\t */\n\tafterOpen = (stepIndex, currentStep) => {\n\t\t// Override to add custom behavior after opening a step.\n\t}\n}\n","import Stepper from './stepper.element.js';\n\nexport default Stepper;\n\nStepper.define('wje-stepper', Stepper);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-stepper.js","sources":["../packages/wje-stepper/stepper.element.js","../packages/wje-stepper/stepper.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nlet stepperId = 0;\n\n/**\n * `Stepper` is a custom web component that represents a stepper.\n * @summary This element represents a stepper.\n * @documentation https://elements.webjet.sk/components/stepper\n * @status stable\n * @augments WJElement\n * @attribute {string} active - The active color for the stepper.\n * @attribute {string} done - The done color for the stepper.\n * @slot - The default slot for the stepper.\n * @csspart native - The native part of the stepper.\n * @csspart header - The header part of the stepper.\n * @csspart content - The content part of the stepper.\n * @tag wje-stepper\n */\nexport default class Stepper extends WJElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.currentStep = 0;\n\n\t\tthis.localizer = new Localizer(this);\n\t\tthis.steps = [];\n\t\tthis.headerSteps = [];\n\t\tthis._stepperId = ++stepperId;\n\n\t}\n\n\t/**\n\t * Sets the start index for an operation or a process. This method assigns\n\t * the provided value to the attribute 'start-index'.\n\t * @param {number|string} value The value to set for the 'start-index' attribute.\n\t */\n\tset startIndex(value) {\n\t\tthis.setAttribute('start-index', value);\n\t}\n\n\t/**\n\t * Retrieves the starting index value stored as an attribute.\n\t * If the attribute 'start-index' exists and is not null, it parses the value as an integer and returns it.\n\t * If the attribute does not exist, it returns the default value of 0.\n\t * @returns {number} The starting index as an integer, or 0 if the attribute is not present.\n\t */\n\tget startIndex() {\n\t\tconst index = this.getAttribute('start-index');\n\t\treturn index !== null ? +index : 0;\n\t}\n\n\tget active() {\n\t\tif (this.hasAttribute('active')) return this.getAttribute('active');\n\n\t\treturn 'primary';\n\t}\n\n\tget done() {\n\t\tif (this.hasAttribute('done')) return this.getAttribute('done');\n\n\t\treturn 'success';\n\t}\n\n\tclassName = 'Stepper';\n\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/**\n\t * Draws the component for the stepper.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tconst native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.className = 'native-stepper';\n\n\t\tconst header = document.createElement('div');\n\t\theader.setAttribute('part', 'header');\n\t\theader.className = 'header';\n\t\theader.setAttribute('role', 'tablist');\n\n\t\tconst content = document.createElement('div');\n\t\tcontent.setAttribute('part', 'content');\n\t\tcontent.className = 'content';\n\n\t\tconst steps = Array.from(this.children);\n\n\t\tsteps?.forEach((step, index) => {\n\t\t\tif (step.nodeName === 'WJE-STEP') {\n\t\t\t\tthis.headerSteps.push(this.processStep(index, step, header, steps));\n\t\t\t}\n\t\t});\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tconst navButtons = document.createElement('div');\n\t\tnavButtons.className = 'nav-buttons';\n\n\t\tconst prevButton = document.createElement('wje-button');\n\t\tprevButton.setAttribute('label', this.localizer.translate('wj.stepper.button.previous'));\n\t\tprevButton.innerHTML = this.localizer.translate('wj.stepper.button.previous');\n\n\t\tlet nextButton = document.createElement('wje-button');\n\t\tnextButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n\t\tnextButton.innerHTML = this.localizer.translate('wj.stepper.button.next');\n\n\t\tlet finishButton = document.createElement('wje-button');\n\t\tfinishButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n\t\tfinishButton.innerHTML = this.localizer.translate('wj.stepper.button.finish');\n\t\tfinishButton.setAttribute('color', 'primary');\n\n\t\tconst navButtonPrevSlot = document.createElement('slot');\n\t\tnavButtonPrevSlot.setAttribute('name', 'prev');\n\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\tnavButtonPrevSlot.hidden = this.currentStep === 0;\n\n\t\tconst navButtonNextSlot = document.createElement('slot');\n\t\tnavButtonNextSlot.setAttribute('name', 'next');\n\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\tnavButtonNextSlot.hidden = this.currentStep === this.steps.length - 1;\n\n\t\tconst navButtonFinishSlot = document.createElement('slot');\n\t\tnavButtonFinishSlot.setAttribute('name', 'finish');\n\t\tnavButtonFinishSlot.appendChild(nextButton);\n\t\tnavButtonFinishSlot.hidden = this.currentStep !== this.steps.length - 1;\n\n\t\tconst isNextLocked = this.headerSteps[this.currentStep + 1]?.hasAttribute('locked');\n\t\tnavButtonNextSlot.toggleAttribute('disabled', !!isNextLocked);\n\t\tnavButtonFinishSlot.toggleAttribute('disabled', !!isNextLocked);\n\n\t\tif (steps.length > 1) {\n\t\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\t\tnavButtonFinishSlot.appendChild(finishButton);\n\t\t\tnavButtonFinishSlot.style.display = 'none';\n\n\t\t} else {\n\t\t\tnavButtonPrevSlot.hidden = true;\n\t\t\tnavButtonNextSlot.hidden = true;\n\t\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\t\tnavButtonFinishSlot.appendChild(finishButton);\n\t\t}\n\n\t\tcontent.appendChild(slot);\n\n\t\tnative.appendChild(header);\n\t\tnative.appendChild(content);\n\t\tnative.appendChild(navButtons);\n\n\t\tnavButtons.appendChild(navButtonPrevSlot);\n\t\tnavButtons.appendChild(navButtonNextSlot);\n\t\tnavButtons.appendChild(navButtonFinishSlot);\n\n\t\tfragment.appendChild(native);\n\n\t\tthis.header = header;\n\t\tthis.prev = navButtonPrevSlot;\n\t\tthis.next = navButtonNextSlot;\n\t\tthis.finish = navButtonFinishSlot;\n\n\t\treturn fragment;\n\t}\n\n\tprocessStep(index, step, header, steps) {\n\t\tconst nav = document.createElement('div');\n\t\tnav.className = 'step-header';\n\t\tnav.setAttribute('role', 'tab');\n\t\tnav.addEventListener('click', (e) => {\n\t\t\tthis.goToStep(index)\n\t\t});\n\n\t\tconst badge = document.createElement('wje-badge');\n\t\tbadge.setAttribute('label', (index + 1).toString());\n\t\tbadge.className = 'step-badge';\n\t\tbadge.innerHTML = index + 1;\n\n\t\tconst label = document.createElement('span');\n\t\tlabel.innerText = step.getAttribute('label') || `${this.localizer.translate('wj.stepper.step')} ${index + 1}`; // default label\n\n\t\tconst panelId = step.id || `wje-stepper-${this._stepperId}-panel-${index}`;\n\t\tconst tabId = nav.id || `wje-stepper-${this._stepperId}-tab-${index}`;\n\t\tstep.id = panelId;\n\t\tnav.id = tabId;\n\t\tnav.setAttribute('aria-controls', panelId);\n\t\tstep.setAttribute('role', 'tabpanel');\n\t\tstep.setAttribute('aria-labelledby', tabId);\n\n\t\t// set active step\n\t\tif (index === this.currentStep || step.hasAttribute('active')) {\n\t\t\tthis.setStepActive(nav, badge, index);\n\t\t} else {\n\t\t\tnav.setAttribute('aria-selected', 'false');\n\t\t\tnav.setAttribute('tabindex', '-1');\n\t\t}\n\n\t\tif (step.hasAttribute('disabled')) {\n\t\t\tnav.setAttribute('disabled', '');\n\t\t\tthis.setStepLocked(nav, badge);\n\t\t} else {\n\t\t\tnav.classList.add('pointer');\n\t\t}\n\n\t\tnav.appendChild(badge);\n\t\tnav.appendChild(label);\n\n\t\theader.appendChild(nav);\n\n\t\tif (index < steps.length - 1) {\n\t\t\tconst arrowIcon = document.createElement('wje-icon');\n\t\t\tarrowIcon.setAttribute('name', 'chevron-right');\n\t\t\tarrowIcon.classList.add('arrow-icon');\n\t\t\tarrowIcon.setAttribute('size', 'small');\n\n\t\t\theader.appendChild(arrowIcon);\n\t\t}\n\n\t\tstep.classList.add('step');\n\t\tif (index !== this.currentStep) {\n\t\t\tstep.style.display = 'none';\n\t\t\tstep.setAttribute('aria-hidden', 'true');\n\t\t} else {\n\t\t\tstep.setAttribute('aria-hidden', 'false');\n\t\t}\n\n\t\tthis.steps.push(step);\n\n\t\treturn nav\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tafterDraw() {\n\t\tif (this.steps.length <= 1) {\n\t\t\tthis.prev.hidden = true;\n\t\t}\n\n\t\tevent.addListener(this.prev, 'click', '', () => this.navigate(-1));\n\t\tevent.addListener(this.next, 'click', '', () => this.navigate(1));\n\t\tevent.addListener(this.finish, 'click', '', () => this.navigate(1));\n\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.goToStep(this.startIndex);\n\t\t});\n\t}\n\n\t/**\n\t * Navigates to a different step in a multi-step process based on the provided direction.\n\t * @param {number} direction The navigation direction.\n\t * Use a positive value to move forward or a negative value to move backward.\n\t */\n\tnavigate(direction) {\n\t\tthis.goToStep(this.currentStep + direction);\n\t}\n\n\t/**\n\t * Navigates to a specific step in a workflow or process.\n\t * Executes a set of operations before and after the step transition.\n\t * @param {number} stepIndex The index of the step to navigate to.\n\t * @returns {void} This method does not return a value.\n\t */\n\tgoToStep(stepIndex) {\n\t\tPromise.resolve(this.beforeOpen(stepIndex, this.currentStep)).then((res) => {\n\t\t\tthis._executeGoToStep(stepIndex);\n\n\t\t\tPromise.resolve(this.afterOpen(stepIndex, this.currentStep));\n\t\t})\n\t\t.catch(console.error);\n\t}\n\n\t_executeGoToStep(stepIndex = 0) {\n\t\tif (stepIndex >= 0 && stepIndex < this.steps.length) {\n\t\t\tif (this.headerSteps[stepIndex].hasAttribute('disabled')) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (stepIndex > this.currentStep) {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('stepper:next', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('stepper:prev', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tthis.headerSteps.forEach((step, index) => {\n\t\t\t\tlet badge = step.querySelector('wje-badge');\n\n\t\t\t\tthis.setStepDefault(step, badge, index);\n\t\t\t\tif (index < stepIndex) this.setStepDone(step, badge);\n\t\t\t\tif (index > stepIndex && step.hasAttribute('disabled')) this.setStepLocked(step, badge, index);\n\t\t\t});\n\n\t\t\tthis.setStepActive(this.headerSteps[stepIndex], null, stepIndex);\n\t\t\tthis.setContentActive(stepIndex);\n\n\t\t\tthis.currentStep = stepIndex;\n\t\t\tthis.prev.hidden = this.currentStep === 0;\n\n\t\t\tconst isNextLocked = this.headerSteps[this.currentStep + 1]?.hasAttribute('locked');\n\t\t\tthis.next.toggleAttribute('disabled', !!isNextLocked);\n\t\t\tthis.finish.toggleAttribute('disabled', !!isNextLocked);\n\n\t\t\tif (this.currentStep === this.steps.length - 1) {\n\t\t\t\tthis.next.hidden = true;\n\t\t\t\tthis.finish.hidden = false;\n\t\t\t\tthis.finish.style.display = 'block';\n\t\t\t} else {\n\t\t\t\tthis.next.hidden = false;\n\t\t\t\tthis.finish.hidden = true;\n\t\t\t\tthis.finish.style.display = 'none';\n\t\t\t}\n\t\t} else if (stepIndex === this.steps.length) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('stepper:finish', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t * Resets a step to its default state by clearing its active and done attributes.\n\t * Updates the step's badge to show its index and removes any color styling.\n\t * @param {HTMLElement} nav The navigation element representing the step.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t * @param {number} [stepIndex] The index of the step, used to set the badge content.\n\t */\n\tsetStepDefault(nav, badge = null, stepIndex = 0) {\n\t\tnav.removeAttribute('active');\n\t\tnav.removeAttribute('done');\n\t\tnav.setAttribute('aria-selected', 'false');\n\t\tnav.setAttribute('tabindex', '-1');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = stepIndex + 1;\n\t\tbadge.removeAttribute('color');\n\t}\n\n\t/**\n\t * Sets a step as active by adding the `active` attribute and updating the step's badge.\n\t * @param {HTMLElement} nav The navigation element representing the step to activate.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t * @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.\n\t */\n\tsetStepActive(nav, badge = null, stepIndex = null) {\n\t\tnav.setAttribute('active', '');\n\t\tnav.setAttribute('aria-selected', 'true');\n\t\tnav.setAttribute('tabindex', '0');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = stepIndex + 1;\n\t\tbadge.setAttribute('color', this.active);\n\t}\n\n\t/**\n\t * Activates the content of a specific step by displaying it and hiding all others.\n\t * @param {number} stepIndex The index of the step whose content should be displayed.\n\t */\n\tsetContentActive(stepIndex) {\n\t\tthis.steps?.forEach((step, index) => {\n\t\t\tif (index === stepIndex) {\n\t\t\t\tstep.style.display = 'block';\n\t\t\t\tstep.setAttribute('aria-hidden', 'false');\n\t\t\t} else {\n\t\t\t\tstep.style.display = 'none';\n\t\t\t\tstep.setAttribute('aria-hidden', 'true');\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Returns the DOM element of a step by index.\n\t * @param {number} stepIndex\n\t * @returns {HTMLElement}\n\t */\n\tgetStepElement(stepIndex) {\n\t\treturn this.steps?.[stepIndex];\n\t}\n\n\t/**\n\t * Appends or replaces content inside the step container.\n\t * @param {number} stepIndex\n\t * @param {Node|string|Node[]} content DOM node(s) or HTML string to insert.\n\t * @param {{ replace?: boolean }} [options]\n\t */\n\trenderStepContent(stepIndex, content, options = {}) {\n\t\tconst stepEl = this.getStepElement(stepIndex);\n\t\tif (!stepEl) return;\n\n\t\tconst { replace = false } = options;\n\n\t\tlet frag = document.createDocumentFragment();\n\t\tif (typeof content === 'string') {\n\t\t\tconst tpl = document.createElement('template');\n\t\t\ttpl.innerHTML = content;\n\t\t\tfrag.append(tpl.content);\n\t\t} else if (Array.isArray(content)) {\n\t\t\tcontent.forEach(node => {\n\t\t\t\tif (node instanceof Node) frag.appendChild(node);\n\t\t\t});\n\t\t} else if (content instanceof Node) {\n\t\t\tfrag.append(content);\n\t\t}\n\n\t\tif (replace) {\n\t\t\tstepEl.replaceChildren(frag);\n\t\t} else {\n\t\t\tstepEl.append(frag);\n\t\t}\n\t}\n\n\t/**\n\t * Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.\n\t * @param {HTMLElement} nav The navigation element representing the completed step.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t */\n\tsetStepDone(nav, badge = null) {\n\t\tnav.setAttribute('done', '');\n\n\t\tconst checkIcon = document.createElement('wje-icon');\n\t\tcheckIcon.setAttribute('name', 'check');\n\t\tcheckIcon.setAttribute('color', this.done);\n\t\tcheckIcon.setAttribute('size', 'medium');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\n\t\tbadge.setAttribute('color', this.done);\n\t\tbadge.innerHTML = '';\n\t\tbadge.appendChild(checkIcon);\n\t}\n\n\tsetStepLocked(nav, badge = null) {\n\t\tnav.setAttribute('disabled', '');\n\t\tnav.setAttribute('locked', '');\n\n\t\tconst lockIcon = document.createElement('wje-icon');\n\t\tlockIcon.setAttribute('name', 'lock');\n\t\tlockIcon.setAttribute('color', \"danger\");\n\t\tlockIcon.setAttribute('size', 'medium');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = '';\n\t\tbadge.removeAttribute('color');\n\t\tbadge.classList.add('disabled');\n\t\tbadge.appendChild(lockIcon);\n\t}\n\n\t/**\n\t * A callback function that is executed before opening a step in a process.\n\t * This allows for custom behavior or logic to be applied before the step is displayed.\n\t * @callback beforeOpen\n\t * @param {number} stepIndex The index of the step that is about to be opened.\n\t * @param {object} currentStep The current step data or configuration object before opening the new step.\n\t */\n\tbeforeOpen = (stepIndex, currentStep) => {\n\t\t// Override to add custom behavior before opening a step.\n\t}\n\n\t/**\n\t * Callback function executed after a step is opened.\n\t * This function can be overridden to implement custom behavior\n\t * that should take place immediately after a step is opened.\n\t * @function afterOpen\n\t * @param {number} stepIndex The index of the step that has been opened.\n\t * @param {object} currentStep The object representing the current step that has been opened.\n\t */\n\tafterOpen = (stepIndex, currentStep) => {\n\t\t// Override to add custom behavior after opening a step.\n\t}\n}\n","import Stepper from './stepper.element.js';\n\nexport default Stepper;\n\nStepper.define('wje-stepper', Stepper);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-store.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-store.js","sources":["../packages/wje-store/default-store-actions.js","../packages/wje-store/pubsub.js","../packages/wje-store/store.js"],"sourcesContent":["const addAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD',\n\t\t};\n\t};\n};\n\nconst addManyAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD_MANY`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD_MANY',\n\t\t};\n\t};\n};\n\nconst updateAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/UPDATE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'UPDATE',\n\t\t};\n\t};\n};\n\nconst deleteAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/DELETE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'DELETE',\n\t\t};\n\t};\n};\n\nconst loadAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/LOAD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'LOAD',\n\t\t};\n\t};\n};\n\nexport { addAction, deleteAction, loadAction, updateAction, addManyAction };\n","export default class PubSub {\n constructor() {\n this.events = {};\n }\n\n /**\n * Either create a new event instance for passed `event` name.\n * or push a new callback into the existing collection.\n * @param {string} event The event name to subscribe to\n * @param {Function} callback The callback function to subscribe to the event\n * @returns {number} A count of callbacks for this event\n * @memberof PubSub\n */\n subscribe(event, callback) {\n let self = this;\n let index;\n\n // If there's not already an event with this name set in our collection\n // go ahead and create a new one and set it with an empty array, so we don't\n // have to type check it later down-the-line\n if (!self.events.hasOwnProperty(event)) {\n self.events[event] = [];\n }\n\n index = self.events[event].push(callback) - 1;\n\n return {\n unsubscribe() {\n self.events[event].splice(self.events[event].indexOf(callback), 1);\n },\n };\n }\n\n /**\n * If the passed event has callbacks attached to it, loop through each one and call it.\n * @param {string} event The name of the event to publish\n * @param {any} state The current state to pass to the callbacks\n * @param {object} [newData] The new data to pass to the callbacks\n * @param {object} [oldData] The old data to pass to the callbacks\n * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists\n * @memberof PubSub\n */\n publish(event, state, newData = {}, oldData = {}) {\n let self = this;\n\n // There's no event to publish to, so bail out\n if (!self.events.hasOwnProperty(event)) {\n return [];\n }\n\n // Get each subscription and call its callback with the passed data\n return self.events[event].map((callback) => callback(state, oldData, newData));\n }\n}\n","import * as defaultStoreActions from './default-store-actions.js';\nimport PubSub from './pubsub.js';\n\n/**\n * @summary A reactive state management system with support for reducers, events, and state immutability.\n * @description The `Store` class provides a centralized way to manage application state with actions, reducers, and event subscriptions. It supports handling both object and array state, with flexibility for custom reducers.\n * @example\n * const store = new Store({\n * reducer: (state, action) => { ... },\n * state: { user: { id: 1, name: 'John' } }\n * });\n * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));\n * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });\n */\nclass Store {\n _state;\n _reducer;\n events;\n status;\n\n /**\n * Initializes the store with optional reducer and state.\n * @param {object} [params] Configuration for the store.\n * @param {Function} [params.reducer] Initial reducer function for handling state updates.\n * @param {object} [params.state] Initial state of the store.\n */\n constructor(params = {}) {\n this._isPause = false;\n this._state = {};\n this._reducer = () => {\n return {};\n };\n\n // A status enum to set during actions and mutations\n this.status = 'resting';\n\n // Attach our PubSub module as an `events` element\n this.events = new PubSub();\n\n if (params?.hasOwnProperty('reducer')) {\n this._reducer = params.reducer;\n }\n\n this.refreshProxy(params?.state);\n }\n\n /**\n * Dispatches an action to update the state by invoking the reducer function.\n * @param {object} action The action object containing the type and any associated payload.\n * @param {string} action.type The type of the action being dispatched.\n * @returns {boolean} Returns `true` after the state has been successfully updated.\n * @example\n * const action = { type: 'INCREMENT', payload: { amount: 1 } };\n * store.dispatch(action);\n */\n dispatch(action) {\n // Create a console group which will contain the logs from our Proxy etc\n // console.groupCollapsed(`ACTION: ${action.type}`);\n\n // Let anything that's watching the status know that we're dispatching an action\n this.status = 'action';\n\n let newState = this._reducer(this._state, action);\n\n this.status = 'mutation';\n // Merge the old and new together to create a new state and set it\n this._state = Object.assign(this._state, newState);\n\n // Close our console group to keep things nice and neat\n // console.groupEnd();\n\n return true;\n }\n\n /**\n * Retrieves a deep copy of the current state to ensure immutability.\n * @returns {object} A deep copy of the current state.\n * @example\n * const currentState = store.getState();\n * console.log(currentState);\n */\n getState() {\n return JSON.parse(JSON.stringify(this._state));\n }\n\n /**\n * Subscribes to a specific event with a provided callback function.\n * @param {string} eventName The name of the event to subscribe to.\n * @param {Function} callbackFn The function to execute when the event is triggered.\n * @returns {Function} - A function to unsubscribe from the event.\n * @example\n * const unsubscribe = store.subscribe('stateChange', (newState) => {\n * console.log('State changed:', newState);\n * });\n * // Later, to unsubscribe\n * unsubscribe();\n */\n subscribe(eventName, callbackFn) {\n return this.events.subscribe(eventName, callbackFn);\n }\n\n /**\n * Unsubscribes from a specific event by removing all associated listeners.\n * @param {string} eventName The name of the event to unsubscribe from.\n * @returns {void}\n * @example\n * store.unsubscribe('stateChange');\n */\n unsubscribe(eventName) {\n delete this.events[eventName];\n }\n\n /**\n * Pauses event handling or other operations.\n * @returns {this} Returns the current instance for method chaining.\n * @example\n * store.pause().doSomething();\n */\n pause() {\n this._isPause = true;\n return this;\n }\n\n /**\n * Resumes event handling or other operations.\n * @param {*} [val] Optional value to pass while resuming.\n * @returns {this} Returns the current instance for method chaining.\n * @example\n * store.play().doSomething();\n */\n play(val) {\n this._isPause = false;\n return this;\n }\n\n /**\n * Merges a new reducer function into the existing reducer for a specific state property.\n * @param {string} stateValueName The key in the state object that the new reducer will manage.\n * @param {Function} newReducer The reducer function to handle updates for the specified state property.\n * @returns {void}\n * @example\n * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });\n * store.mergeReducers('user', newReducer);\n */\n mergeReducers(stateValueName, newReducer) {\n let reducerCopy = this._reducer;\n this._reducer = (state, newState) => {\n let preState = reducerCopy(state, newState);\n return {\n ...preState,\n [stateValueName]: newReducer(newState, state[stateValueName]),\n };\n };\n }\n\n /**\n * Synchronizes each entry in an array with the store by defining or updating state entries.\n * @param {string} storeKey The key prefix used for defining or updating store entries.\n * @param {Array<object>} [array] The array of entries to be synchronized with the store.\n * @param {string} [identificator] The property name used as a unique identifier for each entry.\n * @returns {void}\n * @example\n * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];\n * store.makeEveryArrayEntryAsStoreState('items', data, 'id');\n */\n makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = 'id') {\n array.forEach((entry) => {\n if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {\n this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));\n } else {\n this.define(\n `${storeKey}-${entry.id || entry.source || entry[identificator]}`,\n entry,\n null,\n identificator\n );\n }\n });\n }\n\n /**\n * Defines a new state variable and associates it with a reducer.\n * @param {string} stateValueName The name of the state variable to define.\n * @param {*} defaultValue The initial value of the state variable.\n * @param {Function|null} [reducer] An optional reducer function to manage updates for the state variable.\n * @param {string} [key] The key used to identify individual entries if the state value is an array or object.\n * @returns {void}\n * @example\n * // Define a new state with a custom reducer\n * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));\n * @example\n * // Define a new state with default array reducer\n * store.define('items', [], null, 'itemId');\n */\n define(stateValueName, defaultValue, reducer, key = 'id') {\n if (this._state.hasOwnProperty(stateValueName)) {\n console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);\n return;\n }\n\n if (reducer instanceof Function) {\n this.mergeReducers(stateValueName, reducer);\n } else {\n if (defaultValue instanceof Array) {\n this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));\n } else {\n this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));\n }\n }\n\n this.refreshProxy({\n ...this._state,\n [stateValueName]: defaultValue,\n });\n }\n\n /**\n * Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.\n * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.\n * @returns {void}\n * @example\n * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });\n */\n refreshProxy(newState) {\n // Set our state to be a Proxy. We are setting the default state by\n // checking the params and defaulting to an empty object if no default\n // state is passed in\n this._state = new Proxy(newState || {}, {\n set: (state, key, value) => {\n if (JSON.stringify(state[key]) === JSON.stringify(value)) {\n return true;\n }\n\n //Set the value as we would normally\n let oldState = state[key];\n state[key] = value;\n\n // TODO vieme to rozšíríť a subscripe sa len na zmenu určitej časti statu\n // Publish the change event for the components that are listening\n if (!this._isPause) this.events.publish(key, this._state, state[key], oldState);\n\n // Give the user a little telling off if they set a value directly\n if (this.status !== 'mutation') {\n console.warn(`You should use a mutation to set ${key}`);\n }\n\n // Reset the status ready for the next operation\n this.status = 'resting';\n\n return true;\n },\n });\n }\n\n /**\n * Creates a reducer function to manage an object state.\n * @param {string} stateValueName The name of the state property this reducer manages.\n * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.\n * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.\n * @example\n * const userReducer = store.createObjectReducer('user');\n * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });\n */\n createObjectReducer(stateValueName) {\n return (action, state = {}) => {\n if (\n Array.isArray(action.payload) &&\n (action.type === `${stateValueName}/ADD` || action.type === `${stateValueName}/UPDATE`)\n ) {\n console.error(`Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`);\n }\n\n const actionType = action.type.split('/')[1];\n\n if (!['ADD', 'UPDATE', 'DELETE'].includes(actionType)) {\n console.error(\n `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`\n );\n }\n\n switch (action.type) {\n case `${stateValueName}/ADD`:\n return {\n ...action.payload,\n };\n case `${stateValueName}/UPDATE`:\n return {\n ...state,\n ...action.payload,\n };\n case `${stateValueName}/DELETE`:\n return {};\n default:\n return state;\n }\n };\n }\n\n /**\n * Creates a reducer function to manage an array state.\n * @param {string} stateValueName The name of the state property this reducer manages.\n * @param {string} key The unique key used to identify items in the array for updates and deletions.\n * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.\n * @throws {Error} If `action.payload` is not an array when required.\n * @example\n * const itemsReducer = store.createArrayReducer('items', 'id');\n * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });\n */\n createArrayReducer(stateValueName, key) {\n return (action, state = []) => {\n if (action.actionType === 'LOAD' && action.type?.includes(stateValueName)) {\n if (!Array.isArray(action.payload)) {\n console.error(`Snažíte sa použiť \"LOAD\" akciu na pole, ale payload nie je pole.`);\n\n return [...state];\n }\n }\n\n switch (action.type) {\n case `${stateValueName}/ADD`:\n if (Array.isArray(action.payload)) {\n return [...state, ...action.payload];\n } else {\n return [...state, action.payload];\n }\n case `${stateValueName}/ADD_MANY`:\n return [...state, ...action.payload];\n case `${stateValueName}/UPDATE`:\n if (state.some((obj) => obj[key] === action.payload[key])) {\n return [\n ...state.map((obj) => {\n if (obj[key] === action.payload[key]) {\n return action.payload;\n }\n return obj;\n }),\n ];\n } else {\n return [...state, action.payload];\n }\n case `${stateValueName}/DELETE`:\n if (Array.isArray(action.payload)) {\n return [\n ...state.filter(\n (obj) =>\n !action.payload.some(\n (item) =>\n (obj.hasOwnProperty(key) && obj[key] !== item[key]) ||\n (!obj.hasOwnProperty(key) && obj !== item)\n )\n ),\n ];\n }\n\n return [\n ...state.filter(\n (obj) =>\n (obj.hasOwnProperty(key) && obj[key] !== action.payload[key]) ||\n (!obj.hasOwnProperty(key) && obj !== action.payload)\n ),\n ];\n\n case `${stateValueName}/LOAD`:\n return [...action.payload];\n default:\n return state;\n }\n };\n }\n}\n\nlet store = new Store();\nexport { store, defaultStoreActions };\n"],"names":["defaultStoreActions.updateAction"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-store.js","sources":["../packages/wje-store/default-store-actions.js","../packages/wje-store/pubsub.js","../packages/wje-store/store.js"],"sourcesContent":["const addAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD',\n\t\t};\n\t};\n};\n\nconst addManyAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD_MANY`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD_MANY',\n\t\t};\n\t};\n};\n\nconst updateAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/UPDATE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'UPDATE',\n\t\t};\n\t};\n};\n\nconst deleteAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/DELETE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'DELETE',\n\t\t};\n\t};\n};\n\nconst loadAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/LOAD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'LOAD',\n\t\t};\n\t};\n};\n\nexport { addAction, deleteAction, loadAction, updateAction, addManyAction };\n","export default class PubSub {\n constructor() {\n this.events = {};\n }\n\n /**\n * Either create a new event instance for passed `event` name.\n * or push a new callback into the existing collection.\n * @param {string} event The event name to subscribe to\n * @param {Function} callback The callback function to subscribe to the event\n * @returns {number} A count of callbacks for this event\n * @memberof PubSub\n */\n subscribe(event, callback) {\n let self = this;\n let index;\n\n // If there's not already an event with this name set in our collection\n // go ahead and create a new one and set it with an empty array, so we don't\n // have to type check it later down-the-line\n if (!self.events.hasOwnProperty(event)) {\n self.events[event] = [];\n }\n\n index = self.events[event].push(callback) - 1;\n\n return {\n unsubscribe() {\n self.events[event].splice(self.events[event].indexOf(callback), 1);\n },\n };\n }\n\n /**\n * If the passed event has callbacks attached to it, loop through each one and call it.\n * @param {string} event The name of the event to publish\n * @param {any} state The current state to pass to the callbacks\n * @param {object} [newData] The new data to pass to the callbacks\n * @param {object} [oldData] The old data to pass to the callbacks\n * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists\n * @memberof PubSub\n */\n publish(event, state, newData = {}, oldData = {}) {\n let self = this;\n\n // There's no event to publish to, so bail out\n if (!self.events.hasOwnProperty(event)) {\n return [];\n }\n\n // Get each subscription and call its callback with the passed data\n return self.events[event].map((callback) => callback(state, oldData, newData));\n }\n}\n","import * as defaultStoreActions from './default-store-actions.js';\nimport PubSub from './pubsub.js';\n\n/**\n * @summary A reactive state management system with support for reducers, events, and state immutability.\n * @description The `Store` class provides a centralized way to manage application state with actions, reducers, and event subscriptions. It supports handling both object and array state, with flexibility for custom reducers.\n * @example\n * const store = new Store({\n * reducer: (state, action) => { ... },\n * state: { user: { id: 1, name: 'John' } }\n * });\n * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));\n * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });\n */\nclass Store {\n _state;\n _reducer;\n events;\n status;\n\n /**\n * Initializes the store with optional reducer and state.\n * @param {object} [params] Configuration for the store.\n * @param {Function} [params.reducer] Initial reducer function for handling state updates.\n * @param {object} [params.state] Initial state of the store.\n */\n constructor(params = {}) {\n this._isPause = false;\n this._state = {};\n this._reducer = () => {\n return {};\n };\n\n // A status enum to set during actions and mutations\n this.status = 'resting';\n\n // Attach our PubSub module as an `events` element\n this.events = new PubSub();\n\n if (params?.hasOwnProperty('reducer')) {\n this._reducer = params.reducer;\n }\n\n this.refreshProxy(params?.state);\n }\n\n /**\n * Dispatches an action to update the state by invoking the reducer function.\n * @param {object} action The action object containing the type and any associated payload.\n * @param {string} action.type The type of the action being dispatched.\n * @returns {boolean} Returns `true` after the state has been successfully updated.\n * @example\n * const action = { type: 'INCREMENT', payload: { amount: 1 } };\n * store.dispatch(action);\n */\n dispatch(action) {\n // Create a console group which will contain the logs from our Proxy etc\n // console.groupCollapsed(`ACTION: ${action.type}`);\n\n // Let anything that's watching the status know that we're dispatching an action\n this.status = 'action';\n\n let newState = this._reducer(this._state, action);\n\n this.status = 'mutation';\n // Merge the old and new together to create a new state and set it\n this._state = Object.assign(this._state, newState);\n\n // Close our console group to keep things nice and neat\n // console.groupEnd();\n\n return true;\n }\n\n /**\n * Retrieves a deep copy of the current state to ensure immutability.\n * @returns {object} A deep copy of the current state.\n * @example\n * const currentState = store.getState();\n * console.log(currentState);\n */\n getState() {\n return JSON.parse(JSON.stringify(this._state));\n }\n\n /**\n * Subscribes to a specific event with a provided callback function.\n * @param {string} eventName The name of the event to subscribe to.\n * @param {Function} callbackFn The function to execute when the event is triggered.\n * @returns {Function} - A function to unsubscribe from the event.\n * @example\n * const unsubscribe = store.subscribe('stateChange', (newState) => {\n * console.log('State changed:', newState);\n * });\n * // Later, to unsubscribe\n * unsubscribe();\n */\n subscribe(eventName, callbackFn) {\n return this.events.subscribe(eventName, callbackFn);\n }\n\n /**\n * Unsubscribes from a specific event by removing all associated listeners.\n * @param {string} eventName The name of the event to unsubscribe from.\n * @returns {void}\n * @example\n * store.unsubscribe('stateChange');\n */\n unsubscribe(eventName) {\n delete this.events[eventName];\n }\n\n /**\n * Pauses event handling or other operations.\n * @returns {this} Returns the current instance for method chaining.\n * @example\n * store.pause().doSomething();\n */\n pause() {\n this._isPause = true;\n return this;\n }\n\n /**\n * Resumes event handling or other operations.\n * @param {*} [val] Optional value to pass while resuming.\n * @returns {this} Returns the current instance for method chaining.\n * @example\n * store.play().doSomething();\n */\n play(val) {\n this._isPause = false;\n return this;\n }\n\n /**\n * Merges a new reducer function into the existing reducer for a specific state property.\n * @param {string} stateValueName The key in the state object that the new reducer will manage.\n * @param {Function} newReducer The reducer function to handle updates for the specified state property.\n * @returns {void}\n * @example\n * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });\n * store.mergeReducers('user', newReducer);\n */\n mergeReducers(stateValueName, newReducer) {\n let reducerCopy = this._reducer;\n this._reducer = (state, newState) => {\n let preState = reducerCopy(state, newState);\n return {\n ...preState,\n [stateValueName]: newReducer(newState, state[stateValueName]),\n };\n };\n }\n\n /**\n * Synchronizes each entry in an array with the store by defining or updating state entries.\n * @param {string} storeKey The key prefix used for defining or updating store entries.\n * @param {Array<object>} [array] The array of entries to be synchronized with the store.\n * @param {string} [identificator] The property name used as a unique identifier for each entry.\n * @returns {void}\n * @example\n * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];\n * store.makeEveryArrayEntryAsStoreState('items', data, 'id');\n */\n makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = 'id') {\n array.forEach((entry) => {\n if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {\n this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));\n } else {\n this.define(\n `${storeKey}-${entry.id || entry.source || entry[identificator]}`,\n entry,\n null,\n identificator\n );\n }\n });\n }\n\n /**\n * Defines a new state variable and associates it with a reducer.\n * @param {string} stateValueName The name of the state variable to define.\n * @param {*} defaultValue The initial value of the state variable.\n * @param {Function|null} [reducer] An optional reducer function to manage updates for the state variable.\n * @param {string} [key] The key used to identify individual entries if the state value is an array or object.\n * @returns {void}\n * @example\n * // Define a new state with a custom reducer\n * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));\n * @example\n * // Define a new state with default array reducer\n * store.define('items', [], null, 'itemId');\n */\n define(stateValueName, defaultValue, reducer, key = 'id') {\n if (this._state.hasOwnProperty(stateValueName)) {\n console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);\n return;\n }\n\n if (reducer instanceof Function) {\n this.mergeReducers(stateValueName, reducer);\n } else {\n if (defaultValue instanceof Array) {\n this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));\n } else {\n this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));\n }\n }\n\n this.refreshProxy({\n ...this._state,\n [stateValueName]: defaultValue,\n });\n }\n\n /**\n * Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.\n * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.\n * @returns {void}\n * @example\n * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });\n */\n refreshProxy(newState) {\n // Set our state to be a Proxy. We are setting the default state by\n // checking the params and defaulting to an empty object if no default\n // state is passed in\n this._state = new Proxy(newState || {}, {\n set: (state, key, value) => {\n if (JSON.stringify(state[key]) === JSON.stringify(value)) {\n return true;\n }\n\n //Set the value as we would normally\n let oldState = state[key];\n state[key] = value;\n\n // TODO vieme to rozšíríť a subscripe sa len na zmenu určitej časti statu\n // Publish the change event for the components that are listening\n if (!this._isPause) this.events.publish(key, this._state, state[key], oldState);\n\n // Give the user a little telling off if they set a value directly\n if (this.status !== 'mutation') {\n console.warn(`You should use a mutation to set ${key}`);\n }\n\n // Reset the status ready for the next operation\n this.status = 'resting';\n\n return true;\n },\n });\n }\n\n /**\n * Creates a reducer function to manage an object state.\n * @param {string} stateValueName The name of the state property this reducer manages.\n * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.\n * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.\n * @example\n * const userReducer = store.createObjectReducer('user');\n * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });\n */\n createObjectReducer(stateValueName) {\n return (action, state = {}) => {\n if (\n Array.isArray(action.payload) &&\n (action.type === `${stateValueName}/ADD` || action.type === `${stateValueName}/UPDATE`)\n ) {\n console.error(`Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`);\n }\n\n const actionType = action.type.split('/')[1];\n\n if (!['ADD', 'UPDATE', 'DELETE'].includes(actionType)) {\n console.error(\n `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`\n );\n }\n\n switch (action.type) {\n case `${stateValueName}/ADD`:\n return {\n ...action.payload,\n };\n case `${stateValueName}/UPDATE`:\n return {\n ...state,\n ...action.payload,\n };\n case `${stateValueName}/DELETE`:\n return {};\n default:\n return state;\n }\n };\n }\n\n /**\n * Creates a reducer function to manage an array state.\n * @param {string} stateValueName The name of the state property this reducer manages.\n * @param {string} key The unique key used to identify items in the array for updates and deletions.\n * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.\n * @throws {Error} If `action.payload` is not an array when required.\n * @example\n * const itemsReducer = store.createArrayReducer('items', 'id');\n * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });\n */\n createArrayReducer(stateValueName, key) {\n return (action, state = []) => {\n if (action.actionType === 'LOAD' && action.type?.includes(stateValueName)) {\n if (!Array.isArray(action.payload)) {\n console.error(`Snažíte sa použiť \"LOAD\" akciu na pole, ale payload nie je pole.`);\n\n return [...state];\n }\n }\n\n switch (action.type) {\n case `${stateValueName}/ADD`:\n if (Array.isArray(action.payload)) {\n return [...state, ...action.payload];\n } else {\n return [...state, action.payload];\n }\n case `${stateValueName}/ADD_MANY`:\n return [...state, ...action.payload];\n case `${stateValueName}/UPDATE`:\n if (state.some((obj) => obj[key] === action.payload[key])) {\n return [\n ...state.map((obj) => {\n if (obj[key] === action.payload[key]) {\n return action.payload;\n }\n return obj;\n }),\n ];\n } else {\n return [...state, action.payload];\n }\n case `${stateValueName}/DELETE`:\n if (Array.isArray(action.payload)) {\n return [\n ...state.filter(\n (obj) =>\n !action.payload.some(\n (item) =>\n (obj.hasOwnProperty(key) && obj[key] !== item[key]) ||\n (!obj.hasOwnProperty(key) && obj !== item)\n )\n ),\n ];\n }\n\n return [\n ...state.filter(\n (obj) =>\n (obj.hasOwnProperty(key) && obj[key] !== action.payload[key]) ||\n (!obj.hasOwnProperty(key) && obj !== action.payload)\n ),\n ];\n\n case `${stateValueName}/LOAD`:\n return [...action.payload];\n default:\n return state;\n }\n };\n }\n}\n\nlet store = new Store();\nexport { store, defaultStoreActions };\n"],"names":["defaultStoreActions.updateAction"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n static _instanceId = 0;\n\n /**\n * Creates an instance of TabGroup.\n * @class\n */\n constructor() {\n super();\n\n this._instanceId = ++TabGroup._instanceId;\n this._lastNavWidth = null;\n this._initialized = false;\n }\n\n /**\n * Sets the value for the 'variant' attribute of the element.\n * @param {string} value The value to set for the 'variant' attribute.\n */\n set variant(value) {\n this.setAttribute('variant', value);\n this.setAriaState({\n orientation: (value === 'start' || value === 'end') ? 'vertical' : 'horizontal',\n });\n }\n\n /**\n * Gets the value of the 'variant' attribute.\n * If the attribute is not set, it defaults to 'top'.\n * @returns {string} The value of the 'variant' attribute or the default value 'top' if not set.\n */\n get variant() {\n return this.getAttribute('variant') || 'top';\n }\n\n /**\n * Sets the 'type' attribute of the element to the specified value.\n * @param {string} value The value to set for the 'type' attribute.\n */\n set type(value) {\n this.setAttribute('type', value);\n }\n\n /**\n * Retrieves the `type` attribute of the element.\n * If the `type` attribute is not set, it defaults to `'panel'`.\n * @returns {string} The value of the `type` attribute or the default value `'panel'`.\n */\n get type() {\n return this.getAttribute('type') || 'panel';\n }\n\n className = 'TabGroup';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n\n this.setAriaState({\n role: 'tablist',\n orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n });\n }\n\n /**\n * Sets up the event listeners before the component is drawn.\n * This method is called before the component is drawn.\n * It is used to set up event listeners.\n */\n beforeDraw() {\n let activeTabName = location.hash.replace('#', '');\n\n // skontrolujeme ci sa nachadza v paneloch\n if (this.getPanelAllName().includes(activeTabName)) {\n window.addEventListener('load', (e) => {\n this.setActiveTab(activeTabName);\n });\n }\n }\n\n /**\n * Creates and returns a document fragment containing a structured layout for a tab group.\n * The tab group layout includes a `header` section with navigational elements,\n * a `section` element for tab panels, and slots for customization such as additional navigation items,\n * dropdowns, and more.\n * The structure comprises:\n * - A `div` container with relevant styling and part attributes.\n * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n * - A `section` for tab panels with a customizable `slot`.\n * This function also initializes the `nav` and `moreDropdown` properties for external use.\n * @returns {DocumentFragment} The completed document fragment containing the tab group layout.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-tab-group');\n\n let header = document.createElement('header');\n header.setAttribute('part', 'tabs');\n header.classList.add('scroll-snap-x');\n\n let nav = document.createElement('nav');\n nav.setAttribute('part', 'nav');\n\n let section = document.createElement('section');\n section.setAttribute('part', 'panels');\n\n let slot = document.createElement('slot');\n\n let slotNav = document.createElement('slot');\n slotNav.setAttribute('name', 'nav');\n\n // More dropdown\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'dots');\n\n let button = document.createElement('wje-button');\n button.setAttribute('slot', 'trigger');\n button.setAttribute('fill', 'link');\n\n let menu = document.createElement('wje-menu');\n menu.setAttribute('variant', 'context');\n\n let slotMore = document.createElement('slot');\n slotMore.setAttribute('name', 'more');\n\n let moreDropdown = document.createElement('wje-dropdown');\n moreDropdown.setAttribute('placement', 'bottom-end');\n moreDropdown.setAttribute('collapsible', '');\n moreDropdown.classList.add('more-tabs');\n\n // APPEND\n button.append(icon);\n\n menu.append(slotMore);\n\n moreDropdown.append(button);\n moreDropdown.append(menu);\n\n header.append(nav);\n\n nav.append(slotNav);\n\n if(this.variant === 'top' || this.variant === 'bottom') {\n nav.append(moreDropdown);\n }\n\n section.append(slot);\n\n native.append(header);\n native.append(section);\n\n fragment.append(native);\n\n this.nav = nav;\n this.moreDropdown = moreDropdown;\n\n return fragment;\n }\n\n /**\n * Executes necessary initializations and attaches event listeners after a drawing operation.\n * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n * @returns {void} Does not return a value.\n */\n afterDraw() {\n let activeTab = this.getActiveTab();\n let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];\n\n this.setActiveTab(activeTabName);\n\n this.addEventListener('wje-tab:change', (e) => {\n if (e.detail.context.hasAttribute('disabled')) return;\n this.setActiveTab(e.detail.context.panel);\n });\n\n if (this.variant === 'top' || this.variant === 'bottom') {\n this.initTabMetrics();\n\n this._resizeObserver = new ResizeObserver(entries => {\n const width = entries[0].contentRect.width;\n\n if (width !== this._lastNavWidth) {\n this._lastNavWidth = width;\n this.checkOverflow();\n }\n });\n\n this._resizeObserver.observe(this);\n }\n }\n\n /**\n * Removes the 'active' class from all panel and tab elements.\n * @returns {void} This method does not return a value.\n */\n removeActiveTab() {\n this.getPanelAll().forEach((el) => {\n el.classList.remove('active');\n });\n\n this.getTabAll().forEach((el) => {\n el.classList.remove('active');\n });\n }\n\n /**\n * Sets the active tab and panel.\n * @param {string} tab The name of the tab to set as active.\n */\n setActiveTab(tab) {\n this.removeActiveTab();\n\n const el = this.querySelector(`[${this.type}=\"${tab}\"]`)\n el?.classList.add('active');\n\n if(this.type === 'panel')\n this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n if(el)\n this.dropdownActive(el);\n\n this.syncAria();\n }\n\n /**\n * Returns the currently active tab.\n * @returns {Element|null} The active tab, or null if no tab is active.\n */\n getActiveTab() {\n let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n return activeTabs.length > 0 ? activeTabs : null;\n }\n\n /**\n * Returns all tabs.\n * @returns {Array<Element>} An array of all tabs.\n */\n getTabAll() {\n return this.context.querySelector('[name=\"nav\"]').assignedElements();\n }\n\n /**\n * Returns all tabs, including those moved to \"more\".\n * @returns {Array<Element>} An array of all tabs.\n */\n getAllTabs() {\n return Array.from(this.querySelectorAll('wje-tab'));\n }\n\n /**\n * Returns all panels.\n * @returns {Array<Element>} An array of all panels.\n */\n getPanelAll() {\n return Array.from(this.querySelectorAll('wje-tab-panel'));\n }\n\n /**\n * Returns the names of all tabs.\n * @returns {Array<string>} An array of all tab names.\n */\n getPanelAllName() {\n return this.getPanelAll().map((el) => el.getAttribute('name'));\n }\n\n /**\n * Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n * @returns {void} Does not return a value.\n */\n toggleMoreVisibility() {\n const hasTabsInMore = !!this.querySelector('wje-tab[slot=\"more\"]');\n const nextHidden = !hasTabsInMore;\n\n if (this.moreDropdown.hidden !== nextHidden) {\n this.moreDropdown.hidden = nextHidden;\n }\n }\n\n /**\n * Initializes metrics for tabs within the component. Assigns each tab to the navigation slot\n * and calculates their dimensions for further operations.\n * @returns {void} Does not return any value.\n */\n initTabMetrics() {\n const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n // všetko do nav – LEN RAZ\n tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n requestAnimationFrame(() => {\n this._tabMetrics = tabs.map(tab => ({\n el: tab,\n width: tab.getBoundingClientRect().width\n }));\n\n this._initialized = true;\n this.checkOverflow(); // prvý výpočet\n this._lastNavWidth = this.nav.getBoundingClientRect().width;\n });\n }\n\n /**\n * Checks if the tabs within a navigation bar overflow the available space.\n * Moves overflowing tabs into a dropdown menu and updates their state accordingly.\n * @returns {void} This method does not return a value.\n */\n checkOverflow() {\n if (!this._initialized) return;\n\n const navWidth = this.nav.getBoundingClientRect().width;\n const moreWidth = this.moreDropdown.offsetWidth || 48;\n\n let used = 0;\n let overflowStarted = false;\n\n for (const { el, width } of this._tabMetrics) {\n used += width;\n\n const shouldOverflow = used + moreWidth > navWidth;\n\n el.setAttribute('slot', shouldOverflow || overflowStarted ? 'more' : 'nav');\n overflowStarted ||= shouldOverflow;\n }\n\n this.toggleMoreVisibility();\n }\n\n /**\n * Toggles the \"dropdown-active\" class on the element based on its \"active\" status\n * and the value of its \"slot\" attribute.\n * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.\n * @returns {void} This method does not return any value.\n */\n dropdownActive(el) {\n if(el.classList.contains('active')) {\n if(el.getAttribute('slot') === 'more')\n this.moreDropdown.classList.add('dropdown-active');\n else\n this.moreDropdown.classList.remove('dropdown-active');\n }\n }\n\n /**\n * Syncs ARIA attributes on tabs and panels.\n */\n syncAria() {\n const tabs = this.getAllTabs();\n const panels = this.getPanelAll();\n const panelByName = new Map(panels.map((p) => [p.getAttribute('name'), p]));\n const groupId = this.id || `wje-tab-group-${this._instanceId}`;\n\n this.setAriaState({\n orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n });\n\n tabs.forEach((tab, index) => {\n const tabName = tab.getAttribute(this.type) || tab.panel || tab.route || String(index);\n const isActive = tab.classList.contains('active');\n const isDisabled = tab.hasAttribute('disabled');\n\n if (!tab.id) tab.id = `wje-tab-${tabName}`;\n\n let controlsId = '';\n if (this.type === 'panel') {\n const panel = panelByName.get(tabName);\n if (panel) {\n if (!panel.id) panel.id = `wje-tab-panel-${tabName}`;\n controlsId = panel.id;\n panel.setAriaState({\n role: 'tabpanel',\n labelledBy: tab.id,\n });\n }\n }\n\n tab.setAriaState({\n role: 'tab',\n selected: isActive,\n disabled: isDisabled,\n controls: controlsId || '',\n });\n\n if (typeof tab.setRovingTabIndex === 'function') {\n tab.setRovingTabIndex(isActive ? 0 : -1);\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n this._resizeObserver?.disconnect();\n }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n static _instanceId = 0;\n\n /**\n * Creates an instance of TabGroup.\n * @class\n */\n constructor() {\n super();\n\n this._instanceId = ++TabGroup._instanceId;\n this._lastNavWidth = null;\n this._initialized = false;\n }\n\n /**\n * Sets the value for the 'variant' attribute of the element.\n * @param {string} value The value to set for the 'variant' attribute.\n */\n set variant(value) {\n this.setAttribute('variant', value);\n this.setAriaState({\n orientation: (value === 'start' || value === 'end') ? 'vertical' : 'horizontal',\n });\n }\n\n /**\n * Gets the value of the 'variant' attribute.\n * If the attribute is not set, it defaults to 'top'.\n * @returns {string} The value of the 'variant' attribute or the default value 'top' if not set.\n */\n get variant() {\n return this.getAttribute('variant') || 'top';\n }\n\n /**\n * Sets the 'type' attribute of the element to the specified value.\n * @param {string} value The value to set for the 'type' attribute.\n */\n set type(value) {\n this.setAttribute('type', value);\n }\n\n /**\n * Retrieves the `type` attribute of the element.\n * If the `type` attribute is not set, it defaults to `'panel'`.\n * @returns {string} The value of the `type` attribute or the default value `'panel'`.\n */\n get type() {\n return this.getAttribute('type') || 'panel';\n }\n\n className = 'TabGroup';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n\n this.setAriaState({\n role: 'tablist',\n orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n });\n }\n\n /**\n * Sets up the event listeners before the component is drawn.\n * This method is called before the component is drawn.\n * It is used to set up event listeners.\n */\n beforeDraw() {\n let activeTabName = location.hash.replace('#', '');\n\n // skontrolujeme ci sa nachadza v paneloch\n if (this.getPanelAllName().includes(activeTabName)) {\n window.addEventListener('load', (e) => {\n this.setActiveTab(activeTabName);\n });\n }\n }\n\n /**\n * Creates and returns a document fragment containing a structured layout for a tab group.\n * The tab group layout includes a `header` section with navigational elements,\n * a `section` element for tab panels, and slots for customization such as additional navigation items,\n * dropdowns, and more.\n * The structure comprises:\n * - A `div` container with relevant styling and part attributes.\n * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n * - A `section` for tab panels with a customizable `slot`.\n * This function also initializes the `nav` and `moreDropdown` properties for external use.\n * @returns {DocumentFragment} The completed document fragment containing the tab group layout.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-tab-group');\n\n let header = document.createElement('header');\n header.setAttribute('part', 'tabs');\n header.classList.add('scroll-snap-x');\n\n let nav = document.createElement('nav');\n nav.setAttribute('part', 'nav');\n\n let section = document.createElement('section');\n section.setAttribute('part', 'panels');\n\n let slot = document.createElement('slot');\n\n let slotNav = document.createElement('slot');\n slotNav.setAttribute('name', 'nav');\n\n // More dropdown\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'dots');\n\n let button = document.createElement('wje-button');\n button.setAttribute('slot', 'trigger');\n button.setAttribute('fill', 'link');\n\n let menu = document.createElement('wje-menu');\n menu.setAttribute('variant', 'context');\n\n let slotMore = document.createElement('slot');\n slotMore.setAttribute('name', 'more');\n\n let moreDropdown = document.createElement('wje-dropdown');\n moreDropdown.setAttribute('placement', 'bottom-end');\n moreDropdown.setAttribute('collapsible', '');\n moreDropdown.classList.add('more-tabs');\n\n // APPEND\n button.append(icon);\n\n menu.append(slotMore);\n\n moreDropdown.append(button);\n moreDropdown.append(menu);\n\n header.append(nav);\n\n nav.append(slotNav);\n\n if(this.variant === 'top' || this.variant === 'bottom') {\n nav.append(moreDropdown);\n }\n\n section.append(slot);\n\n native.append(header);\n native.append(section);\n\n fragment.append(native);\n\n this.nav = nav;\n this.moreDropdown = moreDropdown;\n\n return fragment;\n }\n\n /**\n * Executes necessary initializations and attaches event listeners after a drawing operation.\n * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n * @returns {void} Does not return a value.\n */\n afterDraw() {\n let activeTab = this.getActiveTab();\n let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];\n\n this.setActiveTab(activeTabName);\n\n this.addEventListener('wje-tab:change', (e) => {\n if (e.detail.context.hasAttribute('disabled')) return;\n this.setActiveTab(e.detail.context.panel);\n });\n\n if (this.variant === 'top' || this.variant === 'bottom') {\n this.initTabMetrics();\n\n this._resizeObserver = new ResizeObserver(entries => {\n const width = entries[0].contentRect.width;\n\n if (width !== this._lastNavWidth) {\n this._lastNavWidth = width;\n this.checkOverflow();\n }\n });\n\n this._resizeObserver.observe(this);\n }\n }\n\n /**\n * Removes the 'active' class from all panel and tab elements.\n * @returns {void} This method does not return a value.\n */\n removeActiveTab() {\n this.getPanelAll().forEach((el) => {\n el.classList.remove('active');\n });\n\n this.getTabAll().forEach((el) => {\n el.classList.remove('active');\n });\n }\n\n /**\n * Sets the active tab and panel.\n * @param {string} tab The name of the tab to set as active.\n */\n setActiveTab(tab) {\n this.removeActiveTab();\n\n const el = this.querySelector(`[${this.type}=\"${tab}\"]`)\n el?.classList.add('active');\n\n if(this.type === 'panel')\n this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n if(el)\n this.dropdownActive(el);\n\n this.syncAria();\n }\n\n /**\n * Returns the currently active tab.\n * @returns {Element|null} The active tab, or null if no tab is active.\n */\n getActiveTab() {\n let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n return activeTabs.length > 0 ? activeTabs : null;\n }\n\n /**\n * Returns all tabs.\n * @returns {Array<Element>} An array of all tabs.\n */\n getTabAll() {\n return this.context.querySelector('[name=\"nav\"]').assignedElements();\n }\n\n /**\n * Returns all tabs, including those moved to \"more\".\n * @returns {Array<Element>} An array of all tabs.\n */\n getAllTabs() {\n return Array.from(this.querySelectorAll('wje-tab'));\n }\n\n /**\n * Returns all panels.\n * @returns {Array<Element>} An array of all panels.\n */\n getPanelAll() {\n return Array.from(this.querySelectorAll('wje-tab-panel'));\n }\n\n /**\n * Returns the names of all tabs.\n * @returns {Array<string>} An array of all tab names.\n */\n getPanelAllName() {\n return this.getPanelAll().map((el) => el.getAttribute('name'));\n }\n\n /**\n * Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n * @returns {void} Does not return a value.\n */\n toggleMoreVisibility() {\n const hasTabsInMore = !!this.querySelector('wje-tab[slot=\"more\"]');\n const nextHidden = !hasTabsInMore;\n\n if (this.moreDropdown.hidden !== nextHidden) {\n this.moreDropdown.hidden = nextHidden;\n }\n }\n\n /**\n * Initializes metrics for tabs within the component. Assigns each tab to the navigation slot\n * and calculates their dimensions for further operations.\n * @returns {void} Does not return any value.\n */\n initTabMetrics() {\n const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n // všetko do nav – LEN RAZ\n tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n requestAnimationFrame(() => {\n this._tabMetrics = tabs.map(tab => ({\n el: tab,\n width: tab.getBoundingClientRect().width\n }));\n\n this._initialized = true;\n this.checkOverflow(); // prvý výpočet\n this._lastNavWidth = this.nav.getBoundingClientRect().width;\n });\n }\n\n /**\n * Checks if the tabs within a navigation bar overflow the available space.\n * Moves overflowing tabs into a dropdown menu and updates their state accordingly.\n * @returns {void} This method does not return a value.\n */\n checkOverflow() {\n if (!this._initialized) return;\n\n const navWidth = this.nav.getBoundingClientRect().width;\n const moreWidth = this.moreDropdown.offsetWidth || 48;\n\n let used = 0;\n let overflowStarted = false;\n\n for (const { el, width } of this._tabMetrics) {\n used += width;\n\n const shouldOverflow = used + moreWidth > navWidth;\n\n el.setAttribute('slot', shouldOverflow || overflowStarted ? 'more' : 'nav');\n overflowStarted ||= shouldOverflow;\n }\n\n this.toggleMoreVisibility();\n }\n\n /**\n * Toggles the \"dropdown-active\" class on the element based on its \"active\" status\n * and the value of its \"slot\" attribute.\n * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.\n * @returns {void} This method does not return any value.\n */\n dropdownActive(el) {\n if(el.classList.contains('active')) {\n if(el.getAttribute('slot') === 'more')\n this.moreDropdown.classList.add('dropdown-active');\n else\n this.moreDropdown.classList.remove('dropdown-active');\n }\n }\n\n /**\n * Syncs ARIA attributes on tabs and panels.\n */\n syncAria() {\n const tabs = this.getAllTabs();\n const panels = this.getPanelAll();\n const panelByName = new Map(panels.map((p) => [p.getAttribute('name'), p]));\n const groupId = this.id || `wje-tab-group-${this._instanceId}`;\n\n this.setAriaState({\n orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n });\n\n tabs.forEach((tab, index) => {\n const tabName = tab.getAttribute(this.type) || tab.panel || tab.route || String(index);\n const isActive = tab.classList.contains('active');\n const isDisabled = tab.hasAttribute('disabled');\n\n if (!tab.id) tab.id = `wje-tab-${tabName}`;\n\n let controlsId = '';\n if (this.type === 'panel') {\n const panel = panelByName.get(tabName);\n if (panel) {\n if (!panel.id) panel.id = `wje-tab-panel-${tabName}`;\n controlsId = panel.id;\n panel.setAriaState({\n role: 'tabpanel',\n labelledBy: tab.id,\n });\n }\n }\n\n tab.setAriaState({\n role: 'tab',\n selected: isActive,\n disabled: isDisabled,\n controls: controlsId || '',\n });\n\n if (typeof tab.setRovingTabIndex === 'function') {\n tab.setRovingTabIndex(isActive ? 0 : -1);\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n this._resizeObserver?.disconnect();\n }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":";;;;;AAgBe,MAAM,YAAN,MAAM,kBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5C,cAAc;AACV,UAAK;AA4CT,qCAAY;AA1CR,SAAK,cAAc,EAAE,UAAS;AAC9B,SAAK,gBAAgB;AACrB,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAClC,SAAK,aAAa;AAAA,MACd,aAAc,UAAU,WAAW,UAAU,QAAS,aAAa;AAAA,IAC/E,CAAS;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAEpB,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,aAAc,KAAK,YAAY,WAAW,KAAK,YAAY,QAAS,aAAa;AAAA,IAC7F,CAAS;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa;AACT,QAAI,gBAAgB,SAAS,KAAK,QAAQ,KAAK,EAAE;AAGjD,QAAI,KAAK,gBAAe,EAAG,SAAS,aAAa,GAAG;AAChD,aAAO,iBAAiB,QAAQ,CAAC,MAAM;AACnC,aAAK,aAAa,aAAa;AAAA,MACnC,CAAC;AAAA,IACL;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,kBAAkB;AAEvC,QAAI,SAAS,SAAS,cAAc,QAAQ;AAC5C,WAAO,aAAa,QAAQ,MAAM;AAClC,WAAO,UAAU,IAAI,eAAe;AAEpC,QAAI,MAAM,SAAS,cAAc,KAAK;AACtC,QAAI,aAAa,QAAQ,KAAK;AAE9B,QAAI,UAAU,SAAS,cAAc,SAAS;AAC9C,YAAQ,aAAa,QAAQ,QAAQ;AAErC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,aAAa,QAAQ,KAAK;AAGlC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,MAAM;AAEhC,QAAI,SAAS,SAAS,cAAc,YAAY;AAChD,WAAO,aAAa,QAAQ,SAAS;AACrC,WAAO,aAAa,QAAQ,MAAM;AAElC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,WAAW,SAAS;AAEtC,QAAI,WAAW,SAAS,cAAc,MAAM;AAC5C,aAAS,aAAa,QAAQ,MAAM;AAEpC,QAAI,eAAe,SAAS,cAAc,cAAc;AACxD,iBAAa,aAAa,aAAa,YAAY;AACnD,iBAAa,aAAa,eAAe,EAAE;AAC3C,iBAAa,UAAU,IAAI,WAAW;AAGtC,WAAO,OAAO,IAAI;AAElB,SAAK,OAAO,QAAQ;AAEpB,iBAAa,OAAO,MAAM;AAC1B,iBAAa,OAAO,IAAI;AAExB,WAAO,OAAO,GAAG;AAEjB,QAAI,OAAO,OAAO;AAElB,QAAG,KAAK,YAAY,SAAS,KAAK,YAAY,UAAU;AACpD,UAAI,OAAO,YAAY;AAAA,IAC3B;AAEA,YAAQ,OAAO,IAAI;AAEnB,WAAO,OAAO,MAAM;AACpB,WAAO,OAAO,OAAO;AAErB,aAAS,OAAO,MAAM;AAEtB,SAAK,MAAM;AACX,SAAK,eAAe;AAEpB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY;AACR,QAAI,YAAY,KAAK,aAAY;AACjC,QAAI,gBAAgB,YAAY,UAAU,CAAC,EAAE,KAAK,IAAI,IAAI,KAAK,UAAS,EAAG,CAAC,EAAE,KAAK,IAAI;AAEvF,SAAK,aAAa,aAAa;AAE/B,SAAK,iBAAiB,kBAAkB,CAAC,MAAM;AAC3C,UAAI,EAAE,OAAO,QAAQ,aAAa,UAAU,EAAG;AAC/C,WAAK,aAAa,EAAE,OAAO,QAAQ,KAAK;AAAA,IAC5C,CAAC;AAED,QAAI,KAAK,YAAY,SAAS,KAAK,YAAY,UAAU;AACrD,WAAK,eAAc;AAEnB,WAAK,kBAAkB,IAAI,eAAe,aAAW;AACjD,cAAM,QAAQ,QAAQ,CAAC,EAAE,YAAY;AAErC,YAAI,UAAU,KAAK,eAAe;AAC9B,eAAK,gBAAgB;AACrB,eAAK,cAAa;AAAA,QACtB;AAAA,MACJ,CAAC;AAED,WAAK,gBAAgB,QAAQ,IAAI;AAAA,IACrC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB;AACd,SAAK,YAAW,EAAG,QAAQ,CAAC,OAAO;AAC/B,SAAG,UAAU,OAAO,QAAQ;AAAA,IAChC,CAAC;AAED,SAAK,UAAS,EAAG,QAAQ,CAAC,OAAO;AAC7B,SAAG,UAAU,OAAO,QAAQ;AAAA,IAChC,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAa,KAAK;;AACd,SAAK,gBAAe;AAEpB,UAAM,KAAK,KAAK,cAAc,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI;AACvD,6BAAI,UAAU,IAAI;AAElB,QAAG,KAAK,SAAS;AACb,iBAAK,cAAc,UAAU,GAAG,IAAI,MAApC,mBAAuC,UAAU,IAAI;AAEzD,QAAG;AACC,WAAK,eAAe,EAAE;AAE1B,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAe;AACX,QAAI,aAAa,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC;AACnE,WAAO,WAAW,SAAS,IAAI,aAAa;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY;AACR,WAAO,KAAK,QAAQ,cAAc,cAAc,EAAE,iBAAgB;AAAA,EACtE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAa;AACT,WAAO,MAAM,KAAK,KAAK,iBAAiB,SAAS,CAAC;AAAA,EACtD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAc;AACV,WAAO,MAAM,KAAK,KAAK,iBAAiB,eAAe,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB;AACd,WAAO,KAAK,YAAW,EAAG,IAAI,CAAC,OAAO,GAAG,aAAa,MAAM,CAAC;AAAA,EACjE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,uBAAuB;AACnB,UAAM,gBAAgB,CAAC,CAAC,KAAK,cAAc,sBAAsB;AACjE,UAAM,aAAa,CAAC;AAEpB,QAAI,KAAK,aAAa,WAAW,YAAY;AACzC,WAAK,aAAa,SAAS;AAAA,IAC/B;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,iBAAiB;AACb,UAAM,OAAO,MAAM,KAAK,KAAK,iBAAiB,SAAS,CAAC;AAGxD,SAAK,QAAQ,SAAO,IAAI,aAAa,QAAQ,KAAK,CAAC;AAEnD,0BAAsB,MAAM;AACxB,WAAK,cAAc,KAAK,IAAI,UAAQ;AAAA,QAChC,IAAI;AAAA,QACJ,OAAO,IAAI,wBAAwB;AAAA,MACnD,EAAc;AAEF,WAAK,eAAe;AACpB,WAAK,cAAa;AAClB,WAAK,gBAAgB,KAAK,IAAI,sBAAqB,EAAG;AAAA,IAC1D,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,gBAAgB;AACZ,QAAI,CAAC,KAAK,aAAc;AAExB,UAAM,WAAW,KAAK,IAAI,sBAAqB,EAAG;AAClD,UAAM,YAAY,KAAK,aAAa,eAAe;AAEnD,QAAI,OAAO;AACX,QAAI,kBAAkB;AAEtB,eAAW,EAAE,IAAI,MAAK,KAAM,KAAK,aAAa;AAC1C,cAAQ;AAER,YAAM,iBAAiB,OAAO,YAAY;AAE1C,SAAG,aAAa,QAAQ,kBAAkB,kBAAkB,SAAS,KAAK;AAC1E,4CAAoB;AAAA,IACxB;AAEA,SAAK,qBAAoB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,eAAe,IAAI;AACf,QAAG,GAAG,UAAU,SAAS,QAAQ,GAAG;AAChC,UAAG,GAAG,aAAa,MAAM,MAAM;AAC3B,aAAK,aAAa,UAAU,IAAI,iBAAiB;AAAA;AAEjD,aAAK,aAAa,UAAU,OAAO,iBAAiB;AAAA,IAC5D;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,UAAM,OAAO,KAAK,WAAU;AAC5B,UAAM,SAAS,KAAK,YAAW;AAC/B,UAAM,cAAc,IAAI,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,aAAa,MAAM,GAAG,CAAC,CAAC,CAAC;AAC1D,SAAK,MAAM,iBAAiB,KAAK,WAAW;AAE5D,SAAK,aAAa;AAAA,MACd,aAAc,KAAK,YAAY,WAAW,KAAK,YAAY,QAAS,aAAa;AAAA,IAC7F,CAAS;AAED,SAAK,QAAQ,CAAC,KAAK,UAAU;AACzB,YAAM,UAAU,IAAI,aAAa,KAAK,IAAI,KAAK,IAAI,SAAS,IAAI,SAAS,OAAO,KAAK;AACrF,YAAM,WAAW,IAAI,UAAU,SAAS,QAAQ;AAChD,YAAM,aAAa,IAAI,aAAa,UAAU;AAE9C,UAAI,CAAC,IAAI,GAAI,KAAI,KAAK,WAAW,OAAO;AAExC,UAAI,aAAa;AACjB,UAAI,KAAK,SAAS,SAAS;AACvB,cAAM,QAAQ,YAAY,IAAI,OAAO;AACrC,YAAI,OAAO;AACP,cAAI,CAAC,MAAM,GAAI,OAAM,KAAK,iBAAiB,OAAO;AAClD,uBAAa,MAAM;AACnB,gBAAM,aAAa;AAAA,YACf,MAAM;AAAA,YACN,YAAY,IAAI;AAAA,UACxC,CAAqB;AAAA,QACL;AAAA,MACJ;AAEA,UAAI,aAAa;AAAA,QACb,MAAM;AAAA,QACN,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,cAAc;AAAA,MACxC,CAAa;AAED,UAAI,OAAO,IAAI,sBAAsB,YAAY;AAC7C,YAAI,kBAAkB,WAAW,IAAI,EAAE;AAAA,MAC3C;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAEA,uBAAuB;;AACnB,gBAAM,yBAAN;AACA,eAAK,oBAAL,mBAAsB;AAAA,EAC1B;AACJ;AArZI,cADiB,WACV,eAAc;AADV,IAAM,WAAN;ACZf,SAAS,OAAO,iBAAiB,QAAQ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-tab-panel.js","sources":["../packages/wje-tab-panel/tab-panel.element.js","../packages/wje-tab-panel/tab-panel.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabPanel` is a custom web component that represents a tab panel.\n * @summary This element represents a tab panel.\n * @documentation https://elements.webjet.sk/components/tab-panel\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the tab panel.\n * @tag wje-tab-panel\n */\nexport default class TabPanel extends WJElement {\n /**\n * Creates an instance of TabPanel.\n */\n constructor() {\n super();\n }\n\n /**\n * The class name for the component.\n */\n className = 'TabPanel';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component for the tab panel.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n\n return fragment;\n }\n}\n","import TabPanel from './tab-panel.element.js';\n\nexport default TabPanel;\n\nTabPanel.define('wje-tab-panel', TabPanel);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI5C,cAAc;AACV,
|
|
1
|
+
{"version":3,"file":"wje-tab-panel.js","sources":["../packages/wje-tab-panel/tab-panel.element.js","../packages/wje-tab-panel/tab-panel.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabPanel` is a custom web component that represents a tab panel.\n * @summary This element represents a tab panel.\n * @documentation https://elements.webjet.sk/components/tab-panel\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the tab panel.\n * @tag wje-tab-panel\n */\nexport default class TabPanel extends WJElement {\n /**\n * Creates an instance of TabPanel.\n */\n constructor() {\n super();\n }\n\n /**\n * The class name for the component.\n */\n className = 'TabPanel';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component for the tab panel.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n\n return fragment;\n }\n}\n","import TabPanel from './tab-panel.element.js';\n\nexport default TabPanel;\n\nTabPanel.define('wje-tab-panel', TabPanel);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI5C,cAAc;AACV,UAAK;AAMT;AAAA;AAAA;AAAA,qCAAY;AAAA,EALZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;AClDA,SAAS,OAAO,iBAAiB,QAAQ;"}
|
package/dist/wje-tab.js
CHANGED
|
@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
import WJElement from "./wje-element.js";
|
|
5
|
-
import { b as bindRouterLinks } from "./router-links-
|
|
5
|
+
import { b as bindRouterLinks } from "./router-links-DU0wTw84.js";
|
|
6
6
|
import { event } from "./event.js";
|
|
7
7
|
const styles = `/*
|
|
8
8
|
[ WJ Tab ]
|
|
@@ -195,11 +195,21 @@ class Tab extends WJElement {
|
|
|
195
195
|
*/
|
|
196
196
|
afterDraw() {
|
|
197
197
|
var _a;
|
|
198
|
-
this.
|
|
198
|
+
this.bindRouterLinks();
|
|
199
|
+
if (!this.unbindRouterLinks) {
|
|
200
|
+
queueMicrotask(() => this.bindRouterLinks());
|
|
201
|
+
}
|
|
199
202
|
event.addListener(this, "click", "wje-tab:change");
|
|
200
203
|
this.syncAriaLabel();
|
|
201
204
|
(_a = this.slotEl) == null ? void 0 : _a.addEventListener("slotchange", () => this.syncAriaLabel());
|
|
202
205
|
}
|
|
206
|
+
bindRouterLinks() {
|
|
207
|
+
var _a;
|
|
208
|
+
const parent = this.parentElement;
|
|
209
|
+
if (!parent) return;
|
|
210
|
+
(_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
|
|
211
|
+
this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });
|
|
212
|
+
}
|
|
203
213
|
/**
|
|
204
214
|
* Sync aria-label on host based on slotted text when not provided.
|
|
205
215
|
*/
|
package/dist/wje-tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from '
|
|
1
|
+
{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from '../utils/router-links.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @param {string} panel The name of the tab panel. This is used to identify the corresponding tab panel.\n * @param {string} route The route to navigate to when the tab is clicked.\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n /**\n * Creates an instance of Tab.\n */\n constructor() {\n super();\n\n /**\n * Indicates whether this is the last tab.\n * @type {boolean}\n */\n this.last = false;\n this._hasPanel = false;\n }\n\n /**\n * Sets the panel attribute to the specified value.\n * @param {string} value The value to set for the panel attribute.\n */\n set panel(value) {\n this.setAttribute('panel', value);\n }\n\n /**\n * Retrieves the value of the 'panel' attribute of the element.\n * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.\n */\n get panel() {\n return this.getAttribute('panel') || null;\n }\n\n /**\n * Sets the value of the 'route' attribute for the current object.\n * @param {string} value The new value to set for the 'route' attribute.\n */\n set route(value) {\n this.setAttribute('route', value);\n }\n\n /**\n * Retrieves the value of the 'route' attribute.\n * If the 'route' attribute is not set, it returns null.\n * @returns {string|null} The value of the 'route' attribute or null if not set.\n */\n get route() {\n return this.getAttribute('route') || null;\n }\n\n /**\n * The class name for the component.\n */\n className = 'Tab';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAttribute('active-class', 'active');\n\n this.setAriaState({\n role: 'tab',\n selected: false,\n disabled: this.hasAttribute('disabled'),\n });\n }\n /**\n * Draws the component for the tab.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let slot = document.createElement('slot');\n\n let href = this.panel || this.route || \"#\";\n\n let a = document.createElement('a');\n a.setAttribute('href', (this.panel ? \"#\" : \"\") + href);\n a.setAttribute('part', 'native');\n a.classList.add('native-tab');\n a.appendChild(slot);\n\n fragment.appendChild(a);\n\n this.slotEl = slot;\n\n return fragment;\n }\n\n /**\n * Sets up event listeners after the component is rendered.\n * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n */\n afterDraw() {\n this.bindRouterLinks();\n if (!this.unbindRouterLinks) {\n queueMicrotask(() => this.bindRouterLinks());\n }\n event.addListener(this, 'click', 'wje-tab:change');\n this.syncAriaLabel();\n this.slotEl?.addEventListener('slotchange', () => this.syncAriaLabel());\n }\n\n bindRouterLinks() {\n const parent = this.parentElement;\n if (!parent) return;\n\n this.unbindRouterLinks?.();\n this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });\n }\n\n /**\n * Sync aria-label on host based on slotted text when not provided.\n */\n syncAriaLabel() {\n if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) return;\n const text = (this.slotEl?.assignedNodes({ flatten: true }) || [])\n .map((node) => node.textContent || '')\n .join('')\n .trim();\n if (text) {\n this.setAttribute('aria-label', text);\n }\n }\n\n /**\n * Sets the roving tabindex on the internal focusable anchor.\n * @param {number} value\n */\n setRovingTabIndex(value) {\n const anchor = this.context?.querySelector('a');\n if (!anchor) return;\n anchor.setAttribute('tabindex', String(value));\n }\n\n /**\n * Cleans up before the component is disconnected.\n */\n beforeDisconnect() {\n this.unbindRouterLinks?.();\n }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":"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"}
|