├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── demos ├── app │ ├── index.html │ ├── index.js │ ├── js │ │ ├── components │ │ │ ├── demo-app.js │ │ │ └── demo-modal-feedback.js │ │ ├── mixins │ │ │ └── FeedbackMixin.js │ │ └── redux │ │ │ └── store.js │ └── style.css ├── crud │ ├── axios.js │ ├── components │ │ ├── board-game │ │ │ ├── boardGameConfig.js │ │ │ ├── demo-board-game-crud.js │ │ │ ├── demo-board-game-form.js │ │ │ ├── demo-board-game-item.js │ │ │ ├── demo-board-game-list.js │ │ │ └── demo-change-essential-action.js │ │ ├── country │ │ │ ├── countryConfig.js │ │ │ ├── demo-country-crud.js │ │ │ ├── demo-country-detail.js │ │ │ ├── demo-country-form.js │ │ │ ├── demo-country-item.js │ │ │ ├── demo-country-list.js │ │ │ ├── demo-country-relations.js │ │ │ ├── demo-country-single.js │ │ │ ├── demo-set-asia-as-continent-action.js │ │ │ └── demo-set-europe-as-continent-action.js │ │ ├── demo-item-delete.js │ │ └── upload-file-form.js │ ├── dile-ajax-form.html │ ├── dile-ajax-switch.html │ ├── dile-ajax.html │ ├── dile-crud-detail.html │ ├── dile-crud-filters-form.html │ ├── dile-crud-filters-list.html │ ├── dile-crud-filters.html │ ├── dile-crud-insert.html │ ├── dile-crud-item-delete.html │ ├── dile-crud-list-options.html │ ├── dile-crud-list.html │ ├── dile-crud-page-size.html │ ├── dile-crud-pagination-nav-button.html │ ├── dile-crud-single.html │ ├── dile-crud-sort-form.html │ ├── dile-crud-update.html │ ├── dile-crud.html │ ├── dile-image-uploader.html │ ├── dile-modal-crud-insert.html │ ├── dile-modal-crud-update.html │ ├── dile-relation-checker.html │ └── index.html ├── css │ └── style.css ├── editor │ └── dile-editor.html ├── images │ ├── loto.png │ └── random-user-21.jpg ├── index.html ├── ui │ ├── dile-app-drawer.html │ ├── dile-avatar.html │ ├── dile-breadcrumbs.html │ ├── dile-button-icon.html │ ├── dile-button.html │ ├── dile-card.html │ ├── dile-checkbox.html │ ├── dile-chip-tooltip.html │ ├── dile-chip.html │ ├── dile-confirm.html │ ├── dile-drop-file.html │ ├── dile-floating-menu.html │ ├── dile-form-mixin.html │ ├── dile-hamburger.html │ ├── dile-icon-switch-group.html │ ├── dile-icon-switch.html │ ├── dile-icon.html │ ├── dile-info-box.html │ ├── dile-inline-feedback.html │ ├── dile-input-contact.html │ ├── dile-input-integer.html │ ├── dile-input-money.html │ ├── dile-input-number-mask.html │ ├── dile-input-percentage.html │ ├── dile-input-search.html │ ├── dile-input.html │ ├── dile-light-mode-switch.html │ ├── dile-menu-hamburger.html │ ├── dile-menu-overlay.html │ ├── dile-message.html │ ├── dile-modal-help.html │ ├── dile-modal.html │ ├── dile-nav.html │ ├── dile-number-picker.html │ ├── dile-order-switch.html │ ├── dile-pages.html │ ├── dile-password.html │ ├── dile-progress-bar.html │ ├── dile-radio-group.html │ ├── dile-range.html │ ├── dile-rating-scale-question.html │ ├── dile-rating.html │ ├── dile-select-ajax.html │ ├── dile-select.html │ ├── dile-selector.html │ ├── dile-slide-menu.html │ ├── dile-slide-show.html │ ├── dile-social-icon.html │ ├── dile-spinner.html │ ├── dile-switch.html │ ├── dile-tabs.html │ ├── dile-textarea.html │ ├── dile-time-picker.html │ ├── dile-toast-persistent.html │ ├── dile-toast.html │ ├── dile-tooltip.html │ └── form-data.html └── utils │ ├── dile-datepicker.html │ ├── dile-datetimepicker.html │ ├── dile-graph.html │ ├── dile-html-transform.html │ ├── dile-media-query.html │ ├── dile-network.html │ └── dile-smooth-scroll.html ├── docs ├── _includes │ ├── componentes-crud │ │ ├── board-game-change-essential-action.md │ │ ├── board-game-config.md │ │ ├── board-game-form.md │ │ ├── board-game-item.md │ │ ├── country-actions.md │ │ ├── country-config.md │ │ ├── country-detail.md │ │ ├── country-form.md │ │ ├── country-item.md │ │ └── country-single-relations.md │ ├── layout-partials │ │ ├── nav-item.html │ │ └── nav.html │ └── layout.html ├── _utilities │ ├── code-previews.cjs │ └── color-box-transform.cjs ├── assets │ ├── css │ │ ├── components │ │ │ ├── catalog-hero.css │ │ │ ├── clasification.css │ │ │ ├── code_preview.css │ │ │ ├── footer.css │ │ │ ├── nav.css │ │ │ └── prism.css │ │ ├── home.css │ │ ├── layout.css │ │ ├── reset.css │ │ ├── styles.css │ │ └── theme.css │ └── js │ │ ├── components │ │ └── dile-icon-name.js │ │ ├── index.js │ │ └── prism.js ├── attribution.md ├── colors.md ├── components │ ├── components.json │ ├── dile-app-drawer.md │ ├── dile-avatar.md │ ├── dile-breadcrumbs.md │ ├── dile-button-icon.md │ ├── dile-button.md │ ├── dile-card.md │ ├── dile-checkbox.md │ ├── dile-chip-tooltip.md │ ├── dile-chip.md │ ├── dile-confirm.md │ ├── dile-countdown-time.md │ ├── dile-date-without-calendar.md │ ├── dile-datepicker.md │ ├── dile-datetimepicker.md │ ├── dile-drop-file.md │ ├── dile-editor.md │ ├── dile-floating-menu-item.md │ ├── dile-floating-menu.md │ ├── dile-form-separator.md │ ├── dile-graph.md │ ├── dile-hamburger.md │ ├── dile-html-transform.md │ ├── dile-icon-switch-group.md │ ├── dile-icon-switch.md │ ├── dile-icon.md │ ├── dile-info-box.md │ ├── dile-inline-feedback.md │ ├── dile-input-integer.md │ ├── dile-input-message.md │ ├── dile-input-money.md │ ├── dile-input-number-mask.md │ ├── dile-input-percentage.md │ ├── dile-input-search.md │ ├── dile-input.md │ ├── dile-light-mode-switch.md │ ├── dile-media-query.md │ ├── dile-menu-hamburger.md │ ├── dile-menu-overlay.md │ ├── dile-message.md │ ├── dile-modal-help.md │ ├── dile-modal.md │ ├── dile-nav.md │ ├── dile-network.md │ ├── dile-number-picker.md │ ├── dile-order-switch.md │ ├── dile-pages.md │ ├── dile-password.md │ ├── dile-progress-bar.md │ ├── dile-radio-group.md │ ├── dile-range.md │ ├── dile-rating-scale-question.md │ ├── dile-rating.md │ ├── dile-select-ajax.md │ ├── dile-select.md │ ├── dile-selector-box.md │ ├── dile-selector.md │ ├── dile-slide-menu.md │ ├── dile-slide-show.md │ ├── dile-smooth-scroll.md │ ├── dile-social-icon.md │ ├── dile-spinner-block.md │ ├── dile-spinner-horizontal.md │ ├── dile-spinner-modal.md │ ├── dile-spinner.md │ ├── dile-switch.md │ ├── dile-tabs.md │ ├── dile-textarea.md │ ├── dile-time-picker.md │ ├── dile-toast-persistent.md │ ├── dile-toast.md │ ├── dile-tooltip.md │ └── index.html ├── contribute.md ├── crud │ ├── actions-configuration.md │ ├── ajax-form.md │ ├── ajax-select-crud.md │ ├── ajax-switch.md │ ├── ajax.md │ ├── axios-configuration.md │ ├── crud-actions.md │ ├── crud-component.md │ ├── crud-detail.md │ ├── crud-insert.md │ ├── crud-item-delete.md │ ├── crud-item-restore.md │ ├── crud-list.md │ ├── crud-single.md │ ├── crud-update.md │ ├── crud.json │ ├── image-uploader.md │ ├── index.html │ ├── modal-crud-insert.md │ ├── modal-crud-update.md │ ├── relation-checker.md │ ├── request-adapter.md │ ├── resource-config.md │ └── response-adapter.md ├── how-to-use.md ├── icons.md ├── index.html ├── mixins │ ├── dile-close-document-click-mixin.md │ ├── dile-close-on-esc-pressed-mixin.md │ ├── dile-emmit-change-mixin.md │ ├── dile-form-change-detect-mixin.md │ ├── dile-form-mixin.md │ ├── dile-overlay-mixin.md │ ├── dile-selectable-mixin.md │ ├── dile-selector-mixin.md │ ├── dile-slide-down-mixin.md │ ├── dile-smooth-scroll-element-mixin.md │ ├── dile-smooth-scroll-mixin.md │ ├── index.html │ └── mixins.json ├── static-images │ ├── logo-polydile.png │ └── random-user.jpg └── theming.md ├── eleventy.config.cjs ├── lerna-debug.log ├── lerna.json ├── netlify.toml ├── package-lock.json ├── package.json ├── packages ├── crud │ ├── README.md │ ├── components │ │ ├── action │ │ │ ├── crud-actions.js │ │ │ ├── crud-delete-action.js │ │ │ ├── crud-single-actions.js │ │ │ └── src │ │ │ │ ├── DileCrudActions.js │ │ │ │ ├── DileCrudDeleteAction.js │ │ │ │ └── DileCrudSingleActions.js │ │ ├── ajax-form │ │ │ ├── ajax-form.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileAjaxForm.js │ │ ├── ajax-select-crud │ │ │ ├── ajax-select-crud.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileAjaxSelectCrud.js │ │ ├── ajax-switch │ │ │ ├── ajax-switch.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileAjaxSwitch.js │ │ ├── ajax │ │ │ ├── ajax.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileAjax.js │ │ ├── crud │ │ │ ├── crud-single.js │ │ │ ├── crud.js │ │ │ ├── delete-action.js │ │ │ └── src │ │ │ │ └── DileCrud.js │ │ ├── detail │ │ │ ├── crud-detail.js │ │ │ └── src │ │ │ │ └── DileCrudDetail.js │ │ ├── image-uploader │ │ │ ├── image-uploader-form.js │ │ │ ├── image-uploader.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileImageUploader.js │ │ │ │ └── DileImageUploaderForm.js │ │ ├── insert │ │ │ ├── crud-insert.js │ │ │ ├── index.js │ │ │ ├── modal-crud-insert.js │ │ │ └── src │ │ │ │ ├── DileCrudInsert.js │ │ │ │ └── DileModalCrudInsert.js │ │ ├── item-delete │ │ │ ├── crud-item-delete.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileCrudItemDelete.js │ │ ├── item-restore │ │ │ ├── crud-item-restore.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileCrudItemRestore.js │ │ ├── list │ │ │ ├── crud-list-item.js │ │ │ ├── crud-list-pagination-links.js │ │ │ ├── crud-list-service.js │ │ │ ├── crud-list.js │ │ │ ├── crud-select-all.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileCrudList.js │ │ │ │ ├── DileCrudListItem.js │ │ │ │ ├── DileCrudListPaginationLinks.js │ │ │ │ ├── DileCrudListService.js │ │ │ │ └── DileCrudSelectAll.js │ │ ├── relation-checker │ │ │ ├── index.js │ │ │ ├── relation-checker-item.js │ │ │ ├── relation-checker.js │ │ │ └── src │ │ │ │ ├── DileRelationChecker.js │ │ │ │ └── DileRelationCheckerItem.js │ │ ├── single │ │ │ ├── crud-single.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileCrudSingle.js │ │ ├── ui │ │ │ ├── crud-filters-form.js │ │ │ ├── crud-filters-list-item.js │ │ │ ├── crud-filters-list.js │ │ │ ├── crud-filters.js │ │ │ ├── crud-list-options.js │ │ │ ├── crud-page-size-select.js │ │ │ ├── crud-page-size.js │ │ │ ├── crud-pagination-nav-button.js │ │ │ ├── crud-sort-form.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileCrudFilters.js │ │ │ │ ├── DileCrudFiltersForm.js │ │ │ │ ├── DileCrudFiltersList.js │ │ │ │ ├── DileCrudFiltersListItem.js │ │ │ │ ├── DileCrudListOptions.js │ │ │ │ ├── DileCrudPageSize.js │ │ │ │ ├── DileCrudPageSizeSelect.js │ │ │ │ ├── DileCrudPaginationNavButton.js │ │ │ │ └── DileCrudSortForm.js │ │ └── update │ │ │ ├── crud-update.js │ │ │ ├── index.js │ │ │ ├── modal-crud-update.js │ │ │ └── src │ │ │ ├── DileCrudUpdate.js │ │ │ └── DileModalCrudUpdate.js │ ├── lib │ │ ├── AxiosInstanceBuilder.js │ │ ├── CrudConfigBuilder.js │ │ ├── DileAxios.js │ │ ├── DileConfig.js │ │ ├── DileCrudMixin.js │ │ ├── DileI18nMixin.js │ │ ├── DileLoading.js │ │ ├── DileModalCrudOperationsMixin.js │ │ ├── RequestApiAdapter.js │ │ ├── ResponseApiAdapter.js │ │ ├── capitalizeString.js │ │ ├── deepMerge.js │ │ ├── defaultConfig.js │ │ ├── i18n │ │ │ ├── en.js │ │ │ └── es.js │ │ └── translationService.js │ ├── package.json │ └── styles │ │ ├── crud-styles.js │ │ └── form-styles.js ├── editor │ ├── LICENSE │ ├── README.md │ ├── editor.js │ ├── images │ │ └── editor-interface-demo.png │ ├── index.js │ ├── package.json │ └── src │ │ ├── DileEditor.js │ │ ├── DileI18nMixin.js │ │ ├── defaultToolbarConfig.js │ │ ├── dile-editor-image-dialog.js │ │ ├── dile-editor-link-dialog.js │ │ ├── dile-editor-markdown.js │ │ ├── dile-editor-toolbar-item.js │ │ ├── dile-editor-toolbar.js │ │ ├── i18n │ │ ├── en.js │ │ └── es.js │ │ ├── prosemirror │ │ ├── markdown-commands.js │ │ ├── menu-items.js │ │ ├── menu-plugin.js │ │ └── toolbar-item.js │ │ └── translationService.js ├── icons │ ├── LICENSE │ ├── README.md │ ├── index.js │ ├── package.json │ └── src │ │ ├── account.js │ │ ├── add.js │ │ ├── announcement.js │ │ ├── apps.js │ │ ├── arrowDropDown.js │ │ ├── arrowDropDownLarge.js │ │ ├── arrowDropUp.js │ │ ├── arrowDropUpLarge.js │ │ ├── arrowRight.js │ │ ├── attachFile.js │ │ ├── attachment.js │ │ ├── autoAwesome.js │ │ ├── calendar.js │ │ ├── chat.js │ │ ├── chatBubble.js │ │ ├── checkboxBlank.js │ │ ├── checkboxChecked.js │ │ ├── circle.js │ │ ├── circleBorder.js │ │ ├── clear.js │ │ ├── close.js │ │ ├── code.js │ │ ├── contactSupport.js │ │ ├── cookie.js │ │ ├── crop.js │ │ ├── darkMode.js │ │ ├── dateTime.js │ │ ├── delete.js │ │ ├── description.js │ │ ├── done.js │ │ ├── doubleArrowLeft.js │ │ ├── doubleArrowRight.js │ │ ├── download.js │ │ ├── draft.js │ │ ├── east.js │ │ ├── edit.js │ │ ├── email.js │ │ ├── error.js │ │ ├── euro.js │ │ ├── favorite.js │ │ ├── filter.js │ │ ├── filterList.js │ │ ├── folder.js │ │ ├── folderZip.js │ │ ├── formatAlignCenter.js │ │ ├── formatAlignLeft.js │ │ ├── formatAlignRight.js │ │ ├── formatBold.js │ │ ├── formatColorText.js │ │ ├── formatIndentDecrease.js │ │ ├── formatIndentIncrease.js │ │ ├── formatItalic.js │ │ ├── formatListBulleted.js │ │ ├── formatListNumbered.js │ │ ├── formatQuote.js │ │ ├── formatUnderlined.js │ │ ├── forum.js │ │ ├── help.js │ │ ├── home.js │ │ ├── iconStyles.js │ │ ├── image.js │ │ ├── info.js │ │ ├── insertLink.js │ │ ├── insertPhoto.js │ │ ├── label.js │ │ ├── lightMode.js │ │ ├── lightbulb.js │ │ ├── linkOff.js │ │ ├── list.js │ │ ├── login.js │ │ ├── logout.js │ │ ├── more.js │ │ ├── moreVert.js │ │ ├── newReleases.js │ │ ├── notes.js │ │ ├── notifications.js │ │ ├── openWith.js │ │ ├── paid.js │ │ ├── palette.js │ │ ├── panTool.js │ │ ├── pdf.js │ │ ├── photo.js │ │ ├── photoCamera.js │ │ ├── priorityHigh.js │ │ ├── questionAnswer.js │ │ ├── radioChecked.js │ │ ├── receipt.js │ │ ├── receiptLong.js │ │ ├── redo.js │ │ ├── refresh.js │ │ ├── restoreFromTrash.js │ │ ├── rotateLeft.js │ │ ├── rotateRight.js │ │ ├── save.js │ │ ├── scale.js │ │ ├── search.js │ │ ├── settings.js │ │ ├── shoppingCart.js │ │ ├── sort.js │ │ ├── star.js │ │ ├── starBorder.js │ │ ├── starHalf.js │ │ ├── swap.js │ │ ├── switchLeft.js │ │ ├── textFields.js │ │ ├── thumbDown.js │ │ ├── thumbUp.js │ │ ├── timer.js │ │ ├── tune.js │ │ ├── undo.js │ │ ├── upload.js │ │ ├── videoFile.js │ │ ├── videocam.js │ │ ├── warning.js │ │ ├── zoomIn.js │ │ ├── zoomOut.js │ │ └── zoomOutMap.js ├── lib │ ├── index.js │ ├── package.json │ └── src │ │ ├── components │ │ ├── DileAppFeedback.js │ │ ├── DileAppLoading.js │ │ ├── DileAppModalFeedback.js │ │ ├── DileAuthGuard.js │ │ └── DileRouterLink.js │ │ ├── lib │ │ ├── DileAppNavigate.js │ │ ├── DileAppRouter.js │ │ ├── DileFeedback.js │ │ └── DileState.js │ │ └── redux │ │ ├── feedback-slice.js │ │ └── user-slice.js ├── ui │ ├── LICENSE │ ├── README.md │ ├── components │ │ ├── app-drawer │ │ │ ├── app-drawer.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileAppDrawer.js │ │ ├── avatar │ │ │ ├── avatar.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileAvatar.js │ │ ├── box-selector │ │ │ ├── box-selector-item.js │ │ │ ├── box-selector.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileBoxSelector.js │ │ │ │ └── DileBoxSelectorItem.js │ │ ├── breadcrumbs │ │ │ ├── breadcrumbs-item.js │ │ │ ├── breadcrumbs.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileBreadcrumbs.js │ │ │ │ └── DileBreadcrumbsItem.js │ │ ├── button │ │ │ ├── button-icon.js │ │ │ ├── button.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileButton.js │ │ │ │ └── DileButtonIcon.js │ │ ├── card │ │ │ ├── card.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileCard.js │ │ ├── checkbox │ │ │ ├── checkbox.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileCheckbox.js │ │ ├── chip │ │ │ ├── chip.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileChip.js │ │ ├── confirm │ │ │ ├── confirm.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileConfirm.js │ │ ├── drop-file │ │ │ ├── drop-file.js │ │ │ ├── file-preview.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileDropFile.js │ │ │ │ └── DileFilePreview.js │ │ ├── floating-menu │ │ │ ├── floating-menu-item.js │ │ │ ├── floating-menu.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileFloatingMenu.js │ │ │ │ └── DileFloatingMenuItem.js │ │ ├── form-separator │ │ │ ├── form-separator.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileFormSeparator.js │ │ ├── hamburger │ │ │ ├── hamburger.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileHamburger.js │ │ ├── icon-switch │ │ │ ├── icon-switch-group.js │ │ │ ├── icon-switch.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileIconSwitch.js │ │ │ │ └── DileIconSwitchGroup.js │ │ ├── icon │ │ │ ├── icon.js │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileIcon.js │ │ ├── info-box │ │ │ ├── index.js │ │ │ ├── info-box.js │ │ │ └── src │ │ │ │ └── DileInfoBox.js │ │ ├── inline-feedback │ │ │ ├── index.js │ │ │ ├── inline-feedback.js │ │ │ └── src │ │ │ │ └── DileInlineFeedback.js │ │ ├── input │ │ │ ├── index.js │ │ │ ├── input-contact.js │ │ │ ├── input-integer.js │ │ │ ├── input-message.js │ │ │ ├── input-money.js │ │ │ ├── input-number-mask.js │ │ │ ├── input-percentage.js │ │ │ ├── input-search.js │ │ │ ├── input.js │ │ │ └── src │ │ │ │ ├── DileInput.js │ │ │ │ ├── DileInputContact.js │ │ │ │ ├── DileInputInteger.js │ │ │ │ ├── DileInputMessage.js │ │ │ │ ├── DileInputMoney.js │ │ │ │ ├── DileInputNumberMask.js │ │ │ │ ├── DileInputPercentage.js │ │ │ │ ├── DileInputSearch.js │ │ │ │ ├── Mask.js │ │ │ │ └── message-styles.js │ │ ├── light-mode-switch │ │ │ ├── index.js │ │ │ ├── light-mode-switch.js │ │ │ └── src │ │ │ │ └── DileLightModeSwitch.js │ │ ├── menu-hamburger │ │ │ ├── index.js │ │ │ ├── menu-hamburger.js │ │ │ └── src │ │ │ │ └── DileMenuHamburger.js │ │ ├── menu-overlay │ │ │ ├── index.js │ │ │ ├── menu-overlay.js │ │ │ └── src │ │ │ │ └── DileMenuOverlay.js │ │ ├── message │ │ │ ├── index.js │ │ │ ├── message.js │ │ │ └── src │ │ │ │ └── DileMessage.js │ │ ├── modal │ │ │ ├── index.js │ │ │ ├── modal-help.js │ │ │ ├── modal.js │ │ │ └── src │ │ │ │ ├── DileModal.js │ │ │ │ └── DileModalHelp.js │ │ ├── nav │ │ │ ├── index.js │ │ │ ├── nav.js │ │ │ └── src │ │ │ │ └── DileNav.js │ │ ├── number-picker │ │ │ ├── index.js │ │ │ ├── number-picker-element.js │ │ │ ├── number-picker.js │ │ │ └── src │ │ │ │ ├── DileNumberPicker.js │ │ │ │ └── DileNumberPickerElement.js │ │ ├── order-switch │ │ │ ├── index.js │ │ │ ├── order-switch.js │ │ │ └── src │ │ │ │ └── DileOrderSwitch.js │ │ ├── pages │ │ │ ├── index.js │ │ │ ├── pages.js │ │ │ └── src │ │ │ │ └── DilePages.js │ │ ├── password │ │ │ ├── index.js │ │ │ ├── password.js │ │ │ └── src │ │ │ │ └── DilePassword.js │ │ ├── progress-bar │ │ │ ├── index.js │ │ │ ├── progress-bar.js │ │ │ └── src │ │ │ │ └── DileProgressBar.js │ │ ├── radio-group │ │ │ ├── index.js │ │ │ ├── radio-group.js │ │ │ ├── radio.js │ │ │ └── src │ │ │ │ ├── DileRadio.js │ │ │ │ └── DileRadioGroup.js │ │ ├── range │ │ │ ├── index.js │ │ │ ├── range.js │ │ │ └── src │ │ │ │ └── DileRange.js │ │ ├── rating-scale-question │ │ │ ├── index.js │ │ │ ├── rating-scale-option.js │ │ │ ├── rating-scale-question.js │ │ │ └── src │ │ │ │ ├── DileRatingScaleOption.js │ │ │ │ └── DileRatingScaleQuestion.js │ │ ├── rating │ │ │ ├── index.js │ │ │ ├── rating.js │ │ │ ├── src │ │ │ │ ├── DileRating.js │ │ │ │ └── DileStar.js │ │ │ └── star.js │ │ ├── select │ │ │ ├── index.js │ │ │ ├── select-ajax.js │ │ │ ├── select.js │ │ │ └── src │ │ │ │ ├── DileSelect.js │ │ │ │ └── DileSelectAjax.js │ │ ├── selector │ │ │ ├── index.js │ │ │ ├── selector-item.js │ │ │ ├── selector.js │ │ │ └── src │ │ │ │ ├── DileSelector.js │ │ │ │ └── DileSelectorItem.js │ │ ├── slide-menu │ │ │ ├── index.js │ │ │ ├── slide-menu.js │ │ │ └── src │ │ │ │ └── DileSlideMenu.js │ │ ├── slide-show │ │ │ ├── index.js │ │ │ ├── slide-show.js │ │ │ └── src │ │ │ │ └── DileSlideShow.js │ │ ├── social-icon │ │ │ ├── index.js │ │ │ ├── social-icon.js │ │ │ └── src │ │ │ │ ├── DileSocialIcon.js │ │ │ │ └── icons.js │ │ ├── spinner │ │ │ ├── index.js │ │ │ ├── spinner-block.js │ │ │ ├── spinner-horizontal.js │ │ │ ├── spinner-modal.js │ │ │ ├── spinner.js │ │ │ └── src │ │ │ │ ├── DileSpinner.js │ │ │ │ ├── DileSpinnerBlock.js │ │ │ │ ├── DileSpinnerHorizontal.js │ │ │ │ ├── DileSpinnerMixin.js │ │ │ │ └── DileSpinnerModal.js │ │ ├── switch │ │ │ ├── index.js │ │ │ ├── src │ │ │ │ └── DileSwitch.js │ │ │ └── switch.js │ │ ├── tabs │ │ │ ├── index.js │ │ │ ├── src │ │ │ │ ├── DileTab.js │ │ │ │ └── DileTabs.js │ │ │ ├── tab.js │ │ │ └── tabs.js │ │ ├── textarea │ │ │ ├── index.js │ │ │ ├── src │ │ │ │ └── DileTextarea.js │ │ │ └── textarea.js │ │ ├── time-picker │ │ │ ├── src │ │ │ │ └── DileTimePicker.js │ │ │ └── time-picker.js │ │ ├── toast │ │ │ ├── index.js │ │ │ ├── src │ │ │ │ ├── DileToast.js │ │ │ │ ├── DileToastItem.js │ │ │ │ └── DileToastPersistent.js │ │ │ ├── toast-item.js │ │ │ ├── toast-persistent.js │ │ │ └── toast.js │ │ └── tooltip │ │ │ ├── chip-tooltip.js │ │ │ ├── index.js │ │ │ ├── src │ │ │ ├── DileChipTooltip.js │ │ │ └── DileTooltip.js │ │ │ └── tooltip.js │ ├── mixins │ │ ├── close-document-click │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileCloseDocumentClick.js │ │ ├── close-on-esc-pressed │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileCloseOnEscPressed.js │ │ ├── form │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileEmmitChange.js │ │ │ │ ├── DileForm.js │ │ │ │ └── DileFormChangeDetect.js │ │ ├── i18n │ │ │ ├── DileI18nMixin.js │ │ │ └── TranslationService.js │ │ ├── overlay │ │ │ ├── index.js │ │ │ └── src │ │ │ │ └── DileOverlay.js │ │ ├── selectable │ │ │ ├── index.js │ │ │ └── src │ │ │ │ ├── DileSelectable.js │ │ │ │ └── DileSelectableItem.js │ │ └── slide-down │ │ │ ├── index.js │ │ │ └── src │ │ │ └── DileSlideDown.js │ ├── package.json │ └── styles │ │ └── colors.css └── utils │ ├── LICENSE │ ├── README.md │ ├── components │ ├── datepicker │ │ ├── calendar.js │ │ ├── datepicker.js │ │ ├── datetimepicker.js │ │ ├── index.js │ │ └── src │ │ │ ├── DileCalendar.js │ │ │ ├── DileDatepicker.js │ │ │ └── DileDatetimepicker.js │ ├── graph │ │ ├── graph.js │ │ ├── index.js │ │ └── src │ │ │ └── DileGraph.js │ ├── html-transform │ │ ├── html-transform.js │ │ └── src │ │ │ └── DileHtmlTransform.js │ ├── media-query │ │ ├── index.js │ │ ├── media-query.js │ │ └── src │ │ │ └── DileMediaQuery.js │ ├── network │ │ ├── index.js │ │ ├── network.js │ │ └── src │ │ │ └── DileNetwork.js │ └── smooth-scroll │ │ ├── index.js │ │ ├── smooth-scroll.js │ │ └── src │ │ └── DileSmoothScroll.js │ ├── mixins │ └── smooth-scroll │ │ ├── index.js │ │ └── src │ │ ├── DileSmoothScroll.js │ │ └── DileSmoothScrollElement.js │ └── package.json ├── public ├── favicon.ico └── images │ ├── croco-cool-small.png │ ├── croco-cool.png │ ├── design-components.svg │ ├── logo-polydile-light.png │ ├── logo-polydile-v2.png │ ├── logo-polydile.png │ ├── loto.png │ ├── social-icons.png │ └── ui-component-catalog-examples.jpg └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | 4 | docs/_merged_data/ 5 | docs/_merged_assets/ 6 | docs/_merged_includes/ 7 | 8 | # Eleventy ignore files 9 | _site -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#65c89b", 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "commandCenter.border": "#15202b99", 10 | "sash.hoverBorder": "#65c89b", 11 | "statusBar.background": "#42b883", 12 | "statusBar.foreground": "#15202b", 13 | "statusBarItem.hoverBackground": "#359268", 14 | "statusBarItem.remoteBackground": "#42b883", 15 | "statusBarItem.remoteForeground": "#15202b", 16 | "titleBar.activeBackground": "#42b883", 17 | "titleBar.activeForeground": "#15202b", 18 | "titleBar.inactiveBackground": "#42b88399", 19 | "titleBar.inactiveForeground": "#15202b99" 20 | }, 21 | "peacock.color": "#42b883" 22 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright 2025 EscuelaIT 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /demos/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /demos/app/index.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | import '@dile/ui/components/nav/nav'; 3 | import '@dile/ui/components/button/button'; 4 | import '@dile/ui/components/menu-hamburger/menu-hamburger'; 5 | import './js/components/demo-app.js'; 6 | import './js/components/demo-modal-feedback.js' 7 | 8 | const icons = { 9 | deployed_code: html` 10 | 11 | ` 12 | } -------------------------------------------------------------------------------- /demos/app/js/components/demo-modal-feedback.js: -------------------------------------------------------------------------------- 1 | import {store} from '../redux/store'; 2 | import { DileAppModalFeedback } from '@dile/lib'; 3 | const ModalFeedbackClass = DileAppModalFeedback(store); 4 | customElements.define('demo-modal-feedback', ModalFeedbackClass); -------------------------------------------------------------------------------- /demos/app/js/mixins/FeedbackMixin.js: -------------------------------------------------------------------------------- 1 | import { DileFeedback } from "@dile/lib"; 2 | import { store } from "../redux/store"; 3 | export const FeedbackMixin = DileFeedback(store); -------------------------------------------------------------------------------- /demos/app/js/redux/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import { feedbackSlice } from '@dile/lib'; 3 | import { userSlice } from '@dile/lib'; 4 | 5 | export const store = configureStore({ 6 | reducer: { 7 | feedback: feedbackSlice.reducer, 8 | user: userSlice.reducer, 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /demos/app/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Open sans', sans-serif; 6 | background-color: #ededed; 7 | line-height: 1.6rem; 8 | 9 | --dile-primary-color: #303030; 10 | } 11 | -------------------------------------------------------------------------------- /demos/crud/axios.js: -------------------------------------------------------------------------------- 1 | import { AxiosInstanceBuilder } from '@dile/crud/lib/AxiosInstanceBuilder'; 2 | 3 | let configuration = { 4 | //baseURL: 'https://timer.escuelait.com', 5 | baseURL: 'http://localhost', 6 | } 7 | 8 | new AxiosInstanceBuilder(configuration); 9 | -------------------------------------------------------------------------------- /demos/crud/components/board-game/demo-board-game-crud.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { boardGameConfig } from './boardGameConfig'; 3 | import './demo-board-game-form'; 4 | import './demo-board-game-item'; 5 | import './demo-change-essential-action' 6 | export class DemoBoardGamesCrud extends LitElement { 7 | static styles = [ 8 | css` 9 | :host { 10 | display: block; 11 | } 12 | ` 13 | ]; 14 | 15 | static get properties() { 16 | return { 17 | config: { type: Object }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.config = boardGameConfig.getConfig(); 24 | } 25 | 26 | render() { 27 | return html` 28 | 31 | `; 32 | } 33 | } 34 | customElements.define('demo-board-game-crud', DemoBoardGamesCrud); 35 | -------------------------------------------------------------------------------- /demos/crud/components/board-game/demo-board-game-item.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | 3 | export class DemoBoardGameItem extends LitElement { 4 | static styles = [ 5 | css` 6 | :host { 7 | display: block; 8 | } 9 | ` 10 | ]; 11 | 12 | static get properties() { 13 | return { 14 | boardGame: { type: Object } 15 | }; 16 | } 17 | 18 | render() { 19 | return html` 20 | ${this.boardGame.name} - (${this.boardGame.year}) 21 | `; 22 | } 23 | } 24 | customElements.define('demo-board-game-item', DemoBoardGameItem); 25 | -------------------------------------------------------------------------------- /demos/crud/components/board-game/demo-board-game-list.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import './demo-board-game-item'; 3 | import { boardGameConfig } from './boardGameConfig'; 4 | 5 | export class DemoBoardGameList extends LitElement { 6 | static styles = [ 7 | css` 8 | :host { 9 | display: block; 10 | } 11 | ` 12 | ]; 13 | 14 | static get properties() { 15 | return { 16 | config: { type: Object }, 17 | }; 18 | } 19 | 20 | constructor() { 21 | super(); 22 | this.config = boardGameConfig.getConfig(); 23 | } 24 | 25 | render() { 26 | return html` 27 | 31 | `; 32 | } 33 | 34 | } 35 | customElements.define('demo-board-game-list', DemoBoardGameList); -------------------------------------------------------------------------------- /demos/crud/components/board-game/demo-change-essential-action.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { DileForm } from '@dile/ui/mixins/form'; 3 | import '@dile/ui/components/select/select.js'; 4 | 5 | export class DemoChangeEssentialAction extends DileForm(LitElement) { 6 | static styles = [ 7 | css` 8 | :host { 9 | display: block; 10 | } 11 | ` 12 | ]; 13 | 14 | static get properties() { 15 | return { 16 | actionIds: { type: Array } 17 | }; 18 | } 19 | 20 | constructor() { 21 | super(); 22 | this.actionIds = []; 23 | } 24 | 25 | render() { 26 | return html` 27 |

Change essential game state of ${this.actionIds.length} elements.

28 | 29 | 33 | 34 | `; 35 | } 36 | } 37 | customElements.define('demo-change-essential-action', DemoChangeEssentialAction); 38 | -------------------------------------------------------------------------------- /demos/crud/components/country/demo-country-crud.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import './demo-country-form'; 3 | import { countryConfig } from './countryConfig.js'; 4 | 5 | export class DemoCountriesCrud extends LitElement { 6 | static styles = [ 7 | css` 8 | :host { 9 | display: block; 10 | } 11 | ` 12 | ]; 13 | 14 | static get properties() { 15 | return { 16 | config: { type: Object }, 17 | }; 18 | } 19 | 20 | constructor() { 21 | super(); 22 | this.config = countryConfig.getConfig(); 23 | console.log(this.config); 24 | } 25 | 26 | render() { 27 | return html` 28 | 31 | `; 32 | } 33 | } 34 | customElements.define('demo-countries-crud', DemoCountriesCrud); 35 | -------------------------------------------------------------------------------- /demos/crud/components/country/demo-country-detail.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | 3 | export class DemoCountryDetail extends LitElement { 4 | static styles = [ 5 | css` 6 | :host { 7 | display: block; 8 | } 9 | p { 10 | margin: 0 0 1rem; 11 | } 12 | .last { 13 | margin-bottom: 0; 14 | } 15 | ` 16 | ]; 17 | 18 | static get properties() { 19 | return { 20 | country: { type: Object } 21 | }; 22 | } 23 | 24 | render() { 25 | return html` 26 |

Name: ${this.country.name}

27 |

Continent: ${this.country.continent}

28 | `; 29 | } 30 | } 31 | customElements.define('demo-country-detail', DemoCountryDetail); 32 | -------------------------------------------------------------------------------- /demos/crud/components/country/demo-country-item.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | 3 | export class DemoCountryItem extends LitElement { 4 | static styles = [ 5 | css` 6 | :host { 7 | display: block; 8 | } 9 | span { 10 | font-style: italic; 11 | font-size: 0.9rem; 12 | } 13 | ` 14 | ]; 15 | 16 | static get properties() { 17 | return { 18 | country: { type: Object } 19 | }; 20 | } 21 | 22 | render() { 23 | return html` 24 | ${this.country.name} - ${this.country.continent} 25 | `; 26 | } 27 | 28 | dispatchContinent() { 29 | this.dispatchEvent(new CustomEvent('continent-event', { 30 | bubbles: true, 31 | composed: true, 32 | detail: this.country 33 | })); 34 | } 35 | } 36 | customElements.define('demo-country-item', DemoCountryItem); 37 | -------------------------------------------------------------------------------- /demos/crud/components/country/demo-country-list.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { countryConfig } from './countryConfig.js'; 3 | import './demo-country-form.js' 4 | import './demo-country-item.js' 5 | 6 | export class DemoCountryList extends LitElement { 7 | static styles = [ 8 | css` 9 | :host { 10 | display: block; 11 | } 12 | ` 13 | ]; 14 | 15 | static get properties() { 16 | return { 17 | config: { type: Object }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.config = countryConfig.getConfig(); 24 | } 25 | 26 | render() { 27 | return html` 28 | 34 | `; 35 | } 36 | 37 | showOnConsole(e) { 38 | console.log(e.detail); 39 | } 40 | 41 | } 42 | customElements.define('demo-country-list', DemoCountryList); -------------------------------------------------------------------------------- /demos/crud/components/country/demo-country-single.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import '@dile/crud/components/single/crud-single' 3 | import { countryConfig } from './countryConfig.js'; 4 | import './demo-country-detail.js'; 5 | import './demo-country-form.js'; 6 | import './demo-country-relations.js'; 7 | import './demo-set-europe-as-continent-action.js'; 8 | import './demo-set-asia-as-continent-action.js'; 9 | 10 | export class DemoCountrySingle extends LitElement { 11 | static styles = [ 12 | css` 13 | :host { 14 | display: block; 15 | } 16 | ` 17 | ]; 18 | 19 | static get properties() { 20 | return { 21 | config: { type: Object }, 22 | }; 23 | } 24 | 25 | constructor() { 26 | super(); 27 | this.config = countryConfig.getConfig(); 28 | } 29 | 30 | render() { 31 | return html` 32 | 37 | `; 38 | } 39 | } 40 | customElements.define('demo-country-single', DemoCountrySingle); 41 | -------------------------------------------------------------------------------- /demos/crud/components/country/demo-set-asia-as-continent-action.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { DileForm } from '@dile/ui/mixins/form'; 3 | 4 | export class DemoSetAsiaAsContinentAction extends DileForm(LitElement) { 5 | static styles = [ 6 | css` 7 | :host { 8 | display: block; 9 | } 10 | ` 11 | ]; 12 | 13 | static get properties() { 14 | return { 15 | country: { type: Object } 16 | }; 17 | } 18 | 19 | render() { 20 | return html` 21 |

Do you really want to set Asia as continent of ${this.country?.name}?

22 | `; 23 | } 24 | } 25 | customElements.define('demo-set-asia-as-continent-action', DemoSetAsiaAsContinentAction); 26 | -------------------------------------------------------------------------------- /demos/crud/components/country/demo-set-europe-as-continent-action.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { DileForm } from '@dile/ui/mixins/form'; 3 | 4 | export class DemoSetEuropeAsContinentAction extends DileForm(LitElement) { 5 | static styles = [ 6 | css` 7 | :host { 8 | display: block; 9 | } 10 | ` 11 | ]; 12 | 13 | static get properties() { 14 | return { 15 | country: { type: Object } 16 | }; 17 | } 18 | 19 | render() { 20 | return html` 21 |

Do you really want to set Europe as continent of ${this.country?.name}?

22 | `; 23 | } 24 | } 25 | customElements.define('demo-set-europe-as-continent-action', DemoSetEuropeAsContinentAction); 26 | -------------------------------------------------------------------------------- /demos/crud/components/upload-file-form.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { DileForm } from '@dile/ui/mixins/form' 3 | import '@dile/ui/components/input/input.js'; 4 | import '@dile/ui/components/drop-file/drop-file'; 5 | 6 | export class UploadFileForm extends DileForm(LitElement) { 7 | static styles = [ 8 | css` 9 | :host { 10 | display: block; 11 | } 12 | ` 13 | ]; 14 | 15 | render() { 16 | return html` 17 | 18 | 19 | `; 20 | } 21 | } 22 | customElements.define('upload-file-form', UploadFileForm); 23 | -------------------------------------------------------------------------------- /demos/crud/dile-ajax-switch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | dile-ajax-switch component demo 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 |
18 |

dile-ajax-switch component

19 | 20 | 21 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /demos/crud/dile-crud-item-delete.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | dile-crud-item-delete component demo 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |

dile-crud-item-delete component

21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /demos/crud/dile-crud-page-size.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | dile-crud-page-size component demo 7 | 8 | 9 | 10 | 13 | 14 | 15 |
16 |

dile-crud-page-size component

17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /demos/crud/dile-crud-single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | dile-crud-single component demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

dile-crud-single component

17 | 18 |

Crud Single

19 | 20 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /demos/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Manrope', sans-serif; 3 | font-size: 16pt; 4 | display: flex; 5 | justify-content: center; 6 | background-color: #f5f5f5; 7 | margin: 0.8rem; 8 | } 9 | 10 | h1 { 11 | font-weight: 300; 12 | margin-top: 0; 13 | } 14 | 15 | h2 { 16 | font-weight: 300; 17 | margin: 2.5rem 0 1rem 0; 18 | } 19 | 20 | footer { 21 | margin-top: 2rem; 22 | } 23 | 24 | .container { 25 | width: 100%; 26 | max-width: 1000px; 27 | padding: 1rem; 28 | background-color: #fff; 29 | box-shadow: 4px 4px 8px #e5e5e5; 30 | border-radius: 0.5rem; 31 | } 32 | 33 | ul { 34 | padding-left: 0.5rem; 35 | } 36 | 37 | li { 38 | list-style-type: none; 39 | } 40 | 41 | li:before { 42 | content: '>'; 43 | position: relative; 44 | top: 2px; 45 | margin-right: 0.5rem; 46 | font-size: 1.6rem; 47 | } -------------------------------------------------------------------------------- /demos/images/loto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/demos/images/loto.png -------------------------------------------------------------------------------- /demos/images/random-user-21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/demos/images/random-user-21.jpg -------------------------------------------------------------------------------- /demos/ui/dile-input-integer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | dile-input component demo 7 | 8 | 9 | 12 | 15 | 16 | 17 |
18 |

dile-input-integer component

19 | 20 |

Regular input

21 |

22 | 23 |

24 | 25 | 26 | 27 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /demos/ui/dile-input-money.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | dile-input component demo 7 | 8 | 9 | 12 | 15 | 16 | 17 |
18 |

dile-input-money component

19 | 20 |

Regular input

21 |

22 | 23 |

24 | 25 |

Decimal separator ","

26 |

27 | 28 |

29 | 30 | 31 | 32 |
33 | 34 | -------------------------------------------------------------------------------- /demos/ui/dile-password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | dile-password component demo 7 | 8 | 9 | 12 | 13 | 14 |
15 |

dile-password component

16 | 17 | 18 | 19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /docs/_includes/componentes-crud/board-game-change-essential-action.md: -------------------------------------------------------------------------------- 1 | ```html:preview 2 | 41 | ``` -------------------------------------------------------------------------------- /docs/_includes/componentes-crud/board-game-item.md: -------------------------------------------------------------------------------- 1 | ```html:preview 2 | 29 | ``` -------------------------------------------------------------------------------- /docs/_includes/componentes-crud/country-detail.md: -------------------------------------------------------------------------------- 1 | ```html:preview 2 | 36 | ``` -------------------------------------------------------------------------------- /docs/_includes/componentes-crud/country-item.md: -------------------------------------------------------------------------------- 1 | ```html:preview 2 | 42 | ``` -------------------------------------------------------------------------------- /docs/_includes/layout-partials/nav-item.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | {{component.data.title}} 10 | 11 | -------------------------------------------------------------------------------- /docs/_utilities/color-box-transform.cjs: -------------------------------------------------------------------------------- 1 | module.exports = function(content, outputPath) { 2 | if(outputPath && outputPath.endsWith(".html")) { 3 | return content.replace(/\[\[color:(#[0-9a-fA-F]{6})\]\]/g, function(match, p1) { 4 | return `
`; 5 | }); 6 | } 7 | return content; 8 | } -------------------------------------------------------------------------------- /docs/assets/css/components/catalog-hero.css: -------------------------------------------------------------------------------- 1 | 2 | .catalog-hero { 3 | display: flex; 4 | flex-direction: column; 5 | gap: 0.25rem; 6 | margin-bottom: 1rem; 7 | } 8 | 9 | .catalog-hero img { 10 | max-width: 100%; 11 | } 12 | 13 | @media(min-width: 680px) { 14 | .catalog-hero { 15 | align-items: flex-start; 16 | flex-direction: row; 17 | gap: 1.25rem; 18 | } 19 | 20 | .catalog-hero-explain { 21 | padding: 1rem 0; 22 | } 23 | } -------------------------------------------------------------------------------- /docs/assets/css/components/clasification.css: -------------------------------------------------------------------------------- 1 | .Clasification { 2 | display: grid; 3 | grid-template-columns: 1fr; 4 | gap: 1rem; 5 | } 6 | 7 | html.dark-theme .Clasification { 8 | --dile-card-background-color: #666; 9 | --dile-card-title-color: #fff; 10 | } 11 | 12 | @media(min-width: 450px) { 13 | .Clasification { 14 | grid-template-columns: 1fr 1fr; 15 | } 16 | } 17 | 18 | @media(min-width: 650px) { 19 | .Clasification { 20 | grid-template-columns: 1fr 1fr 1fr; 21 | } 22 | } 23 | 24 | @media(min-width: 1200px) { 25 | .Clasification { 26 | grid-template-columns: 1fr 1fr 1fr 1fr; 27 | } 28 | } -------------------------------------------------------------------------------- /docs/assets/css/components/code_preview.css: -------------------------------------------------------------------------------- 1 | .code-preview { 2 | border: 1px solid #ddd; 3 | margin-bottom: 1.5rem; 4 | } 5 | 6 | html.dark-theme .code-preview { 7 | color: #fff; 8 | } 9 | 10 | .code-preview__preview { 11 | padding: 1rem; 12 | border-bottom: 1px solid #ddd; 13 | } 14 | 15 | .code-preview dile-slide-show { 16 | margin: 0.5rem 1rem; 17 | } -------------------------------------------------------------------------------- /docs/assets/css/components/footer.css: -------------------------------------------------------------------------------- 1 | footer { 2 | background-color: var(--dile-secondary-color); 3 | padding-top: 0.75rem; 4 | padding-bottom: 0.75rem; 5 | } 6 | .footer { 7 | display: flex; 8 | flex-direction: column; 9 | align-items: flex-start; 10 | column-gap: 2rem; 11 | font-size: 1.1rem; 12 | } 13 | .footer b, .footer a { 14 | color: #fff; 15 | } 16 | .footer ul { 17 | margin: 0.5rem 0 1rem; 18 | } 19 | .footer li { 20 | margin: 0 0 0.25rem; 21 | padding: 0; 22 | list-style-type: none; 23 | } 24 | @media(min-width: 500px) { 25 | footer { 26 | padding-top: 1.25rem; 27 | padding-bottom: 1.25rem; 28 | } 29 | .footer { 30 | flex-direction: row; 31 | row-gap: 2rem; 32 | } 33 | .footer section { 34 | min-width: 200px; 35 | } 36 | .footer ul { 37 | padding: 0; 38 | } 39 | } 40 | 41 | -------------------------------------------------------------------------------- /docs/assets/css/styles.css: -------------------------------------------------------------------------------- 1 | @import './reset.css'; 2 | @import './theme.css'; 3 | @import './layout.css'; 4 | @import './home.css'; 5 | @import './components/nav.css'; 6 | @import './components/prism.css'; 7 | @import './components/code_preview.css'; 8 | @import './components/footer.css'; 9 | @import './components/clasification.css'; 10 | @import './components/catalog-hero.css'; 11 | 12 | -------------------------------------------------------------------------------- /docs/assets/css/theme.css: -------------------------------------------------------------------------------- 1 | html { 2 | --dile-nav-column-gap: 0.25rem; 3 | --dile-hamburger-padding-x: 0.15rem; 4 | --dile-social-icon-color: var(--dile-on-primary-color); 5 | --dile-social-icon-size: 1.2rem; 6 | --dile-hamburger-active-color: #000; 7 | --dile-form-separator-color: var(--dile-secondary-color); 8 | --dile-form-separator-text-color: var(--dile-secondary-color); 9 | } 10 | 11 | html.dark-theme { 12 | --dile-input-background-color:rgb(235, 255, 250); 13 | --dile-checkbox-label-disabled-color: #aaa; 14 | --dile-input-message-error-color: #faa; 15 | --dile-input-error-border-color: #faa; 16 | --dile-input-error-background-color: #fee; 17 | } 18 | a { 19 | color: var(--dile-link-color); 20 | } 21 | 22 | 23 | html.dark-theme { 24 | --dile-hamburger-active-color: #888; 25 | } 26 | 27 | html.dark-theme blockquote { 28 | border-left: 7px solid var(--dile-secondary-color); 29 | background-color: #555; 30 | } 31 | 32 | html.dark-theme tr:nth-child(even) { 33 | background: var(--dile-primary-dark-color); 34 | } 35 | 36 | html.dark-theme footer { 37 | background-color: var(--dile-secondary-dark-color); 38 | } -------------------------------------------------------------------------------- /docs/assets/js/components/dile-icon-name.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { 3 | arrowDropDownIcon, 4 | settingsIcon, 5 | paletteIcon, 6 | scaleIcon, 7 | checkboxCheckedIcon, 8 | autoAwesomeIcon, 9 | helpIcon, 10 | } from '@dile/icons'; 11 | import '@dile/ui/components/icon/icon'; 12 | 13 | const iconNames = { 14 | arrowDropDown: arrowDropDownIcon, 15 | settings: settingsIcon, 16 | palette: paletteIcon, 17 | scale: scaleIcon, 18 | checkboxChecked: checkboxCheckedIcon, 19 | autoAwesome: autoAwesomeIcon, 20 | help: helpIcon, 21 | } 22 | 23 | export class DileIconName extends LitElement { 24 | static styles = [ 25 | css` 26 | :host { 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | } 31 | ` 32 | ]; 33 | 34 | static get properties() { 35 | return { 36 | icon: { type: String }, 37 | }; 38 | } 39 | 40 | render() { 41 | return html``; 42 | } 43 | } 44 | customElements.define('dile-icon-name', DileIconName); 45 | -------------------------------------------------------------------------------- /docs/attribution.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layout.html 3 | --- 4 | 5 | # Attribution 6 | 7 | We want to say thanks to the following organizations and companies: 8 | 9 | - [Lit](https://lit.dev/): the components are built with the micro-library Lit 10 | - [Lerna](https://lerna.js.org/): we are managing the components repository with Lerna 11 | - [Flaticon and Freepik](https://www.flaticon.com/authors/freepik): for the crocodile icon used in our logo 12 | - [Eleventy](https://www.11ty.dev/): the static site generator used in this site 13 | - [Lion](https://lion-web.netlify.app/): Some of this components extends Lion white label web components 14 | - [Material Icons](https://fonts.google.com/icons): for the svg's used in our icon repository. 15 | 16 | Also we want to send special thanks to [EscuelaIT](https://escuela.it/), the main dile-components sponsor and promoter, and the Lit and Web Components instructors [Miguel Angel Alvarez](https://twitter.com/midesweb) y [Jorge del Casar](https://twitter.com/JorgeCasar). 17 | 18 | -------------------------------------------------------------------------------- /docs/components/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "layout.html", 3 | "tags": "components" 4 | } -------------------------------------------------------------------------------- /docs/components/dile-countdown-time.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Countdown Time 3 | hideLink: true 4 | --- 5 | 6 | # dile-countdown-time 7 | 8 | The dile-countdown-time web component is no longer maintained in this version of the dile-components. If you wish, you can access the documentation of the previous version of this catalog to find the component and its usage. -------------------------------------------------------------------------------- /docs/components/dile-date-without-calendar.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Date Without Calendar 3 | hideLink: true 4 | --- 5 | 6 | The dile-countdown-time web component is no longer maintained in this version of the dile-components. If you wish, you can access the documentation of the previous version of this catalog to find the component and its usage. -------------------------------------------------------------------------------- /docs/components/dile-input-message.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Input Message 3 | tags: forms 4 | --- 5 | 6 | # dile-input-message 7 | 8 | Input text message field. 9 | 10 | This component inherits all properties and methods from ``, but it is specifically designed for messaging purposes. 11 | 12 | Therefore, this component does not include any input interface. It is intended for displaying messages and error messages and is integrated with `dile-form-mixin` to show validation error messages. 13 | 14 | > Usually, you won't need this component, unless you are developing a custom form element that you plan to work in conjunction with our [DileForm](/mixins/dile-form-mixin) mixin. 15 | 16 | ## Install 17 | 18 | ```bash 19 | npm install @dile/ui 20 | ``` 21 | 22 | ## Usage 23 | 24 | Import the component. 25 | 26 | ```javascript 27 | import '@dile/ui/components/input/input-message'; 28 | ``` 29 | 30 | Use the component 31 | 32 | ```html 33 | 34 | ``` 35 | 36 | ## Clear error message 37 | 38 | - **clearError()**: clear the message and the error state. 39 | -------------------------------------------------------------------------------- /docs/crud/crud.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "layout.html", 3 | "tags": "crud" 4 | } -------------------------------------------------------------------------------- /docs/mixins/dile-close-on-esc-pressed-mixin.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CloseOnEscPressed 3 | tags: effects 4 | --- 5 | 6 | # DileCloseOnEscPressed 7 | 8 | Mixin function to create components that close themselves pressing the Esc key 9 | 10 | Extending it the component creates keyboard listeners to react when the user press the Esc key. When that key is detected, the component closes by call a close() method on this component. 11 | 12 | ## Requirements 13 | 14 | To properly close the element, the component which extends from this mixin needs to have a close() method, to implement it's closing behaviour. 15 | 16 | ## Installation 17 | 18 | ```bash 19 | npm install @dile/ui 20 | ``` 21 | 22 | ## Usage 23 | 24 | Use the mixin. 25 | 26 | ```javascript 27 | import { LitElement, html, css } from 'lit'; 28 | import { DileCloseOnEscPressed } from '@dile/ui/mixins/close-on-esc-pressed'; 29 | 30 | class NewComponent extends DileCloseOnEscPressed(LitElement) { 31 | 32 | } 33 | ``` 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /docs/mixins/dile-form-change-detect-mixin.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: FormChangeDetect 3 | tags: formData 4 | --- 5 | 6 | # DileFormChangeDetect 7 | 8 | This mixin detects changes in a form and emmit a ```dile-form-changed``` event when it occurs. 9 | 10 | To detect changes the form elements should emmit a ```element-changed``` event. for this reason, this mixins only works with custom elements that have this custom event implemented. 11 | 12 | > You could use the [DileEmmitChangeMixin](/mixins/dile-emmit-change-mixin) to send the ```element-changed``` custom event easily. 13 | 14 | Also, for this mixin do its work depends on the [DileFormMixin](/mixins/dile-form-mixin), so you need to implement both mixins. 15 | 16 | ## Installation 17 | 18 | ```bash 19 | npm i @dile/ui 20 | ``` 21 | 22 | ## Usage 23 | 24 | ```javascript 25 | import { DileFormChangeDetect, DileForm } from '@dile/ui/mixins/form'; 26 | 27 | export class FctCrudFilters extends 28 | DileFormChangeDetect(DileForm(LitElement)) { 29 | 30 | // Code of your component... 31 | 32 | } 33 | ``` -------------------------------------------------------------------------------- /docs/mixins/dile-smooth-scroll-element-mixin.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SmoothScrollElement 3 | tags: scroll 4 | --- 5 | 6 | # DileSmoothScrollElement 7 | 8 | This mixin implements the methods to scroll the content of a element with it's own scrolling section. 9 | 10 | The methods included in it are: 11 | 12 | - smoothElementScrollTop 13 | - smoothElementScrollBottom 14 | - smoothElementScroll 15 | - smoothElementScrollBy 16 | 17 | ## Installation 18 | 19 | ```bash 20 | npm install @dile/utils 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```javascript 26 | import { DileSmoothScrollElement } from "@dile/utils/mixins/smooth-scroll"; 27 | 28 | class NewComponent extends DileSmoothScrollElemen(LitElement) { 29 | 30 | } 31 | ``` -------------------------------------------------------------------------------- /docs/mixins/dile-smooth-scroll-mixin.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SmoothScroll 3 | tags: scroll 4 | --- 5 | 6 | ## DileSmoothScroll 7 | 8 | This Mixin includes all methods related to scroll the entire document area. These are: 9 | 10 | - smoothScrollToTop 11 | - smoothScrollToBottom 12 | - smoothScroll 13 | - smoothScrollBy 14 | - smoothScrollElementIntoView 15 | 16 | ## Installation 17 | 18 | ```bash 19 | npm install @dile/utils 20 | ``` 21 | 22 | ## Usage 23 | 24 | To use the mixin in a Web Component you need to extend your component with the mixin: 25 | 26 | ```javascript 27 | import { DileSmoothScroll } from '@dile/utils/mixins/smooth-scroll'; 28 | 29 | class MyOwnComponent extends DileSmoothScroll(LitElement) { 30 | // code of your own component 31 | } 32 | ``` 33 | -------------------------------------------------------------------------------- /docs/mixins/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layout.html 3 | title: Mixins 4 | --- 5 | 6 |

Mixins

7 | 8 |

9 | Here you can find the dile-components mixin catalog. 10 |

11 | 12 | 13 |
14 | {% for tag in mixinTagsList %} 15 | 18 | 19 | {% for component in collections[tag] %} 20 | {% include "layout-partials/nav-item.html" %} 21 | {% endfor %} 22 | 23 | 24 | 25 | {% endfor %} 26 | 27 | {% if collections.uncategorizedMixins.size > 0 %} 28 | 31 | {% for component in collections.uncategorizedComponents %} 32 | {% include "layout-partials/nav-item.html" %} 33 | {% endfor %} 34 | 35 | {% endif %} 36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /docs/mixins/mixins.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "layout.html", 3 | "tags": "mixins" 4 | } -------------------------------------------------------------------------------- /docs/static-images/logo-polydile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/docs/static-images/logo-polydile.png -------------------------------------------------------------------------------- /docs/static-images/random-user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/docs/static-images/random-user.jpg -------------------------------------------------------------------------------- /lerna-debug.log: -------------------------------------------------------------------------------- 1 | 67 error Error: Command failed with exit code 1: npm install --package-lock-only --ignore-scripts 2 | 67 error npm ERR! code ETARGET 3 | 67 error npm ERR! notarget No matching version found for @dile/icons@^2.8.1. 4 | 67 error npm ERR! notarget In most cases you or one of your dependencies are requesting 5 | 67 error npm ERR! notarget a package version that doesn't exist. 6 | 67 error 7 | 67 error npm ERR! A complete log of this run can be found in: /Users/midesweb/.npm/_logs/2025-05-31T09_14_06_560Z-debug-0.log 8 | 67 error at makeError (/Users/midesweb/sites/polydile/dile-components/node_modules/execa/lib/error.js:59:11) 9 | 67 error at handlePromise (/Users/midesweb/sites/polydile/dile-components/node_modules/execa/index.js:114:26) 10 | 67 error at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 11 | 67 error at async VersionCommand.updatePackageVersions (/Users/midesweb/sites/polydile/dile-components/node_modules/lerna/dist/index.js:9904:13) 12 | 67 error at async Promise.all (index 0) 13 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "node_modules/lerna/schemas/lerna-schema.json", 3 | "version": "independent", 4 | "packages": [ 5 | "packages/*" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/utils/icons" 3 | to = "/icons" 4 | status = 301 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dile-components", 3 | "private": true, 4 | "workspaces": [ 5 | "packages/*" 6 | ], 7 | "type": "module", 8 | "version": "2.1.0", 9 | "description": "Dile Components new repo", 10 | "scripts": { 11 | "dev": "vite", 12 | "lerna": "lerna", 13 | "start": "npx @11ty/eleventy --serve", 14 | "build": "npx @11ty/eleventy" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/Polydile/Components" 19 | }, 20 | "keywords": [ 21 | "web", 22 | "components", 23 | "dile", 24 | "ui" 25 | ], 26 | "author": "EscuelaIT", 27 | "license": "MIT", 28 | "devDependencies": { 29 | "@11ty/eleventy": "^3.0.0", 30 | "lerna": "^8.2.0", 31 | "vite": "^6.2.6" 32 | }, 33 | "dependencies": { 34 | "@11ty/eleventy-plugin-vite": "^6.0.0", 35 | "@reduxjs/toolkit": "^2.8.2", 36 | "jsdom": "^24.0.0", 37 | "lit": "^2.7.0 || ^3.0.0" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/crud/README.md: -------------------------------------------------------------------------------- 1 | # Dile Crud 2 | 3 | Components to create a generic crud system based on Web Components and Lit. 4 | 5 | This is a "work in progress"... -------------------------------------------------------------------------------- /packages/crud/components/action/crud-actions.js: -------------------------------------------------------------------------------- 1 | import { DileCrudActions } from "./src/DileCrudActions.js"; 2 | customElements.define('dile-crud-actions', DileCrudActions); 3 | -------------------------------------------------------------------------------- /packages/crud/components/action/crud-delete-action.js: -------------------------------------------------------------------------------- 1 | import { DileCrudDeleteAction } from "./src/DileCrudDeleteAction.js"; 2 | customElements.define('dile-crud-delete-action', DileCrudDeleteAction); 3 | -------------------------------------------------------------------------------- /packages/crud/components/action/crud-single-actions.js: -------------------------------------------------------------------------------- 1 | import { DileCrudSingleActions } from './src/DileCrudSingleActions.js'; 2 | customElements.define('dile-crud-single-actions', DileCrudSingleActions); 3 | -------------------------------------------------------------------------------- /packages/crud/components/action/src/DileCrudDeleteAction.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { DileForm } from '@dile/ui/mixins/form'; 3 | import { DileI18nMixin } from '../../../lib/DileI18nMixin.js'; 4 | 5 | export class DileCrudDeleteAction extends DileI18nMixin(DileForm(LitElement)) { 6 | static styles = [ 7 | css` 8 | :host { 9 | display: block; 10 | } 11 | ` 12 | ]; 13 | 14 | render() { 15 | return html` 16 |

${this.translations.delete_confirm_message_plural}

17 | `; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/crud/components/ajax-form/ajax-form.js: -------------------------------------------------------------------------------- 1 | import { DileAjaxForm } from './src/DileAjaxForm.js'; 2 | customElements.define('dile-ajax-form', DileAjaxForm); -------------------------------------------------------------------------------- /packages/crud/components/ajax-form/index.js: -------------------------------------------------------------------------------- 1 | export { DileAjaxForm } from './src/DileAjaxForm.js'; -------------------------------------------------------------------------------- /packages/crud/components/ajax-select-crud/ajax-select-crud.js: -------------------------------------------------------------------------------- 1 | import { DileAjaxSelectCrud } from './src/DileAjaxSelectCrud.js'; 2 | 3 | customElements.define('dile-ajax-select-crud', DileAjaxSelectCrud); 4 | -------------------------------------------------------------------------------- /packages/crud/components/ajax-select-crud/index.js: -------------------------------------------------------------------------------- 1 | export { DileAjaxSelectCrud } from './src/DileAjaxSelectCrud.js'; -------------------------------------------------------------------------------- /packages/crud/components/ajax-switch/ajax-switch.js: -------------------------------------------------------------------------------- 1 | import { DileAjaxSwitch } from "./src/DileAjaxSwitch"; 2 | customElements.define('dile-ajax-switch', DileAjaxSwitch); -------------------------------------------------------------------------------- /packages/crud/components/ajax-switch/index.js: -------------------------------------------------------------------------------- 1 | export { DileAjaxSwitch } from "./src/DileAjaxSwitch"; -------------------------------------------------------------------------------- /packages/crud/components/ajax/ajax.js: -------------------------------------------------------------------------------- 1 | import { DileAjax } from './src/DileAjax.js' 2 | customElements.define('dile-ajax', DileAjax); -------------------------------------------------------------------------------- /packages/crud/components/ajax/index.js: -------------------------------------------------------------------------------- 1 | export { DileAjax } from './src/DileAjax.js'; 2 | -------------------------------------------------------------------------------- /packages/crud/components/crud/crud-single.js: -------------------------------------------------------------------------------- 1 | import { DileCrudSingle } from "./src/DileCrudSingle"; 2 | customElements.define('dile-crud-single', DileCrudSingle); 3 | -------------------------------------------------------------------------------- /packages/crud/components/crud/crud.js: -------------------------------------------------------------------------------- 1 | import { DileCrud } from "./src/DileCrud.js"; 2 | customElements.define('dile-crud', DileCrud); 3 | -------------------------------------------------------------------------------- /packages/crud/components/crud/delete-action.js: -------------------------------------------------------------------------------- 1 | import { DileCrudDeleteAction } from "../action/src/DileCrudDeleteAction.js"; 2 | customElements.define('dile-crud-delete-action', DileCrudDeleteAction); 3 | -------------------------------------------------------------------------------- /packages/crud/components/detail/crud-detail.js: -------------------------------------------------------------------------------- 1 | import { DileCrudDetail } from "./src/DileCrudDetail.js"; 2 | customElements.define('dile-crud-detail', DileCrudDetail); 3 | -------------------------------------------------------------------------------- /packages/crud/components/image-uploader/image-uploader-form.js: -------------------------------------------------------------------------------- 1 | import { DileImageUploaderForm } from './src/DileImageUploaderForm.js'; 2 | customElements.define('dile-image-uploader-form', DileImageUploaderForm); 3 | -------------------------------------------------------------------------------- /packages/crud/components/image-uploader/image-uploader.js: -------------------------------------------------------------------------------- 1 | import { DileImageUploader } from './src/DileImageUploader.js'; 2 | customElements.define('dile-image-uploader', DileImageUploader); 3 | -------------------------------------------------------------------------------- /packages/crud/components/image-uploader/index.js: -------------------------------------------------------------------------------- 1 | export { DileImageUploaderForm } from './src/DileImageUploaderForm.js'; 2 | export { DileImageUploader } from './src/DileImageUploader.js'; 3 | -------------------------------------------------------------------------------- /packages/crud/components/insert/crud-insert.js: -------------------------------------------------------------------------------- 1 | import { DileCrudInsert } from './src/DileCrudInsert'; 2 | customElements.define('dile-crud-insert', DileCrudInsert); 3 | -------------------------------------------------------------------------------- /packages/crud/components/insert/index.js: -------------------------------------------------------------------------------- 1 | export { DileCrudInsert } from './src/DileCrudInsert.js'; -------------------------------------------------------------------------------- /packages/crud/components/insert/modal-crud-insert.js: -------------------------------------------------------------------------------- 1 | import { DileModalCrudInsert } from './src/DileModalCrudInsert'; 2 | customElements.define('dile-modal-crud-insert', DileModalCrudInsert); 3 | -------------------------------------------------------------------------------- /packages/crud/components/insert/src/DileModalCrudInsert.js: -------------------------------------------------------------------------------- 1 | import { DileCrudInsert } from './DileCrudInsert.js'; 2 | import { DileModalCrudOperationsMixin } from '../../../lib/DileModalCrudOperationsMixin.js'; 3 | 4 | export class DileModalCrudInsert extends DileModalCrudOperationsMixin(DileCrudInsert) { 5 | 6 | } -------------------------------------------------------------------------------- /packages/crud/components/item-delete/crud-item-delete.js: -------------------------------------------------------------------------------- 1 | import { DileCrudItemDelete } from "./src/DileCrudItemDelete.js"; 2 | customElements.define('dile-crud-item-delete', DileCrudItemDelete); 3 | -------------------------------------------------------------------------------- /packages/crud/components/item-delete/index.js: -------------------------------------------------------------------------------- 1 | export { DileCrudItemDelete } from "./src/DileCrudItemDelete.js"; 2 | -------------------------------------------------------------------------------- /packages/crud/components/item-restore/crud-item-restore.js: -------------------------------------------------------------------------------- 1 | import { DileCrudItemRestore} from "./src/DileCrudItemRestore.js"; 2 | customElements.define('dile-crud-item-restore', DileCrudItemRestore); 3 | -------------------------------------------------------------------------------- /packages/crud/components/item-restore/index.js: -------------------------------------------------------------------------------- 1 | export { DileCrudItemDelete } from "./src/DileCrudItemDelete.js"; 2 | -------------------------------------------------------------------------------- /packages/crud/components/list/crud-list-item.js: -------------------------------------------------------------------------------- 1 | import { DileCrudListItem } from './src/DileCrudListItem'; 2 | customElements.define('dile-crud-list-item', DileCrudListItem); 3 | -------------------------------------------------------------------------------- /packages/crud/components/list/crud-list-pagination-links.js: -------------------------------------------------------------------------------- 1 | import { DileCrudListPaginationLinks } from "./src/DileCrudListPaginationLinks"; 2 | customElements.define('dile-crud-list-pagination-links', DileCrudListPaginationLinks); 3 | -------------------------------------------------------------------------------- /packages/crud/components/list/crud-list-service.js: -------------------------------------------------------------------------------- 1 | import { DileCrudListService } from "./src/DileCrudListService"; 2 | customElements.define('dile-crud-list-service', DileCrudListService); 3 | -------------------------------------------------------------------------------- /packages/crud/components/list/crud-list.js: -------------------------------------------------------------------------------- 1 | import { DileCrudList } from "./src/DileCrudList"; 2 | customElements.define('dile-crud-list', DileCrudList); 3 | -------------------------------------------------------------------------------- /packages/crud/components/list/crud-select-all.js: -------------------------------------------------------------------------------- 1 | import { DileCrudSelectAll } from "./src/DileCrudSelectAll"; 2 | customElements.define('dile-crud-select-all', DileCrudSelectAll); -------------------------------------------------------------------------------- /packages/crud/components/list/index.js: -------------------------------------------------------------------------------- 1 | export { DileCrudList } from "./src/DileCrudList.js"; 2 | export { DileCrudListItem } from ".src/DileCrudListItem.js"; 3 | export { DileCrudListPaginationLinks } from ".src/DileCrudListPaginationLinks.js"; 4 | export { DileCrudListService } from "./src/DileCrudListService.js"; 5 | export { DileCrudSelectAll } from "./src/DileCrudSelectAll.js"; 6 | -------------------------------------------------------------------------------- /packages/crud/components/relation-checker/index.js: -------------------------------------------------------------------------------- 1 | export { DileRelationChecker } from './src/DileRelationChecker.js'; 2 | export { DileRelationCheckerItem } from './src/DileRelationCheckerItem.js'; 3 | -------------------------------------------------------------------------------- /packages/crud/components/relation-checker/relation-checker-item.js: -------------------------------------------------------------------------------- 1 | import { DileRelationCheckerItem } from './src/DileRelationCheckerItem.js'; 2 | 3 | customElements.define('dile-relation-checker-item', DileRelationCheckerItem); 4 | -------------------------------------------------------------------------------- /packages/crud/components/relation-checker/relation-checker.js: -------------------------------------------------------------------------------- 1 | import { DileRelationChecker } from './src/DileRelationChecker.js'; 2 | 3 | customElements.define('dile-relation-checker', DileRelationChecker); 4 | -------------------------------------------------------------------------------- /packages/crud/components/single/crud-single.js: -------------------------------------------------------------------------------- 1 | import { DileCrudSingle } from "./src/DileCrudSingle"; 2 | customElements.define('dile-crud-single', DileCrudSingle); 3 | -------------------------------------------------------------------------------- /packages/crud/components/single/index.js: -------------------------------------------------------------------------------- 1 | export { DileCrudSingle } from "./src/DileCrudSingle.js"; -------------------------------------------------------------------------------- /packages/crud/components/ui/crud-filters-form.js: -------------------------------------------------------------------------------- 1 | 2 | import { DileCrudFiltersForm } from "./src/DileCrudFiltersForm"; 3 | customElements.define('dile-crud-filters-form', DileCrudFiltersForm); 4 | -------------------------------------------------------------------------------- /packages/crud/components/ui/crud-filters-list-item.js: -------------------------------------------------------------------------------- 1 | import { DileCrudFiltersListItem } from "./src/DileCrudFiltersListItem"; 2 | customElements.define('dile-crud-filters-list-item', DileCrudFiltersListItem); 3 | -------------------------------------------------------------------------------- /packages/crud/components/ui/crud-filters-list.js: -------------------------------------------------------------------------------- 1 | import { DileCrudFiltersList } from "./src/DileCrudFiltersList"; 2 | customElements.define('dile-crud-filters-list', DileCrudFiltersList); 3 | -------------------------------------------------------------------------------- /packages/crud/components/ui/crud-filters.js: -------------------------------------------------------------------------------- 1 | import { DileCrudFilters } from "./src/DileCrudFilters"; 2 | customElements.define('dile-crud-filters', DileCrudFilters); 3 | -------------------------------------------------------------------------------- /packages/crud/components/ui/crud-list-options.js: -------------------------------------------------------------------------------- 1 | import { DileCrudListOptions } from "./src/DileCrudListOptions"; 2 | customElements.define('dile-crud-list-options', DileCrudListOptions); 3 | -------------------------------------------------------------------------------- /packages/crud/components/ui/crud-page-size-select.js: -------------------------------------------------------------------------------- 1 | import { DileCrudPageSizeSelect } from "./src/DileCrudPageSizeSelect"; 2 | customElements.define('dile-crud-page-size-select', DileCrudPageSizeSelect); 3 | -------------------------------------------------------------------------------- /packages/crud/components/ui/crud-page-size.js: -------------------------------------------------------------------------------- 1 | import { DileCrudPageSize } from "./src/DileCrudPageSize"; 2 | customElements.define('dile-crud-page-size', DileCrudPageSize); 3 | -------------------------------------------------------------------------------- /packages/crud/components/ui/crud-pagination-nav-button.js: -------------------------------------------------------------------------------- 1 | import { DileCrudPaginationNavButton } from './src/DileCrudPaginationNavButton.js'; 2 | customElements.define('dile-crud-pagination-nav-button', DileCrudPaginationNavButton); 3 | -------------------------------------------------------------------------------- /packages/crud/components/ui/crud-sort-form.js: -------------------------------------------------------------------------------- 1 | import { DileCrudSortForm } from "./src/DileCrudSortForm"; 2 | customElements.define('dile-crud-sort-form', DileCrudSortForm); 3 | -------------------------------------------------------------------------------- /packages/crud/components/ui/index.js: -------------------------------------------------------------------------------- 1 | export { DileCrudFiltersForm } from "./src/DileCrudFiltersForm"; 2 | export { DileCrudFiltersList } from "./src/DileCrudFiltersList"; 3 | export { DileCrudFiltersListItem } from "./src/DileCrudFiltersListItem"; 4 | export { DileCrudPaginationNavButton } from './src/DileCrudPaginationNavButton.js'; 5 | -------------------------------------------------------------------------------- /packages/crud/components/ui/src/DileCrudFiltersListItem.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import '@dile/ui/components/chip/chip.js'; 3 | 4 | export class DileCrudFiltersListItem extends LitElement { 5 | static styles = [ 6 | css` 7 | :host { 8 | display: inline-block; 9 | } 10 | ` 11 | ]; 12 | 13 | static get properties() { 14 | return { 15 | name: { type: String }, 16 | active: { type: Boolean }, 17 | label: { type: String }, 18 | }; 19 | } 20 | render() { 21 | return html` 22 | ${this.active 23 | ? html`${ this.label }` 24 | : '' 25 | } 26 | `; 27 | } 28 | } -------------------------------------------------------------------------------- /packages/crud/components/ui/src/DileCrudPageSize.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import '../crud-list-options'; 3 | import '../crud-page-size-select'; 4 | import { descriptionIcon } from '@dile/icons'; 5 | import { DileI18nMixin } from '../../../lib/DileI18nMixin.js'; 6 | 7 | export class DileCrudPageSize extends DileI18nMixin(LitElement) { 8 | 9 | static get properties() { 10 | return { 11 | pageSizes: { type: Array }, 12 | pageSize: { type: Number }, 13 | }; 14 | } 15 | 16 | constructor() { 17 | super(); 18 | this.pageSizes = [25, 50, 100, 500]; 19 | } 20 | 21 | render() { 22 | return html` 23 | 24 | 25 | 26 | `; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/crud/components/update/crud-update.js: -------------------------------------------------------------------------------- 1 | import { DileCrudUpdate } from './src/DileCrudUpdate'; 2 | customElements.define('dile-crud-update', DileCrudUpdate); 3 | -------------------------------------------------------------------------------- /packages/crud/components/update/index.js: -------------------------------------------------------------------------------- 1 | export { DileCrudUpdate } from './src/DileCrudUpdate.js'; -------------------------------------------------------------------------------- /packages/crud/components/update/modal-crud-update.js: -------------------------------------------------------------------------------- 1 | import { DileModalCrudUpdate } from "./src/DileModalCrudUpdate"; 2 | customElements.define('dile-modal-crud-update', DileModalCrudUpdate); 3 | -------------------------------------------------------------------------------- /packages/crud/components/update/src/DileModalCrudUpdate.js: -------------------------------------------------------------------------------- 1 | import { DileCrudUpdate } from './DileCrudUpdate.js'; 2 | import { DileModalCrudOperationsMixin } from '../../../lib/DileModalCrudOperationsMixin.js'; 3 | 4 | export class DileModalCrudUpdate extends DileModalCrudOperationsMixin(DileCrudUpdate) { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /packages/crud/lib/AxiosInstanceBuilder.js: -------------------------------------------------------------------------------- 1 | import Axios from 'axios' 2 | 3 | export class AxiosInstanceBuilder { 4 | constructor(configuration) { 5 | if(!configuration || typeof configuration != 'object') { 6 | configuration = {} 7 | } 8 | const axiosConfig = { 9 | headers: { 10 | 'X-Requested-With': 'XMLHttpRequest', 11 | 'Accept': 'application/json', 12 | }, 13 | } 14 | if(configuration.baseURL) { 15 | axiosConfig.baseURL = configuration.baseURL; 16 | } 17 | if(configuration.withCredentials) { 18 | axiosConfig.withCredentials = true; 19 | } 20 | if(configuration.withXSRFToken) { 21 | axiosConfig.withXSRFToken = true; 22 | } 23 | if(configuration.headerAuthorization) { 24 | axiosConfig.headers.Authorization = configuration.headerAuthorization; 25 | } 26 | window.axiosInstance = Axios.create(axiosConfig); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/crud/lib/CrudConfigBuilder.js: -------------------------------------------------------------------------------- 1 | import { deepMerge } from './deepMerge.js'; 2 | import { defaultConfig } from './defaultConfig.js'; 3 | 4 | export class CrudConfigBuilder { 5 | constructor(endpoint, customConfig) { 6 | this.config = deepMerge(defaultConfig, customConfig); 7 | this.config.endpoint = endpoint; 8 | } 9 | 10 | getConfig() { 11 | return this.config; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/crud/lib/DileAxios.js: -------------------------------------------------------------------------------- 1 | import { AxiosInstanceBuilder } from './AxiosInstanceBuilder.js'; 2 | 3 | export const DileAxios = (superclass) => class extends superclass { 4 | get axiosInstance() { 5 | if (window.axiosInstance) { 6 | return window.axiosInstance; 7 | } 8 | if (window.axios) { 9 | return window.axios; 10 | } 11 | new AxiosInstanceBuilder() 12 | return window.axiosInstance; 13 | } 14 | } -------------------------------------------------------------------------------- /packages/crud/lib/DileConfig.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/packages/crud/lib/DileConfig.js -------------------------------------------------------------------------------- /packages/crud/lib/DileI18nMixin.js: -------------------------------------------------------------------------------- 1 | import { DileI18nMixin as OriginalDileI18nMixin } from '@dile/ui/mixins/i18n/DileI18nMixin.js'; 2 | import { translationService } from './translationService'; 3 | export const DileI18nMixin = (superclass) => 4 | class extends OriginalDileI18nMixin(translationService)(superclass) { 5 | constructor() { 6 | super(); 7 | this.translations = { 8 | success_operation: () => '', 9 | error_operation: () => '', 10 | showing_page_size: () => '', 11 | current_page: () => '', 12 | }; 13 | } 14 | }; -------------------------------------------------------------------------------- /packages/crud/lib/DileLoading.js: -------------------------------------------------------------------------------- 1 | import { html, css } from 'lit'; 2 | import '@dile/ui/components/spinner/spinner.js'; 3 | 4 | export const loadingStyles = css` 5 | .loading { 6 | padding: var(--dile-crud-list-loading-padding, 3rem 1rem); 7 | text-align: center; 8 | } 9 | ` 10 | 11 | export const DileLoading = (superclass) => class extends superclass { 12 | 13 | static get properties() { 14 | return { 15 | loading: { type: Boolean } 16 | }; 17 | } 18 | 19 | constructor() { 20 | super(); 21 | this.loading = true; 22 | } 23 | 24 | get loadingTemplate() { 25 | return html` 26 |
27 | 28 |
29 | `; 30 | } 31 | } -------------------------------------------------------------------------------- /packages/crud/lib/RequestApiAdapter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Default Request Adapter configuration class 3 | * 4 | * You may extend this class and overwrite its methods to create customized request data objets 5 | * that adapt your API intrerface 6 | */ 7 | 8 | export class RequestApiAdapter { 9 | adaptListRequestData(data) { 10 | return data; 11 | } 12 | adaptIdsRequestData(data) { 13 | return data; 14 | } 15 | adaptBooleanValue(data) { 16 | return data; 17 | } 18 | } -------------------------------------------------------------------------------- /packages/crud/lib/ResponseApiAdapter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Default Response Adapter configuration class 3 | * 4 | * You may extend this class and overwrite its methods to create customized response adapters 5 | */ 6 | 7 | export class ResponseApiAdapter { 8 | 9 | setResponse(response) { 10 | this.response = response; 11 | } 12 | 13 | getData() { 14 | return this.response.data; 15 | } 16 | 17 | getMessage() { 18 | return this.response.message; 19 | } 20 | 21 | getValidationErrors() { 22 | return this.response.errors || []; 23 | } 24 | 25 | getElementList() { 26 | return this.response.data; 27 | } 28 | 29 | getPaginationData() { 30 | return this.response.data; 31 | } 32 | 33 | getIds() { 34 | return this.response.data; 35 | } 36 | 37 | getActionResponseMessage() { 38 | return this.response.message; 39 | } 40 | getActionResponseActionName() { 41 | return this.response.data.action; 42 | } 43 | getActionResponseActionData() { 44 | return this.response.data.data; 45 | } 46 | getActionResponseValidationErrorMessage() { 47 | return this.response.message 48 | } 49 | } -------------------------------------------------------------------------------- /packages/crud/lib/capitalizeString.js: -------------------------------------------------------------------------------- 1 | export function capitalizeFirstLetter(string) { 2 | return string.charAt(0).toUpperCase() + string.slice(1); 3 | } -------------------------------------------------------------------------------- /packages/crud/lib/translationService.js: -------------------------------------------------------------------------------- 1 | import { TranslationService as OriginalTranslationService } from '@dile/ui/mixins/i18n/TranslationService.js'; 2 | 3 | class TranslationService extends OriginalTranslationService { 4 | async importLanguage(language) { 5 | switch (language) { 6 | case 'es': 7 | return import('./i18n/es.js'); 8 | case 'en': 9 | return import('./i18n/en.js'); 10 | default: 11 | throw new Error(`Unsupported language: ${language}`); 12 | } 13 | } 14 | 15 | async importFallback() { 16 | try { 17 | return import('./i18n/en.js'); 18 | } catch (error) { 19 | throw new Error('Fallback translation file not found.'); 20 | } 21 | } 22 | } 23 | 24 | export const translationService = new TranslationService(); 25 | -------------------------------------------------------------------------------- /packages/crud/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dile/crud", 3 | "version": "0.7.6", 4 | "description": "Components to create a generic crud system based on Web Components and Lit", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Polydile/dile-components.git" 12 | }, 13 | "keywords": [ 14 | "crud", 15 | "components", 16 | "web components", 17 | "lit", 18 | "dile components" 19 | ], 20 | "author": "Miguel Angel Alvarez", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/Polydile/dile-components/issues" 24 | }, 25 | "homepage": "https://dile-components.com/", 26 | "dependencies": { 27 | "@dile/ui": "^2.8.3", 28 | "axios": "^1.8.4", 29 | "lit": "^2.7.0 || ^3.0.0" 30 | }, 31 | "publishConfig": { 32 | "access": "public" 33 | }, 34 | "gitHead": "e3ddacef52e67cdc9c6b0f6e1beda9aa15aeb0f0" 35 | } 36 | -------------------------------------------------------------------------------- /packages/crud/styles/crud-styles.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit'; 2 | 3 | export const crudStyles = css` 4 | 5 | 6 | `; -------------------------------------------------------------------------------- /packages/crud/styles/form-styles.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit'; 2 | 3 | export const formStyles = css` 4 | :host { 5 | display: block; 6 | margin-bottom: 1rem; 7 | --dile-modal-width: 100vw; 8 | --dile-modal-height: 100vh; 9 | --dile-modal-close-icon-top: 1rem; 10 | --dile-modal-close-icon-color: #f66; 11 | } 12 | h1 { 13 | font-size: 1.5rem; 14 | margin-top: 0; 15 | } 16 | @media(min-width: 380px) { 17 | :host { 18 | --dile-modal-width: 90vw; 19 | --dile-modal-height: auto; 20 | --dile-modal-close-icon-top: 1rem; 21 | --dile-modal-close-icon-color: #f66; 22 | } 23 | } 24 | ` -------------------------------------------------------------------------------- /packages/editor/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2019 EscuelaIT 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /packages/editor/README.md: -------------------------------------------------------------------------------- 1 | # @dile/dile-editor 2 | 3 | Flexible Web Component for rich text editing with WYSIWYG and Markdown support. Easy to integrate, customizable UI, powered by ProseMirror. 4 | 5 | ![Rich text editor component interface](https://raw.githubusercontent.com/polydile/dile-components/master/packages/editor/images/editor-interface-demo.png) 6 | 7 | ## Docs an demos 8 | 9 | Read the docs and find demos on the [dile-components site](https://dile-components.com/components/dile-editor/) -------------------------------------------------------------------------------- /packages/editor/editor.js: -------------------------------------------------------------------------------- 1 | import { DileEditor } from "./src/DileEditor.js"; 2 | 3 | window.customElements.define("dile-editor", DileEditor); 4 | -------------------------------------------------------------------------------- /packages/editor/images/editor-interface-demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/packages/editor/images/editor-interface-demo.png -------------------------------------------------------------------------------- /packages/editor/index.js: -------------------------------------------------------------------------------- 1 | export { DileEditor } from './src/DileEditor.js'; -------------------------------------------------------------------------------- /packages/editor/src/DileI18nMixin.js: -------------------------------------------------------------------------------- 1 | import { DileI18nMixin as OriginalDileI18nMixin } from '@dile/ui/mixins/i18n/DileI18nMixin.js'; 2 | import { translationService } from './translationService.js'; 3 | 4 | export const DileI18nMixin = (superclass) => 5 | class extends OriginalDileI18nMixin(translationService)(superclass) { 6 | 7 | }; -------------------------------------------------------------------------------- /packages/editor/src/defaultToolbarConfig.js: -------------------------------------------------------------------------------- 1 | export const defaultToolbarConfig = { 2 | bold: true, 3 | italic: true, 4 | code_mark: true, 5 | link: true, 6 | removeLink: true, 7 | image: true, 8 | unordered_list: true, 9 | ordered_list: true, 10 | lift: true, 11 | paragraph: true, 12 | h1: true, 13 | h2: true, 14 | h3: true, 15 | h4: true, 16 | code: true, 17 | undo: true, 18 | redo: true 19 | }; -------------------------------------------------------------------------------- /packages/editor/src/i18n/en.js: -------------------------------------------------------------------------------- 1 | export const translations = { 2 | design_view: 'Design view', 3 | code: 'Code', 4 | paragraph: 'Paragraph', 5 | accept: 'Accept', 6 | cancel: 'Cancel', 7 | title: 'Title', 8 | } -------------------------------------------------------------------------------- /packages/editor/src/i18n/es.js: -------------------------------------------------------------------------------- 1 | export const translations = { 2 | design_view: 'Editor', 3 | code: 'Markdown', 4 | paragraph: 'Párrafo', 5 | accept: 'Aceptar', 6 | cancel: 'Cancelar', 7 | title: 'Título', 8 | } -------------------------------------------------------------------------------- /packages/editor/src/prosemirror/menu-plugin.js: -------------------------------------------------------------------------------- 1 | import { Plugin } from "prosemirror-state"; 2 | 3 | const toolbarElement = 'dile-editor-toolbar'; 4 | 5 | export const menuPlugin = (menuConfig, additionalCommands, language) => new Plugin({ 6 | view(editorView) { 7 | let toolbar; 8 | if (!editorView.dom.parentElement.querySelector(toolbarElement)) { 9 | toolbar = document.createElement(toolbarElement); 10 | toolbar.menuConfig = menuConfig; 11 | toolbar.editorView = editorView; 12 | toolbar.additionalCommands = additionalCommands; 13 | toolbar.language = language; 14 | editorView.dom.parentNode.insertBefore(toolbar, editorView.dom); 15 | } else { 16 | toolbar = editorView.dom.parentElement.querySelector(toolbarElement); 17 | } 18 | return { 19 | update() { 20 | toolbar.reviewActiveElements(); 21 | } 22 | }; 23 | } 24 | }); -------------------------------------------------------------------------------- /packages/editor/src/translationService.js: -------------------------------------------------------------------------------- 1 | import { TranslationService as OriginalTranslationService } from '@dile/ui/mixins/i18n/TranslationService.js'; 2 | 3 | class TranslationService extends OriginalTranslationService { 4 | 5 | async importLanguage(language) { 6 | switch (language) { 7 | case 'es': 8 | return import('./i18n/es.js'); 9 | case 'en': 10 | return import('./i18n/en.js'); 11 | default: 12 | throw new Error(`Unsupported language: ${language}`); 13 | } 14 | } 15 | 16 | async importFallback() { 17 | try { 18 | return import('./i18n/en.js'); 19 | } catch (error) { 20 | throw new Error('Fallback translation file not found.'); 21 | } 22 | } 23 | 24 | } 25 | 26 | export const translationService = new TranslationService(); -------------------------------------------------------------------------------- /packages/icons/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2019 EscuelaIT 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /packages/icons/README.md: -------------------------------------------------------------------------------- 1 | # @dile/icons 2 | 3 | This package contains some useful icons and a style declaration to customize the size and the icon color. 4 | 5 | ## Docs and demos 6 | 7 | Read the docs and find demos on the [dile-components site](https://dile-components.com/icons/) -------------------------------------------------------------------------------- /packages/icons/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dile/icons", 3 | "version": "2.4.1", 4 | "description": "Some SVG icons to use in web components.", 5 | "keywords": [ 6 | "close", 7 | "icon", 8 | "svg", 9 | "template" 10 | ], 11 | "type": "module", 12 | "author": "midesweb ", 13 | "homepage": "https://github.com/Polydile/dile-components", 14 | "license": "MIT", 15 | "main": "index.js", 16 | "publishConfig": { 17 | "access": "public" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/Polydile/dile-components.git" 22 | }, 23 | "scripts": { 24 | "test": "echo \"Error: run tests from root\" && exit 1" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/Polydile/dile-components/issues" 28 | }, 29 | "dependencies": { 30 | "lit": "^2.7.0 || ^3.0.0" 31 | }, 32 | "gitHead": "e3ddacef52e67cdc9c6b0f6e1beda9aa15aeb0f0" 33 | } 34 | -------------------------------------------------------------------------------- /packages/icons/src/account.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const accountIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/add.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const addIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/announcement.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const announcementIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/apps.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const appsIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/arrowDropDown.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const arrowDropDownIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/arrowDropDownLarge.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const arrowDropDownLargeIcon = html` 3 | 4 | 5 | 6 | `; 7 | -------------------------------------------------------------------------------- /packages/icons/src/arrowDropUp.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const arrowDropUpIcon = html``; 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/arrowDropUpLarge.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const arrowDropUpLargeIcon = html` 3 | 4 | 5 | 6 | `; 7 | 8 | -------------------------------------------------------------------------------- /packages/icons/src/arrowRight.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const arrowRightIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/attachFile.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const attachFileIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/attachment.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const attachmentIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/autoAwesome.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const autoAwesomeIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/calendar.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const calendarIcon = html``; 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/chat.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const chatIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/chatBubble.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const chatBubbleIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/checkboxBlank.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const checkboxBlankIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/checkboxChecked.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const checkboxCheckedIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/circle.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const circleIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/circleBorder.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const circleBorderIcon = html``; 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/clear.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const clearIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/close.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const closeIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/code.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const codeIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/contactSupport.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const contactSupportIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/cookie.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const cookieIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/crop.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const cropIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/darkMode.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const darkMode = html``; -------------------------------------------------------------------------------- /packages/icons/src/delete.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const deleteIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/description.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const descriptionIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/done.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const doneIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/doubleArrowLeft.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const doubleArrowLeftIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/doubleArrowRight.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const doubleArrowRightIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/download.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const downloadIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/draft.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const draftIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/east.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const eastIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/edit.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const editIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/email.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const emailIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/error.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const errorIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/euro.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const euroIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/favorite.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const favoriteIcon = html``; 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/filter.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const filterIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/filterList.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const filterListIcon = html``; 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/folder.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const folderIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/folderZip.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const folderZipIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatAlignCenter.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatAlignCenterIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatAlignLeft.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatAlignLeftIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatAlignRight.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatAlignRightIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatBold.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatBoldIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatColorText.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatColorTextIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatIndentDecrease.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatIndentDecreaseIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatIndentIncrease.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatIndentIncreaseIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatItalic.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatItalicIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatListBulleted.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatListBulletedIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatListNumbered.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatListNumberedIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatQuote.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatQuoteIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/formatUnderlined.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const formatUnderlinedIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/forum.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const forumIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/help.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const helpIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/home.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const homeIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/iconStyles.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from "lit"; 3 | 4 | export const iconStyles = css` 5 | .dile-icon path, .dile-icon polygon { 6 | fill: var(--dile-icon-color, #888); 7 | } 8 | .dile-icon path[fill="none"] { 9 | fill: transparent; 10 | } 11 | .dile-icon { 12 | width: var(--dile-icon-size, 24px); 13 | height: var(--dile-icon-size, 24px); 14 | } 15 | `; -------------------------------------------------------------------------------- /packages/icons/src/image.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const imageIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/info.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const infoIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/insertLink.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const insertLinkIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/insertPhoto.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const insertPhotoIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/label.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const labelIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/lightMode.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const lightMode = html``; -------------------------------------------------------------------------------- /packages/icons/src/lightbulb.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const lightbulbIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/linkOff.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const linkOffIcon = html``; 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/list.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const listIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/login.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const loginIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/logout.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const logoutIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/more.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const moreIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/moreVert.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const moreVertIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/newReleases.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const newReleasesIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/notes.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const notesIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/notifications.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const notificationsIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/openWith.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const openWithIcon = html``; 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/paid.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const paidIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/palette.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const paletteIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/panTool.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const panToolIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/pdf.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const pdfIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/photo.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const photoIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/photoCamera.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const photoCameraIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/priorityHigh.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const priorityHighIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/questionAnswer.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const questionAnswerIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/radioChecked.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const radioCheckedIcon = html``; 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/receipt.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const receiptIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/receiptLong.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const receiptLongIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/redo.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const redoIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/refresh.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const refreshIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/restoreFromTrash.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const restoreFromTrashIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/rotateLeft.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const rotateLeftIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/rotateRight.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const rotateRightIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/save.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const saveIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/scale.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const scaleIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/search.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const searchIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/settings.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const settingsIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/shoppingCart.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const shoppingCartIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/sort.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const sortIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/star.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const starIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/starBorder.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const starBorderIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/starHalf.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const starHalfIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/swap.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const swapIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/switchLeft.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const switchLeftIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/textFields.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const textFieldsIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/thumbDown.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const thumbDownIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/thumbUp.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const thumbUpIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/timer.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const timerIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/tune.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const tuneIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/undo.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const undoIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/upload.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const uploadIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/videoFile.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const videoFileIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/videocam.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const videocamIcon = html``; -------------------------------------------------------------------------------- /packages/icons/src/warning.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const warningIcon = html``; 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/zoomIn.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const zoomInIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/zoomOut.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const zoomOutIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/icons/src/zoomOutMap.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | export const zoomOutMapIcon = html``; 3 | -------------------------------------------------------------------------------- /packages/lib/index.js: -------------------------------------------------------------------------------- 1 | export { 2 | feedbackSlice, 3 | negativeFeedback, 4 | positiveFeedback, 5 | neutralFeedback, 6 | startLoading, 7 | stopLoading, 8 | modalMessage, 9 | modalClose, 10 | } from './src/redux/feedback-slice.js'; 11 | export { 12 | userSlice, 13 | storeUser, 14 | removeUser, 15 | storeToken, 16 | setInitialized 17 | } from './src/redux/user-slice.js'; 18 | export { DileFeedback } from './src/lib/DileFeedback.js'; 19 | export { DileState } from './src/lib/DileState.js'; 20 | export { DileAppRouter } from './src/lib/DileAppRouter.js'; 21 | export { DileAppNavigate } from './src/lib/DileAppNavigate.js'; 22 | export { DileAppFeedback } from './src/components/DileAppFeedback.js'; 23 | export { DileAppModalFeedback } from './src/components/DileAppModalFeedback.js'; 24 | export { DileAppLoading } from './src/components/DileAppLoading.js'; 25 | export { DileAuthGuard } from './src/components/DileAuthGuard.js'; 26 | export { DileRouterLink } from './src/components/DileRouterLink.js'; -------------------------------------------------------------------------------- /packages/lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dile/lib", 3 | "version": "0.2.1", 4 | "description": "Common App libraries, mixins and helpers", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "test" 8 | }, 9 | "publishConfig": { 10 | "access": "public" 11 | }, 12 | "keywords": [ 13 | "lib", 14 | "app", 15 | "mixins" 16 | ], 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/Polydile/dile-components.git" 20 | }, 21 | "author": "Miguel Angel Alvarez", 22 | "homepage": "https://dile-components.com/", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@dile/icons": "^2.4.1", 26 | "@dile/ui": "^2.8.3", 27 | "@lit-labs/router": "^0.1.4", 28 | "@reduxjs/toolkit": "^2.5.1", 29 | "lit": "^2.7.0 || ^3.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/lib/src/components/DileAppLoading.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { DileState } from '../lib/DileState.js'; 3 | import '@dile/ui/components/spinner/spinner-modal'; 4 | 5 | export const DileAppLoading = (store) => class extends DileState(store)(LitElement) { 6 | static get styles() { 7 | return css` 8 | :host { 9 | display: block; 10 | } 11 | `; 12 | } 13 | 14 | static get properties() { 15 | return { 16 | loading: { type: Boolean } 17 | }; 18 | } 19 | 20 | constructor() { 21 | super(); 22 | this.loading = false; 23 | } 24 | 25 | render() { 26 | return html` 27 | 28 | `; 29 | } 30 | 31 | stateChanged(state) { 32 | this.loading = state.feedback.loading; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/lib/src/components/DileRouterLink.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import { DileAppNavigate } from '../lib/DileAppNavigate'; 3 | 4 | export class DileRouterLink extends DileAppNavigate(LitElement) { 5 | static styles = [ 6 | css` 7 | :host { 8 | display: inline-block 9 | } 10 | a { 11 | color: var(--dile-router-link-color, inherit); 12 | text-decoration: var(--dile-router-link-text-decoration, none); 13 | } 14 | ` 15 | ]; 16 | 17 | static get properties() { 18 | return { 19 | href: { type: String }, 20 | title: { type: String }, 21 | }; 22 | } 23 | 24 | render() { 25 | return html` 26 | 27 | 28 | 29 | `; 30 | } 31 | 32 | handleLink(e) { 33 | e.preventDefault(); 34 | this.goToUrl(this.href, this.title); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/lib/src/lib/DileAppNavigate.js: -------------------------------------------------------------------------------- 1 | export const DileAppNavigate = (superclass) => class extends superclass { 2 | goToUrl(url, title = '') { 3 | document.dispatchEvent(new CustomEvent('dile-lib-navigate', { 4 | bubbles: true, 5 | composed: true, 6 | detail: { 7 | url, 8 | title, 9 | } 10 | })); 11 | } 12 | 13 | routerLinkHandler(e) { 14 | e.preventDefault(); 15 | this.goToUrl(e.target.getAttribute('href')); 16 | } 17 | } -------------------------------------------------------------------------------- /packages/lib/src/lib/DileState.js: -------------------------------------------------------------------------------- 1 | export const DileState = (store) => (superclass) => class extends superclass { 2 | 3 | connectedCallback() { 4 | super.connectedCallback(); 5 | this._unsuscribe = store.subscribe(() => { 6 | const state = this.getState(); 7 | this.stateChanged(state); 8 | }); 9 | this.stateChanged(this.getState()); 10 | } 11 | 12 | disconnectedCallback() { 13 | this._unsuscribe(); 14 | super.disconnectedCallback(); 15 | } 16 | 17 | stateChanged(state) { 18 | // Override this method to get the state needed by the component 19 | } 20 | 21 | getState() { 22 | return store.getState(); 23 | } 24 | } -------------------------------------------------------------------------------- /packages/lib/src/redux/user-slice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | export const userSlice = createSlice({ 4 | name: 'user', 5 | initialState: { 6 | userData: null, 7 | token: '', 8 | isLoggedIn: false, 9 | isInitialized: false, 10 | }, 11 | reducers: { 12 | storeUser(state, action) { 13 | state.userData = action.payload; 14 | state.isLoggedIn = true; 15 | state.isInitialized = true; 16 | }, 17 | removeUser(state) { 18 | state.userData = null; 19 | state.isLoggedIn = false; 20 | state.token = ''; 21 | }, 22 | storeToken(state, action) { 23 | state.token = action.payload; 24 | }, 25 | setInitialized(state) { 26 | state.isInitialized = true; 27 | } 28 | } 29 | }) 30 | 31 | export const { storeUser, removeUser, storeToken, setInitialized } = userSlice.actions; 32 | -------------------------------------------------------------------------------- /packages/ui/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2019 EscuelaIT 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /packages/ui/README.md: -------------------------------------------------------------------------------- 1 | # @dile/ui 2 | 3 | Web Components to create various user interfaces. 4 | 5 | Read the @dile/ui docs on [Dile Components Catalog Site](https://dile-components.com/). 6 | -------------------------------------------------------------------------------- /packages/ui/components/app-drawer/app-drawer.js: -------------------------------------------------------------------------------- 1 | import { DileAppDrawer } from "./src/DileAppDrawer.js"; 2 | 3 | customElements.define("dile-app-drawer", DileAppDrawer); 4 | -------------------------------------------------------------------------------- /packages/ui/components/app-drawer/index.js: -------------------------------------------------------------------------------- 1 | export { DileAppDrawer, DILE_APP_DRAWER_EVENT_CLOSED, DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE } from './src/DileAppDrawer.js'; 2 | -------------------------------------------------------------------------------- /packages/ui/components/avatar/avatar.js: -------------------------------------------------------------------------------- 1 | import { DileAvatar } from "./src/DileAvatar.js"; 2 | 3 | window.customElements.define("dile-avatar", DileAvatar); 4 | -------------------------------------------------------------------------------- /packages/ui/components/avatar/index.js: -------------------------------------------------------------------------------- 1 | export { DileAvatar } from './src/DileAvatar.js'; -------------------------------------------------------------------------------- /packages/ui/components/box-selector/box-selector-item.js: -------------------------------------------------------------------------------- 1 | import { DileBoxSelectorItem } from './src/DileBoxSelectorItem.js'; 2 | customElements.define("dile-box-selector-item", DileBoxSelectorItem); -------------------------------------------------------------------------------- /packages/ui/components/box-selector/box-selector.js: -------------------------------------------------------------------------------- 1 | import { DileBoxSelector } from './src/DileBoxSelector.js' 2 | customElements.define("dile-box-selector", DileBoxSelector); -------------------------------------------------------------------------------- /packages/ui/components/box-selector/index.js: -------------------------------------------------------------------------------- 1 | export { DileBoxSelector } from './src/DileBoxSelector.js' 2 | export { DileBoxSelectorItem } from './src/DileBoxSelectorItem.js' -------------------------------------------------------------------------------- /packages/ui/components/box-selector/src/DileBoxSelector.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from "lit"; 2 | import { DileSelectable } from "../../../mixins/selectable"; 3 | 4 | export class DileBoxSelector extends DileSelectable(LitElement) { 5 | static get styles() { 6 | return css` 7 | :host { 8 | display: block; 9 | } 10 | `; 11 | } 12 | } 13 | 14 | -------------------------------------------------------------------------------- /packages/ui/components/breadcrumbs/breadcrumbs-item.js: -------------------------------------------------------------------------------- 1 | import { DileBreadcrumbsItem } from "./src/DileBreadcrumbsItem"; 2 | 3 | window.customElements.define("dile-breadcrumbs-item", DileBreadcrumbsItem); 4 | -------------------------------------------------------------------------------- /packages/ui/components/breadcrumbs/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | import './breadcrumbs-item.js'; 2 | import { DileBreadcrumbs } from "./src/DileBreadcrumbs.js"; 3 | 4 | window.customElements.define("dile-breadcrumbs", DileBreadcrumbs); 5 | -------------------------------------------------------------------------------- /packages/ui/components/breadcrumbs/index.js: -------------------------------------------------------------------------------- 1 | export { DileBreadcrumbs } from './src/DileBreadcrumbs.js'; 2 | export { DileBreadcrumbsItem } from './src/DileBreadcrumbsItem.js'; -------------------------------------------------------------------------------- /packages/ui/components/button/button-icon.js: -------------------------------------------------------------------------------- 1 | import { DileButtonIcon } from "./src/DileButtonIcon.js"; 2 | 3 | window.customElements.define("dile-button-icon", DileButtonIcon); 4 | -------------------------------------------------------------------------------- /packages/ui/components/button/button.js: -------------------------------------------------------------------------------- 1 | import { DileButton } from "./src/DileButton.js"; 2 | 3 | window.customElements.define("dile-button", DileButton); 4 | -------------------------------------------------------------------------------- /packages/ui/components/button/index.js: -------------------------------------------------------------------------------- 1 | export { DileButton } from './src/DileButton.js'; 2 | export { DileButtonIcon } from './src/DileButtonIcon.js'; -------------------------------------------------------------------------------- /packages/ui/components/card/card.js: -------------------------------------------------------------------------------- 1 | import { DileCard } from "./src/DileCard.js"; 2 | 3 | window.customElements.define("dile-card", DileCard); 4 | -------------------------------------------------------------------------------- /packages/ui/components/card/index.js: -------------------------------------------------------------------------------- 1 | export { DileCard } from './src/DileCard.js'; -------------------------------------------------------------------------------- /packages/ui/components/checkbox/checkbox.js: -------------------------------------------------------------------------------- 1 | import { DileCheckbox } from "./src/DileCheckbox.js"; 2 | 3 | window.customElements.define("dile-checkbox", DileCheckbox); 4 | -------------------------------------------------------------------------------- /packages/ui/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | export { DileCheckbox } from './src/DileCheckbox.js'; -------------------------------------------------------------------------------- /packages/ui/components/chip/chip.js: -------------------------------------------------------------------------------- 1 | import { DileChip } from "./src/DileChip"; 2 | customElements.define('dile-chip', DileChip); 3 | -------------------------------------------------------------------------------- /packages/ui/components/chip/index.js: -------------------------------------------------------------------------------- 1 | export { DileChip } from "./src/DileChip"; -------------------------------------------------------------------------------- /packages/ui/components/confirm/confirm.js: -------------------------------------------------------------------------------- 1 | import { DileConfirm } from './src/DileConfirm.js'; 2 | 3 | customElements.define("dile-confirm", DileConfirm); -------------------------------------------------------------------------------- /packages/ui/components/confirm/index.js: -------------------------------------------------------------------------------- 1 | export { DileConfirm } from './src/DileConfirm.js'; -------------------------------------------------------------------------------- /packages/ui/components/drop-file/drop-file.js: -------------------------------------------------------------------------------- 1 | import { DileDropFile } from "./src/DileDropFile"; 2 | 3 | customElements.define('dile-drop-file', DileDropFile); 4 | -------------------------------------------------------------------------------- /packages/ui/components/drop-file/file-preview.js: -------------------------------------------------------------------------------- 1 | import { DileFilePreview } from "./src/DileFilePreview"; 2 | customElements.define('dile-file-preview', DileFilePreview); 3 | -------------------------------------------------------------------------------- /packages/ui/components/drop-file/index.js: -------------------------------------------------------------------------------- 1 | export { DileDropFile } from "./src/DileDropFile"; 2 | export { DileFilePreview } from './src/DileFilePreview' -------------------------------------------------------------------------------- /packages/ui/components/floating-menu/floating-menu-item.js: -------------------------------------------------------------------------------- 1 | import { DileFloatingMenuItem } from './src/DileFloatingMenuItem.js'; 2 | customElements.define('dile-floating-menu-item', DileFloatingMenuItem); -------------------------------------------------------------------------------- /packages/ui/components/floating-menu/floating-menu.js: -------------------------------------------------------------------------------- 1 | import { DileFloatingMenu } from './src/DileFloatingMenu.js'; 2 | customElements.define('dile-floating-menu', DileFloatingMenu); -------------------------------------------------------------------------------- /packages/ui/components/floating-menu/index.js: -------------------------------------------------------------------------------- 1 | export { DileFloatingMenu } from './src/DileFloatingMenu.js'; 2 | export { DileFloatingMenuItem } from './src/DileFloatingMenuItem.js'; -------------------------------------------------------------------------------- /packages/ui/components/form-separator/form-separator.js: -------------------------------------------------------------------------------- 1 | import { DileFormSeparator } from './src/DileFormSeparator'; 2 | customElements.define('dile-form-separator', DileFormSeparator); 3 | -------------------------------------------------------------------------------- /packages/ui/components/form-separator/index.js: -------------------------------------------------------------------------------- 1 | export { DileFormSeparator } from './src/DileFormSeparator'; -------------------------------------------------------------------------------- /packages/ui/components/form-separator/src/DileFormSeparator.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | 3 | export class DileFormSeparator extends LitElement { 4 | static styles = [ 5 | css` 6 | :host { 7 | display: block; 8 | } 9 | div { 10 | border-top: 1px solid var(--dile-form-separator-color, var(--dile-secondary-dark-color, #888)); 11 | margin: 1.5rem 0.2rem 1rem; 12 | } 13 | h3 { 14 | margin: 1rem 0 0.5rem 0; 15 | font-weight: 300; 16 | color: var(--dile-form-separator-text-color, var(--dile-secondary-dark-color, #888)); 17 | font-size: 1.1rem; 18 | } 19 | :host([removeline]) div { 20 | border-top: none; 21 | } 22 | ` 23 | ]; 24 | 25 | static get properties() { 26 | return { 27 | label: { type: String } 28 | }; 29 | } 30 | 31 | render() { 32 | return html` 33 |
34 | ${this.label ? html`

${this.label}

` : ''} 35 |
36 | `; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/ui/components/hamburger/hamburger.js: -------------------------------------------------------------------------------- 1 | import { DileHamburger } from './src/DileHamburger.js'; 2 | 3 | window.customElements.define('dile-hamburger', DileHamburger); 4 | -------------------------------------------------------------------------------- /packages/ui/components/hamburger/index.js: -------------------------------------------------------------------------------- 1 | export { DileHamburger } from './src/DileHamburger.js'; -------------------------------------------------------------------------------- /packages/ui/components/icon-switch/icon-switch-group.js: -------------------------------------------------------------------------------- 1 | import { DileIconSwitchGroup } from "./src/DileIconSwitchGroup.js"; 2 | 3 | window.customElements.define("dile-icon-switch-group", DileIconSwitchGroup); 4 | -------------------------------------------------------------------------------- /packages/ui/components/icon-switch/icon-switch.js: -------------------------------------------------------------------------------- 1 | import { DileIconSwitch } from "./src/DileIconSwitch.js"; 2 | 3 | window.customElements.define("dile-icon-switch", DileIconSwitch); 4 | -------------------------------------------------------------------------------- /packages/ui/components/icon-switch/index.js: -------------------------------------------------------------------------------- 1 | export { DileIconSwitch } from './src/DileIconSwitch.js'; -------------------------------------------------------------------------------- /packages/ui/components/icon-switch/src/DileIconSwitchGroup.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | import '../icon-switch'; 3 | 4 | export class DileIconSwitchGroup extends LitElement { 5 | static styles = [ 6 | css` 7 | :host { 8 | display: inline-block; 9 | } 10 | .flex { 11 | display: flex; 12 | align-items: center; 13 | } 14 | ` 15 | ]; 16 | 17 | render() { 18 | return html` 19 |
20 | 21 |
22 | `; 23 | } 24 | 25 | processChanged(e) { 26 | this.querySelectorAll('dile-icon-switch').forEach( element => { 27 | if(element.name != e.detail.name) { 28 | element.active = false; 29 | } else { 30 | if(element.active == false) { 31 | element.active = true; 32 | e.stopPropagation(); 33 | } 34 | } 35 | }); 36 | } 37 | } 38 | 39 | -------------------------------------------------------------------------------- /packages/ui/components/icon/icon.js: -------------------------------------------------------------------------------- 1 | import { DileIcon } from "./src/DileIcon.js"; 2 | 3 | window.customElements.define("dile-icon", DileIcon); 4 | -------------------------------------------------------------------------------- /packages/ui/components/icon/index.js: -------------------------------------------------------------------------------- 1 | export { DileIcon } from './src/DileIcon.js'; -------------------------------------------------------------------------------- /packages/ui/components/info-box/index.js: -------------------------------------------------------------------------------- 1 | export { DileInfoBox } from './src/DileInfoBox.js'; -------------------------------------------------------------------------------- /packages/ui/components/info-box/info-box.js: -------------------------------------------------------------------------------- 1 | import { DileInfoBox } from "./src/DileInfoBox.js"; 2 | 3 | window.customElements.define("dile-info-box", DileInfoBox); 4 | -------------------------------------------------------------------------------- /packages/ui/components/inline-feedback/index.js: -------------------------------------------------------------------------------- 1 | export { DileInlineFeedback } from './src/DileInlineFeedback.js'; -------------------------------------------------------------------------------- /packages/ui/components/inline-feedback/inline-feedback.js: -------------------------------------------------------------------------------- 1 | import { DileInlineFeedback } from "./src/DileInlineFeedback.js"; 2 | 3 | window.customElements.define("dile-inline-feedback", DileInlineFeedback); 4 | -------------------------------------------------------------------------------- /packages/ui/components/input/index.js: -------------------------------------------------------------------------------- 1 | export { DileInput } from './src/DileInput.js'; 2 | export { DileInputInteger } from './src/DileInputInteger.js'; 3 | export { DileInputMessage } from './src/DileInputMessage.js'; 4 | export { DileInputMoney } from './src/DileInputMoney.js'; 5 | export { DileInputNumberMask } from './src/DileInputNumberMask.js'; 6 | export { DileInputPercentage } from './src/DileInputPercentage.js'; 7 | export { DileInputSearch } from './src/DileInputSearch.js'; 8 | export { messageStyles } from './src/message-styles.js'; 9 | export { Mask } from './src/Mask.js'; -------------------------------------------------------------------------------- /packages/ui/components/input/input-contact.js: -------------------------------------------------------------------------------- 1 | import { DileInputContact } from "./src/DileInputContact.js"; 2 | 3 | window.customElements.define("dile-input-contact", DileInputContact); 4 | -------------------------------------------------------------------------------- /packages/ui/components/input/input-integer.js: -------------------------------------------------------------------------------- 1 | import { DileInputInteger } from './src/DileInputInteger.js'; 2 | 3 | window.customElements.define('dile-input-integer', DileInputInteger); -------------------------------------------------------------------------------- /packages/ui/components/input/input-message.js: -------------------------------------------------------------------------------- 1 | import { DileInputMessage } from './src/DileInputMessage.js'; 2 | 3 | window.customElements.define('dile-input-message', DileInputMessage); -------------------------------------------------------------------------------- /packages/ui/components/input/input-money.js: -------------------------------------------------------------------------------- 1 | import { DileInputMoney } from './src/DileInputMoney.js'; 2 | 3 | window.customElements.define('dile-input-money', DileInputMoney); -------------------------------------------------------------------------------- /packages/ui/components/input/input-number-mask.js: -------------------------------------------------------------------------------- 1 | import { DileInputNumberMask } from './src/DileInputNumberMask.js'; 2 | 3 | window.customElements.define('dile-input-number-mask', DileInputNumberMask); 4 | -------------------------------------------------------------------------------- /packages/ui/components/input/input-percentage.js: -------------------------------------------------------------------------------- 1 | import { DileInputPercentage } from './src/DileInputPercentage.js'; 2 | 3 | window.customElements.define('dile-input-percentage', DileInputPercentage); -------------------------------------------------------------------------------- /packages/ui/components/input/input-search.js: -------------------------------------------------------------------------------- 1 | import { DileInputSearch } from "./src/DileInputSearch.js"; 2 | 3 | window.customElements.define("dile-input-search", DileInputSearch); 4 | -------------------------------------------------------------------------------- /packages/ui/components/input/input.js: -------------------------------------------------------------------------------- 1 | import { DileInput } from './src/DileInput.js'; 2 | 3 | window.customElements.define('dile-input', DileInput); -------------------------------------------------------------------------------- /packages/ui/components/input/src/DileInputMessage.js: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | import { DileInput } from "./DileInput"; 3 | 4 | export class DileInputMessage extends DileInput { 5 | 6 | render() { 7 | return html` 8 | ${this.messageTemplate} 9 | ` 10 | } 11 | 12 | } -------------------------------------------------------------------------------- /packages/ui/components/input/src/Mask.js: -------------------------------------------------------------------------------- 1 | export class Mask { 2 | constructor(pattern) { 3 | this.pattern = pattern; 4 | } 5 | 6 | setPattern(newPattern) { 7 | this.pattern = newPattern; 8 | } 9 | 10 | maskIt(value) { 11 | let position = 0; 12 | let masked = ''; 13 | let currentChar = 0; 14 | while (position < this.pattern.length && currentChar < value.length) { 15 | if (this.pattern[position] === '0') { 16 | masked += value[currentChar]; 17 | currentChar++; 18 | } else { 19 | masked += this.pattern[position]; 20 | } 21 | position++; 22 | } 23 | return masked; 24 | } 25 | 26 | getNumberCharactersOnPattern() { 27 | let numberChars = 0; 28 | for (let i = 0; i < this.pattern.length; i++) { 29 | if (this.pattern[i] === '0') { 30 | numberChars++; 31 | } 32 | } 33 | return numberChars; 34 | } 35 | 36 | 37 | } -------------------------------------------------------------------------------- /packages/ui/components/input/src/message-styles.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit'; 2 | 3 | export const messageStyles = css` 4 | .message span { 5 | display: block; 6 | padding-top: var(--dile-input-message-padding-top, 4px); 7 | font-size: var(--dile-input-message-font-size, 0.875rem); 8 | color: var(--dile-input-message-color, #888); 9 | 10 | } 11 | .errored-msg span { 12 | color: var(--dile-input-message-error-color, #c00); 13 | } 14 | `; -------------------------------------------------------------------------------- /packages/ui/components/light-mode-switch/index.js: -------------------------------------------------------------------------------- 1 | export { DileLightModeSwitch } from './src/DileLightModeSwitch.js'; -------------------------------------------------------------------------------- /packages/ui/components/light-mode-switch/light-mode-switch.js: -------------------------------------------------------------------------------- 1 | import { DileLightModeSwitch } from "./src/DileLightModeSwitch.js"; 2 | 3 | window.customElements.define("dile-light-mode-switch", DileLightModeSwitch); 4 | -------------------------------------------------------------------------------- /packages/ui/components/menu-hamburger/index.js: -------------------------------------------------------------------------------- 1 | export { DileMenuHamburger } from './src/DileMenuHamburger.js'; 2 | -------------------------------------------------------------------------------- /packages/ui/components/menu-hamburger/menu-hamburger.js: -------------------------------------------------------------------------------- 1 | import { DileMenuHamburger } from './src/DileMenuHamburger.js'; 2 | 3 | window.customElements.define('dile-menu-hamburger', DileMenuHamburger); 4 | -------------------------------------------------------------------------------- /packages/ui/components/menu-overlay/index.js: -------------------------------------------------------------------------------- 1 | export { DileMenuOverlay } from './src/DileMenuOverlay.js'; -------------------------------------------------------------------------------- /packages/ui/components/menu-overlay/menu-overlay.js: -------------------------------------------------------------------------------- 1 | import { DileMenuOverlay } from './src/DileMenuOverlay.js'; 2 | 3 | customElements.define("dile-menu-overlay", DileMenuOverlay); -------------------------------------------------------------------------------- /packages/ui/components/message/index.js: -------------------------------------------------------------------------------- 1 | export { DileMessage } from './src/DileMessage.js'; 2 | -------------------------------------------------------------------------------- /packages/ui/components/message/message.js: -------------------------------------------------------------------------------- 1 | import { DileMessage } from './src/DileMessage.js'; 2 | 3 | window.customElements.define('dile-message', DileMessage); 4 | -------------------------------------------------------------------------------- /packages/ui/components/modal/index.js: -------------------------------------------------------------------------------- 1 | export { DileModal } from './src/DileModal.js'; -------------------------------------------------------------------------------- /packages/ui/components/modal/modal-help.js: -------------------------------------------------------------------------------- 1 | import './modal.js'; 2 | import { DileModalHelp } from './src/DileModalHelp.js'; 3 | 4 | customElements.define("dile-modal-help", DileModalHelp); -------------------------------------------------------------------------------- /packages/ui/components/modal/modal.js: -------------------------------------------------------------------------------- 1 | import { DileModal } from './src/DileModal.js'; 2 | 3 | customElements.define("dile-modal", DileModal); -------------------------------------------------------------------------------- /packages/ui/components/nav/index.js: -------------------------------------------------------------------------------- 1 | export { DileNav } from './src/DileNav.js'; 2 | -------------------------------------------------------------------------------- /packages/ui/components/nav/nav.js: -------------------------------------------------------------------------------- 1 | import { DileNav } from './src/DileNav.js'; 2 | 3 | window.customElements.define('dile-nav', DileNav); 4 | -------------------------------------------------------------------------------- /packages/ui/components/number-picker/index.js: -------------------------------------------------------------------------------- 1 | export { DileNumberPickerElement } from './src/DileNumberPickerElement.js'; 2 | export { DileNumberPicker } from './src/DileNumberPicker.js'; 3 | -------------------------------------------------------------------------------- /packages/ui/components/number-picker/number-picker-element.js: -------------------------------------------------------------------------------- 1 | import { DileNumberPickerElement } from './src/DileNumberPickerElement.js'; 2 | 3 | window.customElements.define('dile-number-picker-element', DileNumberPickerElement); 4 | -------------------------------------------------------------------------------- /packages/ui/components/number-picker/number-picker.js: -------------------------------------------------------------------------------- 1 | import { DileNumberPicker } from './src/DileNumberPicker.js'; 2 | 3 | customElements.define('dile-number-picker', DileNumberPicker); -------------------------------------------------------------------------------- /packages/ui/components/order-switch/index.js: -------------------------------------------------------------------------------- 1 | export { DileOrderSwitch } from './src/DileOrderSwitch.js'; -------------------------------------------------------------------------------- /packages/ui/components/order-switch/order-switch.js: -------------------------------------------------------------------------------- 1 | import { DileOrderSwitch } from "./src/DileOrderSwitch.js"; 2 | 3 | window.customElements.define("dile-order-switch", DileOrderSwitch); 4 | -------------------------------------------------------------------------------- /packages/ui/components/pages/index.js: -------------------------------------------------------------------------------- 1 | export { DilePages } from './src/DilePages.js'; -------------------------------------------------------------------------------- /packages/ui/components/pages/pages.js: -------------------------------------------------------------------------------- 1 | import { DilePages } from "./src/DilePages.js"; 2 | 3 | window.customElements.define("dile-pages", DilePages); 4 | -------------------------------------------------------------------------------- /packages/ui/components/password/index.js: -------------------------------------------------------------------------------- 1 | export { DilePassword } from './src/DilePassword.js'; 2 | -------------------------------------------------------------------------------- /packages/ui/components/password/password.js: -------------------------------------------------------------------------------- 1 | import { DilePassword } from './src/DilePassword.js'; 2 | 3 | window.customElements.define('dile-password', DilePassword); 4 | -------------------------------------------------------------------------------- /packages/ui/components/password/src/DilePassword.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from 'lit'; 2 | import { DileInput } from '../../input/index.js'; 3 | 4 | export class DilePassword extends DileInput { 5 | 6 | render() { 7 | return html` 8 |
9 | ${this.label 10 | ? html`` 11 | : '' 12 | } 13 |
14 | 25 |
26 | ${this.message 27 | ? html`
${this.message}
` 28 | : '' 29 | } 30 |
31 | `; 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /packages/ui/components/progress-bar/index.js: -------------------------------------------------------------------------------- 1 | export { DileProgressBar } from './src/DileProgressBar.js'; -------------------------------------------------------------------------------- /packages/ui/components/progress-bar/progress-bar.js: -------------------------------------------------------------------------------- 1 | import { DileProgressBar } from "./src/DileProgressBar.js"; 2 | 3 | window.customElements.define("dile-progress-bar", DileProgressBar); 4 | -------------------------------------------------------------------------------- /packages/ui/components/radio-group/index.js: -------------------------------------------------------------------------------- 1 | export { DileRadioGroup } from './src/DileRadioGroup.js'; 2 | export { DileRadio } from './src/DileRadio.js'; -------------------------------------------------------------------------------- /packages/ui/components/radio-group/radio-group.js: -------------------------------------------------------------------------------- 1 | import './radio.js'; 2 | import { DileRadioGroup } from "./src/DileRadioGroup.js"; 3 | 4 | window.customElements.define("dile-radio-group", DileRadioGroup); 5 | -------------------------------------------------------------------------------- /packages/ui/components/radio-group/radio.js: -------------------------------------------------------------------------------- 1 | import { DileRadio } from "./src/DileRadio.js"; 2 | 3 | window.customElements.define("dile-radio", DileRadio); 4 | -------------------------------------------------------------------------------- /packages/ui/components/range/index.js: -------------------------------------------------------------------------------- 1 | export { DileRange } from './src/DileRange.js'; -------------------------------------------------------------------------------- /packages/ui/components/range/range.js: -------------------------------------------------------------------------------- 1 | import { DileRange } from "./src/DileRange.js"; 2 | 3 | window.customElements.define("dile-range", DileRange); 4 | -------------------------------------------------------------------------------- /packages/ui/components/rating-scale-question/index.js: -------------------------------------------------------------------------------- 1 | export { DileRatingScaleOption } from "./src/DileRatingScaleOption.js"; 2 | export { DileRatingScaleQuestion } from "./src/DileRatingScaleQuestion.js"; -------------------------------------------------------------------------------- /packages/ui/components/rating-scale-question/rating-scale-option.js: -------------------------------------------------------------------------------- 1 | import { DileRatingScaleOption } from "./src/DileRatingScaleOption.js"; 2 | 3 | window.customElements.define("dile-rating-scale-option", DileRatingScaleOption); 4 | -------------------------------------------------------------------------------- /packages/ui/components/rating-scale-question/rating-scale-question.js: -------------------------------------------------------------------------------- 1 | import './rating-scale-option.js'; 2 | import { DileRatingScaleQuestion } from "./src/DileRatingScaleQuestion.js"; 3 | 4 | window.customElements.define("dile-rating-scale-question", DileRatingScaleQuestion); 5 | -------------------------------------------------------------------------------- /packages/ui/components/rating/index.js: -------------------------------------------------------------------------------- 1 | export { DileRating } from './src/DileRating.js'; -------------------------------------------------------------------------------- /packages/ui/components/rating/rating.js: -------------------------------------------------------------------------------- 1 | import './star.js'; 2 | import { DileRating } from "./src/DileRating.js"; 3 | 4 | window.customElements.define("dile-rating", DileRating); 5 | -------------------------------------------------------------------------------- /packages/ui/components/rating/star.js: -------------------------------------------------------------------------------- 1 | import { DileStar } from "./src/DileStar.js"; 2 | 3 | window.customElements.define("dile-star", DileStar); 4 | -------------------------------------------------------------------------------- /packages/ui/components/select/index.js: -------------------------------------------------------------------------------- 1 | export { DileSelect } from './src/DileSelect.js'; 2 | export { DileSelectAjax } from './src/DileSelectAjax.js'; -------------------------------------------------------------------------------- /packages/ui/components/select/select-ajax.js: -------------------------------------------------------------------------------- 1 | import './select.js' 2 | import { DileSelectAjax } from "./src/DileSelectAjax.js"; 3 | 4 | window.customElements.define("dile-select-ajax", DileSelectAjax); 5 | -------------------------------------------------------------------------------- /packages/ui/components/select/select.js: -------------------------------------------------------------------------------- 1 | import { DileSelect } from "./src/DileSelect.js"; 2 | 3 | window.customElements.define("dile-select", DileSelect); 4 | -------------------------------------------------------------------------------- /packages/ui/components/selector/index.js: -------------------------------------------------------------------------------- 1 | export { DileSelector } from './src/DileSelector.js'; 2 | export { DileSelectorItem } from './src/DileSelectorItem.js'; -------------------------------------------------------------------------------- /packages/ui/components/selector/selector-item.js: -------------------------------------------------------------------------------- 1 | import { DileSelectorItem } from "./src/DileSelectorItem.js"; 2 | 3 | window.customElements.define("dile-selector-item", DileSelectorItem); 4 | -------------------------------------------------------------------------------- /packages/ui/components/selector/selector.js: -------------------------------------------------------------------------------- 1 | import { DileSelector } from "./src/DileSelector.js"; 2 | 3 | window.customElements.define("dile-selector", DileSelector); 4 | -------------------------------------------------------------------------------- /packages/ui/components/selector/src/DileSelector.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from "lit"; 2 | import { DileSelectable } from "../../../mixins/selectable/index.js"; 3 | 4 | export class DileSelector extends DileSelectable(LitElement) { 5 | static get styles() { 6 | return css` 7 | :host { 8 | display: block; 9 | } 10 | `; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/ui/components/slide-menu/index.js: -------------------------------------------------------------------------------- 1 | export { DileSlideMenu } from './src/DileSlideMenu.js'; -------------------------------------------------------------------------------- /packages/ui/components/slide-menu/slide-menu.js: -------------------------------------------------------------------------------- 1 | import { DileSlideMenu } from "./src/DileSlideMenu.js"; 2 | 3 | window.customElements.define("dile-slide-menu", DileSlideMenu); 4 | -------------------------------------------------------------------------------- /packages/ui/components/slide-show/index.js: -------------------------------------------------------------------------------- 1 | export { DileSlideShow } from './src/DileSlideShow.js'; -------------------------------------------------------------------------------- /packages/ui/components/slide-show/slide-show.js: -------------------------------------------------------------------------------- 1 | import { DileSlideShow } from "./src/DileSlideShow.js"; 2 | 3 | window.customElements.define("dile-slide-show", DileSlideShow); 4 | -------------------------------------------------------------------------------- /packages/ui/components/social-icon/index.js: -------------------------------------------------------------------------------- 1 | export { DileSocialIcon } from './src/DileSocialIcon.js'; 2 | -------------------------------------------------------------------------------- /packages/ui/components/social-icon/social-icon.js: -------------------------------------------------------------------------------- 1 | import { DileSocialIcon } from './src/DileSocialIcon.js'; 2 | 3 | window.customElements.define('dile-social-icon', DileSocialIcon); 4 | -------------------------------------------------------------------------------- /packages/ui/components/spinner/index.js: -------------------------------------------------------------------------------- 1 | export { DileSpinner } from './src/DileSpinner.js'; -------------------------------------------------------------------------------- /packages/ui/components/spinner/spinner-block.js: -------------------------------------------------------------------------------- 1 | import './spinner.js'; 2 | import { DileSpinnerBlock } from "./src/DileSpinnerBlock.js"; 3 | 4 | window.customElements.define("dile-spinner-block", DileSpinnerBlock); 5 | -------------------------------------------------------------------------------- /packages/ui/components/spinner/spinner-horizontal.js: -------------------------------------------------------------------------------- 1 | import { DileSpinnerHorizontal } from "./src/DileSpinnerHorizontal.js"; 2 | 3 | window.customElements.define("dile-spinner-horizontal", DileSpinnerHorizontal); 4 | -------------------------------------------------------------------------------- /packages/ui/components/spinner/spinner-modal.js: -------------------------------------------------------------------------------- 1 | import './spinner.js'; 2 | import { DileSpinnerModal } from "./src/DileSpinnerModal.js"; 3 | 4 | window.customElements.define("dile-spinner-modal", DileSpinnerModal); 5 | -------------------------------------------------------------------------------- /packages/ui/components/spinner/spinner.js: -------------------------------------------------------------------------------- 1 | import { DileSpinner } from "./src/DileSpinner.js"; 2 | 3 | window.customElements.define("dile-spinner", DileSpinner); 4 | -------------------------------------------------------------------------------- /packages/ui/components/spinner/src/DileSpinnerBlock.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from "lit"; 2 | 3 | export class DileSpinnerBlock extends LitElement { 4 | static get styles() { 5 | return css` 6 | :host { 7 | display: block; 8 | } 9 | .loading { 10 | height: var(--dile-spinner-block-height, 120px); 11 | display: flex; 12 | justify-content: var(--dile-spinner-block-justify-content, center); 13 | align-items: var(--dile-spinner-block-align-items, center); 14 | } 15 | `; 16 | } 17 | 18 | render() { 19 | return html` 20 |
21 | 22 |
23 | `; 24 | } 25 | } -------------------------------------------------------------------------------- /packages/ui/components/spinner/src/DileSpinnerMixin.js: -------------------------------------------------------------------------------- 1 | export const DileSpinnerMixin = (SuperClass) => 2 | class extends SuperClass { 3 | static get properties() { 4 | return { 5 | active: { type: Boolean }, 6 | }; 7 | } 8 | 9 | constructor() { 10 | super(); 11 | this.active = false; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /packages/ui/components/switch/index.js: -------------------------------------------------------------------------------- 1 | export { DileSwitch } from "./src/DileSwitch"; 2 | -------------------------------------------------------------------------------- /packages/ui/components/switch/switch.js: -------------------------------------------------------------------------------- 1 | import { DileSwitch } from "./src/DileSwitch"; 2 | customElements.define('dile-switch', DileSwitch); 3 | -------------------------------------------------------------------------------- /packages/ui/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | export { DileTabs } from './src/DileTabs.js'; 2 | export { DileTab } from './src/DileTab.js'; -------------------------------------------------------------------------------- /packages/ui/components/tabs/src/DileTabs.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from "lit"; 2 | import { DileSelectable } from "../../../mixins/selectable/index.js"; 3 | 4 | export class DileTabs extends DileSelectable(LitElement) { 5 | static get styles() { 6 | return css` 7 | :host { 8 | display: flex; 9 | } 10 | `; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/ui/components/tabs/tab.js: -------------------------------------------------------------------------------- 1 | import { DileTab } from "./src/DileTab.js"; 2 | 3 | window.customElements.define("dile-tab", DileTab); 4 | -------------------------------------------------------------------------------- /packages/ui/components/tabs/tabs.js: -------------------------------------------------------------------------------- 1 | import './tab.js'; 2 | import { DileTabs } from "./src/DileTabs.js"; 3 | 4 | window.customElements.define("dile-tabs", DileTabs); 5 | -------------------------------------------------------------------------------- /packages/ui/components/textarea/index.js: -------------------------------------------------------------------------------- 1 | export { DileTextarea } from './src/DileTextarea.js'; -------------------------------------------------------------------------------- /packages/ui/components/textarea/textarea.js: -------------------------------------------------------------------------------- 1 | import { DileTextarea } from './src/DileTextarea.js'; 2 | 3 | window.customElements.define('dile-textarea', DileTextarea); -------------------------------------------------------------------------------- /packages/ui/components/time-picker/time-picker.js: -------------------------------------------------------------------------------- 1 | import { DileTimePicker } from "./src/DileTimePicker"; 2 | customElements.define('dile-time-picker', DileTimePicker); 3 | -------------------------------------------------------------------------------- /packages/ui/components/toast/index.js: -------------------------------------------------------------------------------- 1 | export { DileToast } from "./src/DileToast.js"; 2 | export { DileToastItem } from "./src/DileToastItem.js"; 3 | export { DileToastPersistent } from './src/DileToastPersistent.js'; -------------------------------------------------------------------------------- /packages/ui/components/toast/toast-item.js: -------------------------------------------------------------------------------- 1 | import { DileToastItem } from "./src/DileToastItem.js"; 2 | 3 | window.customElements.define("dile-toast-item", DileToastItem); 4 | -------------------------------------------------------------------------------- /packages/ui/components/toast/toast-persistent.js: -------------------------------------------------------------------------------- 1 | import { DileToastPersistent } from './src/DileToastPersistent.js'; 2 | 3 | customElements.define("dile-toast-persistent", DileToastPersistent); -------------------------------------------------------------------------------- /packages/ui/components/toast/toast.js: -------------------------------------------------------------------------------- 1 | import { DileToast } from "./src/DileToast.js"; 2 | import './toast-item.js'; 3 | 4 | window.customElements.define("dile-toast", DileToast); 5 | -------------------------------------------------------------------------------- /packages/ui/components/tooltip/chip-tooltip.js: -------------------------------------------------------------------------------- 1 | import { DileChipTooltip } from './src/DileChipTooltip.js'; 2 | 3 | window.customElements.define('dile-chip-tooltip', DileChipTooltip); 4 | -------------------------------------------------------------------------------- /packages/ui/components/tooltip/index.js: -------------------------------------------------------------------------------- 1 | export { DileTooltip } from './src/DileTooltip'; -------------------------------------------------------------------------------- /packages/ui/components/tooltip/tooltip.js: -------------------------------------------------------------------------------- 1 | import { DileTooltip } from './src/DileTooltip.js'; 2 | 3 | window.customElements.define('dile-tooltip', DileTooltip); 4 | -------------------------------------------------------------------------------- /packages/ui/mixins/close-document-click/index.js: -------------------------------------------------------------------------------- 1 | export { DileCloseDocumentClick } from "./src/DileCloseDocumentClick.js"; -------------------------------------------------------------------------------- /packages/ui/mixins/close-on-esc-pressed/index.js: -------------------------------------------------------------------------------- 1 | export { DileCloseOnEscPressed } from "./src/DileCloseOnEscPressed.js"; -------------------------------------------------------------------------------- /packages/ui/mixins/close-on-esc-pressed/src/DileCloseOnEscPressed.js: -------------------------------------------------------------------------------- 1 | /* 2 | Mixin for close something when the user press the esc key. 3 | 4 | Needs a close() method implemented on the component you are extend from this mixin. 5 | */ 6 | export const DileCloseOnEscPressed = (SuperClass) => 7 | class extends SuperClass { 8 | constructor() { 9 | super(); 10 | this.closeOnEscHandler = this.escClose.bind(this); 11 | } 12 | 13 | connectedCallback() { 14 | super.connectedCallback(); 15 | window.addEventListener("keydown", this.closeOnEscHandler); 16 | } 17 | disconnectedCallback() { 18 | super.disconnectedCallback(); 19 | window.removeEventListener("keydown", this.closeOnEscHandler); 20 | } 21 | 22 | escClose(e) { 23 | if (e.key === "Escape" && this.opened) { 24 | this.close(); 25 | } 26 | } 27 | 28 | close() { 29 | console.log('You need to implement a close method!'); 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /packages/ui/mixins/form/index.js: -------------------------------------------------------------------------------- 1 | export { DileForm } from "./src/DileForm.js"; 2 | export { DileFormChangeDetect } from "./src/DileFormChangeDetect.js"; 3 | export { DileEmmitChange } from "./src/DileEmmitChange.js"; -------------------------------------------------------------------------------- /packages/ui/mixins/form/src/DileEmmitChange.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * # DileEmmitChange 4 | * 5 | * Mixin to detect changes in form components 6 | * 7 | */ 8 | 9 | export const DileEmmitChange = (superclass) => class extends superclass { 10 | 11 | emmitChange() { 12 | this.dispatchEvent(new CustomEvent('element-changed', { 13 | bubbles: true, 14 | composed: true, 15 | detail: { 16 | name: this.name, 17 | value: this.value 18 | } 19 | })); 20 | } 21 | 22 | } -------------------------------------------------------------------------------- /packages/ui/mixins/form/src/DileFormChangeDetect.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * # DileFormChangeDetect 4 | * 5 | * Mixin to detect changes in form components 6 | * 7 | */ 8 | 9 | export const DileFormChangeDetect = (superclass) => class extends superclass { 10 | 11 | constructor() { 12 | super(); 13 | this.changeHandler = this.detectChange.bind(this); 14 | } 15 | 16 | connectedCallback() { 17 | super.connectedCallback(); 18 | this.addEventListener('element-changed', this.changeHandler); 19 | } 20 | disconnectedCallback() { 21 | super.disconnectedCallback(); 22 | this.removeEventListener('element-changed', this.changeHandler); 23 | } 24 | 25 | detectChange(e) { 26 | this.dispatchEvent(new CustomEvent('dile-form-changed', { 27 | bubbles: true, 28 | composed: true, 29 | detail: { 30 | data: this.getData() 31 | } 32 | })); 33 | } 34 | } -------------------------------------------------------------------------------- /packages/ui/mixins/i18n/DileI18nMixin.js: -------------------------------------------------------------------------------- 1 | 2 | export const DileI18nMixin = (translationService) => (superclass) => class extends superclass { 3 | static get properties() { 4 | return { 5 | language: { type: String }, 6 | translations: { type: Object }, 7 | } 8 | } 9 | 10 | constructor() { 11 | super(); 12 | this.language = 'en'; 13 | this.translations = {}; 14 | } 15 | 16 | async connectedCallback() { 17 | super.connectedCallback(); 18 | this.translations = await translationService.loadTranslations(this.language); 19 | } 20 | 21 | } -------------------------------------------------------------------------------- /packages/ui/mixins/i18n/TranslationService.js: -------------------------------------------------------------------------------- 1 | export class TranslationService { 2 | constructor() { 3 | this.translations = {}; 4 | } 5 | 6 | async loadTranslations(language) { 7 | try { 8 | if (!this.translations[language]) { 9 | const module = await this.importLanguage(language) 10 | this.translations[language] = module.translations; 11 | } 12 | } catch (error) { 13 | console.warn(`Could not load translations for language: ${language}, falling back to English`); 14 | 15 | if (!this.translations['en']) { 16 | const defaultModule = await this.importFallback(); 17 | this.translations['en'] = defaultModule.translations; 18 | } 19 | 20 | return this.translations['en']; 21 | } 22 | 23 | return this.translations[language]; 24 | } 25 | 26 | async importLanguage(language) { 27 | // overwrite to import the language 28 | } 29 | 30 | async importFallback() { 31 | // overwrite to import the fallback language 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/ui/mixins/overlay/index.js: -------------------------------------------------------------------------------- 1 | export { DileOverlay } from "./src/DileOverlay.js"; -------------------------------------------------------------------------------- /packages/ui/mixins/selectable/index.js: -------------------------------------------------------------------------------- 1 | export { DileSelectable } from "./src/DileSelectable.js"; 2 | export { DileSelectableItem } from "./src/DileSelectableItem.js"; -------------------------------------------------------------------------------- /packages/ui/mixins/selectable/src/DileSelectableItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * # DileSelectorItem 4 | * 5 | * Mixin to implement a selector item. 6 | * 7 | */ 8 | export const DileSelectableItem = (SuperClass) => 9 | class extends SuperClass { 10 | static get properties() { 11 | return { 12 | selected: { 13 | type: Boolean, 14 | reflect: true, 15 | }, 16 | index: { type: Number }, 17 | }; 18 | } 19 | constructor() { 20 | super(); 21 | this.selected = false; 22 | } 23 | select() { 24 | this.dispatchEvent(new CustomEvent('dile-item-selected', { 25 | bubbles: true, 26 | composed: true, 27 | detail: this 28 | })); 29 | } 30 | } -------------------------------------------------------------------------------- /packages/ui/mixins/slide-down/index.js: -------------------------------------------------------------------------------- 1 | export { DileSlideDown } from "./src/DileSlideDown.js"; -------------------------------------------------------------------------------- /packages/ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dile/ui", 3 | "version": "2.8.3", 4 | "description": "UI Core components from dile-components.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Polydile/dile-components.git" 12 | }, 13 | "keywords": [ 14 | "ui" 15 | ], 16 | "author": "EscuelaIT", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/Polydile/Components/issues" 20 | }, 21 | "homepage": "https://dile-components.com/", 22 | "dependencies": { 23 | "@dile/icons": "^2.4.1", 24 | "lit": "^2.7.0 || ^3.0.0" 25 | }, 26 | "publishConfig": { 27 | "access": "public" 28 | }, 29 | "gitHead": "e3ddacef52e67cdc9c6b0f6e1beda9aa15aeb0f0" 30 | } 31 | -------------------------------------------------------------------------------- /packages/utils/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2019 EscuelaIT 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /packages/utils/README.md: -------------------------------------------------------------------------------- 1 | # @dile/utils 2 | 3 | Web Components to create several features in web sites and web applications. 4 | 5 | Read the @dile/utils docs on [Dile Components Catalog Site](https://dile-components.com/). 6 | 7 | -------------------------------------------------------------------------------- /packages/utils/components/datepicker/calendar.js: -------------------------------------------------------------------------------- 1 | import { DileCalendar } from "./src/DileCalendar.js"; 2 | 3 | window.customElements.define("dile-calendar", DileCalendar); 4 | -------------------------------------------------------------------------------- /packages/utils/components/datepicker/datepicker.js: -------------------------------------------------------------------------------- 1 | import './calendar.js'; 2 | import { DileDatepicker } from "./src/DileDatepicker.js"; 3 | 4 | window.customElements.define("dile-datepicker", DileDatepicker); 5 | -------------------------------------------------------------------------------- /packages/utils/components/datepicker/datetimepicker.js: -------------------------------------------------------------------------------- 1 | import './calendar.js'; 2 | import { DileDatetimepicker } from "./src/DileDatetimepicker.js"; 3 | 4 | window.customElements.define("dile-datetimepicker", DileDatetimepicker); 5 | -------------------------------------------------------------------------------- /packages/utils/components/datepicker/index.js: -------------------------------------------------------------------------------- 1 | export { DileDatepicker } from './src/DileDatepicker.js'; 2 | export { DileCalendar } from './src/DileCalendar.js'; -------------------------------------------------------------------------------- /packages/utils/components/graph/graph.js: -------------------------------------------------------------------------------- 1 | import { DileGraph } from './src/DileGraph.js'; 2 | 3 | window.customElements.define('dile-graph', DileGraph); 4 | -------------------------------------------------------------------------------- /packages/utils/components/graph/index.js: -------------------------------------------------------------------------------- 1 | export { DileGraph } from './src/DileGraph.js'; 2 | -------------------------------------------------------------------------------- /packages/utils/components/html-transform/html-transform.js: -------------------------------------------------------------------------------- 1 | import { DileHtmlTransform } from './src/DileHtmlTransform.js'; 2 | 3 | window.customElements.define('dile-html-transform', DileHtmlTransform); 4 | -------------------------------------------------------------------------------- /packages/utils/components/media-query/index.js: -------------------------------------------------------------------------------- 1 | export { DileMediaQuery } from './src/DileMediaQuery.js'; -------------------------------------------------------------------------------- /packages/utils/components/media-query/media-query.js: -------------------------------------------------------------------------------- 1 | import { DileMediaQuery } from "./src/DileMediaQuery.js"; 2 | 3 | window.customElements.define("dile-media-query", DileMediaQuery); 4 | -------------------------------------------------------------------------------- /packages/utils/components/network/index.js: -------------------------------------------------------------------------------- 1 | export { DileNetwork } from './src/DileNetwork.js'; 2 | -------------------------------------------------------------------------------- /packages/utils/components/network/network.js: -------------------------------------------------------------------------------- 1 | import { DileNetwork } from './src/DileNetwork.js'; 2 | 3 | customElements.define('dile-network', DileNetwork); 4 | -------------------------------------------------------------------------------- /packages/utils/components/smooth-scroll/index.js: -------------------------------------------------------------------------------- 1 | export { DileSmoothScroll } from "./src/DileSmoothScroll.js"; 2 | export { DileSmoothScrollElementMixin } from "./src/DileSmoothScrollElementMixin.js"; 3 | export { DileSmoothScrollMixin } from "./src/DileSmoothScrollMixin.js"; -------------------------------------------------------------------------------- /packages/utils/components/smooth-scroll/smooth-scroll.js: -------------------------------------------------------------------------------- 1 | import { DileSmoothScroll } from './src/DileSmoothScroll.js'; 2 | 3 | window.customElements.define("dile-smooth-scroll", DileSmoothScroll); 4 | -------------------------------------------------------------------------------- /packages/utils/components/smooth-scroll/src/DileSmoothScroll.js: -------------------------------------------------------------------------------- 1 | import { LitElement } from "lit"; 2 | import { DileSmoothScroll as SmoothScrollMixin } from "../../../mixins/smooth-scroll/index.js"; 3 | import { DileSmoothScrollElement } from "../../../mixins/smooth-scroll/index.js"; 4 | 5 | export class DileSmoothScroll extends SmoothScrollMixin ( 6 | DileSmoothScrollElement(LitElement) 7 | ) { 8 | static get properties() { 9 | return { 10 | scrollToElementOnInit: { type: String }, 11 | }; 12 | } 13 | 14 | firstUpdated() { 15 | if (this.scrollToElementOnInit) { 16 | const el = document.getElementById(this.scrollToElementOnInit); 17 | if (el) { 18 | setTimeout(() => this.smoothScrollElementIntoView(el), 500); 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/utils/mixins/smooth-scroll/index.js: -------------------------------------------------------------------------------- 1 | export { DileSmoothScrollElement } from "./src/DileSmoothScrollElement.js"; 2 | export { DileSmoothScroll } from "./src/DileSmoothScroll.js"; -------------------------------------------------------------------------------- /packages/utils/mixins/smooth-scroll/src/DileSmoothScroll.js: -------------------------------------------------------------------------------- 1 | export const DileSmoothScroll = (Superclass) => 2 | class extends Superclass { 3 | smoothScrollToTop() { 4 | this.smoothScroll(0, 0); 5 | } 6 | 7 | smoothScrollToBottom() { 8 | this.smoothScroll(document.body.clientHeight, 0); 9 | } 10 | 11 | smoothScroll(top, left) { 12 | window.scroll({ top, left, behavior: "smooth" }); 13 | } 14 | 15 | smoothScrollBy(top, left) { 16 | window.scrollBy({ top, left, behavior: "smooth" }); 17 | } 18 | 19 | smoothScrollElementIntoView(element) { 20 | if (element && element.scrollIntoView) { 21 | element.scrollIntoView({ behavior: "smooth" }); 22 | } 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /packages/utils/mixins/smooth-scroll/src/DileSmoothScrollElement.js: -------------------------------------------------------------------------------- 1 | export const DileSmoothScrollElement = (Superclass) => 2 | class extends Superclass { 3 | smoothElementScrollTop(element) { 4 | this.smoothElementScroll(element, 0, 0); 5 | } 6 | 7 | smoothElementScrollBottom(element) { 8 | this.smoothElementScroll(element, element.scrollHeight, 0); 9 | } 10 | 11 | smoothElementScroll(element, top, left) { 12 | if (element) { 13 | element.scroll({ top, left, behavior: "smooth" }); 14 | } 15 | } 16 | 17 | smoothElementScrollBy(element, top, left) { 18 | if (element) { 19 | element.scrollBy({ top, left, behavior: "smooth" }); 20 | } 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /packages/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dile/utils", 3 | "version": "2.7.4", 4 | "description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Polydile/dile-components.git" 12 | }, 13 | "keywords": [ 14 | "utils" 15 | ], 16 | "author": "EscuelaIT", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/Polydile/Components/issues" 20 | }, 21 | "homepage": "https://dile-components.com/", 22 | "dependencies": { 23 | "@dile/ui": "^2.8.3", 24 | "@lion/ui": "^0.11.2", 25 | "linkify-string": "^4.1.3", 26 | "linkifyjs": "^4.1.3", 27 | "lit": "^2.7.0 || ^3.0.0" 28 | }, 29 | "publishConfig": { 30 | "access": "public" 31 | }, 32 | "gitHead": "e3ddacef52e67cdc9c6b0f6e1beda9aa15aeb0f0" 33 | } 34 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/public/favicon.ico -------------------------------------------------------------------------------- /public/images/croco-cool-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/public/images/croco-cool-small.png -------------------------------------------------------------------------------- /public/images/croco-cool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/public/images/croco-cool.png -------------------------------------------------------------------------------- /public/images/logo-polydile-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/public/images/logo-polydile-light.png -------------------------------------------------------------------------------- /public/images/logo-polydile-v2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/public/images/logo-polydile-v2.png -------------------------------------------------------------------------------- /public/images/logo-polydile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/public/images/logo-polydile.png -------------------------------------------------------------------------------- /public/images/loto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/public/images/loto.png -------------------------------------------------------------------------------- /public/images/social-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/public/images/social-icons.png -------------------------------------------------------------------------------- /public/images/ui-component-catalog-examples.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Polydile/dile-components/fbb7a5933a1ea456601ab8af86da1586b1c1a34e/public/images/ui-component-catalog-examples.jpg -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | 3 | export default defineConfig({ 4 | root: 'demos', 5 | server: { 6 | port: 5174, 7 | } 8 | }) --------------------------------------------------------------------------------