package.dist.Toast.js.map Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of webcomponents Show documentation
Show all versions of webcomponents Show documentation
UI5 Web Components: webcomponents.main
The newest version!
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isMac } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport type ToastPlacement from \"./types/ToastPlacement.js\";\n\n// Template\nimport ToastTemplate from \"./generated/templates/ToastTemplate.lit.js\";\n\n// Styles\nimport ToastCss from \"./generated/themes/Toast.css.js\";\n\n// Constants\nconst MIN_DURATION = 500;\nconst MAX_DURATION = 1000;\nconst openedToasts: Array = [];\nlet opener: HTMLElement | null;\n\nlet globalListenerAdded = false;\nconst handleGlobalKeydown = (e: KeyboardEvent) => {\n\tconst isCtrl = e.metaKey || (!isMac() && e.ctrlKey);\n\tconst isMKey = e.key && e.key.toLowerCase() === \"m\";\n\tconst isCombinationPressed = isCtrl && e.shiftKey && isMKey;\n\tconst hasOpenToast = openedToasts.length;\n\n\tif (isCombinationPressed) {\n\t\te.preventDefault();\n\n\t\tif (hasOpenToast) {\n\t\t\topenedToasts[0].focusable = true;\n\n\t\t\tif (openedToasts[0].focused) {\n\t\t\t\topenedToasts[0].focused = false;\n\t\t\t\topener?.focus();\n\t\t\t} else {\n\t\t\t\topener = (document.activeElement as HTMLElement);\n\t\t\t\topenedToasts[0].focus();\n\t\t\t}\n\t\t}\n\t}\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-toast` is a small, non-disruptive popup for success or information messages that\n * disappears automatically after a few seconds.\n *\n * ### Usage\n *\n * #### When to use:\n *\n * - You want to display a short success or information message.\n * - You do not want to interrupt users while they are performing an action.\n * - You want to confirm a successful action.\n *\n * #### When not to use:\n *\n * - You want to display error or warning message.\n * - You want to interrupt users while they are performing an action.\n * - You want to make sure that users read the message before they leave the page.\n * - You want users to be able to copy some part of the message text.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Toast.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.6\n * @slot {Array} default\n * Defines the text of the component.\n *\n * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n */\n@customElement({\n\ttag: \"ui5-toast\",\n\trenderer: litRender,\n\tstyles: ToastCss,\n\ttemplate: ToastTemplate,\n})\n\n/**\n * Fired after the component is auto closed.\n * @public\n * @since 2.0.0\n */\n@event(\"close\")\n\nclass Toast extends UI5Element {\n\t/**\n\t * Defines the duration in milliseconds for which component\n\t * remains on the screen before it's automatically closed.\n\t *\n\t * **Note:** The minimum supported value is `500` ms\n\t * and even if a lower value is set, the duration would remain `500` ms.\n\t * @default 3000\n\t * @public\n\t */\n\t@property({ type: Number })\n\tduration = 3000;\n\n\t/**\n\t * Defines the placement of the component.\n\t * @default \"BottomCenter\"\n\t * @public\n\t */\n\t@property()\n\tplacement: `${ToastPlacement}` = \"BottomCenter\";\n\n\t/**\n\t * Indicates whether the component is open (visible).\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/**\n\t * Indicates whether the component is hovered.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thover = false;\n\n\t/**\n\t * Indicates whether the toast could be focused\n\t * This happens when ctr / command + shift + m is pressed\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocusable = false;\n\n\t/**\n\t * Indicates whether the toast is focused\n\t * This happens when ctr / command + shift + m is pressed\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t_onfocusinFn: () => void;\n\t_onfocusoutFn: () => void;\n\t_onkeydownFn: (e: KeyboardEvent) => void;\n\t_onmouseoverFn: () => void;\n\t_onmouseleaveFn: () => void;\n\t_ontransitionendFn: () => void;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._onfocusinFn = this._onfocusin.bind(this);\n\t\tthis._onfocusoutFn = this._onfocusout.bind(this);\n\t\tthis._onkeydownFn = this._onkeydown.bind(this);\n\t\tthis._onmouseoverFn = this._onmouseover.bind(this);\n\t\tthis._onmouseleaveFn = this._onmouseleave.bind(this);\n\t\tthis._ontransitionendFn = this._ontransitionend.bind(this);\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.open) {\n\t\t\topenedToasts.pop();\n\t\t\topenedToasts.push(this);\n\t\t}\n\n\t\trequestAnimationFrame(() => {\n\t\t\t// Transition duration (animation) should be a third of the duration\n\t\t\t// property, but not bigger than the maximum allowed (1000ms).\n\t\t\tconst transitionDuration = Math.min(this.effectiveDuration / 3, MAX_DURATION);\n\n\t\t\tthis.style.transitionDuration = this.open ? `${transitionDuration}ms` : \"\";\n\t\t\tthis.style.transitionDelay = this.open ? `${this.effectiveDuration - transitionDuration}ms` : \"\";\n\t\t\tthis.style.opacity = this.open && !this.hover && !this.focused ? \"0\" : \"\";\n\t\t});\n\n\t\tif (!globalListenerAdded) {\n\t\t\tdocument.addEventListener(\"keydown\", handleGlobalKeydown);\n\t\t\tglobalListenerAdded = true;\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tif (this.focusable) {\n\t\t\tthis.focused = true;\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t/**\n\t * If the minimum duration is lower than 500ms, we force\n\t * it to be 500ms, as described in the documentation.\n\t * @private\n\t */\n\tget effectiveDuration() {\n\t\treturn this.duration < MIN_DURATION ? MIN_DURATION : this.duration;\n\t}\n\n\t_ontransitionend() {\n\t\tif (this.hover || this.focused) {\n\t\t\treturn;\n\t\t}\n\t\tthis.open = false;\n\t\tthis.focusable = false;\n\t\tthis.focused = false;\n\t\tthis.fireEvent(\"close\");\n\t}\n\n\t_onmouseover() {\n\t\tthis.hover = true;\n\t}\n\n\t_onmouseleave() {\n\t\tthis.hover = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEscape(e)) {\n\t\t\tthis.focused = false;\n\t\t\topener?.focus();\n\t\t}\n\t}\n\n\tget _tabindex() {\n\t\treturn this.focused ? \"0\" : \"-1\";\n\t}\n\n\tonEnterDOM(): void {\n\t\tthis.addEventListener(\"focusin\", this._onfocusinFn);\n\t\tthis.addEventListener(\"focusout\", this._onfocusoutFn);\n\t\tthis.addEventListener(\"keydown\", this._onkeydownFn);\n\t\tthis.addEventListener(\"mouseover\", this._onmouseoverFn);\n\t\tthis.addEventListener(\"mouseleave\", this._onmouseleaveFn);\n\t\tthis.addEventListener(\"transitionend\", this._ontransitionendFn);\n\t\tthis.addEventListener(\"transitioncancel\", this._ontransitionendFn);\n\t}\n\n\tonExitDOM(): void {\n\t\tthis.removeEventListener(\"focusin\", this._onfocusinFn);\n\t\tthis.removeEventListener(\"focusout\", this._onfocusoutFn);\n\t\tthis.removeEventListener(\"keydown\", this._onkeydownFn);\n\t\tthis.removeEventListener(\"mouseover\", this._onmouseoverFn);\n\t\tthis.removeEventListener(\"mouseleave\", this._onmouseleaveFn);\n\t\tthis.removeEventListener(\"transitionend\", this._ontransitionendFn);\n\t\tthis.removeEventListener(\"transitioncancel\", this._ontransitionendFn);\n\t}\n}\n\nToast.define();\n\nexport default Toast;\n"]}