kemet-ui 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/kemet-popper/kemet-popper.js +1 -1
- package/dist/components/kemet-popper/kemet-popper.js.map +1 -1
- package/dist/kemet-components.bundle.js +8 -9
- package/dist/kemet-components.bundle.js.map +1 -1
- package/dist/kemet-components.cjs +2455 -2631
- package/dist/kemet-components.js +2455 -2631
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement } from 'lit';
|
|
3
3
|
import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
|
|
4
|
-
import { createPopper } from '@popperjs/core';
|
|
4
|
+
import { createPopper } from '@popperjs/core/dist/esm';
|
|
5
5
|
import { emitEvent } from '../../utilities/misc/events';
|
|
6
6
|
import { keyCodes } from '../../utilities/misc/constants';
|
|
7
7
|
import { stylesPopper } from './styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kemet-popper.js","sourceRoot":"","sources":["../../../src/components/kemet-popper/kemet-popper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js';\nimport { createPopper } from '@popperjs/core';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { keyCodes } from '../../utilities/misc/constants';\nimport { TypeEffect, TypeFireOn, TypePlacement } from './types';\nimport { stylesPopper } from './styles';\nimport { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from './styles.effects';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper\n * @summary A wrapper component for the popper.js lib.\n *\n * @event kemet-popper-opened - Fires when the popper opens\n * @event kemet-popper-closed - Fires when the popper closes\n *\n * @slot trigger - Controls opening and closing the popover.\n * @slot content - The contents of the popover.\n *\n * @csspart trigger - Contains the trigger for the popover.\n * @csspart content - Contains the content for the popover.\n *\n * @cssproperty --kemet-popper-padding - The padding in the content slot.\n * @cssproperty --kemet-popper-border-color - The border color of the content.\n * @cssproperty --kemet-popper-background-color - The background color of the content.\n *\n * @prop {TypePlacement} placement - The position of the popper over the trigger.\n * @prop {boolean} opened - Determines if the the Popper is opened or closed\n * @prop {TypeEffect} effect - The open/close animation effect for the Popper\n * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover\n * @prop {string} strategy - Sets the strategy option in Popper's api\n * @prop {number} skidding - Sets an offset to the Popper from the trigger\n * @prop {number} distance - Sets spacing between the Popper and the trigger\n *\n */\n\n@customElement('kemet-popper')\nexport default class KemetPopper extends LitElement {\n static styles = [stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];\n\n @property({ type: String, reflect: true })\n placement: TypePlacement = 'top';\n\n @property({ type: Boolean, reflect: true })\n opened: boolean;\n\n @property({ type: String, reflect: true })\n effect: TypeEffect = 'fade';\n\n @property({ type: String, attribute: 'fire-on' })\n fireOn: TypeFireOn = 'hover';\n\n @property({ type: String })\n strategy: 'fixed' | 'absolute' = 'fixed';\n\n @property({ type: Number })\n skidding: number = 0;\n\n @property({ type: Number })\n distance: number = 0;\n\n /** @internal */\n @state()\n popperInstance: any;\n\n /** @internal */\n @query('#trigger')\n triggerElement: HTMLElement;\n\n /** @internal */\n @query('#content')\n contentElement: HTMLElement;\n\n /** @internal */\n @queryAll('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')\n focusableElements: any;\n\n constructor() {\n super();\n this.addEventListener('kemet-popper-close-btn', () => this.opened = false);\n }\n\n firstUpdated() {\n if (this.fireOn === 'click') {\n this.focusableElements.forEach((element) => {\n element.addEventListener('keydown', event => this.handleFocusableDown(event));\n });\n }\n }\n\n updated(prevProps) {\n this.refresh();\n\n if (!prevProps.get('opened') && this.opened === true) {\n emitEvent(this, 'kemet-popper-opened', this);\n }\n\n if (prevProps.get('opened') && this.opened === false) {\n emitEvent(this, 'kemet-popper-closed', this);\n }\n }\n\n render() {\n return html`\n <div\n id=\"trigger\"\n part=\"trigger\"\n tabIndex=\"0\"\n @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}\n @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}\n @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}\n @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}\n @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}\n @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}\n >\n <slot name=\"trigger\"></slot>\n </div>\n <div\n id=\"content\"\n @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}\n @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}\n >\n <slot name=\"content\" @slotchange=${() => this.makePopper()}></slot>\n </div>\n `;\n }\n\n refresh() {\n this.popperInstance?.setOptions({\n placement: this.placement,\n strategy: this.strategy,\n modifiers: [\n { name: 'offset', options: { offset: [this.skidding, this.distance] }}\n ],\n });\n }\n\n makePopper() {\n this.popperInstance = createPopper(this.triggerElement, this.contentElement, {\n placement: this.placement,\n strategy: this.strategy,\n modifiers: [\n { name: 'offset', options: { offset: [this.skidding, this.distance] }}\n ],\n });\n }\n\n toggle(event) {\n const isSlotTrigger = event.target.getAttribute('slot') === 'trigger';\n const isPartTrigger = event.target.getAttribute('part') === 'trigger';\n\n if (isSlotTrigger || isPartTrigger) {\n if (this.opened) {\n this.opened = false;\n } else {\n this.opened = true;\n }\n }\n }\n\n handleKeyUp(event) {\n event.preventDefault();\n\n if (event.keyCode === keyCodes.ESC) {\n this.opened = false;\n }\n\n if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {\n this.toggle(event);\n }\n }\n\n handleFocusableDown(event) {\n const firstFocusable = this.focusableElements[0];\n const lastFocusable = this.focusableElements[this.focusableElements.length - 1];\n\n if (event.key === 'Tab') {\n if (event.shiftKey && document.activeElement === firstFocusable) {\n event.preventDefault();\n lastFocusable.focus();\n } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n event.preventDefault();\n firstFocusable.focus();\n }\n }\n }\n }\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-popper': KemetPopper\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"kemet-popper.js","sourceRoot":"","sources":["../../../src/components/kemet-popper/kemet-popper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js';\nimport { createPopper } from '@popperjs/core/dist/esm';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { keyCodes } from '../../utilities/misc/constants';\nimport { TypeEffect, TypeFireOn, TypePlacement } from './types';\nimport { stylesPopper } from './styles';\nimport { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from './styles.effects';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper\n * @summary A wrapper component for the popper.js lib.\n *\n * @event kemet-popper-opened - Fires when the popper opens\n * @event kemet-popper-closed - Fires when the popper closes\n *\n * @slot trigger - Controls opening and closing the popover.\n * @slot content - The contents of the popover.\n *\n * @csspart trigger - Contains the trigger for the popover.\n * @csspart content - Contains the content for the popover.\n *\n * @cssproperty --kemet-popper-padding - The padding in the content slot.\n * @cssproperty --kemet-popper-border-color - The border color of the content.\n * @cssproperty --kemet-popper-background-color - The background color of the content.\n *\n * @prop {TypePlacement} placement - The position of the popper over the trigger.\n * @prop {boolean} opened - Determines if the the Popper is opened or closed\n * @prop {TypeEffect} effect - The open/close animation effect for the Popper\n * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover\n * @prop {string} strategy - Sets the strategy option in Popper's api\n * @prop {number} skidding - Sets an offset to the Popper from the trigger\n * @prop {number} distance - Sets spacing between the Popper and the trigger\n *\n */\n\n@customElement('kemet-popper')\nexport default class KemetPopper extends LitElement {\n static styles = [stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];\n\n @property({ type: String, reflect: true })\n placement: TypePlacement = 'top';\n\n @property({ type: Boolean, reflect: true })\n opened: boolean;\n\n @property({ type: String, reflect: true })\n effect: TypeEffect = 'fade';\n\n @property({ type: String, attribute: 'fire-on' })\n fireOn: TypeFireOn = 'hover';\n\n @property({ type: String })\n strategy: 'fixed' | 'absolute' = 'fixed';\n\n @property({ type: Number })\n skidding: number = 0;\n\n @property({ type: Number })\n distance: number = 0;\n\n /** @internal */\n @state()\n popperInstance: any;\n\n /** @internal */\n @query('#trigger')\n triggerElement: HTMLElement;\n\n /** @internal */\n @query('#content')\n contentElement: HTMLElement;\n\n /** @internal */\n @queryAll('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')\n focusableElements: any;\n\n constructor() {\n super();\n this.addEventListener('kemet-popper-close-btn', () => this.opened = false);\n }\n\n firstUpdated() {\n if (this.fireOn === 'click') {\n this.focusableElements.forEach((element) => {\n element.addEventListener('keydown', event => this.handleFocusableDown(event));\n });\n }\n }\n\n updated(prevProps) {\n this.refresh();\n\n if (!prevProps.get('opened') && this.opened === true) {\n emitEvent(this, 'kemet-popper-opened', this);\n }\n\n if (prevProps.get('opened') && this.opened === false) {\n emitEvent(this, 'kemet-popper-closed', this);\n }\n }\n\n render() {\n return html`\n <div\n id=\"trigger\"\n part=\"trigger\"\n tabIndex=\"0\"\n @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}\n @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}\n @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}\n @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}\n @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}\n @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}\n >\n <slot name=\"trigger\"></slot>\n </div>\n <div\n id=\"content\"\n @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}\n @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}\n >\n <slot name=\"content\" @slotchange=${() => this.makePopper()}></slot>\n </div>\n `;\n }\n\n refresh() {\n this.popperInstance?.setOptions({\n placement: this.placement,\n strategy: this.strategy,\n modifiers: [\n { name: 'offset', options: { offset: [this.skidding, this.distance] }}\n ],\n });\n }\n\n makePopper() {\n this.popperInstance = createPopper(this.triggerElement, this.contentElement, {\n placement: this.placement,\n strategy: this.strategy,\n modifiers: [\n { name: 'offset', options: { offset: [this.skidding, this.distance] }}\n ],\n });\n }\n\n toggle(event) {\n const isSlotTrigger = event.target.getAttribute('slot') === 'trigger';\n const isPartTrigger = event.target.getAttribute('part') === 'trigger';\n\n if (isSlotTrigger || isPartTrigger) {\n if (this.opened) {\n this.opened = false;\n } else {\n this.opened = true;\n }\n }\n }\n\n handleKeyUp(event) {\n event.preventDefault();\n\n if (event.keyCode === keyCodes.ESC) {\n this.opened = false;\n }\n\n if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {\n this.toggle(event);\n }\n }\n\n handleFocusableDown(event) {\n const firstFocusable = this.focusableElements[0];\n const lastFocusable = this.focusableElements[this.focusableElements.length - 1];\n\n if (event.key === 'Tab') {\n if (event.shiftKey && document.activeElement === firstFocusable) {\n event.preventDefault();\n lastFocusable.focus();\n } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n event.preventDefault();\n firstFocusable.focus();\n }\n }\n }\n }\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-popper': KemetPopper\n }\n}\n"]}
|