@lion/ui 0.20.0-menu-system.0 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/calendar-suites.js +1 -0
- package/collapsible.js +0 -1
- package/components/button/src/LionButton.js +0 -4
- package/components/button/test-suites/LionButton.suite.js +0 -1
- package/components/calendar/src/LionCalendar.js +1 -3
- package/components/calendar/test/lion-calendar.test.js +67 -47
- package/components/calendar/test-suites/LionCalendar.suite.js +79 -0
- package/components/combobox/test/lion-combobox.test.js +0 -1
- package/components/form-core/src/FormatMixin.js +7 -2
- package/components/form-core/src/form-group/FormGroupMixin.js +0 -7
- package/components/form-core/src/registration/FormRegistrarMixin.js +0 -11
- package/components/form-core/test/FormControlMixin.test.js +0 -1
- package/components/form-core/test/FormatMixin.test.js +4 -1
- package/components/form-core/test/validate/Validator.test.js +0 -2
- package/components/form-core/test-suites/FormatMixin.suite.js +242 -65
- package/components/form-core/test-suites/ValidateMixin.suite.js +0 -2
- package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js +0 -1
- package/components/input/test/input-integrations.test.js +3 -2
- package/components/input/test/lion-input-integrations.test.js +2 -1
- package/components/input-amount/test/lion-input-amount-integrations.test.js +1 -1
- package/components/input-amount-dropdown/src/LionInputAmountDropdown.js +22 -4
- package/components/input-amount-dropdown/test/lion-input-amount-dropdown-integrations.test.js +22 -0
- package/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js +59 -3
- package/components/input-date/test/lion-input-date-integrations.test.js +1 -1
- package/components/input-datepicker/src/localizeNamespaceLoader.js +0 -1
- package/components/input-datepicker/test/lion-input-datepicker-integrations.test.js +1 -1
- package/components/input-datepicker/test/lion-input-datepicker.test.js +19 -9
- package/components/input-datepicker/test-suites/LionInputDatepicker.suite.js +35 -0
- package/components/input-email/src/LionInputEmail.js +2 -0
- package/components/input-email/test/lion-input-email-integrations.test.js +1 -1
- package/components/input-email/test/lion-input-email.test.js +6 -0
- package/components/input-file/src/validators.js +31 -1
- package/components/input-file/test/FileValidators.test.js +31 -0
- package/components/input-file/translations/bg.js +1 -0
- package/components/input-file/translations/cs.js +1 -0
- package/components/input-file/translations/de.js +2 -0
- package/components/input-file/translations/en.js +1 -0
- package/components/input-file/translations/es.js +1 -0
- package/components/input-file/translations/fr.js +1 -0
- package/components/input-file/translations/hu.js +1 -0
- package/components/input-file/translations/id.js +1 -0
- package/components/input-file/translations/it.js +1 -0
- package/components/input-file/translations/nl.js +1 -0
- package/components/input-file/translations/pl.js +1 -0
- package/components/input-file/translations/ro.js +1 -0
- package/components/input-file/translations/ru.js +1 -0
- package/components/input-file/translations/sk.js +1 -0
- package/components/input-file/translations/uk.js +1 -0
- package/components/input-file/translations/zh.js +1 -0
- package/components/input-iban/test/lion-input-iban-integrations.test.js +1 -1
- package/components/input-stepper/test-suites/lion-input-stepper.integration.suite.js +2 -2
- package/components/input-tel/src/LionInputTel.js +1 -1
- package/components/input-tel/test-suites/LionInputTel.suite.js +7 -0
- package/components/localize/test/date/formatDate.test.js +0 -1
- package/components/overlays/src/OverlayController.js +110 -278
- package/components/overlays/src/OverlayMixin.js +11 -58
- package/components/overlays/src/OverlaysManager.js +2 -2
- package/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js +41 -9
- package/components/overlays/src/utils/adopt-styles.js +2 -3
- package/components/overlays/src/utils/get-focusable-elements.js +0 -4
- package/components/overlays/src/utils/is-equal-config.js +6 -10
- package/components/overlays/test/OverlayController.test.js +14 -127
- package/components/overlays/test/utils-tests/is-equal-config.test.js +1 -1
- package/components/overlays/test-suites/OverlayMixin.suite.js +8 -8
- package/components/overlays/test-suites/WithHoverInteraction.suite.js +212 -0
- package/components/overlays/types/ArrowMixinTypes.ts +1 -3
- package/components/overlays/types/OverlayConfig.ts +5 -20
- package/components/overlays/types/OverlayMixinTypes.ts +0 -2
- package/components/select-rich/test/lion-select-rich.test.js +0 -3
- package/components/textarea/test/lion-textarea-integrations.test.js +2 -1
- package/components/tooltip/test/lion-tooltip.test.js +9 -1
- package/custom-elements.json +18086 -30683
- package/dist-types/components/button/src/LionButton.d.ts +0 -1
- package/dist-types/components/button/src/LionButton.d.ts.map +1 -1
- package/dist-types/components/button/test-suites/LionButton.suite.d.ts.map +1 -1
- package/dist-types/components/calendar/src/LionCalendar.d.ts.map +1 -1
- package/dist-types/components/calendar/test/lion-calendar.test.d.ts.map +1 -1
- package/dist-types/components/calendar/test-suites/LionCalendar.suite.d.ts +5 -0
- package/dist-types/components/calendar/test-suites/LionCalendar.suite.d.ts.map +1 -0
- package/dist-types/components/combobox/src/LionCombobox.d.ts +1 -1
- package/dist-types/components/dialog/src/LionDialog.d.ts +2 -6
- package/dist-types/components/dialog/src/LionDialog.d.ts.map +1 -1
- package/dist-types/components/form-core/src/FormatMixin.d.ts.map +1 -1
- package/dist-types/components/form-core/src/form-group/FormGroupMixin.d.ts.map +1 -1
- package/dist-types/components/form-core/src/registration/FormRegistrarMixin.d.ts.map +1 -1
- package/dist-types/components/form-core/test-suites/FormatMixin.suite.d.ts +50 -5
- package/dist-types/components/form-core/test-suites/FormatMixin.suite.d.ts.map +1 -1
- package/dist-types/components/form-core/test-suites/ValidateMixin.suite.d.ts.map +1 -1
- package/dist-types/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.d.ts.map +1 -1
- package/dist-types/components/icon/src/LionIcon.d.ts +2 -2
- package/dist-types/components/input-amount-dropdown/src/LionInputAmountDropdown.d.ts.map +1 -1
- package/dist-types/components/input-amount-dropdown/test/lion-input-amount-dropdown-integrations.test.d.ts +2 -0
- package/dist-types/components/input-amount-dropdown/test/lion-input-amount-dropdown-integrations.test.d.ts.map +1 -0
- package/dist-types/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.d.ts.map +1 -1
- package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts +1 -1
- package/dist-types/components/input-datepicker/src/localizeNamespaceLoader.d.ts.map +1 -1
- package/dist-types/components/input-datepicker/test/lion-input-datepicker.test.d.ts.map +1 -1
- package/dist-types/components/input-datepicker/test-suites/LionInputDatepicker.suite.d.ts +7 -0
- package/dist-types/components/input-datepicker/test-suites/LionInputDatepicker.suite.d.ts.map +1 -0
- package/dist-types/components/input-email/src/LionInputEmail.d.ts.map +1 -1
- package/dist-types/components/input-file/src/validators.d.ts +11 -0
- package/dist-types/components/input-file/src/validators.d.ts.map +1 -1
- package/dist-types/components/input-file/translations/bg-BG.d.ts +1 -0
- package/dist-types/components/input-file/translations/bg.d.ts +1 -0
- package/dist-types/components/input-file/translations/cs-CZ.d.ts +1 -0
- package/dist-types/components/input-file/translations/cs.d.ts +1 -0
- package/dist-types/components/input-file/translations/de-DE.d.ts +1 -0
- package/dist-types/components/input-file/translations/de.d.ts +1 -0
- package/dist-types/components/input-file/translations/en-AU.d.ts +1 -0
- package/dist-types/components/input-file/translations/en-GB.d.ts +1 -0
- package/dist-types/components/input-file/translations/en-PH.d.ts +1 -0
- package/dist-types/components/input-file/translations/en-US.d.ts +1 -0
- package/dist-types/components/input-file/translations/en.d.ts +1 -0
- package/dist-types/components/input-file/translations/es-ES.d.ts +1 -0
- package/dist-types/components/input-file/translations/es.d.ts +1 -0
- package/dist-types/components/input-file/translations/fr-BE.d.ts +1 -0
- package/dist-types/components/input-file/translations/fr-FR.d.ts +1 -0
- package/dist-types/components/input-file/translations/fr.d.ts +1 -0
- package/dist-types/components/input-file/translations/hu-HU.d.ts +1 -0
- package/dist-types/components/input-file/translations/hu.d.ts +1 -0
- package/dist-types/components/input-file/translations/id-ID.d.ts +1 -0
- package/dist-types/components/input-file/translations/id.d.ts +1 -0
- package/dist-types/components/input-file/translations/it-IT.d.ts +1 -0
- package/dist-types/components/input-file/translations/it.d.ts +1 -0
- package/dist-types/components/input-file/translations/nl-BE.d.ts +1 -0
- package/dist-types/components/input-file/translations/nl-NL.d.ts +1 -0
- package/dist-types/components/input-file/translations/nl.d.ts +1 -0
- package/dist-types/components/input-file/translations/pl-PL.d.ts +1 -0
- package/dist-types/components/input-file/translations/pl.d.ts +1 -0
- package/dist-types/components/input-file/translations/ro-RO.d.ts +1 -0
- package/dist-types/components/input-file/translations/ro.d.ts +1 -0
- package/dist-types/components/input-file/translations/ru-RU.d.ts +1 -0
- package/dist-types/components/input-file/translations/ru.d.ts +1 -0
- package/dist-types/components/input-file/translations/sk-SK.d.ts +1 -0
- package/dist-types/components/input-file/translations/sk.d.ts +1 -0
- package/dist-types/components/input-file/translations/uk-UA.d.ts +1 -0
- package/dist-types/components/input-file/translations/uk.d.ts +1 -0
- package/dist-types/components/input-file/translations/zh-CN.d.ts +1 -0
- package/dist-types/components/input-file/translations/zh.d.ts +1 -0
- package/dist-types/components/input-tel/src/LionInputTel.d.ts.map +1 -1
- package/dist-types/components/input-tel/test-suites/LionInputTel.suite.d.ts.map +1 -1
- package/dist-types/components/overlays/src/OverlayController.d.ts +12 -24
- package/dist-types/components/overlays/src/OverlayController.d.ts.map +1 -1
- package/dist-types/components/overlays/src/OverlayMixin.d.ts.map +1 -1
- package/dist-types/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.d.ts.map +1 -1
- package/dist-types/components/overlays/src/utils/get-focusable-elements.d.ts.map +1 -1
- package/dist-types/components/overlays/src/utils/is-equal-config.d.ts.map +1 -1
- package/dist-types/components/overlays/test-suites/WithHoverInteraction.suite.d.ts +17 -0
- package/dist-types/components/overlays/test-suites/WithHoverInteraction.suite.d.ts.map +1 -0
- package/dist-types/components/overlays/types/ArrowMixinTypes.d.ts.map +1 -1
- package/dist-types/components/overlays/types/OverlayConfig.d.ts +2 -12
- package/dist-types/components/overlays/types/OverlayConfig.d.ts.map +1 -1
- package/dist-types/components/overlays/types/OverlayMixinTypes.d.ts +0 -1
- package/dist-types/components/overlays/types/OverlayMixinTypes.d.ts.map +1 -1
- package/dist-types/components/select-rich/src/LionSelectRich.d.ts +3 -11
- package/dist-types/components/select-rich/src/LionSelectRich.d.ts.map +1 -1
- package/dist-types/components/tooltip/src/LionTooltip.d.ts +1 -1
- package/dist-types/components/tooltip/test/lion-tooltip.test.d.ts.map +1 -1
- package/dist-types/exports/calendar-suites.d.ts +2 -0
- package/dist-types/exports/calendar-suites.d.ts.map +1 -0
- package/dist-types/exports/input-datepicker-suites.d.ts +2 -0
- package/dist-types/exports/input-datepicker-suites.d.ts.map +1 -0
- package/dist-types/exports/input-file.d.ts +1 -1
- package/dist-types/exports/overlays-test-suites.d.ts +1 -0
- package/dist-types/exports/overlays.d.ts +0 -3
- package/dist-types/exports/overlays.d.ts.map +1 -1
- package/dist-types/tsconfig.tsbuildinfo +1 -1
- package/docs/components/checkbox-group/overview.md +2 -2
- package/docs/components/collapsible/overview.md +1 -1
- package/docs/components/combobox/api-table.md +8 -21
- package/docs/components/combobox/overview.md +1 -1
- package/docs/components/combobox/use-cases.md +1 -1
- package/docs/components/dialog/api-table.md +6 -31
- package/docs/components/dialog/overview.md +1 -1
- package/docs/components/fieldset/overview.md +5 -5
- package/docs/components/form/overview.md +3 -3
- package/docs/components/form/use-cases.md +2 -2
- package/docs/components/icon/use-cases.md +1 -1
- package/docs/components/input/overview.md +1 -1
- package/docs/components/input-amount/overview.md +3 -3
- package/docs/components/input-amount-dropdown/api-table.md +2 -2
- package/docs/components/input-date/overview.md +3 -3
- package/docs/components/input-datepicker/api-table.md +4 -21
- package/docs/components/input-datepicker/overview.md +5 -5
- package/docs/components/input-email/api-table.md +1 -1
- package/docs/components/input-email/overview.md +2 -2
- package/docs/components/input-file/overview.md +1 -1
- package/docs/components/input-file/use-cases.md +18 -0
- package/docs/components/input-iban/overview.md +2 -2
- package/docs/components/input-range/overview.md +2 -2
- package/docs/components/input-stepper/overview.md +1 -1
- package/docs/components/input-tel/api-table.md +1 -1
- package/docs/components/input-tel/overview.md +1 -1
- package/docs/components/input-tel/use-cases.md +6 -6
- package/docs/components/input-tel-dropdown/api-table.md +1 -1
- package/docs/components/input-tel-dropdown/overview.md +1 -1
- package/docs/components/listbox/use-cases.md +1 -1
- package/docs/components/radio-group/overview.md +3 -3
- package/docs/components/select/use-cases.md +1 -1
- package/docs/components/select-rich/api-table.md +5 -21
- package/docs/components/select-rich/use-cases.md +2 -2
- package/docs/components/tabs/examples.md +1 -1
- package/docs/components/tooltip/api-table.md +11 -36
- package/docs/components/tooltip/use-cases.md +34 -1
- package/docs/fundamentals/index.md +4 -4
- package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
- package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
- package/docs/fundamentals/rationales/accessibility.md +1 -1
- package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
- package/docs/fundamentals/systems/core/overview.md +1 -1
- package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
- package/docs/fundamentals/systems/form/model-value.md +1 -1
- package/docs/fundamentals/systems/form/overview.md +28 -28
- package/docs/fundamentals/systems/form/validate.md +2 -2
- package/docs/fundamentals/systems/localize/overview.md +4 -4
- package/docs/fundamentals/systems/overlays/api-table.md +34 -36
- package/docs/fundamentals/systems/overlays/configuration.md +2 -2
- package/docs/fundamentals/systems/overlays/overview.md +5 -5
- package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
- package/docs/fundamentals/tools/helpers/overview.md +1 -1
- package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
- package/docs/guides/how-to/create-a-custom-field.md +5 -5
- package/docs/guides/how-to/create-a-form.md +4 -4
- package/docs/guides/how-to/extend-a-native-input.md +2 -2
- package/docs/guides/how-to/index.md +1 -1
- package/docs/guides/index.md +8 -8
- package/docs/guides/principles/index.md +5 -5
- package/docs/guides/principles/styling.md +1 -1
- package/exports/calendar-suites.js +1 -0
- package/exports/collapsible.js +0 -1
- package/exports/input-datepicker-suites.js +1 -0
- package/exports/input-file.js +5 -1
- package/exports/overlays-test-suites.js +1 -0
- package/exports/overlays.js +0 -6
- package/input-datepicker-suites.js +1 -0
- package/input-file.js +5 -1
- package/overlays-test-suites.js +1 -0
- package/overlays.js +0 -6
- package/package.json +2 -2
- package/components/collapsible/src/DisclosureMixin.js +0 -313
- package/components/collapsible/test-suites/DisclosureMixin.suite.js +0 -30
- package/components/collapsible/types/DisclosureMixinTypes.ts +0 -48
- package/components/menu/CHANGELOG.md +0 -37
- package/components/menu/README.md +0 -335
- package/components/menu/index.js +0 -2
- package/components/menu/lion-menu-overlay.js +0 -3
- package/components/menu/lion-menu.js +0 -3
- package/components/menu/lion-spinbutton.js +0 -3
- package/components/menu/lion-toolbar.js +0 -3
- package/components/menu/lion-tree.js +0 -3
- package/components/menu/package.json +0 -46
- package/components/menu/requirements.temp.md +0 -12
- package/components/menu/src/InteractiveListMixin.js +0 -840
- package/components/menu/src/LionMenu.js +0 -250
- package/components/menu/src/LionMenuHybrid.js +0 -46
- package/components/menu/src/LionMenuOverlay.js +0 -155
- package/components/menu/src/LionSpinbutton.js +0 -213
- package/components/menu/src/LionToolbar.js +0 -94
- package/components/menu/src/LionTree.js +0 -52
- package/components/menu/src/MoreButtonMenuMixin.js +0 -278
- package/components/menu/src/MultiLevelListMixin.js +0 -311
- package/components/menu/src/utils/isInView.js +0 -26
- package/components/menu/src/utils/listItemInteractions.js +0 -124
- package/components/menu/test/InteractiveListMixin.test.js +0 -3
- package/components/menu/test/MoreButtonMenuMixin.test.js +0 -4
- package/components/menu/test/MultiLevelListMixin.test.js +0 -3
- package/components/menu/test/lion-menu-hybrid.test.js +0 -3
- package/components/menu/test/lion-menu.test.js +0 -11
- package/components/menu/test/lion-toolbar.test.js +0 -8
- package/components/menu/test/lion-tree.test.js +0 -7
- package/components/menu/test-helpers/mimicKeyPress.js +0 -9
- package/components/menu/test-suites/InteractiveListMixin.suite.js +0 -454
- package/components/menu/test-suites/LionMenu.suite.js +0 -113
- package/components/menu/test-suites/LionMenuHybrid.suite.js +0 -583
- package/components/menu/test-suites/MoreButtonMenuMixin.suite.js +0 -372
- package/components/menu/test-suites/MultiLevelListMixin.suite.js +0 -303
- package/components/menu/types/InteractiveListMixinTypes.d.ts +0 -84
- package/components/navigation-bar/README.md +0 -1
- package/components/navigation-bar/src/LionNavigationBar.js +0 -439
- package/components/navigation-bar/src/types.js +0 -41
- package/components/overlays/NEXT.md +0 -49
- package/components/overlays/test/withHoverInteraction.test.js +0 -90
- package/dist-types/components/collapsible/src/DisclosureMixin.d.ts +0 -3
- package/dist-types/components/collapsible/src/DisclosureMixin.d.ts.map +0 -1
- package/dist-types/components/collapsible/test-suites/DisclosureMixin.suite.d.ts +0 -2
- package/dist-types/components/collapsible/test-suites/DisclosureMixin.suite.d.ts.map +0 -1
- package/dist-types/components/collapsible/types/DisclosureMixinTypes.d.ts +0 -24
- package/dist-types/components/collapsible/types/DisclosureMixinTypes.d.ts.map +0 -1
- package/dist-types/components/menu/index.d.ts +0 -3
- package/dist-types/components/menu/index.d.ts.map +0 -1
- package/dist-types/components/menu/lion-menu-overlay.d.ts +0 -2
- package/dist-types/components/menu/lion-menu-overlay.d.ts.map +0 -1
- package/dist-types/components/menu/lion-menu.d.ts +0 -2
- package/dist-types/components/menu/lion-menu.d.ts.map +0 -1
- package/dist-types/components/menu/lion-spinbutton.d.ts +0 -2
- package/dist-types/components/menu/lion-spinbutton.d.ts.map +0 -1
- package/dist-types/components/menu/lion-toolbar.d.ts +0 -2
- package/dist-types/components/menu/lion-toolbar.d.ts.map +0 -1
- package/dist-types/components/menu/lion-tree.d.ts +0 -2
- package/dist-types/components/menu/lion-tree.d.ts.map +0 -1
- package/dist-types/components/menu/src/InteractiveListMixin.d.ts +0 -617
- package/dist-types/components/menu/src/InteractiveListMixin.d.ts.map +0 -1
- package/dist-types/components/menu/src/LionMenu.d.ts +0 -635
- package/dist-types/components/menu/src/LionMenu.d.ts.map +0 -1
- package/dist-types/components/menu/src/LionMenuHybrid.d.ts +0 -19
- package/dist-types/components/menu/src/LionMenuHybrid.d.ts.map +0 -1
- package/dist-types/components/menu/src/LionMenuOverlay.d.ts +0 -1015
- package/dist-types/components/menu/src/LionMenuOverlay.d.ts.map +0 -1
- package/dist-types/components/menu/src/LionSpinbutton.d.ts +0 -58
- package/dist-types/components/menu/src/LionSpinbutton.d.ts.map +0 -1
- package/dist-types/components/menu/src/LionToolbar.d.ts +0 -8
- package/dist-types/components/menu/src/LionToolbar.d.ts.map +0 -1
- package/dist-types/components/menu/src/LionTree.d.ts +0 -447
- package/dist-types/components/menu/src/LionTree.d.ts.map +0 -1
- package/dist-types/components/menu/src/MoreButtonMenuMixin.d.ts +0 -39
- package/dist-types/components/menu/src/MoreButtonMenuMixin.d.ts.map +0 -1
- package/dist-types/components/menu/src/MultiLevelListMixin.d.ts +0 -503
- package/dist-types/components/menu/src/MultiLevelListMixin.d.ts.map +0 -1
- package/dist-types/components/menu/src/utils/isInView.d.ts +0 -9
- package/dist-types/components/menu/src/utils/isInView.d.ts.map +0 -1
- package/dist-types/components/menu/src/utils/listItemInteractions.d.ts +0 -48
- package/dist-types/components/menu/src/utils/listItemInteractions.d.ts.map +0 -1
- package/dist-types/components/menu/test/InteractiveListMixin.test.d.ts +0 -2
- package/dist-types/components/menu/test/InteractiveListMixin.test.d.ts.map +0 -1
- package/dist-types/components/menu/test/MoreButtonMenuMixin.test.d.ts +0 -2
- package/dist-types/components/menu/test/MoreButtonMenuMixin.test.d.ts.map +0 -1
- package/dist-types/components/menu/test/MultiLevelListMixin.test.d.ts +0 -2
- package/dist-types/components/menu/test/MultiLevelListMixin.test.d.ts.map +0 -1
- package/dist-types/components/menu/test/lion-menu-hybrid.test.d.ts +0 -2
- package/dist-types/components/menu/test/lion-menu-hybrid.test.d.ts.map +0 -1
- package/dist-types/components/menu/test/lion-menu.test.d.ts +0 -2
- package/dist-types/components/menu/test/lion-menu.test.d.ts.map +0 -1
- package/dist-types/components/menu/test/lion-toolbar.test.d.ts +0 -2
- package/dist-types/components/menu/test/lion-toolbar.test.d.ts.map +0 -1
- package/dist-types/components/menu/test/lion-tree.test.d.ts +0 -2
- package/dist-types/components/menu/test/lion-tree.test.d.ts.map +0 -1
- package/dist-types/components/menu/test-helpers/mimicKeyPress.d.ts +0 -7
- package/dist-types/components/menu/test-helpers/mimicKeyPress.d.ts.map +0 -1
- package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts +0 -14
- package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts.map +0 -1
- package/dist-types/components/menu/test-suites/LionMenu.suite.d.ts +0 -9
- package/dist-types/components/menu/test-suites/LionMenu.suite.d.ts.map +0 -1
- package/dist-types/components/menu/test-suites/LionMenuHybrid.suite.d.ts +0 -5
- package/dist-types/components/menu/test-suites/LionMenuHybrid.suite.d.ts.map +0 -1
- package/dist-types/components/menu/test-suites/MoreButtonMenuMixin.suite.d.ts +0 -14
- package/dist-types/components/menu/test-suites/MoreButtonMenuMixin.suite.d.ts.map +0 -1
- package/dist-types/components/menu/test-suites/MultiLevelListMixin.suite.d.ts +0 -11
- package/dist-types/components/menu/test-suites/MultiLevelListMixin.suite.d.ts.map +0 -1
- package/dist-types/components/navigation-bar/src/LionNavigationBar.d.ts +0 -238
- package/dist-types/components/navigation-bar/src/LionNavigationBar.d.ts.map +0 -1
- package/dist-types/components/navigation-bar/src/types.d.ts +0 -85
- package/dist-types/components/navigation-bar/src/types.d.ts.map +0 -1
- package/dist-types/components/overlays/test/withHoverInteraction.test.d.ts +0 -2
- package/dist-types/components/overlays/test/withHoverInteraction.test.d.ts.map +0 -1
- package/dist-types/exports/define/lion-item.d.ts +0 -2
- package/dist-types/exports/define/lion-item.d.ts.map +0 -1
- package/dist-types/exports/define/lion-menu-overlay.d.ts +0 -2
- package/dist-types/exports/define/lion-menu-overlay.d.ts.map +0 -1
- package/dist-types/exports/define/lion-menu.d.ts +0 -2
- package/dist-types/exports/define/lion-menu.d.ts.map +0 -1
- package/dist-types/exports/define/lion-navigation-bar.d.ts +0 -2
- package/dist-types/exports/define/lion-navigation-bar.d.ts.map +0 -1
- package/dist-types/exports/define/lion-toolbar.d.ts +0 -2
- package/dist-types/exports/define/lion-toolbar.d.ts.map +0 -1
- package/dist-types/exports/define/lion-tree.d.ts +0 -2
- package/dist-types/exports/define/lion-tree.d.ts.map +0 -1
- package/dist-types/exports/menu-test-suites.d.ts +0 -4
- package/dist-types/exports/menu-test-suites.d.ts.map +0 -1
- package/dist-types/exports/menu.d.ts +0 -7
- package/dist-types/exports/menu.d.ts.map +0 -1
- package/dist-types/exports/navigation-bar.d.ts +0 -2
- package/dist-types/exports/navigation-bar.d.ts.map +0 -1
- package/docs/components/menu/api-table.md +0 -460
- package/docs/components/menu/applyMenuDemoStyles.js +0 -173
- package/docs/components/menu/extensions.md +0 -262
- package/docs/components/menu/index.md +0 -13
- package/docs/components/menu/overview.md +0 -422
- package/docs/components/menu/use-cases.md +0 -77
- package/exports/define/lion-item.js +0 -3
- package/exports/define/lion-menu-overlay.js +0 -3
- package/exports/define/lion-menu.js +0 -3
- package/exports/define/lion-navigation-bar.js +0 -3
- package/exports/define/lion-toolbar.js +0 -3
- package/exports/define/lion-tree.js +0 -3
- package/exports/menu-test-suites.js +0 -4
- package/exports/menu.js +0 -7
- package/exports/navigation-bar.js +0 -1
- package/menu-test-suites.js +0 -4
- package/menu.js +0 -7
- package/navigation-bar.js +0 -1
|
@@ -23,9 +23,9 @@ import '../../fundamentals/systems/form/assets/h-output.js';
|
|
|
23
23
|
loadDefaultFeedbackMessages();
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
Input fields can be created by extending [LionInput](https://github.com/ing-bank/lion/blob/
|
|
26
|
+
Input fields can be created by extending [LionInput](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/components/input/overview.md).
|
|
27
27
|
|
|
28
|
-
> In case you want to wrap a custom form element, follow [Create a custom Field](https://github.com/ing-bank/lion/blob/
|
|
28
|
+
> In case you want to wrap a custom form element, follow [Create a custom Field](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/how-to/create-a-custom-field.md).
|
|
29
29
|
|
|
30
30
|
For this tutorial, we create an input that wraps native `input[type=datetime-local]`.
|
|
31
31
|
This is as simple as adding a type:
|
|
@@ -22,4 +22,4 @@ Whether you're just getting started with Lion, building your first form, extendi
|
|
|
22
22
|
- Build custom form fields tailored to your needs
|
|
23
23
|
- Follow proven patterns and best practices used by the Lion community
|
|
24
24
|
|
|
25
|
-
If you can't find what you're looking for, check out our [Fundamentals](../../fundamentals/) section for deeper conceptual knowledge, or visit our [Components](https://github.com/ing-bank/lion/blob/
|
|
25
|
+
If you can't find what you're looking for, check out our [Fundamentals](../../fundamentals/) section for deeper conceptual knowledge, or visit our [Components](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/components) documentation for detailed API references.
|
package/docs/guides/index.md
CHANGED
|
@@ -22,9 +22,9 @@ Developers consuming our web components inside an application (not extending the
|
|
|
22
22
|
`Application Developers` are only allowed to interact with `public` properties and methods.
|
|
23
23
|
Can be abbreviated as `AD`. Sometimes also called `Consuming Developer`.
|
|
24
24
|
|
|
25
|
-
- [Definitions and Terms](https://github.com/ing-bank/lion/blob/
|
|
26
|
-
- [Styling](https://github.com/ing-bank/lion/blob/
|
|
27
|
-
- [Scoped Elements](https://github.com/ing-bank/lion/blob/
|
|
25
|
+
- [Definitions and Terms](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/principles/definitions-and-terms.md)
|
|
26
|
+
- [Styling](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/principles/styling.md)
|
|
27
|
+
- [Scoped Elements](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/principles/scoped-elements.md)
|
|
28
28
|
|
|
29
29
|
## Extending Developer
|
|
30
30
|
|
|
@@ -32,13 +32,13 @@ Developers extending our web components, for instance: `class MaterialInput exte
|
|
|
32
32
|
|
|
33
33
|
Especially for subclassers we have some extra documentation:
|
|
34
34
|
|
|
35
|
-
- [Subclasser APIs](https://github.com/ing-bank/lion/blob/
|
|
36
|
-
- [Extend documentation](https://github.com/ing-bank/lion/blob/
|
|
35
|
+
- [Subclasser APIs](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/principles/subclasser-apis.md)
|
|
36
|
+
- [Extend documentation](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/blog/extending-documentation.md)
|
|
37
37
|
|
|
38
38
|
## How To
|
|
39
39
|
|
|
40
40
|
Next to that we have some specific "How To" documentations.
|
|
41
41
|
|
|
42
|
-
- [Get started](https://github.com/ing-bank/lion/blob/
|
|
43
|
-
- [Create a custom field](https://github.com/ing-bank/lion/blob/
|
|
44
|
-
- [Extend a native input](https://github.com/ing-bank/lion/blob/
|
|
42
|
+
- [Get started](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/how-to/get-started.md)
|
|
43
|
+
- [Create a custom field](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/how-to/create-a-custom-field.md)
|
|
44
|
+
- [Extend a native input](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/how-to/extend-a-native-input.md)
|
|
@@ -22,9 +22,9 @@ Developers consuming our web components inside an application (not extending the
|
|
|
22
22
|
`Application Developers` are only allowed to interact with `public` properties and methods.
|
|
23
23
|
Can be abbreviated as `AD`. Sometimes also called `Consuming Developer`.
|
|
24
24
|
|
|
25
|
-
- [Definitions and Terms](https://github.com/ing-bank/lion/blob/
|
|
26
|
-
- [Styling](https://github.com/ing-bank/lion/blob/
|
|
27
|
-
- [Scoped Elements](https://github.com/ing-bank/lion/blob/
|
|
25
|
+
- [Definitions and Terms](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/principles/definitions-and-terms.md)
|
|
26
|
+
- [Styling](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/principles/styling.md)
|
|
27
|
+
- [Scoped Elements](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/principles/scoped-elements.md)
|
|
28
28
|
|
|
29
29
|
## Extending Developer
|
|
30
30
|
|
|
@@ -32,5 +32,5 @@ Developers extending our web components, for instance: `class MaterialInput exte
|
|
|
32
32
|
|
|
33
33
|
Especially for subclassers we have some extra documentation:
|
|
34
34
|
|
|
35
|
-
- [Subclasser APIs](https://github.com/ing-bank/lion/blob/
|
|
36
|
-
- [Extend documentation](https://github.com/ing-bank/lion/blob/
|
|
35
|
+
- [Subclasser APIs](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/principles/subclasser-apis.md)
|
|
36
|
+
- [Extend documentation](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/blog/extending-documentation.md)
|
|
@@ -30,7 +30,7 @@ Examples for both categories can be found below:
|
|
|
30
30
|
- Accessibility examples:
|
|
31
31
|
- Content (for instance a caption in a table) can be `visually hidden`: it will be
|
|
32
32
|
readable by screen readers, but invisible for end users.
|
|
33
|
-
- When an html table is used, we allow [subclassers](https://github.com/ing-bank/lion/blob/
|
|
33
|
+
- When an html table is used, we allow [subclassers](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/guides/principles/subclasser-apis.md) to override the display property (`table-cell`) to `flex`. By putting the proper accessible roles (`role="cell"`) in the markup, we guarantee our markup stays accessible.
|
|
34
34
|
|
|
35
35
|
Although Lion components try to stay as unbiased as possible with regard to styling, defaults will be needed. In these cases we try to follow the platform as much as possible. If the platform doesn't provide defaults, the largest common denominator across existing UI systems is taken as a lead.
|
|
36
36
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { runCalendarSuite } from '../components/calendar/test-suites/LionCalendar.suite.js';
|
package/exports/collapsible.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { runDatepickerSuite } from '../components/input-datepicker/test-suites/LionInputDatepicker.suite.js';
|
package/exports/input-file.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
export { LionInputFile } from '../components/input-file/src/LionInputFile.js';
|
|
2
2
|
export { LionSelectedFileList } from '../components/input-file/src/LionSelectedFileList.js';
|
|
3
|
-
export {
|
|
3
|
+
export {
|
|
4
|
+
IsAcceptedFile,
|
|
5
|
+
DuplicateFileNames,
|
|
6
|
+
MaxFileCount,
|
|
7
|
+
} from '../components/input-file/src/validators.js';
|
package/exports/overlays.js
CHANGED
|
@@ -9,8 +9,6 @@ export { withModalDialogConfig } from '../components/overlays/src/configurations
|
|
|
9
9
|
export { withDropdownConfig } from '../components/overlays/src/configurations/withDropdownConfig.js';
|
|
10
10
|
export { withTooltipConfig } from '../components/overlays/src/configurations/withTooltipConfig.js';
|
|
11
11
|
export { withPopoverConfig } from '../components/overlays/src/configurations/withPopoverConfig.js';
|
|
12
|
-
export { withClickInteraction } from '../components/overlays/src/configurations/visibility-trigger-partials/withClickInteraction.js';
|
|
13
|
-
export { withHoverInteraction } from '../components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js';
|
|
14
12
|
|
|
15
13
|
export { deepContains } from '../components/overlays/src/utils/deep-contains.js';
|
|
16
14
|
// re-export via this entrypoint for backwards compatibility
|
|
@@ -22,7 +20,3 @@ export {
|
|
|
22
20
|
} from '../components/overlays/src/utils/inert-siblings.js';
|
|
23
21
|
|
|
24
22
|
export { overlays } from '../components/overlays/src/singleton.js';
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* @typedef {import('../components/overlays/types/OverlayConfig.js').OverlayConfig} OverlayConfig
|
|
28
|
-
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { runDatepickerSuite } from './components/input-datepicker/test-suites/LionInputDatepicker.suite.js';
|
package/input-file.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
export { LionInputFile } from './components/input-file/src/LionInputFile.js';
|
|
2
2
|
export { LionSelectedFileList } from './components/input-file/src/LionSelectedFileList.js';
|
|
3
|
-
export {
|
|
3
|
+
export {
|
|
4
|
+
IsAcceptedFile,
|
|
5
|
+
DuplicateFileNames,
|
|
6
|
+
MaxFileCount,
|
|
7
|
+
} from './components/input-file/src/validators.js';
|
package/overlays-test-suites.js
CHANGED
package/overlays.js
CHANGED
|
@@ -7,8 +7,6 @@ export { withModalDialogConfig } from './components/overlays/src/configurations/
|
|
|
7
7
|
export { withDropdownConfig } from './components/overlays/src/configurations/withDropdownConfig.js';
|
|
8
8
|
export { withTooltipConfig } from './components/overlays/src/configurations/withTooltipConfig.js';
|
|
9
9
|
export { withPopoverConfig } from './components/overlays/src/configurations/withPopoverConfig.js';
|
|
10
|
-
export { withClickInteraction } from './components/overlays/src/configurations/visibility-trigger-partials/withClickInteraction.js';
|
|
11
|
-
export { withHoverInteraction } from './components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js';
|
|
12
10
|
export { deepContains } from './components/overlays/src/utils/deep-contains.js';
|
|
13
11
|
// re-export via this entrypoint for backwards compatibility
|
|
14
12
|
export { getDeepActiveElement } from './components/core/src/getDeepActiveElement.js';
|
|
@@ -18,7 +16,3 @@ export {
|
|
|
18
16
|
setSiblingsInert,
|
|
19
17
|
} from './components/overlays/src/utils/inert-siblings.js';
|
|
20
18
|
export { overlays } from './components/overlays/src/singleton.js';
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* @typedef {import('../components/overlays/types/OverlayConfig.js').OverlayConfig} OverlayConfig
|
|
24
|
-
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lion/ui",
|
|
3
|
-
"version": "0.20.0
|
|
3
|
+
"version": "0.20.0",
|
|
4
4
|
"description": "A package of extendable web components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "ing-bank",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@open-wc/scoped-elements": "^3.0.6",
|
|
69
69
|
"@popperjs/core": "^2.11.8",
|
|
70
70
|
"autosize": "^6.0.0",
|
|
71
|
-
"awesome-phonenumber": "^
|
|
71
|
+
"awesome-phonenumber": "^7.8.0",
|
|
72
72
|
"ibantools": "^4.3.9",
|
|
73
73
|
"lit": "^3.1.2",
|
|
74
74
|
"singleton-manager": "^1.8.0"
|
|
@@ -1,313 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @typedef {import('../types/DisclosureMixinTypes.js').DisclosureHost} DisclosureHost
|
|
3
|
-
* @typedef {import('../types/DisclosureMixinTypes.js').DisclosureMixin} DisclosureMixin
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// /**
|
|
7
|
-
// * @type {DisclosureMixin}
|
|
8
|
-
// */
|
|
9
|
-
// const DisclosureMixinImplementation = superclass =>
|
|
10
|
-
// // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
|
|
11
|
-
// class DisclosureMixin extends superclass {
|
|
12
|
-
// /** @type {any} */
|
|
13
|
-
// static get properties() {
|
|
14
|
-
// return {
|
|
15
|
-
// opened: { type: Boolean, reflect: true },
|
|
16
|
-
// handleFocus: { type: Boolean, attribute: 'handle-focus' },
|
|
17
|
-
// invokerInteraction: { type: String, attribute: 'invoker-interaction' },
|
|
18
|
-
// };
|
|
19
|
-
// }
|
|
20
|
-
|
|
21
|
-
// /**
|
|
22
|
-
// * @param {Element} focusableElOrWrapper
|
|
23
|
-
// * @returns {Element|null}
|
|
24
|
-
// */
|
|
25
|
-
// static _getFocusableInvokerEl(focusableElOrWrapper) {
|
|
26
|
-
// // return focusableElOrWrapper;
|
|
27
|
-
// return (
|
|
28
|
-
// focusableElOrWrapper &&
|
|
29
|
-
// (focusableElOrWrapper.hasAttribute('tabindex') || focusableElOrWrapper.tagName === 'BUTTON'
|
|
30
|
-
// ? focusableElOrWrapper
|
|
31
|
-
// : focusableElOrWrapper.querySelector('[role=button], button'))
|
|
32
|
-
// );
|
|
33
|
-
// }
|
|
34
|
-
|
|
35
|
-
// get _invokerNode() {
|
|
36
|
-
// const ctor = this.constructor;
|
|
37
|
-
// if (!this.__invokerNode) {
|
|
38
|
-
// const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
|
|
39
|
-
// if (slottedNode) {
|
|
40
|
-
// this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
|
|
41
|
-
// } else {
|
|
42
|
-
// this.__invokerNode =
|
|
43
|
-
// this.previousElementSibling?.hasAttribute('data-invoker') &&
|
|
44
|
-
// ctor._getFocusableInvokerEl(this.previousElementSibling);
|
|
45
|
-
// }
|
|
46
|
-
// }
|
|
47
|
-
// return this.__invokerNode;
|
|
48
|
-
// }
|
|
49
|
-
|
|
50
|
-
// get _contentNode() {
|
|
51
|
-
// if (!this._cachedOverlayContentNode) {
|
|
52
|
-
// this._cachedOverlayContentNode = Array.from(this.children).find(
|
|
53
|
-
// child => child.slot === 'content',
|
|
54
|
-
// );
|
|
55
|
-
// }
|
|
56
|
-
// return this._cachedOverlayContentNode;
|
|
57
|
-
// }
|
|
58
|
-
|
|
59
|
-
// constructor() {
|
|
60
|
-
// super();
|
|
61
|
-
// this.opened = false;
|
|
62
|
-
// /**
|
|
63
|
-
// * @type {'click'|'hover'}
|
|
64
|
-
// */
|
|
65
|
-
// this.invokerInteraction = 'click';
|
|
66
|
-
// /**
|
|
67
|
-
// * Puts focus on `_contentNode` on open and on `_invokerNode` on close.
|
|
68
|
-
// * @type {Boolean}
|
|
69
|
-
// */
|
|
70
|
-
// this.handleFocus = false;
|
|
71
|
-
// this.__disclosureNeedsSetup = true;
|
|
72
|
-
|
|
73
|
-
// this.toggle = this.toggle.bind(this);
|
|
74
|
-
// this.open = this.open.bind(this);
|
|
75
|
-
// this.close = this.close.bind(this);
|
|
76
|
-
|
|
77
|
-
// this.__handleAnimateComplete = this.__handleAnimateComplete.bind(this);
|
|
78
|
-
|
|
79
|
-
// this.__onInvokerMouseenter = this.__onInvokerMouseenter.bind(this);
|
|
80
|
-
// this.__onContentMouseenter = this.__onContentMouseenter.bind(this);
|
|
81
|
-
// this.__onInvokerMouseleave = this.__onInvokerMouseleave.bind(this);
|
|
82
|
-
// this.__onContentMouseleave = this.__onContentMouseleave.bind(this);
|
|
83
|
-
// }
|
|
84
|
-
|
|
85
|
-
// connectedCallback() {
|
|
86
|
-
// super.connectedCallback();
|
|
87
|
-
// // we do a setup after every connectedCallback as firstUpdated will only be called once
|
|
88
|
-
// this.__disclosureNeedsSetup = true;
|
|
89
|
-
// this.updateComplete.then(() => {
|
|
90
|
-
// if (this.__disclosureNeedsSetup) {
|
|
91
|
-
// this._setupDisclosure();
|
|
92
|
-
// }
|
|
93
|
-
// this.__disclosureNeedsSetup = false;
|
|
94
|
-
// });
|
|
95
|
-
// this.__setupAnimation();
|
|
96
|
-
// }
|
|
97
|
-
|
|
98
|
-
// disconnectedCallback() {
|
|
99
|
-
// super.disconnectedCallback();
|
|
100
|
-
// this._teardownDisclosure();
|
|
101
|
-
// this.__teardownAnimation();
|
|
102
|
-
// }
|
|
103
|
-
|
|
104
|
-
// /**
|
|
105
|
-
// * @overridable
|
|
106
|
-
// */
|
|
107
|
-
// _setupDisclosure() {
|
|
108
|
-
// console.log('_setupDisclosure', this.level);
|
|
109
|
-
|
|
110
|
-
// this._setupOpenCloseListeners();
|
|
111
|
-
// }
|
|
112
|
-
|
|
113
|
-
// /**
|
|
114
|
-
// * @overridable
|
|
115
|
-
// */
|
|
116
|
-
// _teardownDisclosure() {
|
|
117
|
-
// this._teardownOpenCloseListeners();
|
|
118
|
-
// }
|
|
119
|
-
|
|
120
|
-
// /**
|
|
121
|
-
// * @overridable
|
|
122
|
-
// */
|
|
123
|
-
// _setupOpenCloseListeners() {
|
|
124
|
-
// console.log('setup listeners', this.level);
|
|
125
|
-
// if (!this._invokerNode) {
|
|
126
|
-
// return;
|
|
127
|
-
// }
|
|
128
|
-
|
|
129
|
-
// const interactions = this.invokerInteraction.split(' ');
|
|
130
|
-
|
|
131
|
-
// if (interactions.includes('hover')) {
|
|
132
|
-
// this._invokerNode.addEventListener('mouseenter', this.__onInvokerMouseenter);
|
|
133
|
-
// this._contentNode?.addEventListener('mouseenter', this.__onContentMouseenter);
|
|
134
|
-
// this._invokerNode.addEventListener('mouseleave', this.__onInvokerMouseleave);
|
|
135
|
-
// this._contentNode?.addEventListener('mouseleave', this.__onContentMouseleave);
|
|
136
|
-
// }
|
|
137
|
-
// if (interactions.includes('click')) {
|
|
138
|
-
// this._invokerNode.addEventListener('click', this.toggle);
|
|
139
|
-
// }
|
|
140
|
-
// }
|
|
141
|
-
|
|
142
|
-
// __onInvokerMouseenter() {
|
|
143
|
-
// this.__invokerHover = true;
|
|
144
|
-
// this.open();
|
|
145
|
-
// }
|
|
146
|
-
|
|
147
|
-
// __onContentMouseenter() {
|
|
148
|
-
// this.__contentHover = true;
|
|
149
|
-
// console.log('this.__contentHover', this.__contentHover);
|
|
150
|
-
// this.open();
|
|
151
|
-
// }
|
|
152
|
-
|
|
153
|
-
// __onInvokerMouseleave() {
|
|
154
|
-
// setTimeout(() => {
|
|
155
|
-
// if (!this.__contentHover) {
|
|
156
|
-
// this.close();
|
|
157
|
-
// }
|
|
158
|
-
// });
|
|
159
|
-
// this.__invokerHover = false;
|
|
160
|
-
// }
|
|
161
|
-
|
|
162
|
-
// __onContentMouseleave() {
|
|
163
|
-
// setTimeout(() => {
|
|
164
|
-
// if (!this.__invokerHover) {
|
|
165
|
-
// this.close();
|
|
166
|
-
// }
|
|
167
|
-
// });
|
|
168
|
-
// this.__contentHover = false;
|
|
169
|
-
// }
|
|
170
|
-
|
|
171
|
-
// /**
|
|
172
|
-
// * @overridable
|
|
173
|
-
// */
|
|
174
|
-
// _teardownOpenCloseListeners() {
|
|
175
|
-
// if (!this._invokerNode) {
|
|
176
|
-
// return;
|
|
177
|
-
// }
|
|
178
|
-
|
|
179
|
-
// this._invokerNode.removeEventListener('mouseenter', this.open);
|
|
180
|
-
// this._invokerNode.removeEventListener('mouseleave', this.close);
|
|
181
|
-
// this._contentNode?.removeEventListener('mouseenter', this.open);
|
|
182
|
-
// this._contentNode?.removeEventListener('mouseleave', this.close);
|
|
183
|
-
|
|
184
|
-
// // console.log(this, 'removetCLick');
|
|
185
|
-
|
|
186
|
-
// this._invokerNode.removeEventListener('click', this.toggle);
|
|
187
|
-
// }
|
|
188
|
-
|
|
189
|
-
// // TODO: fire event on updated?
|
|
190
|
-
// /**
|
|
191
|
-
// * @override
|
|
192
|
-
// * @param {string} name
|
|
193
|
-
// * @param {any} oldValue
|
|
194
|
-
// */
|
|
195
|
-
// requestUpdate(name, oldValue) {
|
|
196
|
-
// super.requestUpdate(name, oldValue);
|
|
197
|
-
// if (name === 'opened') {
|
|
198
|
-
// this.dispatchEvent(new Event('opened-changed'));
|
|
199
|
-
// }
|
|
200
|
-
// }
|
|
201
|
-
|
|
202
|
-
// /**
|
|
203
|
-
// * @param {import('lit-element').PropertyValues } changedProperties
|
|
204
|
-
// */
|
|
205
|
-
// updated(changedProperties) {
|
|
206
|
-
// super.updated(changedProperties);
|
|
207
|
-
|
|
208
|
-
// if (changedProperties.has('opened')) {
|
|
209
|
-
// this._onOpenedChanged();
|
|
210
|
-
// }
|
|
211
|
-
// }
|
|
212
|
-
|
|
213
|
-
// /**
|
|
214
|
-
// * @param {import('lit-element').PropertyValues } changedProperties
|
|
215
|
-
// */
|
|
216
|
-
// firstUpdated(changedProperties) {
|
|
217
|
-
// super.firstUpdated(changedProperties);
|
|
218
|
-
// this._onOpenedChanged();
|
|
219
|
-
|
|
220
|
-
// if (this.handleFocus && !this._contentNode?.hasAttribute('tabindex')) {
|
|
221
|
-
// this._contentNode?.setAttribute('tabindex', '-1');
|
|
222
|
-
// }
|
|
223
|
-
// }
|
|
224
|
-
|
|
225
|
-
// /**
|
|
226
|
-
// * @overridable
|
|
227
|
-
// */
|
|
228
|
-
// async _onOpenedChanged() {
|
|
229
|
-
// this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
|
|
230
|
-
|
|
231
|
-
// if (this.opened) {
|
|
232
|
-
// this._contentNode.style.setProperty('display', '');
|
|
233
|
-
// await this._showAnimation({ contentNode: this._contentNode });
|
|
234
|
-
// this._onDisclosureShow();
|
|
235
|
-
// } else {
|
|
236
|
-
// this._onDisclosureHide();
|
|
237
|
-
// await this._hideAnimation({ contentNode: this._contentNode });
|
|
238
|
-
// this._contentNode.style.setProperty('display', 'none');
|
|
239
|
-
// }
|
|
240
|
-
// }
|
|
241
|
-
|
|
242
|
-
// _onDisclosureShow() {
|
|
243
|
-
// // if (this.checkedIndex != null) {
|
|
244
|
-
// // this.activeIndex = this.checkedIndex;
|
|
245
|
-
// // }
|
|
246
|
-
|
|
247
|
-
// if (this.handleFocus) {
|
|
248
|
-
// this._contentNode.focus();
|
|
249
|
-
// }
|
|
250
|
-
// }
|
|
251
|
-
|
|
252
|
-
// _onDisclosureHide() {
|
|
253
|
-
// if (this.handleFocus) {
|
|
254
|
-
// this._invokerNode.focus();
|
|
255
|
-
// }
|
|
256
|
-
// }
|
|
257
|
-
|
|
258
|
-
// /**
|
|
259
|
-
// * Show animation implementation in sub-classer.
|
|
260
|
-
// * @param {{ contentNode: HTMLElement; }} cfg
|
|
261
|
-
// */
|
|
262
|
-
// // eslint-disable-next-line class-methods-use-this, no-empty-function
|
|
263
|
-
// async _showAnimation(cfg) {
|
|
264
|
-
// this._refreshAnimateCompletePromise();
|
|
265
|
-
// }
|
|
266
|
-
|
|
267
|
-
// /**
|
|
268
|
-
// * Hide animation implementation in sub-classer.
|
|
269
|
-
// * @param {{ contentNode: HTMLElement; }} cfg
|
|
270
|
-
// */
|
|
271
|
-
// // eslint-disable-next-line class-methods-use-this, no-empty-function
|
|
272
|
-
// async _hideAnimation(cfg) {
|
|
273
|
-
// this._refreshAnimateCompletePromise();
|
|
274
|
-
// }
|
|
275
|
-
|
|
276
|
-
// _refreshAnimateCompletePromise() {
|
|
277
|
-
// this._animateComplete = new Promise(resolve => {
|
|
278
|
-
// // Note that when a lib like GSAP is used, neither 'transitionend' or 'animationend' will be called.
|
|
279
|
-
// // In such a case, a subclasser needs to resolve this pending promise by calling this method
|
|
280
|
-
// this._resolveAnimateComplete = resolve;
|
|
281
|
-
// });
|
|
282
|
-
// }
|
|
283
|
-
|
|
284
|
-
// __setupAnimation() {
|
|
285
|
-
// this._contentNode.addEventListener('transitionend', this.__handleAnimateComplete);
|
|
286
|
-
// this._contentNode.addEventListener('animationend', this.__handleAnimateComplete);
|
|
287
|
-
// }
|
|
288
|
-
|
|
289
|
-
// __teardownAnimation() {
|
|
290
|
-
// this._contentNode.removeEventListener('transitionend', this.__handleAnimateComplete);
|
|
291
|
-
// this._contentNode.removeEventListener('animationend', this.__handleAnimateComplete);
|
|
292
|
-
// }
|
|
293
|
-
|
|
294
|
-
// __handleAnimateComplete() {
|
|
295
|
-
// if (typeof this._resolveAnimateComplete === 'function') {
|
|
296
|
-
// this._resolveAnimateComplete();
|
|
297
|
-
// }
|
|
298
|
-
// }
|
|
299
|
-
|
|
300
|
-
// toggle() {
|
|
301
|
-
// // console.log('toggul', this);
|
|
302
|
-
// this.opened = !this.opened;
|
|
303
|
-
// }
|
|
304
|
-
|
|
305
|
-
// open() {
|
|
306
|
-
// this.opened = true;
|
|
307
|
-
// }
|
|
308
|
-
|
|
309
|
-
// close() {
|
|
310
|
-
// this.opened = false;
|
|
311
|
-
// }
|
|
312
|
-
// };
|
|
313
|
-
// export const DisclosureMixin = dedupeMixin(DisclosureMixinImplementation);
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
// import { LitElement } from 'lit';
|
|
2
|
-
// import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
|
|
3
|
-
// import { DisclosureMixin } from '../src/DisclosureMixin.js';
|
|
4
|
-
|
|
5
|
-
// import '@lion/ui/define/lion-menu.js';
|
|
6
|
-
// import '@lion/ui/define/lion-item.js';
|
|
7
|
-
|
|
8
|
-
// class DisclosureClass extends DisclosureMixin(LitElement) {}
|
|
9
|
-
|
|
10
|
-
// /**
|
|
11
|
-
// * @typedef {import('lit').TemplateResult} TemplateResult
|
|
12
|
-
// */
|
|
13
|
-
|
|
14
|
-
// const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
|
|
15
|
-
|
|
16
|
-
// /**
|
|
17
|
-
// * @param { {tagString?:string, itemTagString?:string} } [customConfig]
|
|
18
|
-
// */
|
|
19
|
-
// export function runDisclosureMixinSuite(customConfig = {}) {
|
|
20
|
-
// const cfg = {
|
|
21
|
-
// tagString: 'lion-menu',
|
|
22
|
-
// ...customConfig,
|
|
23
|
-
// };
|
|
24
|
-
|
|
25
|
-
// const tagString = cfg.tagString || defineCE(DisclosureClass);
|
|
26
|
-
// const tag = unsafeStatic(tagString);
|
|
27
|
-
|
|
28
|
-
// describe('DisclosureMixin', () => {
|
|
29
|
-
// });
|
|
30
|
-
// }
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { Constructor } from '@open-wc/dedupe-mixin';
|
|
2
|
-
import { LitElement } from 'lit';
|
|
3
|
-
|
|
4
|
-
export declare class DisclosureHost {
|
|
5
|
-
public opened: Boolean;
|
|
6
|
-
|
|
7
|
-
protected get _invokerNode(): HTMLElement;
|
|
8
|
-
|
|
9
|
-
protected get _contentNode(): HTMLElement;
|
|
10
|
-
|
|
11
|
-
public toggle(): void;
|
|
12
|
-
|
|
13
|
-
public open(): void;
|
|
14
|
-
|
|
15
|
-
public close(): void;
|
|
16
|
-
|
|
17
|
-
protected _onOpenedChanged(): Promise<void>;
|
|
18
|
-
|
|
19
|
-
protected _onDisclosureShow(): void;
|
|
20
|
-
|
|
21
|
-
protected _onDisclosureHide(): void;
|
|
22
|
-
|
|
23
|
-
protected _showAnimation(cfg: object): Promise<void>;
|
|
24
|
-
|
|
25
|
-
protected _hideAnimation(cfg: object): Promise<void>;
|
|
26
|
-
|
|
27
|
-
protected _refreshAnimateCompletePromise(): void;
|
|
28
|
-
|
|
29
|
-
protected _setupOpenCloseListeners(): void;
|
|
30
|
-
|
|
31
|
-
protected _teardownOpenCloseListeners(): void;
|
|
32
|
-
|
|
33
|
-
private __setupAnimation(): void;
|
|
34
|
-
|
|
35
|
-
private __teardownAnimation(): void;
|
|
36
|
-
|
|
37
|
-
private __handleAnimateComplete(): void;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export declare function DisclosureImplementation<T extends Constructor<LitElement>>(
|
|
41
|
-
superclass: T,
|
|
42
|
-
): T &
|
|
43
|
-
Constructor<DisclosureHost> &
|
|
44
|
-
DisclosureHost &
|
|
45
|
-
Pick<typeof DisclosureHost, keyof typeof DisclosureHost> &
|
|
46
|
-
Pick<typeof LitElement, keyof typeof LitElement>;
|
|
47
|
-
|
|
48
|
-
export type DisclosureMixin = typeof DisclosureImplementation;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
Allow advanced preprocessing
|
|
2
|
-
|
|
3
|
-
- Turn '1' into '01-__-____'
|
|
4
|
-
- Turn ’20’ into ’20-’, -> ’20-4’ into ’20-04’ etc…
|
|
5
|
-
|
|
6
|
-
See: https://nosir.github.io/cleave.js/(But we should enhance the UX when editing the middle of a date)So:
|
|
7
|
-
|
|
8
|
-
```js
|
|
9
|
-
/** * @returns {string | { viewValue:string, caretIndex:number } } */
|
|
10
|
-
preprocessor(viewValue, { previousViewValue = ‘’, currentCaretIndex }) {
|
|
11
|
-
const diff = viewValue.length - previousViewValue.length;
|
|
12
|
-
if (diff === -1) && !isNaN(Number(previousViewValue[currentCaretIndex]))) {
|
|
13
|
-
// don’t respond to delete actions
|
|
14
|
-
return viewValue;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
let newValue = '';
|
|
18
|
-
const strippedVal = viewValue.replace('-', '');
|
|
19
|
-
let dashesPlaced = 0;
|
|
20
|
-
let newCaretIndex;
|
|
21
|
-
for (let i = 0; i < 10; i+= 1) {
|
|
22
|
-
if (i === 2 || i === 4) {
|
|
23
|
-
newValue += ‘-’;
|
|
24
|
-
dashesPlaced += 1;
|
|
25
|
-
}
|
|
26
|
-
else if (i < strippedVal.length + dashesPlaced) {
|
|
27
|
-
newValue += strippedVal[i];
|
|
28
|
-
} else {
|
|
29
|
-
newValue += ‘_’;
|
|
30
|
-
if (newCaretIndex === undefined) {
|
|
31
|
-
newCaretIndex = i;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
return { viewValue: newValue, caretIndex: newCaretIndex };
|
|
36
|
-
}
|
|
37
|
-
```
|