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 • 8.23 kB
Source Map (JSON)
{"version":3,"sources":["components/notification/inline-notification.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,EAAuB,UAAU,EAAiB,MAAM,aAAa,CAAC;AAO7E;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;;OAGG;IACH,MAAM,WAAW;IAEjB;;;OAGG;IACH,KAAK,UAAU;CAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD;;;;;;;;;GASG;AACH,cACM,oBAAqB,SAAQ,yBAAsB;IACvD;;OAEG;IACH,SAAS,CAAC,KAAK,oBAA4B;IAE3C;;;OAGG;IACH,SAAS,CAAC,uBAAuB,CAAC,EAAE,MAAM,EAAE,EAAE,UAAU;IAIxD;;;OAGG;IACH,SAAS,CAAC,yBAAyB,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAiBnE;;OAEG;IACH,SAAS,CAAC,aAAa;IAiBvB;;OAEG;IACH,SAAS,CAAC,WAAW;IAWrB;;OAEG;IACH,SAAS,CAAC,WAAW;IAWrB;;OAEG;IAEH,gBAAgB,EAAG,MAAM,CAAC;IAE1B;;OAEG;IAEH,eAAe,UAAS;IAExB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB;;OAEG;IAEH,IAAI,oBAA6B;IAEjC;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX,iBAAiB;IAOjB,MAAM;IAUN;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,oBAAoB,CAAC","file":"inline-notification.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 CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport ErrorFilled20 from '@carbon/icons/lib/error--filled/20';\nimport WarningFilled20 from '@carbon/icons/lib/warning--filled/20';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { customElement, html, LitElement, property, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './inline-notification.scss';\n\nconst { prefix } = settings;\n\n/**\n * Notification kinds.\n */\nexport enum NOTIFICATION_KIND {\n /**\n * Notification to represent success state.\n */\n SUCCESS = 'success',\n\n /**\n * Informational notification.\n */\n INFO = 'info',\n\n /**\n * Warning notification.\n */\n WARNING = 'warning',\n\n /**\n * Error notification.\n */\n ERROR = 'error',\n}\n\n/**\n * Notification types.\n */\nexport enum NOTIFICATION_TYPE {\n /**\n * Inline notification, which show up in task flows, to notify users of the status of an action.\n * They usually appear at the top of the primary content area.\n */\n INLINE = 'inline',\n\n /**\n * Toast notification, which is a non-modal, time-based window elements used to display short messages.\n * They usually appear at the bottom of the screen and disappear after a few seconds.\n */\n TOAST = 'toast',\n}\n\n/**\n * The default icons, keyed by notification kind.\n */\nconst iconsForKinds = {\n [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n [NOTIFICATION_KIND.INFO]: undefined,\n [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\n/**\n * Inline notification.\n * @element bx-inline-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n * The custom event fired before this notification is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-inline-notification`)\nclass BXInlineNotification extends FocusMixin(LitElement) {\n /**\n * Notification type.\n */\n protected _type = NOTIFICATION_TYPE.INLINE;\n\n /**\n * Handles `click` event on the close button.\n * @param event The event.\n */\n protected _handleClickCloseButton({ target }: MouseEvent) {\n this._handleUserInitiatedClose(target);\n }\n\n /**\n * Handles user-initiated close request of this modal.\n * @param triggeredBy The element that triggered this close request.\n */\n protected _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n if (this.open) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n if (this.dispatchEvent(new CustomEvent((this.constructor as typeof BXInlineNotification).eventBeforeClose, init))) {\n this.open = false;\n this.dispatchEvent(new CustomEvent((this.constructor as typeof BXInlineNotification).eventClose, init));\n }\n }\n }\n\n /**\n * @returns The template part for the close button.\n */\n protected _renderButton() {\n const { closeButtonLabel, _type: type, _handleClickCloseButton: handleClickCloseButton } = this;\n return html`\n <button\n type=\"button\"\n class=\"${prefix}--${type}-notification__close-button\"\n aria-label=${ifDefined(closeButtonLabel)}\n title=${ifDefined(closeButtonLabel)}\n @click=\"${handleClickCloseButton}\"\n >\n ${Close20({\n class: `${prefix}--${type}-notification__close-icon`,\n })}\n </button>\n `;\n }\n\n /**\n * @returns The template part for the text contents.\n */\n protected _renderText() {\n const { subtitle, title, _type: type } = this;\n return html`\n <div class=\"${prefix}--${type}-notification__text-wrapper\">\n <p class=\"${prefix}--${type}-notification__title\">${title}<slot name=\"title\"></slot></p>\n <div class=\"${prefix}--${type}-notification__subtitle\">${subtitle}<slot name=\"subtitle\"></slot></div>\n <slot></slot>\n </div>\n `;\n }\n\n /**\n * @returns The template part for the icon.\n */\n protected _renderIcon() {\n const { iconLabel, kind, _type: type } = this;\n const { [kind]: icon } = iconsForKinds;\n return !icon\n ? undefined\n : icon({\n class: `${prefix}--${type}-notification__icon`,\n children: !iconLabel ? undefined : svg`<title>${iconLabel}</title>`,\n });\n }\n\n /**\n * The a11y text for the close button.\n */\n @property({ attribute: 'close-button-label' })\n closeButtonLabel!: string;\n\n /**\n * `true` to hide the close button.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n hideCloseButton = false;\n\n /**\n * The a11y text for the icon.\n */\n @property({ attribute: 'icon-label' })\n iconLabel!: string;\n\n /**\n * Notification kind.\n */\n @property({ reflect: true })\n kind = NOTIFICATION_KIND.SUCCESS;\n\n /**\n * `true` if the notification should be open.\n */\n @property({ type: Boolean, reflect: true })\n open = true;\n\n /**\n * The subtitle.\n */\n @property()\n subtitle = '';\n\n /**\n * The title.\n */\n @property()\n title = '';\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'alert');\n }\n super.connectedCallback();\n }\n\n render() {\n const { _type: type } = this;\n return html`\n <div class=\"${prefix}--${type}-notification__details\">\n ${this._renderIcon()}${this._renderText()}\n </div>\n ${this._renderButton()}\n `;\n }\n\n /**\n * The name of the custom event fired before this notification is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this notification.\n */\n static get eventBeforeClose() {\n return `${prefix}-notification-beingclosed`;\n }\n\n /**\n * The name of the custom event fired after this notification is closed upon a user gesture.\n */\n static get eventClose() {\n return `${prefix}-notification-closed`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXInlineNotification;\n"]}