@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +103 -1
- package/dist/_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js +9 -0
- package/dist/components/action-bar/action-bar.d.ts +0 -1
- package/dist/components/action-bar/action-bar.element.js +15 -12
- package/dist/components/action-bar/action-bar.element.js.map +1 -1
- package/dist/components/action-bar/action-bar.js +5 -5
- package/dist/components/action-bar/action-bar.js.map +1 -1
- package/dist/components/avatar/avatar.d.ts +0 -1
- package/dist/components/avatar/avatar.element.js +72 -86
- package/dist/components/avatar/avatar.element.js.map +1 -1
- package/dist/components/avatar/avatar.js +5 -5
- package/dist/components/avatar/avatar.js.map +1 -1
- package/dist/components/avatar-group/avatar-group.d.ts +0 -1
- package/dist/components/avatar-group/avatar-group.element.js +58 -68
- package/dist/components/avatar-group/avatar-group.element.js.map +1 -1
- package/dist/components/avatar-group/avatar-group.js +5 -5
- package/dist/components/avatar-group/avatar-group.js.map +1 -1
- package/dist/components/badge/badge.d.ts +0 -1
- package/dist/components/badge/badge.element.js +32 -38
- package/dist/components/badge/badge.element.js.map +1 -1
- package/dist/components/badge/badge.js +5 -5
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/boolean-input/UUIBooleanInputEvent.js +15 -13
- package/dist/components/boolean-input/UUIBooleanInputEvent.js.map +1 -1
- package/dist/components/boolean-input/boolean-input.d.ts +0 -1
- package/dist/components/boolean-input/boolean-input.element.js +114 -134
- package/dist/components/boolean-input/boolean-input.element.js.map +1 -1
- package/dist/components/boolean-input/boolean-input.js +3 -0
- package/dist/components/box/box.d.ts +0 -1
- package/dist/components/box/box.element.js +74 -77
- package/dist/components/box/box.element.js.map +1 -1
- package/dist/components/box/box.js +5 -5
- package/dist/components/box/box.js.map +1 -1
- package/dist/components/breadcrumbs/breadcrumb-item.element.js +45 -50
- package/dist/components/breadcrumbs/breadcrumb-item.element.js.map +1 -1
- package/dist/components/breadcrumbs/breadcrumbs.d.ts +0 -1
- package/dist/components/breadcrumbs/breadcrumbs.element.js +40 -47
- package/dist/components/breadcrumbs/breadcrumbs.element.js.map +1 -1
- package/dist/components/breadcrumbs/breadcrumbs.js +5 -6
- package/dist/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/components/button/button.d.ts +0 -1
- package/dist/components/button/button.element.js +147 -199
- package/dist/components/button/button.element.js.map +1 -1
- package/dist/components/button/button.js +5 -5
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button-copy-text/UUICopyTextEvent.js +16 -12
- package/dist/components/button-copy-text/UUICopyTextEvent.js.map +1 -1
- package/dist/components/button-copy-text/button-copy-text.d.ts +0 -1
- package/dist/components/button-copy-text/button-copy-text.element.js +78 -93
- package/dist/components/button-copy-text/button-copy-text.element.js.map +1 -1
- package/dist/components/button-copy-text/button-copy-text.js +6 -7
- package/dist/components/button-copy-text/button-copy-text.js.map +1 -1
- package/dist/components/button-group/button-group.d.ts +0 -1
- package/dist/components/button-group/button-group.element.js +19 -14
- package/dist/components/button-group/button-group.element.js.map +1 -1
- package/dist/components/button-group/button-group.js +5 -5
- package/dist/components/button-group/button-group.js.map +1 -1
- package/dist/components/button-inline-create/UUIButtonInlineCreateEvent.js +16 -14
- package/dist/components/button-inline-create/UUIButtonInlineCreateEvent.js.map +1 -1
- package/dist/components/button-inline-create/button-inline-create.d.ts +0 -1
- package/dist/components/button-inline-create/button-inline-create.element.js +63 -88
- package/dist/components/button-inline-create/button-inline-create.element.js.map +1 -1
- package/dist/components/button-inline-create/button-inline-create.js +6 -7
- package/dist/components/button-inline-create/button-inline-create.js.map +1 -1
- package/dist/components/card/UUICardEvent.js +9 -7
- package/dist/components/card/UUICardEvent.js.map +1 -1
- package/dist/components/card/card.d.ts +0 -1
- package/dist/components/card/card.element.d.ts +7 -0
- package/dist/components/card/card.element.js +72 -69
- package/dist/components/card/card.element.js.map +1 -1
- package/dist/components/card/card.js +6 -7
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/card-block-type/card-block-type.d.ts +0 -1
- package/dist/components/card-block-type/card-block-type.element.js +55 -74
- package/dist/components/card-block-type/card-block-type.element.js.map +1 -1
- package/dist/components/card-block-type/card-block-type.js +5 -5
- package/dist/components/card-block-type/card-block-type.js.map +1 -1
- package/dist/components/card-content-node/card-content-node.d.ts +0 -1
- package/dist/components/card-content-node/card-content-node.element.d.ts +1 -0
- package/dist/components/card-content-node/card-content-node.element.js +82 -83
- package/dist/components/card-content-node/card-content-node.element.js.map +1 -1
- package/dist/components/card-content-node/card-content-node.js +5 -5
- package/dist/components/card-content-node/card-content-node.js.map +1 -1
- package/dist/components/card-media/card-media.d.ts +0 -1
- package/dist/components/card-media/card-media.element.d.ts +4 -0
- package/dist/components/card-media/card-media.element.js +103 -89
- package/dist/components/card-media/card-media.element.js.map +1 -1
- package/dist/components/card-media/card-media.js +5 -5
- package/dist/components/card-media/card-media.js.map +1 -1
- package/dist/components/card-user/card-user.d.ts +0 -1
- package/dist/components/card-user/card-user.element.js +57 -72
- package/dist/components/card-user/card-user.element.js.map +1 -1
- package/dist/components/card-user/card-user.js +5 -5
- package/dist/components/card-user/card-user.js.map +1 -1
- package/dist/components/checkbox/checkbox.d.ts +0 -1
- package/dist/components/checkbox/checkbox.element.js +41 -22
- package/dist/components/checkbox/checkbox.element.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +5 -5
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/color-area/UUIColorAreaEvent.js +15 -13
- package/dist/components/color-area/UUIColorAreaEvent.js.map +1 -1
- package/dist/components/color-area/color-area.d.ts +0 -1
- package/dist/components/color-area/color-area.element.js +137 -174
- package/dist/components/color-area/color-area.element.js.map +1 -1
- package/dist/components/color-area/color-area.js +6 -7
- package/dist/components/color-area/color-area.js.map +1 -1
- package/dist/components/color-picker/UUIColorPickerEvent.js +15 -13
- package/dist/components/color-picker/UUIColorPickerEvent.js.map +1 -1
- package/dist/components/color-picker/color-picker.d.ts +0 -1
- package/dist/components/color-picker/color-picker.element.js +293 -334
- package/dist/components/color-picker/color-picker.element.js.map +1 -1
- package/dist/components/color-picker/color-picker.js +6 -7
- package/dist/components/color-picker/color-picker.js.map +1 -1
- package/dist/components/color-slider/UUIColorSliderEvent.js +15 -13
- package/dist/components/color-slider/UUIColorSliderEvent.js.map +1 -1
- package/dist/components/color-slider/color-slider.d.ts +0 -1
- package/dist/components/color-slider/color-slider.element.js +169 -219
- package/dist/components/color-slider/color-slider.element.js.map +1 -1
- package/dist/components/color-slider/color-slider.js +6 -7
- package/dist/components/color-slider/color-slider.js.map +1 -1
- package/dist/components/color-swatch/color-swatch.d.ts +0 -1
- package/dist/components/color-swatch/color-swatch.element.d.ts +1 -1
- package/dist/components/color-swatch/color-swatch.element.js +215 -201
- package/dist/components/color-swatch/color-swatch.element.js.map +1 -1
- package/dist/components/color-swatch/color-swatch.js +5 -5
- package/dist/components/color-swatch/color-swatch.js.map +1 -1
- package/dist/components/color-swatches/UUIColorSwatchesEvent.js +15 -13
- package/dist/components/color-swatches/UUIColorSwatchesEvent.js.map +1 -1
- package/dist/components/color-swatches/color-swatches.d.ts +0 -1
- package/dist/components/color-swatches/color-swatches.element.js +115 -132
- package/dist/components/color-swatches/color-swatches.element.js.map +1 -1
- package/dist/components/color-swatches/color-swatches.js +6 -7
- package/dist/components/color-swatches/color-swatches.js.map +1 -1
- package/dist/components/combobox/UUIComboboxEvent.js +18 -14
- package/dist/components/combobox/UUIComboboxEvent.js.map +1 -1
- package/dist/components/combobox/combobox.d.ts +0 -1
- package/dist/components/combobox/combobox.element.js +321 -425
- package/dist/components/combobox/combobox.element.js.map +1 -1
- package/dist/components/combobox/combobox.js +6 -7
- package/dist/components/combobox/combobox.js.map +1 -1
- package/dist/components/combobox-list/UUIComboboxListEvent.js +18 -14
- package/dist/components/combobox-list/UUIComboboxListEvent.js.map +1 -1
- package/dist/components/combobox-list/combobox-list-option.element.js +88 -80
- package/dist/components/combobox-list/combobox-list-option.element.js.map +1 -1
- package/dist/components/combobox-list/combobox-list.d.ts +0 -1
- package/dist/components/combobox-list/combobox-list.element.js +218 -275
- package/dist/components/combobox-list/combobox-list.element.js.map +1 -1
- package/dist/components/combobox-list/combobox-list.js +6 -8
- package/dist/components/combobox-list/combobox-list.js.map +1 -1
- package/dist/components/dialog/dialog.d.ts +0 -1
- package/dist/components/dialog/dialog.element.js +19 -14
- package/dist/components/dialog/dialog.element.js.map +1 -1
- package/dist/components/dialog/dialog.js +5 -5
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/dialog-layout/dialog-layout.d.ts +0 -1
- package/dist/components/dialog-layout/dialog-layout.element.js +59 -64
- package/dist/components/dialog-layout/dialog-layout.element.js.map +1 -1
- package/dist/components/dialog-layout/dialog-layout.js +5 -5
- package/dist/components/dialog-layout/dialog-layout.js.map +1 -1
- package/dist/components/file-dropzone/UUIFileDropzoneEvent.js +18 -14
- package/dist/components/file-dropzone/UUIFileDropzoneEvent.js.map +1 -1
- package/dist/components/file-dropzone/file-dropzone.d.ts +0 -1
- package/dist/components/file-dropzone/file-dropzone.element.js +214 -257
- package/dist/components/file-dropzone/file-dropzone.element.js.map +1 -1
- package/dist/components/file-dropzone/file-dropzone.js +6 -7
- package/dist/components/file-dropzone/file-dropzone.js.map +1 -1
- package/dist/components/file-preview/UUIFileSize.js +46 -19
- package/dist/components/file-preview/UUIFileSize.js.map +1 -1
- package/dist/components/file-preview/file-preview.d.ts +0 -1
- package/dist/components/file-preview/file-preview.element.js +78 -103
- package/dist/components/file-preview/file-preview.element.js.map +1 -1
- package/dist/components/file-preview/file-preview.js +6 -5
- package/dist/components/file-preview/file-preview.js.map +1 -1
- package/dist/components/form/form.d.ts +0 -1
- package/dist/components/form/form.element.js +46 -46
- package/dist/components/form/form.element.js.map +1 -1
- package/dist/components/form/form.js +5 -5
- package/dist/components/form/form.js.map +1 -1
- package/dist/components/form-layout-item/form-layout-item.d.ts +0 -1
- package/dist/components/form-layout-item/form-layout-item.element.js +39 -45
- package/dist/components/form-layout-item/form-layout-item.element.js.map +1 -1
- package/dist/components/form-layout-item/form-layout-item.js +5 -5
- package/dist/components/form-layout-item/form-layout-item.js.map +1 -1
- package/dist/components/form-validation-message/form-validation-message.d.ts +0 -1
- package/dist/components/form-validation-message/form-validation-message.element.js +71 -89
- package/dist/components/form-validation-message/form-validation-message.element.js.map +1 -1
- package/dist/components/form-validation-message/form-validation-message.js +5 -5
- package/dist/components/form-validation-message/form-validation-message.js.map +1 -1
- package/dist/components/icon/UUIIconRequestEvent.js +21 -19
- package/dist/components/icon/UUIIconRequestEvent.js.map +1 -1
- package/dist/components/icon/icon.d.ts +0 -1
- package/dist/components/icon/icon.element.js +93 -117
- package/dist/components/icon/icon.element.js.map +1 -1
- package/dist/components/icon/icon.js +6 -7
- package/dist/components/icon/icon.js.map +1 -1
- package/dist/components/icon-registry/UUIIconHost.js +16 -17
- package/dist/components/icon-registry/UUIIconHost.js.map +1 -1
- package/dist/components/icon-registry/UUIIconRegistry.js +67 -77
- package/dist/components/icon-registry/UUIIconRegistry.js.map +1 -1
- package/dist/components/icon-registry/icon-registry.d.ts +0 -1
- package/dist/components/icon-registry/icon-registry.element.js +39 -48
- package/dist/components/icon-registry/icon-registry.element.js.map +1 -1
- package/dist/components/icon-registry/icon-registry.js +7 -6
- package/dist/components/icon-registry/icon-registry.js.map +1 -1
- package/dist/components/icon-registry-essential/UUIIconRegistryEssential.js +44 -42
- package/dist/components/icon-registry-essential/UUIIconRegistryEssential.js.map +1 -1
- package/dist/components/icon-registry-essential/icon-registry-essential.d.ts +0 -1
- package/dist/components/icon-registry-essential/icon-registry-essential.element.js +15 -9
- package/dist/components/icon-registry-essential/icon-registry-essential.element.js.map +1 -1
- package/dist/components/icon-registry-essential/icon-registry-essential.js +6 -39
- package/dist/components/icon-registry-essential/icon-registry-essential.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconAdd.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconAdd.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconAlert.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconAlert.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconAttachment.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconAttachment.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconCalendar.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconCalendar.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconCheck.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconCheck.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconClipboard.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconClipboard.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconCode.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconCode.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconColorPicker.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconColorPicker.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconCopy.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconCopy.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconDelete.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconDelete.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconDocument.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconDocument.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconDownload.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconDownload.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconDrag.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconDrag.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconEdit.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconEdit.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconFavorite.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconFavorite.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconFolder.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconFolder.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconForbidden.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconForbidden.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconInfo.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconInfo.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconLink.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconLink.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconLock.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconLock.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconPause.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconPause.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconPicture.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconPicture.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconPlay.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconPlay.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconRemove.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconRemove.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconSearch.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconSearch.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconSee.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconSee.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconSettings.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconSettings.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconSubtract.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconSubtract.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconSync.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconSync.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconUnlock.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconUnlock.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconUnsee.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconUnsee.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconWand.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconWand.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/iconWrong.js +6 -5
- package/dist/components/icon-registry-essential/svgs/iconWrong.js.map +1 -1
- package/dist/components/icon-registry-essential/svgs/index.js +34 -0
- package/dist/components/index.js +206 -0
- package/dist/components/input/UUIInputEvent.js +18 -14
- package/dist/components/input/UUIInputEvent.js.map +1 -1
- package/dist/components/input/input.d.ts +0 -1
- package/dist/components/input/input.element.js +176 -201
- package/dist/components/input/input.element.js.map +1 -1
- package/dist/components/input/input.js +6 -7
- package/dist/components/input/input.js.map +1 -1
- package/dist/components/input-file/input-file.d.ts +0 -1
- package/dist/components/input-file/input-file.element.js +137 -211
- package/dist/components/input-file/input-file.element.js.map +1 -1
- package/dist/components/input-file/input-file.js +5 -5
- package/dist/components/input-file/input-file.js.map +1 -1
- package/dist/components/input-lock/UUIInputLockEvent.js +15 -13
- package/dist/components/input-lock/UUIInputLockEvent.js.map +1 -1
- package/dist/components/input-lock/input-lock.d.ts +0 -1
- package/dist/components/input-lock/input-lock.element.js +69 -105
- package/dist/components/input-lock/input-lock.element.js.map +1 -1
- package/dist/components/input-lock/input-lock.js +6 -7
- package/dist/components/input-lock/input-lock.js.map +1 -1
- package/dist/components/input-password/input-password.d.ts +0 -1
- package/dist/components/input-password/input-password.element.js +45 -90
- package/dist/components/input-password/input-password.element.js.map +1 -1
- package/dist/components/input-password/input-password.js +5 -5
- package/dist/components/input-password/input-password.js.map +1 -1
- package/dist/components/keyboard-shortcut/key.element.js +19 -14
- package/dist/components/keyboard-shortcut/key.element.js.map +1 -1
- package/dist/components/keyboard-shortcut/keyboard-shortcut.d.ts +0 -1
- package/dist/components/keyboard-shortcut/keyboard-shortcut.element.js +19 -14
- package/dist/components/keyboard-shortcut/keyboard-shortcut.element.js.map +1 -1
- package/dist/components/keyboard-shortcut/keyboard-shortcut.js +5 -6
- package/dist/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
- package/dist/components/label/label.d.ts +0 -1
- package/dist/components/label/label.element.js +52 -54
- package/dist/components/label/label.element.js.map +1 -1
- package/dist/components/label/label.js +5 -5
- package/dist/components/label/label.js.map +1 -1
- package/dist/components/loader/loader.d.ts +0 -1
- package/dist/components/loader/loader.element.js +18 -14
- package/dist/components/loader/loader.element.js.map +1 -1
- package/dist/components/loader/loader.js +5 -5
- package/dist/components/loader/loader.js.map +1 -1
- package/dist/components/loader-bar/loader-bar.d.ts +0 -1
- package/dist/components/loader-bar/loader-bar.element.js +55 -52
- package/dist/components/loader-bar/loader-bar.element.js.map +1 -1
- package/dist/components/loader-bar/loader-bar.js +5 -5
- package/dist/components/loader-bar/loader-bar.js.map +1 -1
- package/dist/components/loader-circle/loader-circle.d.ts +0 -1
- package/dist/components/loader-circle/loader-circle.element.js +52 -59
- package/dist/components/loader-circle/loader-circle.element.js.map +1 -1
- package/dist/components/loader-circle/loader-circle.js +5 -5
- package/dist/components/loader-circle/loader-circle.js.map +1 -1
- package/dist/components/menu-item/UUIMenuItemEvent.js +15 -9
- package/dist/components/menu-item/UUIMenuItemEvent.js.map +1 -1
- package/dist/components/menu-item/menu-item.d.ts +0 -1
- package/dist/components/menu-item/menu-item.element.js +136 -139
- package/dist/components/menu-item/menu-item.element.js.map +1 -1
- package/dist/components/menu-item/menu-item.js +6 -7
- package/dist/components/menu-item/menu-item.js.map +1 -1
- package/dist/components/modal/modal-container.js +86 -141
- package/dist/components/modal/modal-container.js.map +1 -1
- package/dist/components/modal/modal-dialog.element.js +14 -15
- package/dist/components/modal/modal-dialog.element.js.map +1 -1
- package/dist/components/modal/modal-sidebar.element.js +41 -64
- package/dist/components/modal/modal-sidebar.element.js.map +1 -1
- package/dist/components/modal/modal.d.ts +0 -1
- package/dist/components/modal/modal.element.js +89 -106
- package/dist/components/modal/modal.element.js.map +1 -1
- package/dist/components/modal/modal.js +6 -12
- package/dist/components/modal/modal.js.map +1 -1
- package/dist/components/pagination/UUIPaginationEvent.js +15 -13
- package/dist/components/pagination/UUIPaginationEvent.js.map +1 -1
- package/dist/components/pagination/pagination.d.ts +0 -1
- package/dist/components/pagination/pagination.element.js +188 -228
- package/dist/components/pagination/pagination.element.js.map +1 -1
- package/dist/components/pagination/pagination.js +6 -7
- package/dist/components/pagination/pagination.js.map +1 -1
- package/dist/components/popover-container/popover-container.d.ts +0 -1
- package/dist/components/popover-container/popover-container.element.d.ts +1 -0
- package/dist/components/popover-container/popover-container.element.js +290 -335
- package/dist/components/popover-container/popover-container.element.js.map +1 -1
- package/dist/components/popover-container/popover-container.js +5 -5
- package/dist/components/popover-container/popover-container.js.map +1 -1
- package/dist/components/progress-bar/progress-bar.d.ts +0 -1
- package/dist/components/progress-bar/progress-bar.element.js +41 -43
- package/dist/components/progress-bar/progress-bar.element.js.map +1 -1
- package/dist/components/progress-bar/progress-bar.js +5 -5
- package/dist/components/progress-bar/progress-bar.js.map +1 -1
- package/dist/components/radio/UUIRadioEvent.js +15 -13
- package/dist/components/radio/UUIRadioEvent.js.map +1 -1
- package/dist/components/radio/UUIRadioGroupEvent.js +15 -13
- package/dist/components/radio/UUIRadioGroupEvent.js.map +1 -1
- package/dist/components/radio/radio-group.element.js +224 -279
- package/dist/components/radio/radio-group.element.js.map +1 -1
- package/dist/components/radio/radio.d.ts +0 -1
- package/dist/components/radio/radio.element.js +100 -123
- package/dist/components/radio/radio.element.js.map +1 -1
- package/dist/components/radio/radio.js +7 -10
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/range-slider/UUIRangeSliderEvent.js +18 -14
- package/dist/components/range-slider/UUIRangeSliderEvent.js.map +1 -1
- package/dist/components/range-slider/range-slider.d.ts +0 -1
- package/dist/components/range-slider/range-slider.element.js +439 -504
- package/dist/components/range-slider/range-slider.element.js.map +1 -1
- package/dist/components/range-slider/range-slider.js +6 -7
- package/dist/components/range-slider/range-slider.js.map +1 -1
- package/dist/components/ref/UUIRefEvent.js +9 -7
- package/dist/components/ref/UUIRefEvent.js.map +1 -1
- package/dist/components/ref/ref.d.ts +0 -1
- package/dist/components/ref/ref.element.js +55 -50
- package/dist/components/ref/ref.element.js.map +1 -1
- package/dist/components/ref/ref.js +6 -7
- package/dist/components/ref/ref.js.map +1 -1
- package/dist/components/ref-list/ref-list.d.ts +0 -1
- package/dist/components/ref-list/ref-list.element.js +17 -14
- package/dist/components/ref-list/ref-list.element.js.map +1 -1
- package/dist/components/ref-list/ref-list.js +5 -5
- package/dist/components/ref-list/ref-list.js.map +1 -1
- package/dist/components/ref-node/ref-node.d.ts +0 -1
- package/dist/components/ref-node/ref-node.element.js +91 -109
- package/dist/components/ref-node/ref-node.element.js.map +1 -1
- package/dist/components/ref-node/ref-node.js +5 -5
- package/dist/components/ref-node/ref-node.js.map +1 -1
- package/dist/components/ref-node-data-type/ref-node-data-type.d.ts +0 -1
- package/dist/components/ref-node-data-type/ref-node-data-type.element.js +30 -35
- package/dist/components/ref-node-data-type/ref-node-data-type.element.js.map +1 -1
- package/dist/components/ref-node-data-type/ref-node-data-type.js +5 -5
- package/dist/components/ref-node-data-type/ref-node-data-type.js.map +1 -1
- package/dist/components/ref-node-document-type/ref-node-document-type.d.ts +0 -1
- package/dist/components/ref-node-document-type/ref-node-document-type.element.js +30 -35
- package/dist/components/ref-node-document-type/ref-node-document-type.element.js.map +1 -1
- package/dist/components/ref-node-document-type/ref-node-document-type.js +5 -5
- package/dist/components/ref-node-document-type/ref-node-document-type.js.map +1 -1
- package/dist/components/ref-node-form/ref-node-form.d.ts +0 -1
- package/dist/components/ref-node-form/ref-node-form.element.js +21 -12
- package/dist/components/ref-node-form/ref-node-form.element.js.map +1 -1
- package/dist/components/ref-node-form/ref-node-form.js +5 -5
- package/dist/components/ref-node-form/ref-node-form.js.map +1 -1
- package/dist/components/ref-node-member/ref-node-member.d.ts +0 -1
- package/dist/components/ref-node-member/ref-node-member.element.js +33 -35
- package/dist/components/ref-node-member/ref-node-member.element.js.map +1 -1
- package/dist/components/ref-node-member/ref-node-member.js +5 -5
- package/dist/components/ref-node-member/ref-node-member.js.map +1 -1
- package/dist/components/ref-node-package/ref-node-package.d.ts +0 -1
- package/dist/components/ref-node-package/ref-node-package.element.js +33 -42
- package/dist/components/ref-node-package/ref-node-package.element.js.map +1 -1
- package/dist/components/ref-node-package/ref-node-package.js +5 -5
- package/dist/components/ref-node-package/ref-node-package.js.map +1 -1
- package/dist/components/ref-node-user/ref-node-user.d.ts +0 -1
- package/dist/components/ref-node-user/ref-node-user.element.js +33 -35
- package/dist/components/ref-node-user/ref-node-user.element.js.map +1 -1
- package/dist/components/ref-node-user/ref-node-user.js +5 -5
- package/dist/components/ref-node-user/ref-node-user.js.map +1 -1
- package/dist/components/responsive-container/responsive-container.d.ts +0 -1
- package/dist/components/responsive-container/responsive-container.element.js +186 -244
- package/dist/components/responsive-container/responsive-container.element.js.map +1 -1
- package/dist/components/responsive-container/responsive-container.js +5 -5
- package/dist/components/responsive-container/responsive-container.js.map +1 -1
- package/dist/components/scroll-container/scroll-container.d.ts +0 -1
- package/dist/components/scroll-container/scroll-container.element.js +35 -36
- package/dist/components/scroll-container/scroll-container.element.js.map +1 -1
- package/dist/components/scroll-container/scroll-container.js +5 -5
- package/dist/components/scroll-container/scroll-container.js.map +1 -1
- package/dist/components/select/UUISelectEvent.js +15 -13
- package/dist/components/select/UUISelectEvent.js.map +1 -1
- package/dist/components/select/select.d.ts +0 -1
- package/dist/components/select/select.element.js +134 -163
- package/dist/components/select/select.element.js.map +1 -1
- package/dist/components/select/select.js +6 -7
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/slider/UUISliderEvent.js +18 -14
- package/dist/components/slider/UUISliderEvent.js.map +1 -1
- package/dist/components/slider/native-input.styles.js +6 -5
- package/dist/components/slider/native-input.styles.js.map +1 -1
- package/dist/components/slider/slider.d.ts +0 -1
- package/dist/components/slider/slider.element.d.ts +7 -0
- package/dist/components/slider/slider.element.js +197 -227
- package/dist/components/slider/slider.element.js.map +1 -1
- package/dist/components/slider/slider.js +6 -7
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/symbol-drag-handle/symbol-drag-handle.d.ts +0 -1
- package/dist/components/symbol-drag-handle/symbol-drag-handle.element.js +19 -16
- package/dist/components/symbol-drag-handle/symbol-drag-handle.element.js.map +1 -1
- package/dist/components/symbol-drag-handle/symbol-drag-handle.js +5 -5
- package/dist/components/symbol-drag-handle/symbol-drag-handle.js.map +1 -1
- package/dist/components/symbol-expand/symbol-expand.d.ts +0 -1
- package/dist/components/symbol-expand/symbol-expand.element.js +27 -30
- package/dist/components/symbol-expand/symbol-expand.element.js.map +1 -1
- package/dist/components/symbol-expand/symbol-expand.js +5 -5
- package/dist/components/symbol-expand/symbol-expand.js.map +1 -1
- package/dist/components/symbol-file/symbol-file.d.ts +0 -1
- package/dist/components/symbol-file/symbol-file.element.js +24 -32
- package/dist/components/symbol-file/symbol-file.element.js.map +1 -1
- package/dist/components/symbol-file/symbol-file.js +5 -5
- package/dist/components/symbol-file/symbol-file.js.map +1 -1
- package/dist/components/symbol-file-dropzone/symbol-file-dropzone.d.ts +0 -1
- package/dist/components/symbol-file-dropzone/symbol-file-dropzone.element.js +26 -30
- package/dist/components/symbol-file-dropzone/symbol-file-dropzone.element.js.map +1 -1
- package/dist/components/symbol-file-dropzone/symbol-file-dropzone.js +5 -5
- package/dist/components/symbol-file-dropzone/symbol-file-dropzone.js.map +1 -1
- package/dist/components/symbol-file-thumbnail/symbol-file-thumbnail.d.ts +0 -1
- package/dist/components/symbol-file-thumbnail/symbol-file-thumbnail.element.js +39 -95
- package/dist/components/symbol-file-thumbnail/symbol-file-thumbnail.element.js.map +1 -1
- package/dist/components/symbol-file-thumbnail/symbol-file-thumbnail.js +5 -5
- package/dist/components/symbol-file-thumbnail/symbol-file-thumbnail.js.map +1 -1
- package/dist/components/symbol-folder/symbol-folder.d.ts +0 -1
- package/dist/components/symbol-folder/symbol-folder.element.js +17 -14
- package/dist/components/symbol-folder/symbol-folder.element.js.map +1 -1
- package/dist/components/symbol-folder/symbol-folder.js +5 -5
- package/dist/components/symbol-folder/symbol-folder.js.map +1 -1
- package/dist/components/symbol-lock/symbol-lock.d.ts +0 -1
- package/dist/components/symbol-lock/symbol-lock.element.js +26 -30
- package/dist/components/symbol-lock/symbol-lock.element.js.map +1 -1
- package/dist/components/symbol-lock/symbol-lock.js +5 -5
- package/dist/components/symbol-lock/symbol-lock.js.map +1 -1
- package/dist/components/symbol-more/symbol-more.d.ts +0 -1
- package/dist/components/symbol-more/symbol-more.element.js +17 -14
- package/dist/components/symbol-more/symbol-more.element.js.map +1 -1
- package/dist/components/symbol-more/symbol-more.js +5 -5
- package/dist/components/symbol-more/symbol-more.js.map +1 -1
- package/dist/components/symbol-sort/symbol-sort.d.ts +0 -1
- package/dist/components/symbol-sort/symbol-sort.element.js +29 -31
- package/dist/components/symbol-sort/symbol-sort.element.js.map +1 -1
- package/dist/components/symbol-sort/symbol-sort.js +5 -5
- package/dist/components/symbol-sort/symbol-sort.js.map +1 -1
- package/dist/components/table/table-cell.element.js +65 -71
- package/dist/components/table/table-cell.element.js.map +1 -1
- package/dist/components/table/table-column.element.js +14 -10
- package/dist/components/table/table-column.element.js.map +1 -1
- package/dist/components/table/table-head-cell.element.js +19 -16
- package/dist/components/table/table-head-cell.element.js.map +1 -1
- package/dist/components/table/table-head.element.js +23 -18
- package/dist/components/table/table-head.element.js.map +1 -1
- package/dist/components/table/table-row.element.js +41 -52
- package/dist/components/table/table-row.element.js.map +1 -1
- package/dist/components/table/table.d.ts +0 -1
- package/dist/components/table/table.element.js +31 -20
- package/dist/components/table/table.element.js.map +1 -1
- package/dist/components/table/table.js +5 -10
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/tabs/UUITabEvent.js +6 -6
- package/dist/components/tabs/UUITabEvent.js.map +1 -1
- package/dist/components/tabs/UUITabGroupEvent.js +6 -6
- package/dist/components/tabs/UUITabGroupEvent.js.map +1 -1
- package/dist/components/tabs/tab-group.element.js +188 -251
- package/dist/components/tabs/tab-group.element.js.map +1 -1
- package/dist/components/tabs/tab.element.js +66 -56
- package/dist/components/tabs/tab.element.js.map +1 -1
- package/dist/components/tabs/tabs.d.ts +0 -1
- package/dist/components/tabs/tabs.js +7 -6
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/tag/tag.d.ts +0 -1
- package/dist/components/tag/tag.element.js +32 -34
- package/dist/components/tag/tag.element.js.map +1 -1
- package/dist/components/tag/tag.js +5 -5
- package/dist/components/tag/tag.js.map +1 -1
- package/dist/components/textarea/UUITextareaEvent.js +18 -14
- package/dist/components/textarea/UUITextareaEvent.js.map +1 -1
- package/dist/components/textarea/textarea.d.ts +0 -1
- package/dist/components/textarea/textarea.element.d.ts +2 -0
- package/dist/components/textarea/textarea.element.js +153 -180
- package/dist/components/textarea/textarea.element.js.map +1 -1
- package/dist/components/textarea/textarea.js +6 -7
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/components/toast-notification/UUIToastNotificationEvent.js +18 -10
- package/dist/components/toast-notification/UUIToastNotificationEvent.js.map +1 -1
- package/dist/components/toast-notification/toast-notification.d.ts +0 -1
- package/dist/components/toast-notification/toast-notification.element.js +155 -224
- package/dist/components/toast-notification/toast-notification.element.js.map +1 -1
- package/dist/components/toast-notification/toast-notification.js +6 -7
- package/dist/components/toast-notification/toast-notification.js.map +1 -1
- package/dist/components/toast-notification-container/toast-notification-container.d.ts +0 -1
- package/dist/components/toast-notification-container/toast-notification-container.element.js +98 -122
- package/dist/components/toast-notification-container/toast-notification-container.element.js.map +1 -1
- package/dist/components/toast-notification-container/toast-notification-container.js +6 -9
- package/dist/components/toast-notification-container/toast-notification-container.js.map +1 -1
- package/dist/components/toast-notification-layout/toast-notification-layout.d.ts +0 -1
- package/dist/components/toast-notification-layout/toast-notification-layout.element.js +33 -39
- package/dist/components/toast-notification-layout/toast-notification-layout.element.js.map +1 -1
- package/dist/components/toast-notification-layout/toast-notification-layout.js +6 -9
- package/dist/components/toast-notification-layout/toast-notification-layout.js.map +1 -1
- package/dist/components/toggle/toggle.d.ts +0 -1
- package/dist/components/toggle/toggle.element.js +43 -54
- package/dist/components/toggle/toggle.element.js.map +1 -1
- package/dist/components/toggle/toggle.js +5 -5
- package/dist/components/toggle/toggle.js.map +1 -1
- package/dist/components/visually-hidden/visually-hidden.d.ts +0 -1
- package/dist/components/visually-hidden/visually-hidden.element.js +17 -14
- package/dist/components/visually-hidden/visually-hidden.element.js.map +1 -1
- package/dist/components/visually-hidden/visually-hidden.js +5 -5
- package/dist/components/visually-hidden/visually-hidden.js.map +1 -1
- package/dist/index.js +115 -359
- package/dist/internal/animations/uui-blink.js +7 -7
- package/dist/internal/animations/uui-blink.js.map +1 -1
- package/dist/internal/animations/uui-pulse.js +7 -9
- package/dist/internal/animations/uui-pulse.js.map +1 -1
- package/dist/internal/animations/uui-shake.js +7 -9
- package/dist/internal/animations/uui-shake.js.map +1 -1
- package/dist/internal/events/UUIEvent.js +13 -9
- package/dist/internal/events/UUIEvent.js.map +1 -1
- package/dist/internal/events/UUIFormControlEvent.d.ts +2 -2
- package/dist/internal/events/UUIFormControlEvent.js +18 -14
- package/dist/internal/events/UUIFormControlEvent.js.map +1 -1
- package/dist/internal/events/UUISelectableEvent.js +19 -15
- package/dist/internal/events/UUISelectableEvent.js.map +1 -1
- package/dist/internal/mixins/ActiveMixin.js +24 -24
- package/dist/internal/mixins/ActiveMixin.js.map +1 -1
- package/dist/internal/mixins/FormControlMixin.d.ts +3 -3
- package/dist/internal/mixins/FormControlMixin.js +276 -339
- package/dist/internal/mixins/FormControlMixin.js.map +1 -1
- package/dist/internal/mixins/FormControlWithBasicsMixin.d.ts +19 -3
- package/dist/internal/mixins/FormControlWithBasicsMixin.js +54 -60
- package/dist/internal/mixins/FormControlWithBasicsMixin.js.map +1 -1
- package/dist/internal/mixins/LabelMixin.js +54 -57
- package/dist/internal/mixins/LabelMixin.js.map +1 -1
- package/dist/internal/mixins/PopoverTargetMixin.js +43 -47
- package/dist/internal/mixins/PopoverTargetMixin.js.map +1 -1
- package/dist/internal/mixins/SelectOnlyMixin.js +39 -33
- package/dist/internal/mixins/SelectOnlyMixin.js.map +1 -1
- package/dist/internal/mixins/SelectableMixin.js +109 -121
- package/dist/internal/mixins/SelectableMixin.js.map +1 -1
- package/dist/internal/registration/index.js +17 -20
- package/dist/internal/registration/index.js.map +1 -1
- package/dist/internal/types/InterfaceColor.js +11 -10
- package/dist/internal/types/InterfaceColor.js.map +1 -1
- package/dist/internal/types/InterfaceHeading.js +12 -11
- package/dist/internal/types/InterfaceHeading.js.map +1 -1
- package/dist/internal/types/InterfaceLook.js +11 -10
- package/dist/internal/types/InterfaceLook.js.map +1 -1
- package/dist/internal/utils/Timer.js +56 -61
- package/dist/internal/utils/Timer.js.map +1 -1
- package/dist/internal/utils/color.js +105 -74
- package/dist/internal/utils/color.js.map +1 -1
- package/dist/internal/utils/drag.js +27 -36
- package/dist/internal/utils/drag.js.map +1 -1
- package/dist/internal/utils/findAncestorByAttributeValue.js +22 -19
- package/dist/internal/utils/findAncestorByAttributeValue.js.map +1 -1
- package/dist/internal/utils/math.js +23 -13
- package/dist/internal/utils/math.js.map +1 -1
- package/dist/internal/utils/slotHasContent.js +6 -5
- package/dist/internal/utils/slotHasContent.js.map +1 -1
- package/dist/internal/version.js +10 -16
- package/dist/internal/version.js.map +1 -1
- package/dist/package.json.js +6 -5
- package/dist/package.json.js.map +1 -1
- package/dist/styles/uui-font.css +1 -1
- package/dist/styles/uui-text.css +1 -1
- package/dist/styles/uui-text.css.js +6 -5
- package/dist/styles/uui-text.css.js.map +1 -1
- package/dist/styles/uui-text.styles.js +7 -6
- package/dist/styles/uui-text.styles.js.map +1 -1
- package/dist/themes/dark.css +1 -1
- package/dist/themes/high-contrast.css +1 -1
- package/dist/themes/light.css +1 -1
- package/package.json +26 -25
- package/vscode.html-custom-data.json +36 -7
- package/dist/index.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormControlMixin.js","sources":["../../../src/internal/mixins/FormControlMixin.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { UUIFormControlEvent } from '../events/index.js';\n\ntype HTMLElementConstructor<T = HTMLElement> = new (...args: any[]) => T;\n\ntype NativeFormControlElement = HTMLInputElement; // Eventually use a specific interface or list multiple options like appending these types: ... | HTMLTextAreaElement | HTMLSelectElement\n\n/* FlagTypes type options originate from:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n * */\ntype FlagTypes =\n | 'badInput'\n | 'customError'\n | 'patternMismatch'\n | 'rangeOverflow'\n | 'rangeUnderflow'\n | 'stepMismatch'\n | 'tooLong'\n | 'tooShort'\n | 'typeMismatch'\n | 'valueMissing'\n | 'valid';\n\nconst WeightedErrorFlagTypes = [\n 'customError',\n 'valueMissing',\n 'badInput',\n 'typeMismatch',\n 'patternMismatch',\n 'rangeOverflow',\n 'rangeUnderflow',\n 'stepMismatch',\n 'tooLong',\n 'tooShort',\n];\n\n// Acceptable as an internal interface/type, BUT if exposed externally this should be turned into a public class in a separate file.\ninterface UUIFormControlValidatorConfig {\n flagKey: FlagTypes;\n getMessageMethod: () => string;\n checkMethod: () => boolean;\n weight: number;\n}\n\nexport interface UUIFormControlMixinInterface<ValueType> extends LitElement {\n addValidator: (\n flagKey: FlagTypes,\n getMessageMethod: () => string,\n checkMethod: () => boolean,\n ) => void;\n removeValidator: (obj: UUIFormControlValidatorConfig) => void;\n //static formAssociated: boolean;\n //protected getFormElement(): HTMLElement | undefined | null; // allows for null as it makes it simpler to just implement a querySelector as that might return null. [NL]\n focusFirstInvalidElement(): void;\n get value(): ValueType;\n set value(newValue: ValueType);\n hasValue(): boolean;\n formResetCallback(): void;\n checkValidity(): boolean;\n get validationMessage(): string;\n get validity(): ValidityState;\n setCustomValidity(error?: string): void;\n pristine: boolean;\n}\n\nexport declare abstract class UUIFormControlMixinElement<ValueType>\n extends LitElement\n implements UUIFormControlMixinInterface<ValueType>\n{\n protected _internals: ElementInternals;\n protected _runValidators(): void;\n addValidator: (\n flagKey: FlagTypes,\n getMessageMethod: () => string,\n checkMethod: () => boolean,\n ) => void;\n removeValidator: (obj: UUIFormControlValidatorConfig) => void;\n protected addFormControlElement(element: NativeFormControlElement): void;\n\n //static formAssociated: boolean;\n protected abstract getFormElement(): HTMLElement | undefined | null; // allows for null as it makes it simpler to just implement a querySelector as that might return null. [NL]\n focusFirstInvalidElement(): void;\n get value(): ValueType;\n set value(newValue: ValueType);\n hasValue(): boolean;\n formResetCallback(): void;\n checkValidity(): boolean;\n get validationMessage(): string;\n get validity(): ValidityState;\n public setCustomValidity(error: string): void;\n pristine: boolean;\n}\n\n/**\n * The mixin allows a custom element to participate in HTML forms.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const UUIFormControlMixin = <\n ValueType = FormDataEntryValue | FormData,\n T extends HTMLElementConstructor<LitElement> = typeof LitElement,\n DefaultValueType = undefined,\n>(\n superClass: T,\n defaultValue?: DefaultValueType,\n) => {\n abstract class UUIFormControlMixinClass extends superClass {\n /**\n * This is a static class field indicating that the element is can be used inside a native form and participate in its events.\n * It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\n * Read more about form controls here https://web.dev/more-capable-form-controls/\n * @type {boolean}\n */\n static readonly formAssociated = true;\n\n /**\n * Value of this form control.\n * If you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.\n * @type {string}\n * @attr value\n * @default ''\n */\n @property() // Do not 'reflect' as the attribute is used as fallback.\n set value(newValue: ValueType | DefaultValueType) {\n const oldValue = this.#value;\n this.#value = newValue;\n if (\n 'ElementInternals' in window &&\n 'setFormValue' in window.ElementInternals.prototype\n ) {\n this._internals.setFormValue((this.#value as any) ?? null);\n }\n this.requestUpdate('value', oldValue);\n }\n get value(): ValueType | DefaultValueType {\n return this.#value;\n }\n\n // Validation\n #validity: any = {};\n\n /**\n * Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n * @type {boolean}\n * @attr\n * @default\n */\n @property({ type: Boolean, reflect: true })\n public set pristine(value: boolean) {\n if (this._pristine !== value) {\n this._pristine = value;\n }\n }\n public get pristine(): boolean {\n return this._pristine;\n }\n private _pristine: boolean = true;\n\n #value: ValueType | DefaultValueType =\n defaultValue as unknown as DefaultValueType;\n #valueOnFocus: ValueType | DefaultValueType =\n undefined as unknown as DefaultValueType;\n protected _internals: ElementInternals;\n #form: HTMLFormElement | null = null;\n readonly #validators: UUIFormControlValidatorConfig[] = [];\n readonly #formCtrlElements: NativeFormControlElement[] = [];\n\n constructor(...args: any[]) {\n super(...args);\n this._internals = this.attachInternals();\n\n this.addEventListener('focus', () => {\n this.#valueOnFocus = this.value;\n });\n this.addEventListener('blur', () => {\n if (this.#valueOnFocus !== this.value) {\n this.checkValidity();\n }\n this.#valueOnFocus = undefined as unknown as\n | ValueType\n | DefaultValueType;\n });\n }\n\n /**\n * Determine wether this FormControl has a value.\n * @method hasValue\n * @returns {boolean}\n */\n public hasValue(): boolean {\n return this.value !== this.getDefaultValue();\n }\n\n /**\n * Get internal form element.\n * This has to be implemented to provide a FormControl Element of choice for the given context. The element is used as anchor for validation-messages.\n * @abstract\n * @method getFormElement\n * @returns {HTMLElement | undefined}\n */\n protected abstract getFormElement(): HTMLElement | undefined;\n\n /**\n * Focus first element that is invalid.\n * @method focusFirstInvalidElement\n * @returns {HTMLElement | undefined}\n */\n focusFirstInvalidElement() {\n const firstInvalid = this.#formCtrlElements.find(\n el => el.validity.valid === false,\n );\n if (firstInvalid) {\n if ('focusFirstInvalidElement' in firstInvalid) {\n (firstInvalid as any).focusFirstInvalidElement();\n } else {\n firstInvalid.focus();\n }\n } else {\n this.focus();\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#removeFormListeners();\n }\n #removeFormListeners() {\n if (this.#form) {\n this.#form.removeEventListener('submit', this.#onFormSubmit);\n }\n }\n\n /**\n * Add validation, to validate this Form Control.\n * See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState for available Validator FlagTypes.\n * @example\n * this.addValidator(\n * 'tooLong',\n * () => 'This input contains too many characters',\n * () => this._value.length > 10\n * );\n * @function addValidator\n * @param {FlagTypes} flagKey the type of validation.\n * @param {method} getMessageMethod method to retrieve relevant message. Is executed every time the validator is re-executed.\n * @param {method} checkMethod method to determine if this validator should invalidate this form control. Return true if this should prevent submission.\n * @returns {UUIFormControlValidatorConfig} - The added validator configuration.\n */\n addValidator(\n flagKey: FlagTypes,\n getMessageMethod: () => string,\n checkMethod: () => boolean,\n ): UUIFormControlValidatorConfig {\n const validator = {\n flagKey: flagKey,\n getMessageMethod: getMessageMethod,\n checkMethod: checkMethod,\n weight: WeightedErrorFlagTypes.indexOf(flagKey),\n } satisfies UUIFormControlValidatorConfig;\n this.#validators.push(validator);\n // Sort validators based on the WeightedErrorFlagTypes order. [NL]\n this.#validators.sort((a, b) => a.weight - b.weight);\n return validator;\n }\n\n protected removeValidator(validator: UUIFormControlValidatorConfig) {\n const index = this.#validators.indexOf(validator);\n if (index !== -1) {\n this.#validators.splice(index, 1);\n }\n }\n\n readonly #runValidatorsCallback = () => this._runValidators();\n\n /**\n * @method addFormControlElement\n * @description Important notice if adding a native form control then ensure that its value and thereby validity is updated when value is changed from the outside.\n * @param element {NativeFormControlElement} - element to validate and include as part of this form association.\n */\n protected addFormControlElement(element: NativeFormControlElement) {\n if (!element) {\n throw new Error('Element is null or undefined');\n }\n if (!element.validity) {\n throw new Error('Element is not a Form Control');\n }\n if (this.#formCtrlElements.includes(element)) return;\n this.#formCtrlElements.push(element);\n element.addEventListener(\n UUIFormControlEvent.INVALID,\n this.#runValidatorsCallback,\n );\n element.addEventListener(\n UUIFormControlEvent.VALID,\n this.#runValidatorsCallback,\n );\n // If we are in validationMode/'touched'/not-pristine then we need to validate this newly added control. [NL]\n if (this._pristine === false) {\n element.checkValidity();\n // I think we could just execute validators for the new control, but now lets just run al of it again. [NL]\n this._runValidators();\n }\n }\n\n /**\n * @function removeFormControlElement\n * @param {NativeFormControlElement} element - element to remove as part of this form controls associated controls.\n * @returns {void}\n */\n protected removeFormControlElement(element: NativeFormControlElement) {\n const index = this.#formCtrlElements.indexOf(element);\n if (index !== -1) {\n this.#formCtrlElements.splice(index, 1);\n element.removeEventListener(\n UUIFormControlEvent.INVALID,\n this.#runValidatorsCallback,\n );\n element.removeEventListener(\n UUIFormControlEvent.VALID,\n this.#runValidatorsCallback,\n );\n if (this._pristine === false) {\n this._runValidators();\n }\n }\n }\n\n private _customValidityObject?: UUIFormControlValidatorConfig;\n\n /**\n * @method setCustomValidity\n * @description Set custom validity state, set to empty string to remove the custom message.\n * @param message {string} - The message to be shown\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity|HTMLObjectElement:setCustomValidity}\n */\n protected setCustomValidity(message: string | null) {\n if (this._customValidityObject) {\n this.removeValidator(this._customValidityObject);\n }\n\n if (message != null && message !== '') {\n this._customValidityObject = this.addValidator(\n 'customError',\n (): string => message,\n () => true,\n );\n }\n\n this._runValidators();\n }\n\n /**\n * @protected\n * @function _runValidators\n * @description Run all validators and set the validityState of this form control.\n * Run this method when you want to re-run all validators.\n * This can be relevant if you have a validators that is using values that is not triggering the Lit Updated Callback.\n * Such are mainly properties that are not declared as a Lit state and or Lit property.\n */\n protected _runValidators() {\n this.#validity = {};\n let message: string | undefined = undefined;\n let innerFormControlEl: NativeFormControlElement | undefined = undefined;\n\n // Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages) [NL]\n this.#validators.some(validator => {\n if (validator.checkMethod()) {\n this.#validity[validator.flagKey] = true;\n message = validator.getMessageMethod();\n return true;\n }\n return false;\n });\n\n if (!message) {\n // Loop through inner native form controls to adapt their validityState. [NL]\n this.#formCtrlElements.some(formCtrlEl => {\n let key: keyof ValidityState;\n for (key in formCtrlEl.validity) {\n if (key !== 'valid' && formCtrlEl.validity[key]) {\n this.#validity[key] = true;\n message = formCtrlEl.validationMessage;\n innerFormControlEl ??= formCtrlEl;\n return true;\n }\n }\n return false;\n });\n }\n\n const hasError = Object.values(this.#validity).includes(true);\n\n // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#valid\n this.#validity.valid = !hasError;\n\n // Transfer the new validityState to the ElementInternals. [NL]\n this._internals.setValidity(\n this.#validity,\n message,\n innerFormControlEl ?? this.getFormElement() ?? undefined,\n );\n\n this.#dispatchValidationState();\n }\n\n #dispatchValidationState() {\n // Do not fire validation events unless we are not pristine/'untouched'/not-in-validation-mode. [NL]\n if (this._pristine === true) return;\n if (this.#validity.valid) {\n this.dispatchEvent(new UUIFormControlEvent(UUIFormControlEvent.VALID));\n } else {\n this.dispatchEvent(\n new UUIFormControlEvent(UUIFormControlEvent.INVALID),\n );\n }\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n super.updated(changedProperties);\n this._runValidators();\n }\n\n readonly #onFormSubmit = () => {\n this.pristine = false;\n };\n\n public formAssociatedCallback() {\n this.#removeFormListeners();\n this.#form = this._internals.form;\n if (this.#form) {\n // This relies on the form begin a 'uui-form':\n if (this.#form.hasAttribute('submit-invalid')) {\n this.pristine = false;\n }\n this.#form.addEventListener('submit', this.#onFormSubmit);\n }\n }\n public formResetCallback() {\n this.pristine = true;\n this.value = this.getInitialValue() ?? this.getDefaultValue();\n }\n\n protected getDefaultValue(): DefaultValueType {\n return defaultValue as DefaultValueType;\n }\n protected getInitialValue(): ValueType | DefaultValueType {\n return this.getAttribute('value') as ValueType | DefaultValueType;\n }\n\n public checkValidity() {\n this.pristine = false;\n this._runValidators();\n\n for (const key in this.#formCtrlElements) {\n if (this.#formCtrlElements[key].checkValidity() === false) {\n return false;\n }\n }\n\n return this._internals?.checkValidity();\n }\n\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity\n public get validity(): ValidityState {\n return this.#validity;\n }\n\n get validationMessage() {\n return this._internals?.validationMessage;\n }\n }\n return UUIFormControlMixinClass as unknown as HTMLElementConstructor<\n UUIFormControlMixinElement<ValueType | DefaultValueType>\n > &\n T;\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormControlMixin.js","names":["#value","#validators","#formCtrlElements","#valueOnFocus","#hadFocus","#removeFormListeners","#form","#onFormSubmit","#runValidatorsCallback","#validity","#dispatchValidationState"],"sources":["../../../src/internal/mixins/FormControlMixin.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { UUIFormControlEvent } from '../events/index.js';\n\ntype HTMLElementConstructor<T = HTMLElement> = new (...args: any[]) => T;\n\ntype NativeFormControlElement = HTMLInputElement; // Eventually use a specific interface or list multiple options like appending these types: ... | HTMLTextAreaElement | HTMLSelectElement\n\n/* FlagTypes type options originate from:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n * */\ntype FlagTypes =\n | 'badInput'\n | 'customError'\n | 'patternMismatch'\n | 'rangeOverflow'\n | 'rangeUnderflow'\n | 'stepMismatch'\n | 'tooLong'\n | 'tooShort'\n | 'typeMismatch'\n | 'valueMissing'\n | 'valid';\n\nconst WeightedErrorFlagTypes = [\n 'customError',\n 'valueMissing',\n 'badInput',\n 'typeMismatch',\n 'patternMismatch',\n 'rangeOverflow',\n 'rangeUnderflow',\n 'stepMismatch',\n 'tooLong',\n 'tooShort',\n];\n\n// Acceptable as an internal interface/type, BUT if exposed externally this should be turned into a public class in a separate file.\ninterface UUIFormControlValidatorConfig {\n flagKey: FlagTypes;\n getMessageMethod: () => string;\n checkMethod: () => boolean;\n weight: number;\n}\n\nexport interface UUIFormControlBaseMixinInterface<\n ValueType,\n> extends LitElement {\n addValidator: (\n flagKey: FlagTypes,\n getMessageMethod: () => string,\n checkMethod: () => boolean,\n ) => void;\n removeValidator: (obj: UUIFormControlValidatorConfig) => void;\n //static formAssociated: boolean;\n //protected getFormElement(): HTMLElement | undefined | null; // allows for null as it makes it simpler to just implement a querySelector as that might return null. [NL]\n focusFirstInvalidElement(): void;\n get value(): ValueType;\n set value(newValue: ValueType);\n hasValue(): boolean;\n formResetCallback(): void;\n checkValidity(): boolean;\n get validationMessage(): string;\n get validity(): ValidityState;\n setCustomValidity(error?: string): void;\n pristine: boolean;\n}\n\nexport declare abstract class UUIFormControlBaseMixinElement<ValueType>\n extends LitElement\n implements UUIFormControlBaseMixinInterface<ValueType>\n{\n protected _internals: ElementInternals;\n protected _runValidators(): void;\n addValidator: (\n flagKey: FlagTypes,\n getMessageMethod: () => string,\n checkMethod: () => boolean,\n ) => void;\n removeValidator: (obj: UUIFormControlValidatorConfig) => void;\n protected addFormControlElement(element: NativeFormControlElement): void;\n\n //static formAssociated: boolean;\n protected abstract getFormElement(): HTMLElement | undefined | null; // allows for null as it makes it simpler to just implement a querySelector as that might return null. [NL]\n focusFirstInvalidElement(): void;\n get value(): ValueType;\n set value(newValue: ValueType);\n hasValue(): boolean;\n formResetCallback(): void;\n checkValidity(): boolean;\n get validationMessage(): string;\n get validity(): ValidityState;\n public setCustomValidity(error: string): void;\n pristine: boolean;\n}\n\n/**\n * The mixin allows a custom element to participate in HTML forms.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const UUIFormControlBaseMixin = <\n ValueType = FormDataEntryValue | FormData,\n T extends HTMLElementConstructor<LitElement> = typeof LitElement,\n DefaultValueType = undefined,\n>(\n superClass: T,\n defaultValue?: DefaultValueType,\n) => {\n abstract class UUIFormControlBaseMixinClass extends superClass {\n /**\n * This is a static class field indicating that the element is can be used inside a native form and participate in its events.\n * It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\n * Read more about form controls here https://web.dev/more-capable-form-controls/\n * @type {boolean}\n */\n static readonly formAssociated = true;\n\n /**\n * Value of this form control.\n * If you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.\n * @type {string}\n * @attr value\n * @default ''\n */\n @property() // Do not 'reflect' as the attribute is used as fallback.\n set value(newValue: ValueType | DefaultValueType) {\n const oldValue = this.#value;\n this.#value = newValue;\n if (\n 'ElementInternals' in window &&\n 'setFormValue' in window.ElementInternals.prototype\n ) {\n this._internals.setFormValue((this.#value as any) ?? null);\n }\n this.requestUpdate('value', oldValue);\n }\n get value(): ValueType | DefaultValueType {\n return this.#value;\n }\n\n // Validation\n #validity: any = {};\n\n /**\n * Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n * @type {boolean}\n * @attr\n * @default\n */\n @property({ type: Boolean, reflect: true })\n public set pristine(value: boolean) {\n if (this._pristine !== value) {\n this._pristine = value;\n }\n }\n public get pristine(): boolean {\n return this._pristine;\n }\n private _pristine: boolean = true;\n\n #value: ValueType | DefaultValueType =\n defaultValue as unknown as DefaultValueType;\n #valueOnFocus: ValueType | DefaultValueType | undefined = undefined;\n // A state to capture late edits to the value after focus has been lost, so we can trigger validation for late value changes. [NL]\n #hadFocus = false;\n protected _internals: ElementInternals;\n #form: HTMLFormElement | null = null;\n readonly #validators: UUIFormControlValidatorConfig[] = [];\n readonly #formCtrlElements: NativeFormControlElement[] = [];\n\n constructor(...args: any[]) {\n super(...args);\n this._internals = this.attachInternals();\n\n this.addEventListener('focus', () => {\n this.#valueOnFocus = this.value;\n this.#hadFocus = false;\n });\n this.addEventListener('blur', () => {\n if (this.pristine) {\n this.#hadFocus = true;\n if (this.#valueOnFocus !== this.value) {\n this.checkValidity();\n }\n }\n this.#valueOnFocus = undefined;\n });\n }\n\n /**\n * Determine wether this FormControl has a value.\n * @method hasValue\n * @returns {boolean}\n */\n public hasValue(): boolean {\n return this.value !== this.getDefaultValue();\n }\n\n /**\n * Get internal form element.\n * This has to be implemented to provide a FormControl Element of choice for the given context. The element is used as anchor for validation-messages.\n * @abstract\n * @method getFormElement\n * @returns {HTMLElement | undefined}\n */\n protected abstract getFormElement(): HTMLElement | undefined;\n\n /**\n * Focus first element that is invalid.\n * @method focusFirstInvalidElement\n * @returns {HTMLElement | undefined}\n */\n focusFirstInvalidElement() {\n const firstInvalid = this.#formCtrlElements.find(\n el => el.validity.valid === false,\n );\n if (firstInvalid) {\n if ('focusFirstInvalidElement' in firstInvalid) {\n (firstInvalid as any).focusFirstInvalidElement();\n } else {\n firstInvalid.focus();\n }\n } else {\n this.focus();\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#removeFormListeners();\n }\n #removeFormListeners() {\n if (this.#form) {\n this.#form.removeEventListener('submit', this.#onFormSubmit);\n }\n }\n\n /**\n * Add validation, to validate this Form Control.\n * See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState for available Validator FlagTypes.\n * @example\n * this.addValidator(\n * 'tooLong',\n * () => 'This input contains too many characters',\n * () => this._value.length > 10\n * );\n * @function addValidator\n * @param {FlagTypes} flagKey the type of validation.\n * @param {method} getMessageMethod method to retrieve relevant message. Is executed every time the validator is re-executed.\n * @param {method} checkMethod method to determine if this validator should invalidate this form control. Return true if this should prevent submission.\n * @returns {UUIFormControlValidatorConfig} - The added validator configuration.\n */\n addValidator(\n flagKey: FlagTypes,\n getMessageMethod: () => string,\n checkMethod: () => boolean,\n ): UUIFormControlValidatorConfig {\n const validator = {\n flagKey: flagKey,\n getMessageMethod: getMessageMethod,\n checkMethod: checkMethod,\n weight: WeightedErrorFlagTypes.indexOf(flagKey),\n } satisfies UUIFormControlValidatorConfig;\n this.#validators.push(validator);\n // Sort validators based on the WeightedErrorFlagTypes order. [NL]\n this.#validators.sort((a, b) => a.weight - b.weight);\n return validator;\n }\n\n protected removeValidator(validator: UUIFormControlValidatorConfig) {\n const index = this.#validators.indexOf(validator);\n if (index !== -1) {\n this.#validators.splice(index, 1);\n }\n }\n\n readonly #runValidatorsCallback = () => this._runValidators();\n\n /**\n * @method addFormControlElement\n * @description Important notice if adding a native form control then ensure that its value and thereby validity is updated when value is changed from the outside.\n * @param element {NativeFormControlElement} - element to validate and include as part of this form association.\n */\n protected addFormControlElement(element: NativeFormControlElement) {\n if (!element) {\n throw new Error('Element is null or undefined');\n }\n if (!element.validity) {\n throw new Error('Element is not a Form Control');\n }\n if (this.#formCtrlElements.includes(element)) return;\n this.#formCtrlElements.push(element);\n element.addEventListener(\n UUIFormControlEvent.INVALID,\n this.#runValidatorsCallback,\n );\n element.addEventListener(\n UUIFormControlEvent.VALID,\n this.#runValidatorsCallback,\n );\n // If we are in validationMode/'touched'/not-pristine then we need to validate this newly added control. [NL]\n if (this._pristine === false) {\n element.checkValidity();\n // I think we could just execute validators for the new control, but now lets just run al of it again. [NL]\n this._runValidators();\n }\n }\n\n /**\n * @function removeFormControlElement\n * @param {NativeFormControlElement} element - element to remove as part of this form controls associated controls.\n * @returns {void}\n */\n protected removeFormControlElement(element: NativeFormControlElement) {\n const index = this.#formCtrlElements.indexOf(element);\n if (index !== -1) {\n this.#formCtrlElements.splice(index, 1);\n element.removeEventListener(\n UUIFormControlEvent.INVALID,\n this.#runValidatorsCallback,\n );\n element.removeEventListener(\n UUIFormControlEvent.VALID,\n this.#runValidatorsCallback,\n );\n if (this._pristine === false) {\n this._runValidators();\n }\n }\n }\n\n private _customValidityObject?: UUIFormControlValidatorConfig;\n\n /**\n * @method setCustomValidity\n * @description Set custom validity state, set to empty string to remove the custom message.\n * @param message {string} - The message to be shown\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity|HTMLObjectElement:setCustomValidity}\n */\n protected setCustomValidity(message: string | null) {\n if (this._customValidityObject) {\n this.removeValidator(this._customValidityObject);\n }\n\n if (message != null && message !== '') {\n this._customValidityObject = this.addValidator(\n 'customError',\n (): string => message,\n () => true,\n );\n }\n\n this._runValidators();\n }\n\n /**\n * @protected\n * @function _runValidators\n * @description Run all validators and set the validityState of this form control.\n * Run this method when you want to re-run all validators.\n * This can be relevant if you have a validators that is using values that is not triggering the Lit Updated Callback.\n * Such are mainly properties that are not declared as a Lit state and or Lit property.\n */\n protected _runValidators() {\n this.#validity = {};\n let message: string | undefined = undefined;\n let innerFormControlEl: NativeFormControlElement | undefined = undefined;\n\n // Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages) [NL]\n this.#validators.some(validator => {\n if (validator.checkMethod()) {\n this.#validity[validator.flagKey] = true;\n message = validator.getMessageMethod();\n return true;\n }\n return false;\n });\n\n if (!message) {\n // Loop through inner native form controls to adapt their validityState. [NL]\n this.#formCtrlElements.some(formCtrlEl => {\n let key: keyof ValidityState;\n for (key in formCtrlEl.validity) {\n if (key !== 'valid' && formCtrlEl.validity[key]) {\n this.#validity[key] = true;\n message = formCtrlEl.validationMessage;\n innerFormControlEl ??= formCtrlEl;\n return true;\n }\n }\n return false;\n });\n }\n\n const hasError = Object.values(this.#validity).includes(true);\n\n // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#valid\n this.#validity.valid = !hasError;\n\n // Transfer the new validityState to the ElementInternals. [NL]\n this._internals.setValidity(\n this.#validity,\n message,\n innerFormControlEl ?? this.getFormElement() ?? undefined,\n );\n\n this.#dispatchValidationState();\n }\n\n #dispatchValidationState() {\n // Do not fire validation events unless we are not pristine/'untouched'/not-in-validation-mode. [NL]\n if (this._pristine === true) return;\n if (this.#validity.valid) {\n this.dispatchEvent(new UUIFormControlEvent(UUIFormControlEvent.VALID));\n } else {\n this.dispatchEvent(\n new UUIFormControlEvent(UUIFormControlEvent.INVALID),\n );\n }\n }\n\n override updated(\n changedProperties: Map<string | number | symbol, unknown>,\n ) {\n super.updated(changedProperties);\n // If still pristine and the control has been blurred while pristine, a later value change should trigger validation (e.g. value changed after blur). [NL]\n if (this.pristine && this.#hadFocus && changedProperties.has('value')) {\n // checkValidity will set pristine to false for itself and all connected form controls and then run validators, so we skip _runValidators() below. [NL]\n this.checkValidity();\n } else {\n this._runValidators();\n }\n }\n\n readonly #onFormSubmit = () => {\n this.pristine = false;\n };\n\n public formAssociatedCallback() {\n this.#removeFormListeners();\n this.#form = this._internals.form;\n if (this.#form) {\n // This relies on the form begin a 'uui-form':\n if (this.#form.hasAttribute('submit-invalid')) {\n this.pristine = false;\n }\n this.#form.addEventListener('submit', this.#onFormSubmit);\n }\n }\n public formResetCallback() {\n this.pristine = true;\n this.#hadFocus = false;\n this.value = this.getInitialValue() ?? this.getDefaultValue();\n this.#valueOnFocus = undefined;\n }\n\n protected getDefaultValue(): DefaultValueType {\n return defaultValue as DefaultValueType;\n }\n protected getInitialValue(): ValueType | DefaultValueType {\n return this.getAttribute('value') as ValueType | DefaultValueType;\n }\n\n public checkValidity() {\n this.pristine = false;\n this._runValidators();\n\n for (const key in this.#formCtrlElements) {\n if (this.#formCtrlElements[key].checkValidity() === false) {\n return false;\n }\n }\n\n return this._internals?.checkValidity();\n }\n\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity\n public get validity(): ValidityState {\n return this.#validity;\n }\n\n get validationMessage() {\n return this._internals?.validationMessage;\n }\n }\n return UUIFormControlBaseMixinClass as unknown as HTMLElementConstructor<\n UUIFormControlBaseMixinElement<ValueType | DefaultValueType>\n > &\n T;\n};\n"],"mappings":"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"}
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
import type { LitElement } from 'lit';
|
|
2
|
-
import { type
|
|
2
|
+
import { type UUIFormControlBaseMixinElement, type UUIFormControlBaseMixinInterface } from './FormControlMixin.js';
|
|
3
3
|
type HTMLElementConstructor<T = HTMLElement> = new (...args: any[]) => T;
|
|
4
4
|
/**
|
|
5
5
|
* @internal
|
|
6
6
|
*/
|
|
7
|
-
export interface
|
|
7
|
+
export interface UUIFormControlWithBasicsMixinInterface<ValueType> extends UUIFormControlBaseMixinInterface<ValueType> {
|
|
8
|
+
/**
|
|
9
|
+
* Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.
|
|
10
|
+
*/
|
|
11
|
+
submit(): void;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* @internal
|
|
15
|
+
*/
|
|
16
|
+
export interface UUIFormControlWithBasicsMixinElement<ValueType> extends UUIFormControlBaseMixinElement<ValueType> {
|
|
8
17
|
name: string;
|
|
9
18
|
required: boolean;
|
|
10
19
|
requiredMessage: string;
|
|
@@ -23,4 +32,11 @@ export interface UUIFormControlWithBasicsMixinElement<ValueType> extends UUIForm
|
|
|
23
32
|
* @internal
|
|
24
33
|
*/
|
|
25
34
|
export declare const UUIFormControlWithBasicsMixin: <ValueType = FormDataEntryValue | FormData, T extends HTMLElementConstructor<LitElement> = typeof LitElement, DefaultValueType = undefined>(superClass: T, defaultValue?: DefaultValueType) => HTMLElementConstructor<UUIFormControlWithBasicsMixinElement<ValueType | DefaultValueType>> & T;
|
|
26
|
-
|
|
35
|
+
/**
|
|
36
|
+
* The v1 names for this mixin and its types. `UUIFormControlMixin` has the
|
|
37
|
+
* same surface as it had in v1 (`name`, `required`, `requiredMessage`,
|
|
38
|
+
* `error`, `errorMessage`, `submit()` and the built-in `valueMissing` and
|
|
39
|
+
* `customError` validators). The lean core it builds on is exported as
|
|
40
|
+
* `UUIFormControlBaseMixin`.
|
|
41
|
+
*/
|
|
42
|
+
export { UUIFormControlWithBasicsMixin as UUIFormControlMixin, type UUIFormControlWithBasicsMixinElement as UUIFormControlMixinElement, type UUIFormControlWithBasicsMixinInterface as UUIFormControlMixinInterface, };
|
|
@@ -1,62 +1,56 @@
|
|
|
1
|
-
import
|
|
1
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
|
|
2
|
+
import { UUIFormControlBaseMixin } from "./FormControlMixin.js";
|
|
2
3
|
import { property } from "lit/decorators.js";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
//#region src/internal/mixins/FormControlWithBasicsMixin.ts
|
|
5
|
+
/**
|
|
6
|
+
* The mixin allows a custom element to participate in HTML forms.
|
|
7
|
+
*
|
|
8
|
+
* @param {Object} superClass - superclass to be extended.
|
|
9
|
+
* @mixin
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
var UUIFormControlWithBasicsMixin = (superClass, defaultValue) => {
|
|
13
|
+
/**
|
|
14
|
+
* @internal
|
|
15
|
+
*/
|
|
16
|
+
class UUIFormControlWithBasicsMixinClass extends UUIFormControlBaseMixin(superClass, defaultValue) {
|
|
17
|
+
constructor(...args) {
|
|
18
|
+
super(...args);
|
|
19
|
+
this.name = "";
|
|
20
|
+
this.required = false;
|
|
21
|
+
this.requiredMessage = "This field is required";
|
|
22
|
+
this.error = false;
|
|
23
|
+
this.errorMessage = "This field is invalid";
|
|
24
|
+
this.addValidator("valueMissing", () => this.requiredMessage, () => this.hasAttribute("required") && this.hasValue() === false);
|
|
25
|
+
this.addValidator("customError", () => this.errorMessage, () => this.error);
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.
|
|
29
|
+
*/
|
|
30
|
+
submit() {
|
|
31
|
+
this._internals.form?.requestSubmit();
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
__decorate([property({ type: String })], UUIFormControlWithBasicsMixinClass.prototype, "name", void 0);
|
|
35
|
+
__decorate([property({
|
|
36
|
+
type: Boolean,
|
|
37
|
+
reflect: true
|
|
38
|
+
})], UUIFormControlWithBasicsMixinClass.prototype, "required", void 0);
|
|
39
|
+
__decorate([property({
|
|
40
|
+
type: String,
|
|
41
|
+
attribute: "required-message"
|
|
42
|
+
})], UUIFormControlWithBasicsMixinClass.prototype, "requiredMessage", void 0);
|
|
43
|
+
__decorate([property({
|
|
44
|
+
type: Boolean,
|
|
45
|
+
reflect: true
|
|
46
|
+
})], UUIFormControlWithBasicsMixinClass.prototype, "error", void 0);
|
|
47
|
+
__decorate([property({
|
|
48
|
+
type: String,
|
|
49
|
+
attribute: "error-message"
|
|
50
|
+
})], UUIFormControlWithBasicsMixinClass.prototype, "errorMessage", void 0);
|
|
51
|
+
return UUIFormControlWithBasicsMixinClass;
|
|
11
52
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
) {
|
|
17
|
-
constructor(...args) {
|
|
18
|
-
super(...args);
|
|
19
|
-
this.name = "";
|
|
20
|
-
this.required = false;
|
|
21
|
-
this.requiredMessage = "This field is required";
|
|
22
|
-
this.error = false;
|
|
23
|
-
this.errorMessage = "This field is invalid";
|
|
24
|
-
this.addValidator(
|
|
25
|
-
"valueMissing",
|
|
26
|
-
() => this.requiredMessage,
|
|
27
|
-
() => this.hasAttribute("required") && this.hasValue() === false
|
|
28
|
-
);
|
|
29
|
-
this.addValidator(
|
|
30
|
-
"customError",
|
|
31
|
-
() => this.errorMessage,
|
|
32
|
-
() => this.error
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.
|
|
37
|
-
*/
|
|
38
|
-
submit() {
|
|
39
|
-
this._internals.form?.requestSubmit();
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
__decorateClass([
|
|
43
|
-
property({ type: String })
|
|
44
|
-
], UUIFormControlWithBasicsMixinClass.prototype, "name");
|
|
45
|
-
__decorateClass([
|
|
46
|
-
property({ type: Boolean, reflect: true })
|
|
47
|
-
], UUIFormControlWithBasicsMixinClass.prototype, "required");
|
|
48
|
-
__decorateClass([
|
|
49
|
-
property({ type: String, attribute: "required-message" })
|
|
50
|
-
], UUIFormControlWithBasicsMixinClass.prototype, "requiredMessage");
|
|
51
|
-
__decorateClass([
|
|
52
|
-
property({ type: Boolean, reflect: true })
|
|
53
|
-
], UUIFormControlWithBasicsMixinClass.prototype, "error");
|
|
54
|
-
__decorateClass([
|
|
55
|
-
property({ type: String, attribute: "error-message" })
|
|
56
|
-
], UUIFormControlWithBasicsMixinClass.prototype, "errorMessage");
|
|
57
|
-
return UUIFormControlWithBasicsMixinClass;
|
|
58
|
-
};
|
|
59
|
-
export {
|
|
60
|
-
UUIFormControlWithBasicsMixin
|
|
61
|
-
};
|
|
62
|
-
//# sourceMappingURL=FormControlWithBasicsMixin.js.map
|
|
53
|
+
//#endregion
|
|
54
|
+
export { UUIFormControlWithBasicsMixin as UUIFormControlMixin, UUIFormControlWithBasicsMixin };
|
|
55
|
+
|
|
56
|
+
//# sourceMappingURL=FormControlWithBasicsMixin.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormControlWithBasicsMixin.js","sources":["../../../src/internal/mixins/FormControlWithBasicsMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit';\nimport {\n
|
|
1
|
+
{"version":3,"file":"FormControlWithBasicsMixin.js","names":[],"sources":["../../../src/internal/mixins/FormControlWithBasicsMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit';\nimport {\n UUIFormControlBaseMixin,\n type UUIFormControlBaseMixinElement,\n type UUIFormControlBaseMixinInterface,\n} from './FormControlMixin.js';\nimport { property } from 'lit/decorators.js';\n\ntype HTMLElementConstructor<T = HTMLElement> = new (...args: any[]) => T;\n\n/**\n * @internal\n */\nexport interface UUIFormControlWithBasicsMixinInterface<\n ValueType,\n> extends UUIFormControlBaseMixinInterface<ValueType> {\n /**\n * Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.\n */\n submit(): void;\n}\n\n/**\n * @internal\n */\nexport interface UUIFormControlWithBasicsMixinElement<\n ValueType,\n> extends UUIFormControlBaseMixinElement<ValueType> {\n name: string;\n required: boolean;\n requiredMessage: string;\n error: boolean;\n errorMessage: string;\n /**\n * Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.\n */\n submit(): void;\n}\n/**\n * The mixin allows a custom element to participate in HTML forms.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n * @internal\n */\nexport const UUIFormControlWithBasicsMixin = <\n ValueType = FormDataEntryValue | FormData,\n T extends HTMLElementConstructor<LitElement> = typeof LitElement,\n DefaultValueType = undefined,\n>(\n superClass: T,\n defaultValue?: DefaultValueType,\n) => {\n /**\n * @internal\n */\n abstract class UUIFormControlWithBasicsMixinClass\n extends UUIFormControlBaseMixin<ValueType, T, DefaultValueType>(\n superClass,\n defaultValue,\n )\n implements\n UUIFormControlWithBasicsMixinElement<ValueType | DefaultValueType>\n {\n /**\n * This is a name property of the component.\n * @type {string}\n * @attr\n * @default ''\n */\n @property({ type: String })\n name = '';\n\n /**\n * Apply validation rule for requiring a value of this form control.\n * @attr\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Required validation message.\n * @attr\n */\n @property({ type: String, attribute: 'required-message' })\n requiredMessage = 'This field is required';\n\n /**\n * Apply custom error on this input.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n error = false;\n\n /**\n * Custom error message.\n * @attr\n */\n @property({ type: String, attribute: 'error-message' })\n errorMessage = 'This field is invalid';\n\n constructor(...args: unknown[]) {\n super(...args);\n\n this.addValidator(\n 'valueMissing',\n () => this.requiredMessage,\n () => this.hasAttribute('required') && this.hasValue() === false,\n );\n this.addValidator(\n 'customError',\n () => this.errorMessage,\n () => this.error,\n );\n }\n\n /**\n * Submits the form that this element is a part of. If the element is not part of a form, or if the form has no submit button, this method does nothing.\n */\n submit() {\n this._internals.form?.requestSubmit();\n }\n }\n\n return UUIFormControlWithBasicsMixinClass as unknown as HTMLElementConstructor<\n UUIFormControlWithBasicsMixinElement<ValueType | DefaultValueType>\n > &\n T;\n};\n\n/**\n * The v1 names for this mixin and its types. `UUIFormControlMixin` has the\n * same surface as it had in v1 (`name`, `required`, `requiredMessage`,\n * `error`, `errorMessage`, `submit()` and the built-in `valueMissing` and\n * `customError` validators). The lean core it builds on is exported as\n * `UUIFormControlBaseMixin`.\n */\nexport {\n UUIFormControlWithBasicsMixin as UUIFormControlMixin,\n type UUIFormControlWithBasicsMixinElement as UUIFormControlMixinElement,\n type UUIFormControlWithBasicsMixinInterface as UUIFormControlMixinInterface,\n};\n"],"mappings":";;;;;;;;;;;AA6CA,IAAa,iCAKX,YACA,iBACG;;;;CAIH,MAAe,2CACL,wBACN,YACA,YACF,CAAC,CAGH;EAuCE,YAAY,GAAG,MAAiB;GAC9B,MAAM,GAAG,IAAI;eAhCR;mBAQI;0BAOO;gBAOV;uBAOO;GAKb,KAAK,aACH,sBACM,KAAK,uBACL,KAAK,aAAa,UAAU,KAAK,KAAK,SAAS,MAAM,KAC7D;GACA,KAAK,aACH,qBACM,KAAK,oBACL,KAAK,KACb;EACF;;;;EAKA,SAAS;GACP,KAAK,WAAW,MAAM,cAAc;EACtC;CACF;aArDG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mCAAA,WAAA,QAAA,KAAA,CAAA;aAQzB,SAAS;EAAE,MAAM;EAAS,SAAS;CAAK,CAAC,CAAA,GAAA,mCAAA,WAAA,YAAA,KAAA,CAAA;aAOzC,SAAS;EAAE,MAAM;EAAQ,WAAW;CAAmB,CAAC,CAAA,GAAA,mCAAA,WAAA,mBAAA,KAAA,CAAA;aAOxD,SAAS;EAAE,MAAM;EAAS,SAAS;CAAK,CAAC,CAAA,GAAA,mCAAA,WAAA,SAAA,KAAA,CAAA;aAOzC,SAAS;EAAE,MAAM;EAAQ,WAAW;CAAgB,CAAC,CAAA,GAAA,mCAAA,WAAA,gBAAA,KAAA,CAAA;CA0BxD,OAAO;AAIT"}
|
|
@@ -1,49 +1,50 @@
|
|
|
1
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
|
|
1
2
|
import { html } from "lit";
|
|
2
3
|
import { property, state } from "lit/decorators.js";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
4
|
+
//#region src/internal/mixins/LabelMixin.ts
|
|
5
|
+
/**
|
|
6
|
+
* This mixin provides label functionality to other components. In the mixed component the label can be provided either via reactive label property, or through slot that this mixin contains. You can style the label template through .label selector.
|
|
7
|
+
*
|
|
8
|
+
* @param {string} labelSlotName - Name that will be assigned for the label slot
|
|
9
|
+
* @param {Object} superClass - superclass to be extended.
|
|
10
|
+
* @mixin
|
|
11
|
+
*/
|
|
12
|
+
var LabelMixin = (labelSlotName, superClass) => {
|
|
13
|
+
/**
|
|
14
|
+
* Label mixin class containing the label functionality.
|
|
15
|
+
*/
|
|
16
|
+
class UUILabelMixinClass extends superClass {
|
|
17
|
+
constructor(..._args) {
|
|
18
|
+
super(..._args);
|
|
19
|
+
this._labelSlotHasContent = false;
|
|
20
|
+
}
|
|
21
|
+
connectedCallback() {
|
|
22
|
+
super.connectedCallback();
|
|
23
|
+
this._ariaObserver = new MutationObserver(() => this.requestUpdate());
|
|
24
|
+
this._ariaObserver.observe(this, {
|
|
25
|
+
attributes: true,
|
|
26
|
+
attributeFilter: ["aria-label", "aria-labelledby"]
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
disconnectedCallback() {
|
|
30
|
+
super.disconnectedCallback();
|
|
31
|
+
this._ariaObserver?.disconnect();
|
|
32
|
+
this._ariaObserver = void 0;
|
|
33
|
+
}
|
|
34
|
+
firstUpdated(_changedProperties) {
|
|
35
|
+
super.firstUpdated(_changedProperties);
|
|
36
|
+
if (!this.label && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby")) console.warn(this.tagName + " needs a `label`", this);
|
|
37
|
+
}
|
|
38
|
+
labelSlotChanged(e) {
|
|
39
|
+
this._labelSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Call in the mixed element to render the label template. It contains a slot. This is optional.
|
|
43
|
+
* @method renderLabel
|
|
44
|
+
* @returns {TemplateResult}
|
|
45
|
+
*/
|
|
46
|
+
renderLabel() {
|
|
47
|
+
return html`
|
|
47
48
|
${this._labelSlotHasContent === false ? html`<span class="label">${this.label}</span>` : ""}
|
|
48
49
|
<slot
|
|
49
50
|
class="label"
|
|
@@ -51,17 +52,13 @@ const LabelMixin = (labelSlotName, superClass) => {
|
|
|
51
52
|
name=${labelSlotName || ""}
|
|
52
53
|
@slotchange=${this.labelSlotChanged}></slot>
|
|
53
54
|
`;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
__decorateClass([
|
|
60
|
-
state()
|
|
61
|
-
], UUILabelMixinClass.prototype, "_labelSlotHasContent");
|
|
62
|
-
return UUILabelMixinClass;
|
|
63
|
-
};
|
|
64
|
-
export {
|
|
65
|
-
LabelMixin
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
__decorate([property({ type: String })], UUILabelMixinClass.prototype, "label", void 0);
|
|
58
|
+
__decorate([state()], UUILabelMixinClass.prototype, "_labelSlotHasContent", void 0);
|
|
59
|
+
return UUILabelMixinClass;
|
|
66
60
|
};
|
|
67
|
-
//#
|
|
61
|
+
//#endregion
|
|
62
|
+
export { LabelMixin };
|
|
63
|
+
|
|
64
|
+
//# sourceMappingURL=LabelMixin.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabelMixin.js","sources":["../../../src/internal/mixins/LabelMixin.ts"],"sourcesContent":["import type { LitElement, TemplateResult } from 'lit';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUILabelMixinInterface {\n /**\n * Label to be used for aria-label and potentially as visual label for some components\n * @type {string}\n * @prop\n * @attr\n */\n label: string;\n protected renderLabel(): TemplateResult;\n}\n\n/**\n * This mixin provides label functionality to other components. In the mixed component the label can be provided either via reactive label property, or through slot that this mixin contains. You can style the label template through .label selector.\n *\n * @param {string} labelSlotName - Name that will be assigned for the label slot\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const LabelMixin = <T extends Constructor<LitElement>>(\n labelSlotName: string | null,\n superClass: T,\n) => {\n /**\n * Label mixin class containing the label functionality.\n */\n class UUILabelMixinClass extends superClass {\n /**\n * Label to be used for aria-label and potentially as visual label for some components\n * @type {string}\n * @attr\n */\n @property({ type: String })\n public label!: string;\n\n private _ariaObserver: MutationObserver | undefined;\n\n connectedCallback() {\n super.connectedCallback();\n this._ariaObserver = new MutationObserver(() => this.requestUpdate());\n this._ariaObserver.observe(this, {\n attributes: true,\n attributeFilter: ['aria-label', 'aria-labelledby'],\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._ariaObserver?.disconnect();\n this._ariaObserver = undefined;\n }\n\n firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {\n super.firstUpdated(_changedProperties);\n if (\n !this.label &&\n !this.getAttribute('aria-label') &&\n !this.getAttribute('aria-labelledby')\n ) {\n console.warn(this.tagName + ' needs a `label`', this);\n }\n }\n\n @state()\n private _labelSlotHasContent = false;\n\n private labelSlotChanged(e: Event): void {\n this._labelSlotHasContent =\n (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length >\n 0;\n }\n\n /**\n * Call in the mixed element to render the label template. It contains a slot. This is optional.\n * @method renderLabel\n * @returns {TemplateResult}\n */\n protected renderLabel() {\n return html`\n ${this._labelSlotHasContent === false\n ? html`<span class=\"label\">${this.label}</span>`\n : ''}\n <slot\n class=\"label\"\n style=${this._labelSlotHasContent ? '' : 'display: none'}\n name=${labelSlotName || ''}\n @slotchange=${this.labelSlotChanged}></slot>\n `;\n }\n }\n return UUILabelMixinClass as unknown as Constructor<UUILabelMixinInterface> &\n T;\n};\n"],"
|
|
1
|
+
{"version":3,"file":"LabelMixin.js","names":[],"sources":["../../../src/internal/mixins/LabelMixin.ts"],"sourcesContent":["import type { LitElement, TemplateResult } from 'lit';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUILabelMixinInterface {\n /**\n * Label to be used for aria-label and potentially as visual label for some components\n * @type {string}\n * @prop\n * @attr\n */\n label: string;\n protected renderLabel(): TemplateResult;\n}\n\n/**\n * This mixin provides label functionality to other components. In the mixed component the label can be provided either via reactive label property, or through slot that this mixin contains. You can style the label template through .label selector.\n *\n * @param {string} labelSlotName - Name that will be assigned for the label slot\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const LabelMixin = <T extends Constructor<LitElement>>(\n labelSlotName: string | null,\n superClass: T,\n) => {\n /**\n * Label mixin class containing the label functionality.\n */\n class UUILabelMixinClass extends superClass {\n /**\n * Label to be used for aria-label and potentially as visual label for some components\n * @type {string}\n * @attr\n */\n @property({ type: String })\n public label!: string;\n\n private _ariaObserver: MutationObserver | undefined;\n\n connectedCallback() {\n super.connectedCallback();\n this._ariaObserver = new MutationObserver(() => this.requestUpdate());\n this._ariaObserver.observe(this, {\n attributes: true,\n attributeFilter: ['aria-label', 'aria-labelledby'],\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._ariaObserver?.disconnect();\n this._ariaObserver = undefined;\n }\n\n firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {\n super.firstUpdated(_changedProperties);\n if (\n !this.label &&\n !this.getAttribute('aria-label') &&\n !this.getAttribute('aria-labelledby')\n ) {\n console.warn(this.tagName + ' needs a `label`', this);\n }\n }\n\n @state()\n private _labelSlotHasContent = false;\n\n private labelSlotChanged(e: Event): void {\n this._labelSlotHasContent =\n (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length >\n 0;\n }\n\n /**\n * Call in the mixed element to render the label template. It contains a slot. This is optional.\n * @method renderLabel\n * @returns {TemplateResult}\n */\n protected renderLabel() {\n return html`\n ${this._labelSlotHasContent === false\n ? html`<span class=\"label\">${this.label}</span>`\n : ''}\n <slot\n class=\"label\"\n style=${this._labelSlotHasContent ? '' : 'display: none'}\n name=${labelSlotName || ''}\n @slotchange=${this.labelSlotChanged}></slot>\n `;\n }\n }\n return UUILabelMixinClass as unknown as Constructor<UUILabelMixinInterface> &\n T;\n};\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,cACX,eACA,eACG;;;;CAIH,MAAM,2BAA2B,WAAW;;;+BAsCX;;EA3B/B,oBAAoB;GAClB,MAAM,kBAAkB;GACxB,KAAK,gBAAgB,IAAI,uBAAuB,KAAK,cAAc,CAAC;GACpE,KAAK,cAAc,QAAQ,MAAM;IAC/B,YAAY;IACZ,iBAAiB,CAAC,cAAc,iBAAiB;GACnD,CAAC;EACH;EAEA,uBAAuB;GACrB,MAAM,qBAAqB;GAC3B,KAAK,eAAe,WAAW;GAC/B,KAAK,gBAAgB,KAAA;EACvB;EAEA,aAAa,oBAA4D;GACvE,MAAM,aAAa,kBAAkB;GACrC,IACE,CAAC,KAAK,SACN,CAAC,KAAK,aAAa,YAAY,KAC/B,CAAC,KAAK,aAAa,iBAAiB,GAEpC,QAAQ,KAAK,KAAK,UAAU,oBAAoB,IAAI;EAExD;EAKA,iBAAyB,GAAgB;GACvC,KAAK,uBACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,SAC/D;EACJ;;;;;;EAOA,cAAwB;GACtB,OAAO,IAAI;UACP,KAAK,yBAAyB,QAC5B,IAAI,uBAAuB,KAAK,MAAM,WACtC,GAAG;;;kBAGG,KAAK,uBAAuB,KAAK,gBAAgB;iBAClD,iBAAiB,GAAG;wBACb,KAAK,iBAAiB;;EAE1C;CACF;aAzDG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,SAAA,KAAA,CAAA;aA+BzB,MAAM,CAAA,GAAA,mBAAA,WAAA,wBAAA,KAAA,CAAA;CA2BT,OAAO;AAET"}
|
|
@@ -1,49 +1,45 @@
|
|
|
1
|
-
import
|
|
1
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
|
|
2
2
|
import { findAncestorByAttributeValue } from "../utils/findAncestorByAttributeValue.js";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
__decorateClass([
|
|
42
|
-
property({ type: String, attribute: "popovertarget" })
|
|
43
|
-
], UUIPopoverTargetMixinClass.prototype, "popoverContainerElement");
|
|
44
|
-
return UUIPopoverTargetMixinClass;
|
|
45
|
-
};
|
|
46
|
-
export {
|
|
47
|
-
PopoverTargetMixin
|
|
3
|
+
import { property } from "lit/decorators.js";
|
|
4
|
+
//#region src/internal/mixins/PopoverTargetMixin.ts
|
|
5
|
+
/**
|
|
6
|
+
* This mixin provides popover target functionality to other components.
|
|
7
|
+
*
|
|
8
|
+
* @param {Object} superClass - superclass to be extended.
|
|
9
|
+
* @mixin
|
|
10
|
+
*/
|
|
11
|
+
var PopoverTargetMixin = (superClass) => {
|
|
12
|
+
/**
|
|
13
|
+
* Popover target mixin class containing the popover target functionality.
|
|
14
|
+
*/
|
|
15
|
+
class UUIPopoverTargetMixinClass extends superClass {
|
|
16
|
+
#popoverIsOpen;
|
|
17
|
+
constructor(...args) {
|
|
18
|
+
super(...args);
|
|
19
|
+
this.#popoverIsOpen = false;
|
|
20
|
+
this._togglePopover = () => {
|
|
21
|
+
if (!this.popoverContainerElement) return;
|
|
22
|
+
const popoverContainerElement = findAncestorByAttributeValue(this, "id", this.popoverContainerElement);
|
|
23
|
+
if (!popoverContainerElement) return;
|
|
24
|
+
if (this.#popoverIsOpen) popoverContainerElement.hidePopover();
|
|
25
|
+
else popoverContainerElement.showPopover();
|
|
26
|
+
};
|
|
27
|
+
this.#popoverListener = (event) => {
|
|
28
|
+
requestAnimationFrame(() => {
|
|
29
|
+
this.#popoverIsOpen = event.detail.newState === "open";
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
this.addEventListener("uui-popover-before-toggle", this.#popoverListener);
|
|
33
|
+
}
|
|
34
|
+
#popoverListener;
|
|
35
|
+
}
|
|
36
|
+
__decorate([property({
|
|
37
|
+
type: String,
|
|
38
|
+
attribute: "popovertarget"
|
|
39
|
+
})], UUIPopoverTargetMixinClass.prototype, "popoverContainerElement", void 0);
|
|
40
|
+
return UUIPopoverTargetMixinClass;
|
|
48
41
|
};
|
|
49
|
-
//#
|
|
42
|
+
//#endregion
|
|
43
|
+
export { PopoverTargetMixin };
|
|
44
|
+
|
|
45
|
+
//# sourceMappingURL=PopoverTargetMixin.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverTargetMixin.js","sources":["../../../src/internal/mixins/PopoverTargetMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { findAncestorByAttributeValue } from '../utils/index.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUIPopoverTargetMixinInterface {\n /**\n * Set a popovertarget.\n * @type {string}\n * @attr\n * @default undefined\n */\n public popoverContainerElement?: string;\n\n /**\n * Toggle the popover.\n */\n protected _togglePopover(): void;\n}\n\n/**\n * This mixin provides popover target functionality to other components.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const PopoverTargetMixin = <T extends Constructor<LitElement>>(\n superClass: T,\n) => {\n /**\n * Popover target mixin class containing the popover target functionality.\n */\n class UUIPopoverTargetMixinClass extends superClass {\n /**\n * Set a popovertarget.\n * @type {string}\n * @attr\n * @default undefined\n */\n @property({ type: String, attribute: 'popovertarget' })\n public popoverContainerElement?: string;\n\n #popoverIsOpen = false;\n\n constructor(...args: any[]) {\n super(...args);\n this.addEventListener('uui-popover-before-toggle', this.#popoverListener);\n }\n\n protected _togglePopover = () => {\n if (!this.popoverContainerElement) return;\n\n const popoverContainerElement = findAncestorByAttributeValue(\n this,\n 'id',\n this.popoverContainerElement,\n );\n if (!popoverContainerElement) return;\n\n if (this.#popoverIsOpen) {\n popoverContainerElement.hidePopover();\n } else {\n popoverContainerElement.showPopover();\n }\n };\n\n readonly #popoverListener = (event: any) => {\n // Wait for the click event to finish before updating the popover state\n requestAnimationFrame(() => {\n this.#popoverIsOpen = event.detail.newState === 'open';\n });\n };\n }\n return UUIPopoverTargetMixinClass as unknown as Constructor<UUIPopoverTargetMixinInterface> &\n T;\n};\n"],"
|
|
1
|
+
{"version":3,"file":"PopoverTargetMixin.js","names":["#popoverIsOpen","#popoverListener"],"sources":["../../../src/internal/mixins/PopoverTargetMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { findAncestorByAttributeValue } from '../utils/index.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nexport declare class UUIPopoverTargetMixinInterface {\n /**\n * Set a popovertarget.\n * @type {string}\n * @attr\n * @default undefined\n */\n public popoverContainerElement?: string;\n\n /**\n * Toggle the popover.\n */\n protected _togglePopover(): void;\n}\n\n/**\n * This mixin provides popover target functionality to other components.\n *\n * @param {Object} superClass - superclass to be extended.\n * @mixin\n */\nexport const PopoverTargetMixin = <T extends Constructor<LitElement>>(\n superClass: T,\n) => {\n /**\n * Popover target mixin class containing the popover target functionality.\n */\n class UUIPopoverTargetMixinClass extends superClass {\n /**\n * Set a popovertarget.\n * @type {string}\n * @attr\n * @default undefined\n */\n @property({ type: String, attribute: 'popovertarget' })\n public popoverContainerElement?: string;\n\n #popoverIsOpen = false;\n\n constructor(...args: any[]) {\n super(...args);\n this.addEventListener('uui-popover-before-toggle', this.#popoverListener);\n }\n\n protected _togglePopover = () => {\n if (!this.popoverContainerElement) return;\n\n const popoverContainerElement = findAncestorByAttributeValue(\n this,\n 'id',\n this.popoverContainerElement,\n );\n if (!popoverContainerElement) return;\n\n if (this.#popoverIsOpen) {\n popoverContainerElement.hidePopover();\n } else {\n popoverContainerElement.showPopover();\n }\n };\n\n readonly #popoverListener = (event: any) => {\n // Wait for the click event to finish before updating the popover state\n requestAnimationFrame(() => {\n this.#popoverIsOpen = event.detail.newState === 'open';\n });\n };\n }\n return UUIPopoverTargetMixinClass as unknown as Constructor<UUIPopoverTargetMixinInterface> &\n T;\n};\n"],"mappings":";;;;;;;;;;AA2BA,IAAa,sBACX,eACG;;;;CAIH,MAAM,mCAAmC,WAAW;EAUlD;EAEA,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;yBAHE;+BAOgB;IAC/B,IAAI,CAAC,KAAK,yBAAyB;IAEnC,MAAM,0BAA0B,6BAC9B,MACA,MACA,KAAK,uBACP;IACA,IAAI,CAAC,yBAAyB;IAE9B,IAAI,KAAKA,gBACP,wBAAwB,YAAY;SAEpC,wBAAwB,YAAY;GAExC;4BAE6B,UAAe;IAE1C,4BAA4B;KAC1B,KAAKA,iBAAiB,MAAM,OAAO,aAAa;IAClD,CAAC;GACH;GAzBE,KAAK,iBAAiB,6BAA6B,KAAKC,gBAAgB;EAC1E;EAmBA;CAMF;aAjCG,SAAS;EAAE,MAAM;EAAQ,WAAW;CAAgB,CAAC,CAAA,GAAA,2BAAA,WAAA,2BAAA,KAAA,CAAA;CAkCxD,OAAO;AAET"}
|
|
@@ -1,35 +1,41 @@
|
|
|
1
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
|
|
1
2
|
import { property } from "lit/decorators.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
//#region src/internal/mixins/SelectOnlyMixin.ts
|
|
4
|
+
/**
|
|
5
|
+
* This mixin partly provides the select-only functionality.
|
|
6
|
+
* Each component still need to implement its own code for disabling interaction when select only is active.
|
|
7
|
+
*
|
|
8
|
+
* @param {Object} superClass - superclass to be extended.
|
|
9
|
+
* @mixin
|
|
10
|
+
*/
|
|
11
|
+
var SelectOnlyMixin = (superClass) => {
|
|
12
|
+
class UUISelectOnlyMixinClass extends superClass {
|
|
13
|
+
constructor(..._args) {
|
|
14
|
+
super(..._args);
|
|
15
|
+
this._selectOnly = false;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.
|
|
19
|
+
* @attr
|
|
20
|
+
* @type boolean
|
|
21
|
+
*/
|
|
22
|
+
get selectOnly() {
|
|
23
|
+
return this._selectOnly;
|
|
24
|
+
}
|
|
25
|
+
set selectOnly(newVal) {
|
|
26
|
+
const oldVal = this._selectOnly;
|
|
27
|
+
this._selectOnly = newVal;
|
|
28
|
+
this.requestUpdate("selectOnly", oldVal);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
__decorate([property({
|
|
32
|
+
type: Boolean,
|
|
33
|
+
reflect: true,
|
|
34
|
+
attribute: "select-only"
|
|
35
|
+
})], UUISelectOnlyMixinClass.prototype, "selectOnly", null);
|
|
36
|
+
return UUISelectOnlyMixinClass;
|
|
11
37
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
this._selectOnly = false;
|
|
17
|
-
}
|
|
18
|
-
get selectOnly() {
|
|
19
|
-
return this._selectOnly;
|
|
20
|
-
}
|
|
21
|
-
set selectOnly(newVal) {
|
|
22
|
-
const oldVal = this._selectOnly;
|
|
23
|
-
this._selectOnly = newVal;
|
|
24
|
-
this.requestUpdate("selectOnly", oldVal);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
__decorateClass([
|
|
28
|
-
property({ type: Boolean, reflect: true, attribute: "select-only" })
|
|
29
|
-
], UUISelectOnlyMixinClass.prototype, "selectOnly");
|
|
30
|
-
return UUISelectOnlyMixinClass;
|
|
31
|
-
};
|
|
32
|
-
export {
|
|
33
|
-
SelectOnlyMixin
|
|
34
|
-
};
|
|
35
|
-
//# sourceMappingURL=SelectOnlyMixin.js.map
|
|
38
|
+
//#endregion
|
|
39
|
+
export { SelectOnlyMixin };
|
|
40
|
+
|
|
41
|
+
//# sourceMappingURL=SelectOnlyMixin.js.map
|