@kyndryl-design-system/shidoka-applications 1.49.2 → 1.49.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as i,t as
|
|
1
|
+
import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as i,t as o,b as e,o as n,e as a}from"../../../vendor/lit-52eb9e23.js";import{i as r,s,x as d}from"../../../vendor/lit-element-3185f710.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import{_ as l,p as c,q as p,r as h}from"../../../vendor/@carbon/icons-c6f09e5f.js";import"@kyndryl-design-system/shidoka-foundation/components/card";import"../tag/tag.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../../../vendor/lit-html-244138f0.js";import"../../../tag-e16a93ec.js";import"../loaders/skeleton.js";var f=r`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -178,6 +178,20 @@ kd-card.notification-mark-read::part(card-wrapper) {
|
|
|
178
178
|
align-items: center;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
+
.notification-toast .notification-title-wrap {
|
|
182
|
+
align-items: flex-start;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.notification-toast .notification-title {
|
|
186
|
+
padding-right: 20px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.notification-toast .notification-state-icon {
|
|
190
|
+
padding-top: 3px;
|
|
191
|
+
padding-right: 8px;
|
|
192
|
+
align-self: flex-start;
|
|
193
|
+
}
|
|
194
|
+
|
|
181
195
|
.notification-inline .notification-content-wrapper,
|
|
182
196
|
.notification-toast .notification-content-wrapper {
|
|
183
197
|
padding: 0;
|
|
@@ -309,7 +323,7 @@ kd-card.notification-mark-read::part(card-wrapper) {
|
|
|
309
323
|
text-indent: 200%;
|
|
310
324
|
white-space: nowrap;
|
|
311
325
|
width: 1px;
|
|
312
|
-
}`;let
|
|
326
|
+
}`;let g=class extends s{constructor(){super(...arguments),this.notificationTitle="",this.notificationSubtitle="",this.timeStamp="",this.href="",this.tagStatus="default",this.type="normal",this.textStrings={success:"Success",warning:"Warning",info:"Info",error:"Error"},this.closeBtnDescription="Close",this.assistiveNotificationTypeText="",this.statusLabel="Status",this._tagColor={success:"passed",warning:"warning",info:"cat01",error:"failed"},this.unRead=!1,this.hideCloseButton=!1,this.timeout=8}render(){const t={"notification-inline":"inline"===this.type,"notification-toast":"toast"===this.type,"notification-error":("inline"===this.type||"toast"===this.type)&&"error"===this.tagStatus,"notification-success":("inline"===this.type||"toast"===this.type)&&"success"===this.tagStatus,"notification-warning":("inline"===this.type||"toast"===this.type)&&"warning"===this.tagStatus,"notification-info":("inline"===this.type||"toast"===this.type)&&"info"===this.tagStatus,"notification-default":("inline"===this.type||"toast"===this.type)&&"default"===this.tagStatus};return d`
|
|
313
327
|
${"clickable"===this.type?d`<kd-card
|
|
314
328
|
class="${this.unRead?"notification-mark-unread":"notification-mark-read"}"
|
|
315
329
|
type=${this.type}
|
|
@@ -318,12 +332,12 @@ kd-card.notification-mark-read::part(card-wrapper) {
|
|
|
318
332
|
rel="noopener"
|
|
319
333
|
@on-card-click=${t=>this._handleCardClick(t)}
|
|
320
334
|
hideBorder
|
|
321
|
-
role=${
|
|
335
|
+
role=${e(this.notificationRole)}>
|
|
322
336
|
<span id="notificationType">${this.assistiveNotificationTypeText}</span>
|
|
323
337
|
${this.renderInnerUI()}
|
|
324
338
|
</kd-card
|
|
325
339
|
>`:d`
|
|
326
|
-
<kd-card type=${this.type} role=${
|
|
340
|
+
<kd-card type=${this.type} role=${e(this.notificationRole)} class="${n(t)}">
|
|
327
341
|
${"inline"===this.type||"toast"===this.type?d`<span id="notificationType">${this.assistiveNotificationTypeText}</span>`:null}
|
|
328
342
|
${this.renderInnerUI()}
|
|
329
343
|
</kd-card>`}
|
|
@@ -353,7 +367,7 @@ kd-card.notification-mark-read::part(card-wrapper) {
|
|
|
353
367
|
class="notification-toast-close-btn"
|
|
354
368
|
kind="tertiary"
|
|
355
369
|
size="small"
|
|
356
|
-
description=${
|
|
370
|
+
description=${e(this.closeBtnDescription)}
|
|
357
371
|
iconPosition="left"
|
|
358
372
|
@on-click="${()=>this._handleClose()}"
|
|
359
373
|
>
|
|
@@ -362,7 +376,7 @@ kd-card.notification-mark-read::part(card-wrapper) {
|
|
|
362
376
|
fill="#3D3C3C"
|
|
363
377
|
.icon=${l}
|
|
364
378
|
role="img"
|
|
365
|
-
aria-label=${
|
|
379
|
+
aria-label=${e(this.closeBtnDescription)}
|
|
366
380
|
></kd-icon>
|
|
367
381
|
</kd-button>`}
|
|
368
382
|
<!-- actions slot could be an overflow menu, close icon (for other notification types) etc. -->
|
|
@@ -388,5 +402,5 @@ kd-card.notification-mark-read::part(card-wrapper) {
|
|
|
388
402
|
<div class="timestamp-text">${this.timeStamp}</div>
|
|
389
403
|
</div>
|
|
390
404
|
</div>
|
|
391
|
-
</div>`}updated(t){"toast"===this.type&&t.has("timeout")&&this.timeout>0&&setTimeout((()=>{this._close()}),1e3*this.timeout)}_close(){this.animate([{opacity:"1"},{opacity:"0"}],{duration:500,easing:"ease-in-out",fill:"forwards"}).onfinish=()=>{var t;null===(t=this.parentNode)||void 0===t||t.removeChild(this)};const t=new CustomEvent("on-close");this.dispatchEvent(t)}_handleClose(){this._close()}_handleCardClick(t){const i=new CustomEvent("on-notification-click",{detail:t.detail.origEvent});this.dispatchEvent(i)}};
|
|
405
|
+
</div>`}updated(t){"toast"===this.type&&t.has("timeout")&&this.timeout>0&&setTimeout((()=>{this._close()}),1e3*this.timeout)}_close(){this.animate([{opacity:"1"},{opacity:"0"}],{duration:500,easing:"ease-in-out",fill:"forwards"}).onfinish=()=>{var t;null===(t=this.parentNode)||void 0===t||t.removeChild(this)};const t=new CustomEvent("on-close");this.dispatchEvent(t)}_handleClose(){this._close()}_handleCardClick(t){const i=new CustomEvent("on-notification-click",{detail:t.detail.origEvent});this.dispatchEvent(i)}};g.styles=f,t([i({type:String})],g.prototype,"notificationTitle",void 0),t([i({type:String})],g.prototype,"notificationSubtitle",void 0),t([i({type:String})],g.prototype,"timeStamp",void 0),t([i({type:String})],g.prototype,"href",void 0),t([i({type:String})],g.prototype,"tagStatus",void 0),t([i({type:String})],g.prototype,"type",void 0),t([i({type:Object})],g.prototype,"textStrings",void 0),t([i({type:String})],g.prototype,"closeBtnDescription",void 0),t([i({type:String})],g.prototype,"assistiveNotificationTypeText",void 0),t([i({type:String})],g.prototype,"notificationRole",void 0),t([i({type:String})],g.prototype,"statusLabel",void 0),t([o()],g.prototype,"_tagColor",void 0),t([i({type:Boolean,reflect:!0})],g.prototype,"unRead",void 0),t([i({type:Boolean})],g.prototype,"hideCloseButton",void 0),t([i({type:Number})],g.prototype,"timeout",void 0),g=t([a("kyn-notification")],g);export{g as Notification};
|
|
392
406
|
//# sourceMappingURL=notification.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification.js","sources":["../../../../src/components/reusable/notification/notification.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport closeIcon from '@carbon/icons/es/close/16';\n\nimport NotificationScss from './notification.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/card';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport successIcon from '@carbon/icons/es/checkmark--filled/16';\nimport warningErrorIcon from '@carbon/icons/es/warning--alt--filled/16';\nimport infoIcon from '@carbon/icons/es/information--filled/16';\n\nimport '../tag';\n/**\n * Notification component.\n * @slot unnamed - Slot for notification message body.\n * @slot actions - Slot for menu.\n * @fires on-notification-click - Emit event for clickable notification.\n * @fires on-close - Emits when an inline/toast notification closes.\n */\n\n@customElement('kyn-notification')\nexport class Notification extends LitElement {\n static override styles = NotificationScss;\n\n /** Notification Title (Required). */\n @property({ type: String })\n notificationTitle = '';\n\n /** Notification subtitle.(optional) */\n @property({ type: String })\n notificationSubtitle = '';\n\n /** \n * Timestamp of notification.\n * It is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.\n */\n @property({ type: String })\n timeStamp = '';\n\n /** Card href link */\n @property({ type: String })\n href = '';\n\n /** Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`. */\n @property({ type: String })\n tagStatus = 'default';\n\n /** Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel */\n @property({ type: String })\n type = 'normal';\n\n /** Customizable text strings. */\n @property({ type: Object })\n textStrings: any = {\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n };\n\n /** Close button description (Required to support accessibility). */\n @property({ type: String })\n closeBtnDescription = 'Close';\n\n /** \n * Assistive text for notification type. \n * Required for `'clickable'`, `'inline'` and `'toast'` notification types.\n * */\n @property({ type: String })\n assistiveNotificationTypeText = '';\n\n /** Notification role (Required to support accessibility). */\n @property({ type: String }) \n notificationRole?: 'alert' | 'log' | 'status';\n\n /** \n * Status label (Required to support accessibility). \n * Assign the localized string value for the word **Status**.\n * */\n @property({ type: String })\n statusLabel = 'Status';\n\n /** Set tagColor based on provided tagStatus.\n * @internal\n */\n @state()\n _tagColor: any = {\n success: 'passed',\n warning: 'warning',\n info: 'cat01',\n error: 'failed',\n };\n\n /** Set notification mark read prop. Required ony for `type: 'clickable'`.*/\n @property({ type: Boolean, reflect: true })\n unRead = false;\n\n /** Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true. */\n @property({ type: Boolean })\n hideCloseButton = false;\n\n /** Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'` */\n @property({ type: Number })\n timeout = 8;\n\n override render() {\n const cardBgClasses = {\n 'notification-inline': this.type === 'inline',\n 'notification-toast': this.type === 'toast',\n 'notification-error':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'error',\n 'notification-success':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'success',\n 'notification-warning':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'warning',\n 'notification-info':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'info',\n 'notification-default':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'default',\n };\n\n return html`\n ${this.type === 'clickable'\n ? html`<kd-card\n class=\"${this.unRead\n ? 'notification-mark-unread'\n : 'notification-mark-read'}\"\n type=${this.type}\n href=${this.href}\n target=\"_blank\"\n rel=\"noopener\"\n @on-card-click=${(e: any) => this._handleCardClick(e)}\n hideBorder\n role=${ifDefined(this.notificationRole)}>\n <span id=\"notificationType\">${this.assistiveNotificationTypeText}</span>\n ${this.renderInnerUI()}\n </kd-card\n >`\n : html`\n <kd-card type=${this.type} role=${ifDefined(this.notificationRole)} class=\"${classMap(cardBgClasses)}\">\n ${this.type === 'inline' || this.type === 'toast' ? html `<span id=\"notificationType\">${this.assistiveNotificationTypeText}</span>` : null}\n ${this.renderInnerUI()}\n </kd-card>`\n }\n `;\n }\n\n private renderInnerUI() {\n const notificationIcon: any = {\n success: successIcon,\n error: warningErrorIcon,\n warning: warningErrorIcon,\n info: infoIcon,\n };\n\n const notificationIconFillColor: any = {\n success: 'var(--kd-color-border-success, #1FA452)',\n error: 'var(--kd-color-border-destructive, #CC1800)',\n warning: 'var(--kd-color-border-warning,#F5C400)',\n info: 'var(--kd-color-border-informational, #1473FF)',\n };\n\n return html`<div class=\"notification-wrapper\">\n <div class=\"notification-title-wrap\">\n <div class=\"notification-head\">\n ${(this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus !== 'default'\n ? html` <kd-icon\n class=\"notification-state-icon\"\n slot=\"icon\"\n fill=${notificationIconFillColor[this.tagStatus]}\n .icon=${notificationIcon[this.tagStatus]}\n role=\"img\"\n aria-label=${`${this.textStrings[this.tagStatus]} icon`}\n ></kd-icon>`\n : null}\n\n <div class=\"notification-title\">${this.notificationTitle}</div>\n\n ${this.notificationSubtitle !== '' &&\n (this.type === 'normal' || this.type === 'clickable')\n ? html`\n <div class=\"notification-subtitle\">\n ${this.notificationSubtitle}\n </div>\n `\n : null}\n </div>\n\n <div>\n ${(this.type === 'toast' || this.type === 'inline') &&\n !this.hideCloseButton\n ? html` <kd-button\n class=\"notification-toast-close-btn\"\n kind=\"tertiary\"\n size=\"small\"\n description=${ifDefined(this.closeBtnDescription)}\n iconPosition=\"left\"\n @on-click=\"${() => this._handleClose()}\"\n >\n <kd-icon\n slot=\"icon\"\n fill=\"#3D3C3C\"\n .icon=${closeIcon}\n role=\"img\"\n aria-label=${ifDefined(this.closeBtnDescription)}\n ></kd-icon>\n </kd-button>`\n : null}\n <!-- actions slot could be an overflow menu, close icon (for other notification types) etc. -->\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n <div class=\"notification-description\">\n <slot></slot>\n </div>\n\n <div class=\"notification-content-wrapper\">\n <div class=\"status-tag\">\n ${this.tagStatus !== 'default' &&\n (this.type === 'normal' || this.type === 'clickable')\n ? html` \n <span id=\"statusLabel\">${this.statusLabel}</span>\n <kyn-tag\n label=${this.textStrings[this.tagStatus]}\n tagColor=${this._tagColor[this.tagStatus]}\n shade=\"dark\"\n ></kyn-tag>`\n : null}\n </div>\n <div class=\"timestamp-wrapper\">\n <div class=\"timestamp-text\">${this.timeStamp}</div>\n </div>\n </div>\n </div>`;\n }\n\n override updated(changedProperties: any) {\n // Close toast notification if timeout > 0\n if (\n this.type === 'toast' &&\n changedProperties.has('timeout') &&\n this.timeout > 0\n ) {\n setTimeout(() => {\n this._close();\n }, this.timeout * 1000);\n }\n }\n\n // Remove toast from DOM\n private _close() {\n const animation = this.animate([{ opacity: '1' }, { opacity: '0' }], {\n duration: 500,\n easing: 'ease-in-out',\n fill: 'forwards',\n });\n animation.onfinish = () => {\n this.parentNode?.removeChild(this);\n };\n\n // emit on-close event\n const event = new CustomEvent('on-close');\n this.dispatchEvent(event);\n }\n\n private _handleClose() {\n this._close();\n }\n\n private _handleCardClick(e: any) {\n const event = new CustomEvent('on-notification-click', {\n detail: e.detail.origEvent,\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-notification': Notification;\n }\n}\n"],"names":["Notification","LitElement","constructor","this","notificationTitle","notificationSubtitle","timeStamp","href","tagStatus","type","textStrings","success","warning","info","error","closeBtnDescription","assistiveNotificationTypeText","statusLabel","_tagColor","unRead","hideCloseButton","timeout","render","cardBgClasses","html","e","_handleCardClick","ifDefined","notificationRole","renderInnerUI","classMap","notificationIcon","successIcon","warningErrorIcon","infoIcon","_handleClose","closeIcon","updated","changedProperties","has","setTimeout","_close","animate","opacity","duration","easing","fill","onfinish","_a","parentNode","removeChild","event","CustomEvent","dispatchEvent","detail","origEvent","styles","NotificationScss","__decorate","property","String","prototype","Object","state","Boolean","reflect","Number","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"notification.js","sources":["../../../../src/components/reusable/notification/notification.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport closeIcon from '@carbon/icons/es/close/16';\n\nimport NotificationScss from './notification.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/card';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport successIcon from '@carbon/icons/es/checkmark--filled/16';\nimport warningErrorIcon from '@carbon/icons/es/warning--alt--filled/16';\nimport infoIcon from '@carbon/icons/es/information--filled/16';\n\nimport '../tag';\n/**\n * Notification component.\n * @slot unnamed - Slot for notification message body.\n * @slot actions - Slot for menu.\n * @fires on-notification-click - Emit event for clickable notification.\n * @fires on-close - Emits when an inline/toast notification closes.\n */\n\n@customElement('kyn-notification')\nexport class Notification extends LitElement {\n static override styles = NotificationScss;\n\n /** Notification Title (Required). */\n @property({ type: String })\n notificationTitle = '';\n\n /** Notification subtitle.(optional) */\n @property({ type: String })\n notificationSubtitle = '';\n\n /** \n * Timestamp of notification.\n * It is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.\n */\n @property({ type: String })\n timeStamp = '';\n\n /** Card href link */\n @property({ type: String })\n href = '';\n\n /** Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`. */\n @property({ type: String })\n tagStatus = 'default';\n\n /** Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel */\n @property({ type: String })\n type = 'normal';\n\n /** Customizable text strings. */\n @property({ type: Object })\n textStrings: any = {\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n };\n\n /** Close button description (Required to support accessibility). */\n @property({ type: String })\n closeBtnDescription = 'Close';\n\n /** \n * Assistive text for notification type. \n * Required for `'clickable'`, `'inline'` and `'toast'` notification types.\n * */\n @property({ type: String })\n assistiveNotificationTypeText = '';\n\n /** Notification role (Required to support accessibility). */\n @property({ type: String }) \n notificationRole?: 'alert' | 'log' | 'status';\n\n /** \n * Status label (Required to support accessibility). \n * Assign the localized string value for the word **Status**.\n * */\n @property({ type: String })\n statusLabel = 'Status';\n\n /** Set tagColor based on provided tagStatus.\n * @internal\n */\n @state()\n _tagColor: any = {\n success: 'passed',\n warning: 'warning',\n info: 'cat01',\n error: 'failed',\n };\n\n /** Set notification mark read prop. Required ony for `type: 'clickable'`.*/\n @property({ type: Boolean, reflect: true })\n unRead = false;\n\n /** Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true. */\n @property({ type: Boolean })\n hideCloseButton = false;\n\n /** Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'` */\n @property({ type: Number })\n timeout = 8;\n\n override render() {\n const cardBgClasses = {\n 'notification-inline': this.type === 'inline',\n 'notification-toast': this.type === 'toast',\n 'notification-error':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'error',\n 'notification-success':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'success',\n 'notification-warning':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'warning',\n 'notification-info':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'info',\n 'notification-default':\n (this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus === 'default',\n };\n\n return html`\n ${this.type === 'clickable'\n ? html`<kd-card\n class=\"${this.unRead\n ? 'notification-mark-unread'\n : 'notification-mark-read'}\"\n type=${this.type}\n href=${this.href}\n target=\"_blank\"\n rel=\"noopener\"\n @on-card-click=${(e: any) => this._handleCardClick(e)}\n hideBorder\n role=${ifDefined(this.notificationRole)}>\n <span id=\"notificationType\">${this.assistiveNotificationTypeText}</span>\n ${this.renderInnerUI()}\n </kd-card\n >`\n : html`\n <kd-card type=${this.type} role=${ifDefined(this.notificationRole)} class=\"${classMap(cardBgClasses)}\">\n ${this.type === 'inline' || this.type === 'toast' ? html `<span id=\"notificationType\">${this.assistiveNotificationTypeText}</span>` : null}\n ${this.renderInnerUI()}\n </kd-card>`\n }\n `;\n }\n\n private renderInnerUI() {\n const notificationIcon: any = {\n success: successIcon,\n error: warningErrorIcon,\n warning: warningErrorIcon,\n info: infoIcon,\n };\n\n const notificationIconFillColor: any = {\n success: 'var(--kd-color-border-success, #1FA452)',\n error: 'var(--kd-color-border-destructive, #CC1800)',\n warning: 'var(--kd-color-border-warning,#F5C400)',\n info: 'var(--kd-color-border-informational, #1473FF)',\n };\n\n return html`<div class=\"notification-wrapper\">\n <div class=\"notification-title-wrap\">\n <div class=\"notification-head\">\n ${(this.type === 'inline' || this.type === 'toast') &&\n this.tagStatus !== 'default'\n ? html` <kd-icon\n class=\"notification-state-icon\"\n slot=\"icon\"\n fill=${notificationIconFillColor[this.tagStatus]}\n .icon=${notificationIcon[this.tagStatus]}\n role=\"img\"\n aria-label=${`${this.textStrings[this.tagStatus]} icon`}\n ></kd-icon>`\n : null}\n\n <div class=\"notification-title\">${this.notificationTitle}</div>\n\n ${this.notificationSubtitle !== '' &&\n (this.type === 'normal' || this.type === 'clickable')\n ? html`\n <div class=\"notification-subtitle\">\n ${this.notificationSubtitle}\n </div>\n `\n : null}\n </div>\n\n <div>\n ${(this.type === 'toast' || this.type === 'inline') &&\n !this.hideCloseButton\n ? html` <kd-button\n class=\"notification-toast-close-btn\"\n kind=\"tertiary\"\n size=\"small\"\n description=${ifDefined(this.closeBtnDescription)}\n iconPosition=\"left\"\n @on-click=\"${() => this._handleClose()}\"\n >\n <kd-icon\n slot=\"icon\"\n fill=\"#3D3C3C\"\n .icon=${closeIcon}\n role=\"img\"\n aria-label=${ifDefined(this.closeBtnDescription)}\n ></kd-icon>\n </kd-button>`\n : null}\n <!-- actions slot could be an overflow menu, close icon (for other notification types) etc. -->\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n <div class=\"notification-description\">\n <slot></slot>\n </div>\n\n <div class=\"notification-content-wrapper\">\n <div class=\"status-tag\">\n ${this.tagStatus !== 'default' &&\n (this.type === 'normal' || this.type === 'clickable')\n ? html` \n <span id=\"statusLabel\">${this.statusLabel}</span>\n <kyn-tag\n label=${this.textStrings[this.tagStatus]}\n tagColor=${this._tagColor[this.tagStatus]}\n shade=\"dark\"\n ></kyn-tag>`\n : null}\n </div>\n <div class=\"timestamp-wrapper\">\n <div class=\"timestamp-text\">${this.timeStamp}</div>\n </div>\n </div>\n </div>`;\n }\n\n override updated(changedProperties: any) {\n // Close toast notification if timeout > 0\n if (\n this.type === 'toast' &&\n changedProperties.has('timeout') &&\n this.timeout > 0\n ) {\n setTimeout(() => {\n this._close();\n }, this.timeout * 1000);\n }\n }\n\n // Remove toast from DOM\n private _close() {\n const animation = this.animate([{ opacity: '1' }, { opacity: '0' }], {\n duration: 500,\n easing: 'ease-in-out',\n fill: 'forwards',\n });\n animation.onfinish = () => {\n this.parentNode?.removeChild(this);\n };\n\n // emit on-close event\n const event = new CustomEvent('on-close');\n this.dispatchEvent(event);\n }\n\n private _handleClose() {\n this._close();\n }\n\n private _handleCardClick(e: any) {\n const event = new CustomEvent('on-notification-click', {\n detail: e.detail.origEvent,\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-notification': Notification;\n }\n}\n"],"names":["Notification","LitElement","constructor","this","notificationTitle","notificationSubtitle","timeStamp","href","tagStatus","type","textStrings","success","warning","info","error","closeBtnDescription","assistiveNotificationTypeText","statusLabel","_tagColor","unRead","hideCloseButton","timeout","render","cardBgClasses","html","e","_handleCardClick","ifDefined","notificationRole","renderInnerUI","classMap","notificationIcon","successIcon","warningErrorIcon","infoIcon","_handleClose","closeIcon","updated","changedProperties","has","setTimeout","_close","animate","opacity","duration","easing","fill","onfinish","_a","parentNode","removeChild","event","CustomEvent","dispatchEvent","detail","origEvent","styles","NotificationScss","__decorate","property","String","prototype","Object","state","Boolean","reflect","Number","customElement"],"mappings":"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"}
|