carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
1 lines • 5.07 kB
Source Map (JSON)
{"version":3,"sources":["components/copy-button/copy-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAQxE;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B;;wCAYxC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa;;;;;;;oBA2BzB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF;;;GAGG;AACH,cACM,YAAa,SAAQ,iBAAsB;IAC/C;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAG3B;IAEH;;OAEG;IACH,OAAO,CAAC,aAAa,CAAS;IAE9B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAI1B;;OAEG;IAEH,mBAAmB,SAAuB;IAE1C;;OAEG;IAEH,YAAY,SAAa;IAEzB;;OAEG;IAEH,eAAe,SAAQ;IAEvB,gBAAgB;IAIhB,MAAM;IAUN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"copy-button.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit-html/directives/class-map';\nimport { TemplateResult } from 'lit-html';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport Copy16 from '@carbon/icons/lib/copy/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './copy-button.scss';\n\nconst { prefix } = settings;\n\n/**\n * Note: For `<bx-code-snippet>` only. The API is subject to change/removal.\n * @param update The callback function that dictates how to update the DOM with new feedback tooltip state.\n * @returns A function that shows the feedback tooltip for the given duration.\n * @private\n */\nexport const _createHandleFeedbackTooltip = (update: (properties: { showFeedback?: boolean }) => void) => {\n let timeoutId: number | void;\n return (timeout: number) => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = undefined;\n }\n update({ showFeedback: true });\n timeoutId = (setTimeout(() => {\n update({ showFeedback: false });\n }, timeout) as unknown) as number;\n };\n};\n\n/**\n * Note: For `<bx-code-snippet>` only. The API is subject to change/removal.\n * @param properties The properties to render.\n * @returns The template result for copy button from the given properties.\n * @private\n */\nexport const _renderButton = ({\n assistiveText,\n feedbackText,\n showFeedback = false,\n className = `${prefix}--snippet-button`,\n children = html`\n <slot>${Copy16({ class: `${prefix}--snippet__icon` })}</slot>\n `,\n handleClickButton,\n}: {\n assistiveText: string;\n feedbackText: string;\n showFeedback?: boolean;\n className?: string;\n children?: TemplateResult;\n handleClickButton: EventListener;\n}) => {\n const feedbackClasses = classMap({\n [`${prefix}--btn--copy__feedback`]: true,\n [`${prefix}--btn--copy__feedback--displayed`]: showFeedback,\n });\n return html`\n <button type=\"button\" class=\"${className}\" title=\"${ifDefined(assistiveText)}\" @click=\"${handleClickButton}\">\n ${children}\n <div class=\"${feedbackClasses}\" data-feedback=\"${ifDefined(feedbackText)}\"></div>\n </button>\n `;\n};\n\n/**\n * Copy button.\n * @element bx-copy-button\n */\n@customElement(`${prefix}-copy-button`)\nclass BXCopyButton extends FocusMixin(LitElement) {\n /**\n * Handles showing/hiding the feedback tooltip.\n */\n private _handleFeedbackTooltip = _createHandleFeedbackTooltip(({ showFeedback = false }: { showFeedback?: boolean }) => {\n this._showFeedback = showFeedback;\n this.requestUpdate();\n });\n\n /**\n * `true` to show the feedback tooltip.\n */\n private _showFeedback = false;\n\n /**\n * Handles `click` event on the copy button.\n */\n private _handleClickButton() {\n this._handleFeedbackTooltip(this.feedbackTimeout);\n }\n\n /**\n * An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.\n */\n @property({ attribute: 'button-assistive-text' })\n buttonAssistiveText = 'Copy to clipboard';\n\n /**\n * The feedback text.\n */\n @property({ attribute: 'feedback-text' })\n feedbackText = 'Copied!';\n\n /**\n * The number in milliseconds to determine how long the tooltip should remain.\n */\n @property({ type: Number, attribute: 'feedback-timeout' })\n feedbackTimeout = 2000;\n\n createRenderRoot() {\n return this.attachShadow({ mode: 'open', delegatesFocus: true });\n }\n\n render() {\n const { buttonAssistiveText, feedbackText, _handleClickButton: handleClickButton, _showFeedback: showFeedback } = this;\n return _renderButton({\n assistiveText: buttonAssistiveText,\n feedbackText,\n showFeedback,\n handleClickButton,\n });\n }\n\n static styles = styles;\n}\n\nexport default BXCopyButton;\n"]}