@aquera/nile-elements 0.1.36-beta-1.0 → 0.1.36-beta-1.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/README.md +68 -15
- package/demo/index.css +7 -4
- package/demo/index.html +20 -36
- package/demo/variables.css +13 -0
- package/demo/variables_v2.css +13 -0
- package/dist/{fixture-948ae33c.cjs.js → fixture-d5b55278.cjs.js} +2 -2
- package/dist/{fixture-948ae33c.cjs.js.map → fixture-d5b55278.cjs.js.map} +1 -1
- package/dist/{fixture-76051ef1.esm.js → fixture-df8b52d7.esm.js} +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/internal/animate.cjs.js +1 -1
- package/dist/internal/animate.cjs.js.map +1 -1
- package/dist/internal/animate.esm.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.esm.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js.map +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.esm.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.esm.js +1 -1
- package/dist/nile-badge/nile-badge.test.cjs.js +1 -1
- package/dist/nile-badge/nile-badge.test.esm.js +1 -1
- package/dist/nile-button/nile-button.test.cjs.js +1 -1
- package/dist/nile-button/nile-button.test.esm.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.cjs.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.esm.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.esm.js +1 -1
- package/dist/nile-card/nile-card.test.cjs.js +1 -1
- package/dist/nile-card/nile-card.test.esm.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.esm.js +1 -1
- package/dist/nile-chip/nile-chip.test.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.test.esm.js +1 -1
- package/dist/nile-dialog/nile-dialog.test.cjs.js +1 -1
- package/dist/nile-dialog/nile-dialog.test.esm.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.cjs.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.esm.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.cjs.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.esm.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.cjs.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.esm.js +1 -1
- package/dist/nile-error-message/nile-error-message.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.cjs.js.map +1 -1
- package/dist/nile-error-message/nile-error-message.css.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.css.cjs.js.map +1 -1
- package/dist/nile-error-message/nile-error-message.css.esm.js +6 -4
- package/dist/nile-error-message/nile-error-message.esm.js +4 -4
- package/dist/nile-error-message/nile-error-message.test.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.esm.js +1 -1
- package/dist/nile-error-notification/nile-error-notification.css.cjs.js +1 -1
- package/dist/nile-error-notification/nile-error-notification.css.cjs.js.map +1 -1
- package/dist/nile-error-notification/nile-error-notification.css.esm.js +1 -1
- package/dist/nile-filter-chip/index.cjs.js +2 -0
- package/dist/nile-filter-chip/index.esm.js +1 -0
- package/dist/nile-filter-chip/nile-filter-chip.cjs.js +2 -0
- package/dist/nile-filter-chip/nile-filter-chip.cjs.js.map +1 -0
- package/dist/nile-filter-chip/nile-filter-chip.css.cjs.js +2 -0
- package/dist/nile-filter-chip/nile-filter-chip.css.cjs.js.map +1 -0
- package/dist/nile-filter-chip/nile-filter-chip.css.esm.js +121 -0
- package/dist/nile-filter-chip/nile-filter-chip.esm.js +43 -0
- package/dist/nile-filter-chip/nile-filter-chip.test.cjs.js +2 -0
- package/dist/nile-filter-chip/nile-filter-chip.test.cjs.js.map +1 -0
- package/dist/nile-filter-chip/nile-filter-chip.test.esm.js +20 -0
- package/dist/nile-form-group/nile-form-group.test.cjs.js +1 -1
- package/dist/nile-form-group/nile-form-group.test.esm.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.cjs.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.esm.js +1 -1
- package/dist/nile-hero/nile-hero.test.cjs.js +1 -1
- package/dist/nile-hero/nile-hero.test.esm.js +1 -1
- package/dist/nile-icon/nile-icon.test.cjs.js +1 -1
- package/dist/nile-icon/nile-icon.test.esm.js +1 -1
- package/dist/nile-input/nile-input.test.cjs.js +1 -1
- package/dist/nile-input/nile-input.test.esm.js +1 -1
- package/dist/nile-link/nile-link.test.cjs.js +1 -1
- package/dist/nile-link/nile-link.test.esm.js +1 -1
- package/dist/nile-loader/nile-loader.test.cjs.js +1 -1
- package/dist/nile-loader/nile-loader.test.esm.js +1 -1
- package/dist/nile-popover/index.cjs.js +1 -1
- package/dist/nile-popover/index.esm.js +1 -1
- package/dist/nile-popover/nile-popover.cjs.js +11 -3
- package/dist/nile-popover/nile-popover.cjs.js.map +1 -1
- package/dist/nile-popover/nile-popover.esm.js +13 -7
- package/dist/nile-popover/nile-popover.test.cjs.js +1 -1
- package/dist/nile-popover/nile-popover.test.cjs.js.map +1 -1
- package/dist/nile-popover/nile-popover.test.esm.js +3 -3
- package/dist/nile-popup/nile-popup.test.cjs.js +1 -1
- package/dist/nile-popup/nile-popup.test.esm.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.css.cjs.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.css.cjs.js.map +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.css.esm.js +1 -0
- package/dist/nile-progress-bar/nile-progress-bar.test.cjs.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.esm.js +1 -1
- package/dist/nile-radio/nile-radio.test.cjs.js +1 -1
- package/dist/nile-radio/nile-radio.test.esm.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.cjs.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.esm.js +1 -1
- package/dist/nile-select/nile-select.cjs.js +1 -1
- package/dist/nile-select/nile-select.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.esm.js +1 -1
- package/dist/nile-select/nile-select.test.cjs.js +1 -1
- package/dist/nile-select/nile-select.test.esm.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.cjs.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.esm.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.cjs.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.esm.js +1 -1
- package/dist/nile-table/nile-table.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.test.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.test.esm.js +1 -1
- package/dist/nile-tooltip/index.cjs.js +1 -1
- package/dist/nile-tooltip/index.esm.js +1 -1
- package/dist/nile-tooltip/nile-tooltip-utils.cjs.js +2 -0
- package/dist/nile-tooltip/nile-tooltip-utils.cjs.js.map +1 -0
- package/dist/nile-tooltip/nile-tooltip-utils.esm.js +1 -0
- package/dist/nile-tooltip/nile-tooltip.cjs.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.cjs.js.map +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.cjs.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.cjs.js.map +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.esm.js +78 -45
- package/dist/nile-tooltip/nile-tooltip.esm.js +23 -28
- package/dist/nile-tooltip/nile-tooltip.test.cjs.js +2 -0
- package/dist/nile-tooltip/nile-tooltip.test.cjs.js.map +1 -0
- package/dist/nile-tooltip/nile-tooltip.test.esm.js +47 -0
- package/dist/src/index.d.ts +1 -2
- package/dist/src/index.js +1 -2
- package/dist/src/index.js.map +1 -1
- package/dist/src/nile-error-message/nile-error-message.css.js +6 -4
- package/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
- package/dist/src/nile-error-message/nile-error-message.d.ts +4 -0
- package/dist/src/nile-error-message/nile-error-message.js +20 -0
- package/dist/src/nile-error-message/nile-error-message.js.map +1 -1
- package/dist/src/nile-error-notification/nile-error-notification.css.js +1 -1
- package/dist/src/nile-error-notification/nile-error-notification.css.js.map +1 -1
- package/dist/src/nile-filter-chip/index.d.ts +1 -0
- package/dist/src/nile-filter-chip/index.js +2 -0
- package/dist/src/{nile-file-upload → nile-filter-chip}/index.js.map +1 -1
- package/dist/src/{nile-file-preview/nile-file-preview.css.d.ts → nile-filter-chip/nile-filter-chip.css.d.ts} +1 -1
- package/dist/src/nile-filter-chip/nile-filter-chip.css.js +133 -0
- package/dist/src/nile-filter-chip/nile-filter-chip.css.js.map +1 -0
- package/dist/src/nile-filter-chip/nile-filter-chip.d.ts +37 -0
- package/dist/src/nile-filter-chip/nile-filter-chip.js +145 -0
- package/dist/src/nile-filter-chip/nile-filter-chip.js.map +1 -0
- package/dist/src/nile-filter-chip/nile-filter-chip.test.d.ts +1 -0
- package/dist/src/nile-filter-chip/nile-filter-chip.test.js +80 -0
- package/dist/src/nile-filter-chip/nile-filter-chip.test.js.map +1 -0
- package/dist/src/nile-progress-bar/nile-progress-bar.css.js +1 -0
- package/dist/src/nile-progress-bar/nile-progress-bar.css.js.map +1 -1
- package/dist/src/nile-select/nile-select.js +1 -1
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/src/nile-table/nile-table.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip-utils.d.ts +18 -0
- package/dist/src/nile-tooltip/nile-tooltip-utils.js +216 -0
- package/dist/src/nile-tooltip/nile-tooltip-utils.js.map +1 -0
- package/dist/src/nile-tooltip/nile-tooltip.css.js +76 -43
- package/dist/src/nile-tooltip/nile-tooltip.css.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip.d.ts +24 -46
- package/dist/src/nile-tooltip/nile-tooltip.js +235 -232
- package/dist/src/nile-tooltip/nile-tooltip.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip.test.d.ts +1 -0
- package/dist/src/nile-tooltip/nile-tooltip.test.js +148 -0
- package/dist/src/nile-tooltip/nile-tooltip.test.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/plop-templates/lit/index.ts.hbs +1 -1
- package/plop-templates/lit/lit.css.ts.hbs +1 -1
- package/plop-templates/lit/lit.template.ts.hbs +3 -0
- package/{src/nile-file-preview/nile-file-preview.test.ts → plop-templates/lit/lit.test.ts.hbs} +5 -5
- package/plop-templates/lit/lit.ts.hbs +7 -3
- package/plop-templates/lit/sub-components/index.ts.hbs +4 -0
- package/plop-templates/lit/types/index.ts.hbs +0 -0
- package/plop-templates/lit/types/type.ts.hbs +3 -0
- package/plop-templates/lit/utils/lit.utils.ts.hbs +4 -0
- package/plopfile.js +32 -1
- package/src/index.ts +1 -2
- package/src/nile-error-message/nile-error-message.css.ts +6 -4
- package/src/nile-error-message/nile-error-message.ts +18 -0
- package/src/nile-error-notification/nile-error-notification.css.ts +1 -1
- package/src/nile-filter-chip/index.ts +1 -0
- package/src/nile-filter-chip/nile-filter-chip.css.ts +138 -0
- package/src/nile-filter-chip/nile-filter-chip.test.ts +92 -0
- package/src/nile-filter-chip/nile-filter-chip.ts +137 -0
- package/src/nile-progress-bar/nile-progress-bar.css.ts +1 -0
- package/src/nile-select/nile-select.ts +1 -1
- package/src/nile-table/nile-table.ts +2 -2
- package/src/nile-tooltip/nile-tooltip-utils.ts +271 -0
- package/src/nile-tooltip/nile-tooltip.css.ts +77 -44
- package/src/nile-tooltip/nile-tooltip.test.ts +168 -0
- package/src/nile-tooltip/nile-tooltip.ts +268 -230
- package/vscode-html-custom-data.json +120 -201
- package/dist/fixture-2b5b3aba.esm.js +0 -569
- package/dist/fixture-7bfb866e.cjs.js +0 -395
- package/dist/fixture-7bfb866e.cjs.js.map +0 -1
- package/dist/lit-html-39a6718c.esm.js +0 -6
- package/dist/lit-html-9b3af046.cjs.js +0 -6
- package/dist/lit-html-9b3af046.cjs.js.map +0 -1
- package/dist/nile-file-preview/index.cjs.js +0 -2
- package/dist/nile-file-preview/index.esm.js +0 -1
- package/dist/nile-file-preview/nile-file-preview.cjs.js +0 -2
- package/dist/nile-file-preview/nile-file-preview.cjs.js.map +0 -1
- package/dist/nile-file-preview/nile-file-preview.css.cjs.js +0 -2
- package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map +0 -1
- package/dist/nile-file-preview/nile-file-preview.css.esm.js +0 -521
- package/dist/nile-file-preview/nile-file-preview.esm.js +0 -3
- package/dist/nile-file-preview/nile-file-preview.template.cjs.js +0 -2
- package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map +0 -1
- package/dist/nile-file-preview/nile-file-preview.template.esm.js +0 -117
- package/dist/nile-file-preview/nile-file-preview.test.cjs.js +0 -2
- package/dist/nile-file-preview/nile-file-preview.test.cjs.js.map +0 -1
- package/dist/nile-file-preview/nile-file-preview.test.esm.js +0 -1
- package/dist/nile-file-preview/types/file-preview.enums.cjs.js +0 -2
- package/dist/nile-file-preview/types/file-preview.enums.cjs.js.map +0 -1
- package/dist/nile-file-preview/types/file-preview.enums.esm.js +0 -1
- package/dist/nile-file-preview/types/file-preview.interface.cjs.js +0 -2
- package/dist/nile-file-preview/types/file-preview.interface.cjs.js.map +0 -1
- package/dist/nile-file-preview/types/file-preview.interface.esm.js +0 -1
- package/dist/nile-file-preview/types/index.cjs.js +0 -2
- package/dist/nile-file-preview/types/index.cjs.js.map +0 -1
- package/dist/nile-file-preview/types/index.esm.js +0 -1
- package/dist/nile-file-preview/utils/file-preview.util.cjs.js +0 -2
- package/dist/nile-file-preview/utils/file-preview.util.cjs.js.map +0 -1
- package/dist/nile-file-preview/utils/file-preview.util.esm.js +0 -1
- package/dist/nile-file-preview/utils/index.cjs.js +0 -2
- package/dist/nile-file-preview/utils/index.cjs.js.map +0 -1
- package/dist/nile-file-preview/utils/index.esm.js +0 -1
- package/dist/nile-file-upload/index.cjs.js +0 -2
- package/dist/nile-file-upload/index.cjs.js.map +0 -1
- package/dist/nile-file-upload/index.esm.js +0 -1
- package/dist/nile-file-upload/nile-file-upload.cjs.js +0 -2
- package/dist/nile-file-upload/nile-file-upload.cjs.js.map +0 -1
- package/dist/nile-file-upload/nile-file-upload.css.cjs.js +0 -2
- package/dist/nile-file-upload/nile-file-upload.css.cjs.js.map +0 -1
- package/dist/nile-file-upload/nile-file-upload.css.esm.js +0 -535
- package/dist/nile-file-upload/nile-file-upload.esm.js +0 -3
- package/dist/nile-file-upload/nile-file-upload.template.cjs.js +0 -10
- package/dist/nile-file-upload/nile-file-upload.template.cjs.js.map +0 -1
- package/dist/nile-file-upload/nile-file-upload.template.esm.js +0 -155
- package/dist/nile-file-upload/nile-file-upload.test.cjs.js +0 -2
- package/dist/nile-file-upload/nile-file-upload.test.cjs.js.map +0 -1
- package/dist/nile-file-upload/nile-file-upload.test.esm.js +0 -1
- package/dist/nile-file-upload/types/file-upload.enums.cjs.js +0 -2
- package/dist/nile-file-upload/types/file-upload.enums.cjs.js.map +0 -1
- package/dist/nile-file-upload/types/file-upload.enums.esm.js +0 -1
- package/dist/nile-file-upload/types/file-upload.type.cjs.js +0 -2
- package/dist/nile-file-upload/types/file-upload.type.cjs.js.map +0 -1
- package/dist/nile-file-upload/types/file-upload.type.esm.js +0 -1
- package/dist/nile-file-upload/types/index.cjs.js +0 -2
- package/dist/nile-file-upload/types/index.cjs.js.map +0 -1
- package/dist/nile-file-upload/types/index.esm.js +0 -1
- package/dist/nile-file-upload/utils/drag-drop.util.cjs.js +0 -2
- package/dist/nile-file-upload/utils/drag-drop.util.cjs.js.map +0 -1
- package/dist/nile-file-upload/utils/drag-drop.util.esm.js +0 -1
- package/dist/nile-file-upload/utils/file-validation.util.cjs.js +0 -2
- package/dist/nile-file-upload/utils/file-validation.util.cjs.js.map +0 -1
- package/dist/nile-file-upload/utils/file-validation.util.esm.js +0 -1
- package/dist/src/nile-file-preview/index.d.ts +0 -1
- package/dist/src/nile-file-preview/index.js +0 -2
- package/dist/src/nile-file-preview/index.js.map +0 -1
- package/dist/src/nile-file-preview/nile-file-preview.css.js +0 -533
- package/dist/src/nile-file-preview/nile-file-preview.css.js.map +0 -1
- package/dist/src/nile-file-preview/nile-file-preview.d.ts +0 -48
- package/dist/src/nile-file-preview/nile-file-preview.js +0 -149
- package/dist/src/nile-file-preview/nile-file-preview.js.map +0 -1
- package/dist/src/nile-file-preview/nile-file-preview.template.d.ts +0 -11
- package/dist/src/nile-file-preview/nile-file-preview.template.js +0 -144
- package/dist/src/nile-file-preview/nile-file-preview.template.js.map +0 -1
- package/dist/src/nile-file-preview/nile-file-preview.test.d.ts +0 -7
- package/dist/src/nile-file-preview/nile-file-preview.test.js +0 -30
- package/dist/src/nile-file-preview/nile-file-preview.test.js.map +0 -1
- package/dist/src/nile-file-preview/types/file-preview.enums.d.ts +0 -23
- package/dist/src/nile-file-preview/types/file-preview.enums.js +0 -28
- package/dist/src/nile-file-preview/types/file-preview.enums.js.map +0 -1
- package/dist/src/nile-file-preview/types/file-preview.interface.d.ts +0 -4
- package/dist/src/nile-file-preview/types/file-preview.interface.js +0 -2
- package/dist/src/nile-file-preview/types/file-preview.interface.js.map +0 -1
- package/dist/src/nile-file-preview/types/index.d.ts +0 -2
- package/dist/src/nile-file-preview/types/index.js +0 -3
- package/dist/src/nile-file-preview/types/index.js.map +0 -1
- package/dist/src/nile-file-preview/utils/file-preview.util.d.ts +0 -3
- package/dist/src/nile-file-preview/utils/file-preview.util.js +0 -29
- package/dist/src/nile-file-preview/utils/file-preview.util.js.map +0 -1
- package/dist/src/nile-file-preview/utils/index.d.ts +0 -1
- package/dist/src/nile-file-preview/utils/index.js +0 -2
- package/dist/src/nile-file-preview/utils/index.js.map +0 -1
- package/dist/src/nile-file-upload/index.d.ts +0 -1
- package/dist/src/nile-file-upload/index.js +0 -2
- package/dist/src/nile-file-upload/nile-file-upload.css.d.ts +0 -12
- package/dist/src/nile-file-upload/nile-file-upload.css.js +0 -547
- package/dist/src/nile-file-upload/nile-file-upload.css.js.map +0 -1
- package/dist/src/nile-file-upload/nile-file-upload.d.ts +0 -45
- package/dist/src/nile-file-upload/nile-file-upload.js +0 -148
- package/dist/src/nile-file-upload/nile-file-upload.js.map +0 -1
- package/dist/src/nile-file-upload/nile-file-upload.template.d.ts +0 -11
- package/dist/src/nile-file-upload/nile-file-upload.template.js +0 -163
- package/dist/src/nile-file-upload/nile-file-upload.template.js.map +0 -1
- package/dist/src/nile-file-upload/nile-file-upload.test.d.ts +0 -7
- package/dist/src/nile-file-upload/nile-file-upload.test.js +0 -30
- package/dist/src/nile-file-upload/nile-file-upload.test.js.map +0 -1
- package/dist/src/nile-file-upload/types/file-upload.enums.d.ts +0 -28
- package/dist/src/nile-file-upload/types/file-upload.enums.js +0 -35
- package/dist/src/nile-file-upload/types/file-upload.enums.js.map +0 -1
- package/dist/src/nile-file-upload/types/file-upload.type.d.ts +0 -4
- package/dist/src/nile-file-upload/types/file-upload.type.js +0 -2
- package/dist/src/nile-file-upload/types/file-upload.type.js.map +0 -1
- package/dist/src/nile-file-upload/types/index.d.ts +0 -2
- package/dist/src/nile-file-upload/types/index.js +0 -3
- package/dist/src/nile-file-upload/types/index.js.map +0 -1
- package/dist/src/nile-file-upload/utils/drag-drop.util.d.ts +0 -19
- package/dist/src/nile-file-upload/utils/drag-drop.util.js +0 -77
- package/dist/src/nile-file-upload/utils/drag-drop.util.js.map +0 -1
- package/dist/src/nile-file-upload/utils/file-validation.util.d.ts +0 -9
- package/dist/src/nile-file-upload/utils/file-validation.util.js +0 -58
- package/dist/src/nile-file-upload/utils/file-validation.util.js.map +0 -1
- package/src/nile-file-preview/index.ts +0 -1
- package/src/nile-file-preview/nile-file-preview.css.ts +0 -535
- package/src/nile-file-preview/nile-file-preview.template.ts +0 -174
- package/src/nile-file-preview/nile-file-preview.ts +0 -146
- package/src/nile-file-preview/types/file-preview.enums.ts +0 -26
- package/src/nile-file-preview/types/file-preview.interface.ts +0 -4
- package/src/nile-file-preview/types/index.ts +0 -2
- package/src/nile-file-preview/utils/file-preview.util.ts +0 -34
- package/src/nile-file-preview/utils/index.ts +0 -1
- package/src/nile-file-upload/index.ts +0 -1
- package/src/nile-file-upload/nile-file-upload.css.ts +0 -549
- package/src/nile-file-upload/nile-file-upload.template.ts +0 -194
- package/src/nile-file-upload/nile-file-upload.test.ts +0 -38
- package/src/nile-file-upload/nile-file-upload.ts +0 -138
- package/src/nile-file-upload/types/file-upload.enums.ts +0 -32
- package/src/nile-file-upload/types/file-upload.type.ts +0 -5
- package/src/nile-file-upload/types/index.ts +0 -2
- package/src/nile-file-upload/utils/drag-drop.util.ts +0 -95
- package/src/nile-file-upload/utils/file-validation.util.ts +0 -80
- /package/dist/{nile-file-preview → nile-filter-chip}/index.cjs.js.map +0 -0
@@ -1,23 +1,17 @@
|
|
1
|
+
import { __decorate } from "tslib";
|
1
2
|
/**
|
2
3
|
* Copyright Aquera Inc 2023
|
3
4
|
*
|
4
5
|
* This source code is licensed under the BSD-3-Clause license found in the
|
5
6
|
* LICENSE file in the root directory of this source tree.
|
6
7
|
*/
|
7
|
-
import { __decorate } from "tslib";
|
8
|
-
import { styles } from './nile-tooltip.css';
|
9
|
-
import '../nile-popup/nile-popup';
|
10
|
-
import { animateTo, parseDuration, stopAnimations } from '../internal/animate';
|
11
|
-
import { classMap } from 'lit/directives/class-map.js';
|
12
|
-
import { customElement, property, query } from 'lit/decorators.js';
|
13
|
-
import { getAnimation, setDefaultAnimation, } from '../utilities/animation-registry';
|
14
8
|
import { html } from 'lit';
|
15
|
-
|
16
|
-
import {
|
17
|
-
import { watch } from '../internal/watch';
|
9
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
10
|
+
import { styles } from './nile-tooltip.css';
|
18
11
|
import NileElement from '../internal/nile-element';
|
12
|
+
import { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';
|
19
13
|
/**
|
20
|
-
* Nile
|
14
|
+
* Nile tooltip component.
|
21
15
|
*
|
22
16
|
* @tag nile-tooltip
|
23
17
|
*
|
@@ -25,279 +19,288 @@ import NileElement from '../internal/nile-element';
|
|
25
19
|
let NileTooltip = class NileTooltip extends NileElement {
|
26
20
|
constructor() {
|
27
21
|
super(...arguments);
|
28
|
-
/** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
|
29
22
|
this.content = '';
|
30
|
-
/** Size Property to decide the tool tip size */
|
31
|
-
this.size = 'small';
|
32
|
-
/**
|
33
|
-
* The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
|
34
|
-
* inside of the viewport.
|
35
|
-
*/
|
36
23
|
this.placement = 'top';
|
37
|
-
/** Disables the tooltip so it won't show when triggered. */
|
38
24
|
this.disabled = false;
|
39
|
-
/** The distance in pixels from which to offset the tooltip away from its target. */
|
40
|
-
this.distance = 8;
|
41
|
-
/** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
|
42
25
|
this.open = false;
|
43
|
-
/** The distance in pixels from which to offset the tooltip along its target. */
|
44
|
-
this.skidding = 0;
|
45
26
|
/**
|
46
27
|
* Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
|
47
28
|
* options can be passed by separating them with a space. When manual is used, the tooltip must be activated
|
48
29
|
* programmatically.
|
49
30
|
*/
|
50
31
|
this.trigger = 'hover focus';
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
*/
|
32
|
+
this.distance = 8;
|
33
|
+
this.SHIFT_OFFSET = 16;
|
34
|
+
/** The distance in pixels from which to offset the tooltip along its target. */
|
35
|
+
this.skidding = 0;
|
56
36
|
this.hoist = false;
|
37
|
+
this.hasTooltipSlot = false;
|
38
|
+
this.hoverTimeout = 0;
|
39
|
+
this.caretSize = 6;
|
40
|
+
this.originalPlacement = this.placement;
|
41
|
+
this.updateTooltipPosition = () => {
|
42
|
+
if (!isInViewport(this.triggerContainer)) {
|
43
|
+
this.open = false;
|
44
|
+
return;
|
45
|
+
}
|
46
|
+
const triggerRect = this.triggerContainer.getBoundingClientRect();
|
47
|
+
const tooltipRect = this.tooltip.getBoundingClientRect();
|
48
|
+
const viewportWidth = window.innerWidth;
|
49
|
+
const viewportHeight = window.innerHeight;
|
50
|
+
let { top, left, placement } = getValidTooltipPosition(triggerRect, tooltipRect, this.originalPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
|
51
|
+
// FallBack Positions
|
52
|
+
// Bottom
|
53
|
+
if (this.originalPlacement.startsWith('bottom')) {
|
54
|
+
const availableSpaceBelow = viewportHeight - triggerRect.bottom;
|
55
|
+
if (availableSpaceBelow < tooltipRect.height + this.distance) {
|
56
|
+
let newPlacement = 'top';
|
57
|
+
if (this.originalPlacement === 'bottom-start') {
|
58
|
+
newPlacement = 'top';
|
59
|
+
}
|
60
|
+
else if (this.originalPlacement === 'bottom-end') {
|
61
|
+
newPlacement = 'top';
|
62
|
+
}
|
63
|
+
const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
|
64
|
+
top = newPosition.top;
|
65
|
+
left = newPosition.left;
|
66
|
+
placement = newPosition.placement;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
// Top
|
70
|
+
if (this.originalPlacement.startsWith('top')) {
|
71
|
+
const availableSpaceAbove = triggerRect.top;
|
72
|
+
const availableSpaceBelow = viewportHeight - triggerRect.bottom;
|
73
|
+
if (availableSpaceAbove < tooltipRect.height + this.distance && availableSpaceBelow >= tooltipRect.height + this.distance) {
|
74
|
+
let newPlacement = 'bottom';
|
75
|
+
if (this.originalPlacement === 'top-start') {
|
76
|
+
newPlacement = 'bottom-start';
|
77
|
+
}
|
78
|
+
else if (this.originalPlacement === 'top-end') {
|
79
|
+
newPlacement = 'bottom-end';
|
80
|
+
}
|
81
|
+
const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
|
82
|
+
top = newPosition.top;
|
83
|
+
left = newPosition.left;
|
84
|
+
placement = newPosition.placement;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
// Left
|
88
|
+
if (this.originalPlacement.startsWith('left')) {
|
89
|
+
const availableSpaceLeft = triggerRect.left;
|
90
|
+
const availableSpaceRight = viewportWidth - triggerRect.right;
|
91
|
+
if (availableSpaceLeft < tooltipRect.width + this.distance && availableSpaceRight >= tooltipRect.width + this.distance) {
|
92
|
+
let newPlacement = 'right';
|
93
|
+
if (this.originalPlacement === 'left-start') {
|
94
|
+
newPlacement = 'right-start';
|
95
|
+
}
|
96
|
+
else if (this.originalPlacement === 'left-end') {
|
97
|
+
newPlacement = 'right-end';
|
98
|
+
}
|
99
|
+
const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
|
100
|
+
top = newPosition.top;
|
101
|
+
left = newPosition.left;
|
102
|
+
placement = newPosition.placement;
|
103
|
+
}
|
104
|
+
}
|
105
|
+
// Right
|
106
|
+
if (this.originalPlacement.startsWith('right')) {
|
107
|
+
const availableSpaceRight = viewportWidth - triggerRect.right;
|
108
|
+
const availableSpaceLeft = triggerRect.left;
|
109
|
+
if (availableSpaceRight < tooltipRect.width + this.distance && availableSpaceLeft >= tooltipRect.width + this.distance) {
|
110
|
+
let newPlacement = 'left';
|
111
|
+
if (this.originalPlacement === 'right-start') {
|
112
|
+
newPlacement = 'left-start';
|
113
|
+
}
|
114
|
+
else if (this.originalPlacement === 'right-end') {
|
115
|
+
newPlacement = 'left-end';
|
116
|
+
}
|
117
|
+
const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
|
118
|
+
top = newPosition.top;
|
119
|
+
left = newPosition.left;
|
120
|
+
placement = newPosition.placement;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
this.setAttribute('placement', placement);
|
124
|
+
this.tooltip.style.top = `${top}px`;
|
125
|
+
this.tooltip.style.left = `${left}px`;
|
126
|
+
const { caretLeft, caretTop } = getCaretPosition({
|
127
|
+
placement,
|
128
|
+
tooltipRect,
|
129
|
+
triggerRect,
|
130
|
+
caretSize: this.caretSize,
|
131
|
+
left,
|
132
|
+
top
|
133
|
+
});
|
134
|
+
this.caret.style.left = `${caretLeft}px`;
|
135
|
+
this.caret.style.top = `${caretTop}px`;
|
136
|
+
};
|
137
|
+
this.showTooltip = () => {
|
138
|
+
const trimmedContent = this.content.trim();
|
139
|
+
if (!trimmedContent && !this.hasTooltipSlot) {
|
140
|
+
return;
|
141
|
+
}
|
142
|
+
if (!this.disabled && isInViewport(this.triggerContainer)) {
|
143
|
+
this.emit('nile-show');
|
144
|
+
this.open = true;
|
145
|
+
this.updateComplete.then(() => {
|
146
|
+
requestAnimationFrame(() => {
|
147
|
+
this.updateTooltipPosition();
|
148
|
+
this.emit('nile-after-show');
|
149
|
+
});
|
150
|
+
});
|
151
|
+
}
|
152
|
+
else {
|
153
|
+
this.open = false;
|
154
|
+
}
|
155
|
+
};
|
156
|
+
this.hideTooltip = () => {
|
157
|
+
this.emit('nile-hide');
|
158
|
+
this.open = false;
|
159
|
+
setTimeout(() => {
|
160
|
+
this.emit('nile-after-hide');
|
161
|
+
}, 200);
|
162
|
+
};
|
163
|
+
this.handleMouseOver = () => {
|
164
|
+
if (this.trigger.includes('hover')) {
|
165
|
+
clearTimeout(this.hoverTimeout);
|
166
|
+
this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 300);
|
167
|
+
}
|
168
|
+
};
|
169
|
+
this.handleMouseOut = () => {
|
170
|
+
if (this.trigger.includes('hover')) {
|
171
|
+
clearTimeout(this.hoverTimeout);
|
172
|
+
this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 150);
|
173
|
+
}
|
174
|
+
};
|
175
|
+
this.handleClick = () => {
|
176
|
+
if (this.trigger.includes('click')) {
|
177
|
+
if (!this.open && isInViewport(this.triggerContainer)) {
|
178
|
+
this.showTooltip();
|
179
|
+
}
|
180
|
+
else {
|
181
|
+
this.hideTooltip();
|
182
|
+
}
|
183
|
+
}
|
184
|
+
};
|
185
|
+
this.handleFocus = () => {
|
186
|
+
if (this.trigger.includes('focus')) {
|
187
|
+
this.showTooltip();
|
188
|
+
}
|
189
|
+
};
|
190
|
+
this.handleBlur = () => {
|
191
|
+
if (this.trigger.includes('focus')) {
|
192
|
+
this.hideTooltip();
|
193
|
+
}
|
194
|
+
};
|
57
195
|
}
|
58
|
-
/**
|
59
|
-
* The styles for Tooltip
|
60
|
-
* @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
|
61
|
-
*/
|
62
196
|
static get styles() {
|
63
197
|
return [styles];
|
64
198
|
}
|
65
199
|
connectedCallback() {
|
66
200
|
super.connectedCallback();
|
67
|
-
this.
|
68
|
-
|
69
|
-
|
70
|
-
this.handleKeyDown = this.handleKeyDown.bind(this);
|
71
|
-
this.handleMouseOver = this.handleMouseOver.bind(this);
|
72
|
-
this.handleMouseOut = this.handleMouseOut.bind(this);
|
73
|
-
this.updateComplete.then(() => {
|
74
|
-
this.addEventListener('blur', this.handleBlur, true);
|
75
|
-
this.addEventListener('focus', this.handleFocus, true);
|
76
|
-
this.addEventListener('click', this.handleClick);
|
77
|
-
this.addEventListener('keydown', this.handleKeyDown);
|
78
|
-
this.addEventListener('mouseover', this.handleMouseOver);
|
79
|
-
this.addEventListener('mouseout', this.handleMouseOut);
|
80
|
-
});
|
201
|
+
this.originalPlacement = this.placement;
|
202
|
+
window.addEventListener('resize', this.updateTooltipPosition);
|
203
|
+
window.addEventListener('scroll', this.updateTooltipPosition, true);
|
81
204
|
}
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
205
|
+
updated(changedProps) {
|
206
|
+
super.updated?.(changedProps);
|
207
|
+
const validPlacements = [
|
208
|
+
'top', 'top-start', 'top-end',
|
209
|
+
'right', 'right-start', 'right-end',
|
210
|
+
'bottom', 'bottom-start', 'bottom-end',
|
211
|
+
'left', 'left-start', 'left-end'
|
212
|
+
];
|
213
|
+
if (!validPlacements.includes(this.placement)) {
|
214
|
+
console.warn(`[nile-tooltip] Invalid placement "${this.placement}", defaulting to "bottom".`);
|
215
|
+
this.placement = 'top';
|
88
216
|
}
|
89
|
-
|
90
|
-
|
91
|
-
super.disconnectedCallback();
|
92
|
-
this.removeEventListener('blur', this.handleBlur, true);
|
93
|
-
this.removeEventListener('focus', this.handleFocus, true);
|
94
|
-
this.removeEventListener('click', this.handleClick);
|
95
|
-
this.removeEventListener('keydown', this.handleKeyDown);
|
96
|
-
this.removeEventListener('mouseover', this.handleMouseOver);
|
97
|
-
this.removeEventListener('mouseout', this.handleMouseOut);
|
98
|
-
}
|
99
|
-
handleBlur() {
|
100
|
-
if (this.hasTrigger('focus')) {
|
101
|
-
this.hide();
|
217
|
+
if (!validPlacements.includes(this.originalPlacement)) {
|
218
|
+
this.originalPlacement = 'top';
|
102
219
|
}
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
}
|
109
|
-
else {
|
110
|
-
this.show();
|
111
|
-
}
|
112
|
-
}
|
113
|
-
}
|
114
|
-
handleFocus() {
|
115
|
-
if (this.hasTrigger('focus')) {
|
116
|
-
this.show();
|
117
|
-
}
|
118
|
-
}
|
119
|
-
handleKeyDown(event) {
|
120
|
-
// Pressing escape when the target element has focus should dismiss the tooltip
|
121
|
-
if (this.open && event.key === 'Escape') {
|
122
|
-
event.stopPropagation();
|
123
|
-
this.hide();
|
124
|
-
}
|
125
|
-
}
|
126
|
-
handleMouseOver() {
|
127
|
-
if (this.hasTrigger('hover')) {
|
128
|
-
const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
|
129
|
-
clearTimeout(this.hoverTimeout);
|
130
|
-
this.hoverTimeout = window.setTimeout(() => this.show(), delay);
|
131
|
-
}
|
132
|
-
}
|
133
|
-
handleMouseOut() {
|
134
|
-
if (this.hasTrigger('hover')) {
|
135
|
-
const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
|
136
|
-
clearTimeout(this.hoverTimeout);
|
137
|
-
this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
|
138
|
-
}
|
139
|
-
}
|
140
|
-
hasTrigger(triggerType) {
|
141
|
-
const triggers = this.trigger.split(' ');
|
142
|
-
return triggers.includes(triggerType);
|
143
|
-
}
|
144
|
-
async handleOpenChange() {
|
145
|
-
if (this.open) {
|
146
|
-
if (this.disabled) {
|
147
|
-
return;
|
148
|
-
}
|
149
|
-
// Show
|
150
|
-
this.emit('nile-show');
|
151
|
-
await stopAnimations(this.body);
|
152
|
-
this.body.hidden = false;
|
153
|
-
this.popup.active = true;
|
154
|
-
const { keyframes, options } = getAnimation(this, 'tooltip.show', {
|
155
|
-
dir: '',
|
220
|
+
if (changedProps.has('open') && this.open) {
|
221
|
+
this.updateComplete.then(() => {
|
222
|
+
requestAnimationFrame(() => {
|
223
|
+
this.updateTooltipPosition();
|
224
|
+
});
|
156
225
|
});
|
157
|
-
await animateTo(this.popup.popup, keyframes, options);
|
158
|
-
this.emit('nile-after-show');
|
159
|
-
}
|
160
|
-
else {
|
161
|
-
// Hide
|
162
|
-
this.emit('nile-hide');
|
163
|
-
await stopAnimations(this.body);
|
164
|
-
const { keyframes, options } = getAnimation(this, 'tooltip.hide', {
|
165
|
-
dir: '',
|
166
|
-
});
|
167
|
-
await animateTo(this.popup.popup, keyframes, options);
|
168
|
-
this.popup.active = false;
|
169
|
-
this.body.hidden = true;
|
170
|
-
this.emit('nile-after-hide');
|
171
226
|
}
|
172
227
|
}
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
}
|
178
|
-
}
|
179
|
-
handleDisabledChange() {
|
180
|
-
if (this.disabled && this.open) {
|
181
|
-
this.hide();
|
182
|
-
}
|
228
|
+
disconnectedCallback() {
|
229
|
+
super.disconnectedCallback();
|
230
|
+
window.removeEventListener('resize', this.updateTooltipPosition);
|
231
|
+
window.removeEventListener('scroll', this.updateTooltipPosition, true);
|
183
232
|
}
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
}
|
189
|
-
this.open = true;
|
190
|
-
return waitForEvent(this, 'nile-after-show');
|
191
|
-
}
|
192
|
-
/** Hides the tooltip */
|
193
|
-
async hide() {
|
194
|
-
if (!this.open) {
|
195
|
-
return undefined;
|
196
|
-
}
|
197
|
-
this.open = false;
|
198
|
-
return waitForEvent(this, 'nile-after-hide');
|
233
|
+
handleTooltipSlotChange() {
|
234
|
+
const nodes = this.tooltipSlot.assignedNodes({ flatten: true });
|
235
|
+
this.hasTooltipSlot = nodes.length > 0;
|
236
|
+
this.requestUpdate();
|
199
237
|
}
|
200
238
|
render() {
|
201
239
|
return html `
|
202
|
-
<
|
203
|
-
|
204
|
-
|
205
|
-
popup:base__popup,
|
206
|
-
arrow:base__arrow
|
207
|
-
"
|
208
|
-
class=${classMap({
|
209
|
-
tooltip: true,
|
210
|
-
'tooltip--open': this.open,
|
211
|
-
})}
|
212
|
-
placement=${this.placement}
|
213
|
-
distance=${this.distance}
|
214
|
-
skidding=${this.skidding}
|
215
|
-
strategy=${this.hoist ? 'fixed' : 'absolute'}
|
216
|
-
flip
|
217
|
-
shift
|
218
|
-
arrow
|
240
|
+
<div
|
241
|
+
class="tooltip"
|
242
|
+
id="tooltip"
|
219
243
|
>
|
220
|
-
<
|
244
|
+
<div class="tooltip-content" part="content">
|
245
|
+
<slot name="content" @slotchange=${this.handleTooltipSlotChange}></slot>
|
246
|
+
${!this.hasTooltipSlot ? html `${this.content}` : null}
|
247
|
+
</div>
|
248
|
+
<div class="tooltip-caret" style="--caret-size: ${this.caretSize}px;"></div>
|
249
|
+
</div>
|
221
250
|
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
}
|
230
|
-
|
231
|
-
|
232
|
-
>
|
233
|
-
|
234
|
-
</slot>
|
235
|
-
</nile-popup>
|
251
|
+
<div
|
252
|
+
class="trigger-container"
|
253
|
+
tabindex="0"
|
254
|
+
@mouseover=${this.handleMouseOver}
|
255
|
+
@mouseout=${this.handleMouseOut}
|
256
|
+
@click=${this.handleClick}
|
257
|
+
@focusin=${this.handleFocus}
|
258
|
+
@focusout=${this.handleBlur}
|
259
|
+
aria-describedby="tooltip"
|
260
|
+
>
|
261
|
+
<slot></slot>
|
262
|
+
</div>
|
236
263
|
`;
|
237
264
|
}
|
238
265
|
};
|
239
266
|
__decorate([
|
240
|
-
|
241
|
-
], NileTooltip.prototype, "defaultSlot", void 0);
|
242
|
-
__decorate([
|
243
|
-
query('.tooltip__body')
|
244
|
-
], NileTooltip.prototype, "body", void 0);
|
245
|
-
__decorate([
|
246
|
-
query('nile-popup')
|
247
|
-
], NileTooltip.prototype, "popup", void 0);
|
248
|
-
__decorate([
|
249
|
-
property({ type: String, reflect: true })
|
267
|
+
property({ type: String })
|
250
268
|
], NileTooltip.prototype, "content", void 0);
|
251
269
|
__decorate([
|
252
|
-
property({
|
253
|
-
], NileTooltip.prototype, "size", void 0);
|
254
|
-
__decorate([
|
255
|
-
property()
|
270
|
+
property({ type: String })
|
256
271
|
], NileTooltip.prototype, "placement", void 0);
|
257
272
|
__decorate([
|
258
273
|
property({ type: Boolean, reflect: true })
|
259
274
|
], NileTooltip.prototype, "disabled", void 0);
|
260
|
-
__decorate([
|
261
|
-
property({ type: Number })
|
262
|
-
], NileTooltip.prototype, "distance", void 0);
|
263
275
|
__decorate([
|
264
276
|
property({ type: Boolean, reflect: true })
|
265
277
|
], NileTooltip.prototype, "open", void 0);
|
266
|
-
__decorate([
|
267
|
-
property({ type: Number })
|
268
|
-
], NileTooltip.prototype, "skidding", void 0);
|
269
278
|
__decorate([
|
270
279
|
property()
|
271
280
|
], NileTooltip.prototype, "trigger", void 0);
|
272
281
|
__decorate([
|
273
|
-
property({ type:
|
282
|
+
property({ type: Number })
|
283
|
+
], NileTooltip.prototype, "distance", void 0);
|
284
|
+
__decorate([
|
285
|
+
property({ type: Number })
|
286
|
+
], NileTooltip.prototype, "skidding", void 0);
|
287
|
+
__decorate([
|
288
|
+
property({ type: Boolean, reflect: true })
|
274
289
|
], NileTooltip.prototype, "hoist", void 0);
|
275
290
|
__decorate([
|
276
|
-
|
277
|
-
], NileTooltip.prototype, "
|
291
|
+
query('.tooltip')
|
292
|
+
], NileTooltip.prototype, "tooltip", void 0);
|
293
|
+
__decorate([
|
294
|
+
query('.trigger-container')
|
295
|
+
], NileTooltip.prototype, "triggerContainer", void 0);
|
278
296
|
__decorate([
|
279
|
-
|
280
|
-
], NileTooltip.prototype, "
|
297
|
+
query('.tooltip-caret')
|
298
|
+
], NileTooltip.prototype, "caret", void 0);
|
281
299
|
__decorate([
|
282
|
-
|
283
|
-
], NileTooltip.prototype, "
|
300
|
+
query('slot[name="content"]')
|
301
|
+
], NileTooltip.prototype, "tooltipSlot", void 0);
|
284
302
|
NileTooltip = __decorate([
|
285
303
|
customElement('nile-tooltip')
|
286
304
|
], NileTooltip);
|
287
305
|
export { NileTooltip };
|
288
|
-
setDefaultAnimation('tooltip.show', {
|
289
|
-
keyframes: [
|
290
|
-
{ opacity: 0, scale: 0.8 },
|
291
|
-
{ opacity: 1, scale: 1 },
|
292
|
-
],
|
293
|
-
options: { duration: 150, easing: 'ease' },
|
294
|
-
});
|
295
|
-
setDefaultAnimation('tooltip.hide', {
|
296
|
-
keyframes: [
|
297
|
-
{ opacity: 1, scale: 1 },
|
298
|
-
{ opacity: 0, scale: 0.8 },
|
299
|
-
],
|
300
|
-
options: { duration: 150, easing: 'ease' },
|
301
|
-
});
|
302
|
-
export default NileTooltip;
|
303
306
|
//# sourceMappingURL=nile-tooltip.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-tooltip.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-tooltip.css';\nimport '../nile-popup/nile-popup';\nimport { animateTo, parseDuration, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n getAnimation,\n setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { html } from 'lit';\n// import { LocalizeController } from '../utilities/localize';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NilePopup from '../nile-popup/nile-popup';\n/**\n * Nile icon component.\n *\n * @tag nile-tooltip\n *\n */\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n /**\n * The styles for Tooltip\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private hoverTimeout: number;\n // private readonly localize = new LocalizeController(this);\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n @query('.tooltip__body') body: HTMLElement;\n @query('nile-popup') popup: NilePopup;\n\n /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */\n @property({ type: String, reflect: true }) content = '';\n\n /** Size Property to decide the tool tip size */\n @property({ reflect: true }) size: 'small' | 'large' = 'small';\n\n /**\n * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n */\n @property() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n\n /** Disables the tooltip so it won't show when triggered. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** The distance in pixels from which to offset the tooltip away from its target. */\n @property({ type: Number }) distance = 8;\n\n /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** The distance in pixels from which to offset the tooltip along its target. */\n @property({ type: Number }) skidding = 0;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @property() trigger = 'hover focus';\n\n /**\n * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n * scenarios.\n */\n @property({ type: Boolean }) hoist = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.handleBlur = this.handleBlur.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleMouseOver = this.handleMouseOver.bind(this);\n this.handleMouseOut = this.handleMouseOut.bind(this);\n\n this.updateComplete.then(() => {\n this.addEventListener('blur', this.handleBlur, true);\n this.addEventListener('focus', this.handleFocus, true);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('keydown', this.handleKeyDown);\n this.addEventListener('mouseover', this.handleMouseOver);\n this.addEventListener('mouseout', this.handleMouseOut);\n });\n }\n\n firstUpdated() {\n this.body.hidden = !this.open;\n\n // If the tooltip is visible on init, update its position\n if (this.open) {\n this.popup.active = true;\n this.popup.reposition();\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('blur', this.handleBlur, true);\n this.removeEventListener('focus', this.handleFocus, true);\n this.removeEventListener('click', this.handleClick);\n this.removeEventListener('keydown', this.handleKeyDown);\n this.removeEventListener('mouseover', this.handleMouseOver);\n this.removeEventListener('mouseout', this.handleMouseOut);\n }\n\n private handleBlur() {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n }\n\n private handleClick() {\n if (this.hasTrigger('click')) {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n }\n\n private handleFocus() {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n }\n\n private handleMouseOver() {\n if (this.hasTrigger('hover')) {\n const delay = parseDuration(\n getComputedStyle(this).getPropertyValue('--show-delay')\n );\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.show(), delay);\n }\n }\n\n private handleMouseOut() {\n if (this.hasTrigger('hover')) {\n const delay = parseDuration(\n getComputedStyle(this).getPropertyValue('--hide-delay')\n );\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.hide(), delay);\n }\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n @watch('open', { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n if (this.disabled) {\n return;\n }\n\n // Show\n this.emit('nile-show');\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n this.popup.active = true;\n const { keyframes, options } = getAnimation(this, 'tooltip.show', {\n dir: '',\n });\n await animateTo(this.popup.popup, keyframes, options);\n\n this.emit('nile-after-show');\n } else {\n // Hide\n this.emit('nile-hide');\n\n await stopAnimations(this.body);\n const { keyframes, options } = getAnimation(this, 'tooltip.hide', {\n dir: '',\n });\n await animateTo(this.popup.popup, keyframes, options);\n this.popup.active = false;\n this.body.hidden = true;\n\n this.emit('nile-after-hide');\n }\n }\n\n @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])\n async handleOptionsChange() {\n if (this.hasUpdated) {\n await this.updateComplete;\n this.popup.reposition();\n }\n }\n\n @watch('disabled')\n handleDisabledChange() {\n if (this.disabled && this.open) {\n this.hide();\n }\n }\n\n /** Shows the tooltip. */\n async show() {\n if (this.open || !this.content?.trim().length) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'nile-after-show');\n }\n\n /** Hides the tooltip */\n async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'nile-after-hide');\n }\n\n render() {\n return html`\n <nile-popup\n part=\"base\"\n exportparts=\"\n popup:base__popup,\n arrow:base__arrow\n \"\n class=${classMap({\n tooltip: true,\n 'tooltip--open': this.open,\n })}\n placement=${this.placement}\n distance=${this.distance}\n skidding=${this.skidding}\n strategy=${this.hoist ? 'fixed' : 'absolute'}\n flip\n shift\n arrow\n >\n <slot slot=\"anchor\" aria-describedby=\"tooltip\"></slot>\n\n <slot\n name=\"content\"\n part=\"body\"\n id=\"tooltip\"\n class=${classMap({\n tooltip__body: true,\n 'tooltip__body--large': this.size === 'large',\n })}\n role=\"tooltip\"\n aria-live=${this.open ? 'polite' : 'off'}\n >\n ${this.content}\n </slot>\n </nile-popup>\n `;\n }\n}\n\nsetDefaultAnimation('tooltip.show', {\n keyframes: [\n { opacity: 0, scale: 0.8 },\n { opacity: 1, scale: 1 },\n ],\n options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('tooltip.hide', {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.8 },\n ],\n options: { duration: 150, easing: 'ease' },\n});\n\nexport default NileTooltip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tooltip': NileTooltip;\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"nile-tooltip.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["\n/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { LitElement, html, css, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-tooltip.css';\nimport NileElement from '../internal/nile-element';\nimport { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';\n\n/**\n * Nile tooltip component.\n *\n * @tag nile-tooltip\n *\n */\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n @property({ type: String }) content = '';\n @property({ type: String })\n placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) open = false;\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @property() trigger = 'hover focus';\n @property({ type: Number }) distance = 8;\n private readonly SHIFT_OFFSET = 16;\n /** The distance in pixels from which to offset the tooltip along its target. */\n @property({ type: Number }) skidding = 0;\n @property({ type: Boolean, reflect: true }) hoist = false;\n\n @query('.tooltip') tooltip!: HTMLElement;\n @query('.trigger-container') triggerContainer!: HTMLElement;\n @query('.tooltip-caret') caret!: HTMLElement;\n @query('slot[name=\"content\"]') tooltipSlot!: HTMLSlotElement;\n\n private hasTooltipSlot = false;\n private hoverTimeout: number = 0;\n private caretSize = 6;\n private originalPlacement: string = this.placement;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.originalPlacement = this.placement;\n window.addEventListener('resize', this.updateTooltipPosition);\n window.addEventListener('scroll', this.updateTooltipPosition, true);\n }\n\n updated(changedProps: Map<string, unknown>) {\n super.updated?.(changedProps);\n\n const validPlacements = [\n 'top', 'top-start', 'top-end',\n 'right', 'right-start', 'right-end',\n 'bottom', 'bottom-start', 'bottom-end',\n 'left', 'left-start', 'left-end'\n ];\n\n if (!validPlacements.includes(this.placement)) {\n console.warn(`[nile-tooltip] Invalid placement \"${this.placement}\", defaulting to \"bottom\".`);\n this.placement = 'top';\n }\n\n if (!validPlacements.includes(this.originalPlacement)) {\n this.originalPlacement = 'top';\n }\n \n if (changedProps.has('open') && this.open) {\n this.updateComplete.then(() => {\n requestAnimationFrame(() => {\n this.updateTooltipPosition();\n });\n });\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('resize', this.updateTooltipPosition);\n window.removeEventListener('scroll', this.updateTooltipPosition, true);\n }\n\n private handleTooltipSlotChange() {\n const nodes = this.tooltipSlot.assignedNodes({ flatten: true });\n this.hasTooltipSlot = nodes.length > 0;\n this.requestUpdate();\n }\n\n private updateTooltipPosition = () => {\n if (!isInViewport(this.triggerContainer)) {\n this.open = false;\n return;\n }\n\n const triggerRect = this.triggerContainer.getBoundingClientRect();\n const tooltipRect = this.tooltip.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n \n let { top, left, placement } = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n this.originalPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n\n // FallBack Positions\n\n // Bottom\n if (this.originalPlacement.startsWith('bottom')) {\n const availableSpaceBelow = viewportHeight - triggerRect.bottom;\n if (availableSpaceBelow < tooltipRect.height + this.distance) {\n let newPlacement: typeof this.originalPlacement = 'top';\n if (this.originalPlacement === 'bottom-start') {\n newPlacement = 'top';\n } else if (this.originalPlacement === 'bottom-end') {\n newPlacement = 'top';\n }\n \n const newPosition = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n newPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n top = newPosition.top;\n left = newPosition.left;\n placement = newPosition.placement;\n }\n }\n // Top\n if (this.originalPlacement.startsWith('top')) {\n const availableSpaceAbove = triggerRect.top;\n const availableSpaceBelow = viewportHeight - triggerRect.bottom;\n if (availableSpaceAbove < tooltipRect.height + this.distance && availableSpaceBelow >= tooltipRect.height + this.distance) {\n let newPlacement: typeof this.originalPlacement = 'bottom';\n if (this.originalPlacement === 'top-start') {\n newPlacement = 'bottom-start';\n } else if (this.originalPlacement === 'top-end') {\n newPlacement = 'bottom-end';\n }\n \n const newPosition = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n newPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n top = newPosition.top;\n left = newPosition.left;\n placement = newPosition.placement;\n }\n }\n\n // Left\n if (this.originalPlacement.startsWith('left')) {\n const availableSpaceLeft = triggerRect.left;\n const availableSpaceRight = viewportWidth - triggerRect.right;\n if (availableSpaceLeft < tooltipRect.width + this.distance && availableSpaceRight >= tooltipRect.width + this.distance) {\n let newPlacement: typeof this.originalPlacement = 'right';\n if (this.originalPlacement === 'left-start') {\n newPlacement = 'right-start';\n } else if (this.originalPlacement === 'left-end') {\n newPlacement = 'right-end';\n }\n \n const newPosition = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n newPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n top = newPosition.top;\n left = newPosition.left;\n placement = newPosition.placement;\n }\n }\n\n // Right\n if (this.originalPlacement.startsWith('right')) {\n const availableSpaceRight = viewportWidth - triggerRect.right;\n const availableSpaceLeft = triggerRect.left;\n if (availableSpaceRight < tooltipRect.width + this.distance && availableSpaceLeft >= tooltipRect.width + this.distance) {\n let newPlacement: typeof this.originalPlacement = 'left';\n if (this.originalPlacement === 'right-start') {\n newPlacement = 'left-start';\n } else if (this.originalPlacement === 'right-end') {\n newPlacement = 'left-end';\n }\n \n const newPosition = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n newPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n top = newPosition.top;\n left = newPosition.left;\n placement = newPosition.placement;\n }\n }\n\n this.setAttribute('placement', placement);\n this.tooltip.style.top = `${top}px`;\n this.tooltip.style.left = `${left}px`;\n\n const { caretLeft, caretTop } = getCaretPosition({\n placement,\n tooltipRect,\n triggerRect,\n caretSize: this.caretSize,\n left,\n top\n });\n\n this.caret.style.left = `${caretLeft}px`;\n this.caret.style.top = `${caretTop}px`;\n };\n\n private showTooltip = () => {\n const trimmedContent = this.content.trim();\n if (!trimmedContent && !this.hasTooltipSlot) {\n return;\n }\n if (!this.disabled && isInViewport(this.triggerContainer)) {\n this.emit('nile-show');\n this.open = true;\n this.updateComplete.then(() => {\n requestAnimationFrame(() => {\n this.updateTooltipPosition();\n this.emit('nile-after-show');\n });\n });\n } else {\n this.open = false;\n }\n };\n\n private hideTooltip = () => {\n this.emit('nile-hide');\n this.open = false;\n setTimeout(() => {\n this.emit('nile-after-hide');\n }, 200);\n };\n\n private handleMouseOver = () => {\n if (this.trigger.includes('hover')) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 300);\n }\n };\n\n private handleMouseOut = () => {\n if (this.trigger.includes('hover')) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 150);\n }\n };\n\n private handleClick = () => {\n if (this.trigger.includes('click')) {\n if (!this.open && isInViewport(this.triggerContainer)) {\n this.showTooltip();\n } else {\n this.hideTooltip();\n }\n }\n };\n\n private handleFocus = () => {\n if (this.trigger.includes('focus')) {\n this.showTooltip();\n }\n };\n \n\n private handleBlur = () => {\n if (this.trigger.includes('focus')) {\n this.hideTooltip();\n }\n };\n\n render() {\n return html`\n <div\n class=\"tooltip\"\n id=\"tooltip\"\n >\n <div class=\"tooltip-content\" part=\"content\">\n <slot name=\"content\" @slotchange=${this.handleTooltipSlotChange}></slot>\n ${!this.hasTooltipSlot ? html`${this.content}` : null}\n </div>\n <div class=\"tooltip-caret\" style=\"--caret-size: ${this.caretSize}px;\"></div>\n </div>\n\n <div\n class=\"trigger-container\"\n tabindex=\"0\"\n @mouseover=${this.handleMouseOver}\n @mouseout=${this.handleMouseOut}\n @click=${this.handleClick}\n @focusin=${this.handleFocus}\n @focusout=${this.handleBlur}\n aria-describedby=\"tooltip\"\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tooltip': NileTooltip;\n }\n}\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
import './nile-tooltip';
|