@kyndryl-design-system/shidoka-applications 2.23.1 → 2.23.2

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.
Files changed (7) hide show
  1. package/components/reusable/notification/notification.d.ts +1 -0
  2. package/components/reusable/notification/notification.d.ts.map +1 -1
  3. package/components/reusable/notification/notification.js +98 -54
  4. package/components/reusable/notification/notification.js.map +1 -1
  5. package/components/reusable/notification/notificationContainer.js +1 -0
  6. package/components/reusable/notification/notificationContainer.js.map +1 -1
  7. package/package.json +2 -2
package/components/reusable/notification/notification.d.ts CHANGED
@@ -58,6 +58,7 @@ export declare class Notification extends LitElement {
58
58
  private _close;
59
59
  private _handleClose;
60
60
  private _handleCardClick;
61
+ private _handleSlotChange;
61
62
  }
62
63
  declare global {
63
64
  interface HTMLElementTagNameMap {
package/components/reusable/notification/notification.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,WAAW,CAAC;AAInB,OAAO,SAAS,CAAC;AAMjB,OAAO,QAAQ,CAAC;AAChB;;;;;;GAMG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,qCAAqC;IAErC,iBAAiB,SAAM;IAEvB,uCAAuC;IAEvC,oBAAoB,SAAM;IAE1B;;;OAGG;IAEH,SAAS,SAAM;IAEf,qBAAqB;IAErB,IAAI,SAAM;IAEV,mGAAmG;IAEnG,SAAS,SAAa;IAEtB,kIAAkI;IAElI,IAAI,SAAY;IAEhB,iCAAiC;IAEjC,WAAW,EAAE,GAAG,CAKd;IAEF,oEAAoE;IAEpE,mBAAmB,SAAW;IAE9B;;;SAGK;IAEL,6BAA6B,SAAM;IAEnC,6DAA6D;IAE7D,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAE9C;;;SAGK;IAEL,WAAW,SAAY;IAEvB;;OAEG;IAEH,SAAS,EAAE,GAAG,CAKZ;IAEF,4EAA4E;IAE5E,MAAM,UAAS;IAEf,6JAA6J;IAE7J,eAAe,UAAS;IAExB,uJAAuJ;IAEvJ,OAAO,SAAK;IAEH,MAAM;IAuDf,OAAO,CAAC,aAAa;IA+EZ,OAAO,CAAC,iBAAiB,EAAE,GAAG;IAcvC,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,gBAAgB;CAMzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,YAAY,CAAC;KAClC;CACF"}
1
+ {"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,WAAW,CAAC;AAInB,OAAO,SAAS,CAAC;AAMjB,OAAO,QAAQ,CAAC;AAChB;;;;;;GAMG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,qCAAqC;IAErC,iBAAiB,SAAM;IAEvB,uCAAuC;IAEvC,oBAAoB,SAAM;IAE1B;;;OAGG;IAEH,SAAS,SAAM;IAEf,qBAAqB;IAErB,IAAI,SAAM;IAEV,mGAAmG;IAEnG,SAAS,SAAa;IAEtB,kIAAkI;IAElI,IAAI,SAAY;IAEhB,iCAAiC;IAEjC,WAAW,EAAE,GAAG,CAKd;IAEF,oEAAoE;IAEpE,mBAAmB,SAAW;IAE9B;;;SAGK;IAEL,6BAA6B,SAAM;IAEnC,6DAA6D;IAE7D,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAE9C;;;SAGK;IAEL,WAAW,SAAY;IAEvB;;OAEG;IAEH,SAAS,EAAE,GAAG,CAKZ;IAEF,4EAA4E;IAE5E,MAAM,UAAS;IAEf,6JAA6J;IAE7J,eAAe,UAAS;IAExB,uJAAuJ;IAEvJ,OAAO,SAAK;IAEH,MAAM;IAwDf,OAAO,CAAC,aAAa;IAgFZ,OAAO,CAAC,iBAAiB,EAAE,GAAG;IAcvC,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,iBAAiB;CAiB1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,YAAY,CAAC;KAClC;CACF"}
package/components/reusable/notification/notification.js CHANGED
@@ -1,4 +1,4 @@
1
- import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as i}from"../../../vendor/lit-html-29220869.js";import{n as o,t as n,b as e,o as a,e as r}from"../../../vendor/lit-461e78e6.js";import{i as s,s as l,x as d}from"../../../vendor/lit-element-c6c02f24.js";import"../button/button.js";import{c,l as p,g as f,w as h,n as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";import"../card/card.js";import"../card/vitalCard.skeleton.js";import"../card/informationalCard.skeleton.js";import"../tag/tag.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";import"../loaders/skeleton.js";import"../../../cardSample-37bc81e6.js";import"../../../tag-f3175688.js";import"../link/link.js";import"../link/defs.js";var g=s`*,
1
+ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as i}from"../../../vendor/lit-html-29220869.js";import{n as o,t as n,b as e,o as a,e as r}from"../../../vendor/lit-461e78e6.js";import{i as s,s as l,x as c}from"../../../vendor/lit-element-c6c02f24.js";import"../button/button.js";import{c as d,l as f,g as p,w as h,n as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";import"../card/card.js";import"../card/vitalCard.skeleton.js";import"../card/informationalCard.skeleton.js";import"../tag/tag.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";import"../loaders/skeleton.js";import"../../../cardSample-37bc81e6.js";import"../../../tag-f3175688.js";import"../link/link.js";import"../link/defs.js";var g=s`*,
2
2
  *::before,
3
3
  *::after {
4
4
  box-sizing: border-box;
@@ -42,11 +42,13 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as i}from"../../.
42
42
 
43
43
  kyn-card.notification-inline::part(card-wrapper) {
44
44
  outline: none;
45
+ border: none;
45
46
  }
46
47
 
47
48
  kyn-card.notification-toast::part(card-wrapper) {
48
49
  box-shadow: var(--kd-elevation-level-3);
49
50
  outline: none;
51
+ border: none;
50
52
  }
51
53
  kyn-card.notification-toast::part(card-wrapper):hover {
52
54
  box-shadow: var(--kd-elevation-level-2);
@@ -58,25 +60,53 @@ kyn-card.notification-error::part(card-wrapper) {
58
60
  }
59
61
 
60
62
  kyn-card.notification-success::part(card-wrapper) {
61
- background-color: var(--kd-color-status-success-light);
63
+ background-color: var(--kd-color-status-success-accent);
62
64
  }
63
65
 
64
66
  kyn-card.notification-warning::part(card-wrapper) {
65
- background-color: var(--kd-color-status-warning-light);
67
+ background-color: var(--kd-color-status-warning-accent);
66
68
  }
67
69
 
68
70
  kyn-card.notification-info::part(card-wrapper) {
69
- background-color: var(--kd-color-status-informational-light);
71
+ background-color: var(--kd-color-status-informational-accent);
72
+ }
73
+
74
+ kyn-card.notification-ai::part(card-wrapper) {
75
+ background-color: var(--kd-color-background-container-ai-default);
70
76
  }
71
77
 
72
78
  kyn-card.notification-default::part(card-wrapper) {
73
- background-color: var(--kd-color-background-accent-light);
79
+ background-color: var(--kd-color-status-neutral-light);
74
80
  }
75
81
 
76
82
  kyn-card.notification-normal::part(card-wrapper) {
77
83
  background-color: var(--kd-color-background-card-background);
78
84
  }
79
85
 
86
+ kyn-link::part(link) {
87
+ color: red;
88
+ }
89
+
90
+ .notification-warning .notification-wrapper .notification-head .notification-title {
91
+ color: var(--kd-color-text-level-dark);
92
+ }
93
+ .notification-warning .notification-wrapper .notification-description {
94
+ color: var(--kd-color-text-level-dark);
95
+ }
96
+ .notification-warning .notification-wrapper .notification-inline.notification-default .notification-description,
97
+ .notification-warning .notification-wrapper .notification-toast.notification-default .notification-description {
98
+ color: var(--kd-color-text-level-dark);
99
+ }
100
+ .notification-warning .notification-wrapper .notification-inline.notification-default .notification-title,
101
+ .notification-warning .notification-wrapper .notification-toast.notification-default .notification-title {
102
+ color: var(--kd-color-text-level-dark);
103
+ }
104
+ .notification-warning .notification-wrapper .notification-inline.notification-default .timestamp-text,
105
+ .notification-warning .notification-wrapper .notification-toast.notification-default .notification-title,
106
+ .notification-warning .notification-wrapper .notification-toast.notification-default .timestamp-text {
107
+ color: var(--kd-color-text-level-dark);
108
+ }
109
+
80
110
  .notification-title-wrap {
81
111
  display: flex;
82
112
  flex-direction: row;
@@ -85,36 +115,36 @@ kyn-card.notification-normal::part(card-wrapper) {
85
115
  }
86
116
  .notification-title {
87
117
  font-family: var(--kd-font-family-secondary);
88
- font-size: var(--kd-font-size-body-2-sm);
89
- line-height: var(--kd-line-height-body-2-sm);
118
+ font-size: var(--kd-font-size-utility-2-sm);
119
+ line-height: var(--kd-line-height-utility-2-sm);
90
120
  font-weight: var(--kd-font-weight-regular);
91
- letter-spacing: var(--kd-letter-spacing-4);
121
+ letter-spacing: var(--kd-letter-spacing-5);
92
122
  font-weight: 500;
93
- color: var(--kd-color-text-level-dark);
123
+ color: var(--kd-color-text-level-primary);
94
124
  margin: 0;
95
125
  }
96
126
  @media (min-width: 42rem) {
97
127
  .notification-title {
98
- font-size: var(--kd-font-size-body-2-md);
99
- line-height: var(--kd-line-height-body-2-md);
128
+ font-size: var(--kd-font-size-utility-2-md);
129
+ line-height: var(--kd-line-height-utility-2-md);
100
130
  }
101
131
  }
102
132
  @media (min-width: 74rem) {
103
133
  .notification-title {
104
- font-size: var(--kd-font-size-body-2-lg);
105
- line-height: var(--kd-line-height-body-2-lg);
134
+ font-size: var(--kd-font-size-utility-2-lg);
135
+ line-height: var(--kd-line-height-utility-2-lg);
106
136
  }
107
137
  }
108
138
  @media (min-width: 82rem) {
109
139
  .notification-title {
110
- font-size: var(--kd-font-size-body-2-xlg);
111
- line-height: var(--kd-line-height-body-2-xlg);
140
+ font-size: var(--kd-font-size-utility-2-xlg);
141
+ line-height: var(--kd-line-height-utility-2-xlg);
112
142
  }
113
143
  }
114
144
  @media (min-width: 99rem) {
115
145
  .notification-title {
116
- font-size: var(--kd-font-size-body-2-max);
117
- line-height: var(--kd-line-height-body-2-max);
146
+ font-size: var(--kd-font-size-utility-2-max);
147
+ line-height: var(--kd-line-height-utility-2-max);
118
148
  }
119
149
  }
120
150
  .notification-subtitle {
@@ -123,7 +153,7 @@ kyn-card.notification-normal::part(card-wrapper) {
123
153
  line-height: var(--kd-line-height-utility-2-sm);
124
154
  font-weight: var(--kd-font-weight-regular);
125
155
  letter-spacing: var(--kd-letter-spacing-5);
126
- color: var(--kd-color-text-level-secondary);
156
+ color: var(--kd-color-text-level-primary);
127
157
  }
128
158
  @media (min-width: 42rem) {
129
159
  .notification-subtitle {
@@ -168,7 +198,7 @@ kyn-card.notification-normal::part(card-wrapper) {
168
198
  right: 5px;
169
199
  }
170
200
  .notification-toast-close-btn span {
171
- color: var(--kd-color-icon-dark);
201
+ color: var(--kd-color-icon-primary);
172
202
  }
173
203
 
174
204
  .notification-inline.notification-default .notification-toast-close-btn span,
@@ -179,7 +209,11 @@ kyn-card.notification-normal::part(card-wrapper) {
179
209
  .notification-inline .notification-head,
180
210
  .notification-toast .notification-head {
181
211
  display: flex;
182
- align-items: center;
212
+ align-items: flex-start;
213
+ }
214
+
215
+ .notification-inline .notification-state-icon {
216
+ align-self: flex-start;
183
217
  }
184
218
 
185
219
  .notification-toast .notification-title-wrap {
@@ -191,7 +225,6 @@ kyn-card.notification-normal::part(card-wrapper) {
191
225
  }
192
226
 
193
227
  .notification-toast .notification-state-icon {
194
- padding-top: 3px;
195
228
  padding-right: 8px;
196
229
  align-self: flex-start;
197
230
  }
@@ -203,48 +236,49 @@ kyn-card.notification-normal::part(card-wrapper) {
203
236
 
204
237
  .notification-description {
205
238
  font-family: var(--kd-font-family-secondary);
206
- font-size: var(--kd-font-size-utility-2-sm);
207
- line-height: var(--kd-line-height-utility-2-sm);
239
+ font-size: var(--kd-font-size-utility-3-sm);
240
+ line-height: var(--kd-line-height-utility-3-sm);
208
241
  font-weight: var(--kd-font-weight-regular);
209
242
  letter-spacing: var(--kd-letter-spacing-5);
210
- color: var(--kd-color-text-level-dark);
211
- padding-top: 10px;
243
+ color: var(--kd-color-text-level-primary);
244
+ font-weight: 400;
245
+ line-height: 16px;
212
246
  }
213
247
  @media (min-width: 42rem) {
214
248
  .notification-description {
215
- font-size: var(--kd-font-size-utility-2-md);
216
- line-height: var(--kd-line-height-utility-2-md);
249
+ font-size: var(--kd-font-size-utility-3-md);
250
+ line-height: var(--kd-line-height-utility-3-md);
217
251
  }
218
252
  }
219
253
  @media (min-width: 74rem) {
220
254
  .notification-description {
221
- font-size: var(--kd-font-size-utility-2-lg);
222
- line-height: var(--kd-line-height-utility-2-lg);
255
+ font-size: var(--kd-font-size-utility-3-lg);
256
+ line-height: var(--kd-line-height-utility-3-lg);
223
257
  }
224
258
  }
225
259
  @media (min-width: 82rem) {
226
260
  .notification-description {
227
- font-size: var(--kd-font-size-utility-2-xlg);
228
- line-height: var(--kd-line-height-utility-2-xlg);
261
+ font-size: var(--kd-font-size-utility-3-xlg);
262
+ line-height: var(--kd-line-height-utility-3-xlg);
229
263
  }
230
264
  }
231
265
  @media (min-width: 99rem) {
232
266
  .notification-description {
233
- font-size: var(--kd-font-size-utility-2-max);
234
- line-height: var(--kd-line-height-utility-2-max);
267
+ font-size: var(--kd-font-size-utility-3-max);
268
+ line-height: var(--kd-line-height-utility-3-max);
235
269
  }
236
270
  }
237
271
 
238
272
  .notification-inline .notification-description,
239
273
  .notification-toast .notification-description {
240
- padding-top: 0px;
274
+ padding-top: 11px;
241
275
  padding-left: 24px;
242
276
  }
243
277
 
244
278
  .notification-inline.notification-default .notification-description,
245
279
  .notification-toast.notification-default .notification-description {
246
- padding-top: 0px;
247
- padding-left: 0px;
280
+ padding-top: 11px;
281
+ padding-left: 24px;
248
282
  color: var(--kd-color-text-level-primary);
249
283
  }
250
284
 
@@ -280,7 +314,7 @@ kyn-card.notification-normal::part(card-wrapper) {
280
314
  line-height: var(--kd-line-height-utility-2-sm);
281
315
  font-weight: var(--kd-font-weight-regular);
282
316
  letter-spacing: var(--kd-letter-spacing-5);
283
- color: var(--kd-color-text-level-dark);
317
+ color: var(--kd-color-text-level-primary);
284
318
  font-weight: 500;
285
319
  }
286
320
  @media (min-width: 42rem) {
@@ -351,25 +385,35 @@ kyn-card.notification-normal::part(card-wrapper) {
351
385
  }
352
386
 
353
387
  .info svg {
354
- fill: var(--kd-color-status-informational-dark);
388
+ fill: var(--kd-color-status-informational-foreground);
355
389
  display: flex;
356
390
  }
357
391
 
358
392
  .success svg {
359
- fill: var(--kd-color-status-success-dark);
393
+ fill: var(--kd-color-status-success-foreground);
394
+ display: flex;
395
+ }
396
+
397
+ .default svg {
398
+ fill: var(--kd-color-status-neutral-foreground);
360
399
  display: flex;
361
400
  }
362
401
 
363
402
  .warning svg {
364
- fill: var(--kd-color-status-warning-dark);
403
+ fill: var(--kd-color-status-warning-foreground---dark);
365
404
  display: flex;
366
405
  }
367
406
 
368
407
  .error svg {
369
- fill: var(--kd-color-status-error-dark);
408
+ fill: var(--kd-color-status-error-foreground);
409
+ display: flex;
410
+ }
411
+
412
+ .ai svg {
413
+ fill: var(--kd-color-icon-ai);
370
414
  display: flex;
371
- }`;let y=class extends l{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:"success",warning:"warning",info:"cat01",error:"error"},this.unRead=!1,this.hideCloseButton=!1,this.timeout=8}render(){const t={"notification-normal":"normal"===this.type,"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`
372
- ${"clickable"===this.type?d`<kyn-card
415
+ }`;let u=class extends l{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:"success",warning:"warning",info:"cat01",error:"error"},this.unRead=!1,this.hideCloseButton=!1,this.timeout=8}render(){const t={"notification-normal":"normal"===this.type,"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-ai":"toast"===this.type&&"ai"===this.tagStatus,"notification-default":("inline"===this.type||"toast"===this.type)&&"default"===this.tagStatus};return c`
416
+ ${"clickable"===this.type?c`<kyn-card
373
417
  class="notification-clickable"
374
418
  ?highlight=${this.unRead}
375
419
  type=${this.type}
@@ -384,30 +428,30 @@ kyn-card.notification-normal::part(card-wrapper) {
384
428
  >${this.assistiveNotificationTypeText}</span
385
429
  >
386
430
  ${this.renderInnerUI()}
387
- </kyn-card>`:d` <kyn-card
431
+ </kyn-card>`:c` <kyn-card
388
432
  type=${this.type}
389
433
  role=${e(this.notificationRole)}
390
434
  class="${a(t)}"
391
435
  >
392
- ${"inline"===this.type||"toast"===this.type?d`<span id="notificationType"
436
+ ${"inline"===this.type||"toast"===this.type?c`<span id="notificationType"
393
437
  >${this.assistiveNotificationTypeText}</span
394
438
  >`:null}
395
439
  ${this.renderInnerUI()}
396
440
  </kyn-card>`}
397
- `}renderInnerUI(){const t={success:p,error:f,warning:h,info:m};return d`<div class="notification-wrapper">
441
+ `}renderInnerUI(){const t={success:f,error:p,warning:h,info:m,ai:f,default:f};return c`<div class="notification-wrapper">
398
442
  <div class="notification-title-wrap">
399
443
  <div class="notification-head">
400
- ${"inline"!==this.type&&"toast"!==this.type||"default"===this.tagStatus?null:d` <span
444
+ ${"inline"===this.type||"toast"===this.type?c` <span
401
445
  class="notification-state-icon ${this.tagStatus}"
402
446
  slot="icon"
403
447
  role="img"
404
448
  aria-label=${`${this.textStrings[this.tagStatus]} icon`}
405
449
  >${i(t[this.tagStatus])}</span
406
- >`}
450
+ >`:null}
407
451
 
408
452
  <div class="notification-title">${this.notificationTitle}</div>
409
453
 
410
- ${""===this.notificationSubtitle||"normal"!==this.type&&"clickable"!==this.type?null:d`
454
+ ${""===this.notificationSubtitle||"normal"!==this.type&&"clickable"!==this.type?null:c`
411
455
  <div class="notification-subtitle">
412
456
  ${this.notificationSubtitle}
413
457
  </div>
@@ -415,7 +459,7 @@ kyn-card.notification-normal::part(card-wrapper) {
415
459
  </div>
416
460
 
417
461
  <div>
418
- ${"toast"!==this.type&&"inline"!==this.type||this.hideCloseButton?null:d` <kyn-button
462
+ ${"toast"!==this.type&&"inline"!==this.type||this.hideCloseButton?null:c` <kyn-button
419
463
  class="notification-toast-close-btn"
420
464
  kind="ghost"
421
465
  size="small"
@@ -426,7 +470,7 @@ kyn-card.notification-normal::part(card-wrapper) {
426
470
  slot="icon"
427
471
  role="img"
428
472
  aria-label=${e(this.closeBtnDescription)}
429
- >${i(c)}</span
473
+ >${i(d)}</span
430
474
  >
431
475
  </kyn-button>`}
432
476
  <!-- actions slot could be an overflow menu, close icon (for other notification types) etc. -->
@@ -435,12 +479,12 @@ kyn-card.notification-normal::part(card-wrapper) {
435
479
  </div>
436
480
 
437
481
  <div class="notification-description">
438
- <slot></slot>
482
+ <slot @slotchange="${this._handleSlotChange}"></slot>
439
483
  </div>
440
484
 
441
485
  <div class="notification-content-wrapper">
442
486
  <div class="status-tag">
443
- ${"default"===this.tagStatus||"normal"!==this.type&&"clickable"!==this.type?null:d` <span id="statusLabel">${this.statusLabel}</span>
487
+ ${"default"===this.tagStatus||"normal"!==this.type&&"clickable"!==this.type?null:c` <span id="statusLabel">${this.statusLabel}</span>
444
488
  <kyn-tag
445
489
  label=${this.textStrings[this.tagStatus]}
446
490
  tagColor=${this._tagColor[this.tagStatus]}
@@ -450,5 +494,5 @@ kyn-card.notification-normal::part(card-wrapper) {
450
494
  <div class="timestamp-text">${this.timeStamp}</div>
451
495
  </div>
452
496
  </div>
453
- </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)}};y.styles=g,t([o({type:String})],y.prototype,"notificationTitle",void 0),t([o({type:String})],y.prototype,"notificationSubtitle",void 0),t([o({type:String})],y.prototype,"timeStamp",void 0),t([o({type:String})],y.prototype,"href",void 0),t([o({type:String})],y.prototype,"tagStatus",void 0),t([o({type:String})],y.prototype,"type",void 0),t([o({type:Object})],y.prototype,"textStrings",void 0),t([o({type:String})],y.prototype,"closeBtnDescription",void 0),t([o({type:String})],y.prototype,"assistiveNotificationTypeText",void 0),t([o({type:String})],y.prototype,"notificationRole",void 0),t([o({type:String})],y.prototype,"statusLabel",void 0),t([n()],y.prototype,"_tagColor",void 0),t([o({type:Boolean,reflect:!0})],y.prototype,"unRead",void 0),t([o({type:Boolean})],y.prototype,"hideCloseButton",void 0),t([o({type:Number})],y.prototype,"timeout",void 0),y=t([r("kyn-notification")],y);export{y as Notification};
497
+ </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)}_handleSlotChange(t){var i;const o=t.target.assignedNodes().some((t=>{var i;return t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&""!==(null===(i=t.textContent)||void 0===i?void 0:i.trim())})),n=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".notification-description");n&&(n.style.display=o?"block":"none")}};u.styles=g,t([o({type:String})],u.prototype,"notificationTitle",void 0),t([o({type:String})],u.prototype,"notificationSubtitle",void 0),t([o({type:String})],u.prototype,"timeStamp",void 0),t([o({type:String})],u.prototype,"href",void 0),t([o({type:String})],u.prototype,"tagStatus",void 0),t([o({type:String})],u.prototype,"type",void 0),t([o({type:Object})],u.prototype,"textStrings",void 0),t([o({type:String})],u.prototype,"closeBtnDescription",void 0),t([o({type:String})],u.prototype,"assistiveNotificationTypeText",void 0),t([o({type:String})],u.prototype,"notificationRole",void 0),t([o({type:String})],u.prototype,"statusLabel",void 0),t([n()],u.prototype,"_tagColor",void 0),t([o({type:Boolean,reflect:!0})],u.prototype,"unRead",void 0),t([o({type:Boolean})],u.prototype,"hideCloseButton",void 0),t([o({type:Number})],u.prototype,"timeout",void 0),u=t([r("kyn-notification")],u);export{u as Notification};
454
498
  //# sourceMappingURL=notification.js.map
package/components/reusable/notification/notification.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"notification.js","sources":["../../../../src/components/reusable/notification/notification.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport NotificationScss from './notification.scss';\nimport '../card';\nimport successIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg';\nimport warningIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport infoIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/information-filled.svg';\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: 'success',\n warning: 'warning',\n info: 'cat01',\n error: 'error',\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-normal': this.type === 'normal',\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`<kyn-card\n class=\"notification-clickable\"\n ?highlight=${this.unRead}\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 >\n <span id=\"notificationType\"\n >${this.assistiveNotificationTypeText}</span\n >\n ${this.renderInnerUI()}\n </kyn-card>`\n : html` <kyn-card\n type=${this.type}\n role=${ifDefined(this.notificationRole)}\n class=\"${classMap(cardBgClasses)}\"\n >\n ${this.type === 'inline' || this.type === 'toast'\n ? html`<span id=\"notificationType\"\n >${this.assistiveNotificationTypeText}</span\n >`\n : null}\n ${this.renderInnerUI()}\n </kyn-card>`}\n `;\n }\n\n private renderInnerUI() {\n const notificationIcon: any = {\n success: successIcon,\n error: errorIcon,\n warning: warningIcon,\n info: infoIcon,\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` <span\n class=\"notification-state-icon ${this.tagStatus}\"\n slot=\"icon\"\n role=\"img\"\n aria-label=${`${this.textStrings[this.tagStatus]} icon`}\n >${unsafeSVG(notificationIcon[this.tagStatus])}</span\n >`\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` <kyn-button\n class=\"notification-toast-close-btn\"\n kind=\"ghost\"\n size=\"small\"\n description=${ifDefined(this.closeBtnDescription)}\n @on-click=\"${() => this._handleClose()}\"\n >\n <span\n slot=\"icon\"\n role=\"img\"\n aria-label=${ifDefined(this.closeBtnDescription)}\n >${unsafeSVG(closeIcon)}</span\n >\n </kyn-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` <span id=\"statusLabel\">${this.statusLabel}</span>\n <kyn-tag\n label=${this.textStrings[this.tagStatus]}\n tagColor=${this._tagColor[this.tagStatus]}\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","errorIcon","warningIcon","infoIcon","unsafeSVG","_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 { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport NotificationScss from './notification.scss';\nimport '../card';\nimport successIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg';\nimport warningIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport infoIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/information-filled.svg';\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: 'success',\n warning: 'warning',\n info: 'cat01',\n error: 'error',\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-normal': this.type === 'normal',\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-ai': this.type === 'toast' && this.tagStatus === 'ai',\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`<kyn-card\n class=\"notification-clickable\"\n ?highlight=${this.unRead}\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 >\n <span id=\"notificationType\"\n >${this.assistiveNotificationTypeText}</span\n >\n ${this.renderInnerUI()}\n </kyn-card>`\n : html` <kyn-card\n type=${this.type}\n role=${ifDefined(this.notificationRole)}\n class=\"${classMap(cardBgClasses)}\"\n >\n ${this.type === 'inline' || this.type === 'toast'\n ? html`<span id=\"notificationType\"\n >${this.assistiveNotificationTypeText}</span\n >`\n : null}\n ${this.renderInnerUI()}\n </kyn-card>`}\n `;\n }\n\n private renderInnerUI() {\n const notificationIcon: any = {\n success: successIcon,\n error: errorIcon,\n warning: warningIcon,\n info: infoIcon,\n ai: successIcon,\n default: successIcon,\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 ? html` <span\n class=\"notification-state-icon ${this.tagStatus}\"\n slot=\"icon\"\n role=\"img\"\n aria-label=${`${this.textStrings[this.tagStatus]} icon`}\n >${unsafeSVG(notificationIcon[this.tagStatus])}</span\n >`\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` <kyn-button\n class=\"notification-toast-close-btn\"\n kind=\"ghost\"\n size=\"small\"\n description=${ifDefined(this.closeBtnDescription)}\n @on-click=\"${() => this._handleClose()}\"\n >\n <span\n slot=\"icon\"\n role=\"img\"\n aria-label=${ifDefined(this.closeBtnDescription)}\n >${unsafeSVG(closeIcon)}</span\n >\n </kyn-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 @slotchange=\"${this._handleSlotChange}\"></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` <span id=\"statusLabel\">${this.statusLabel}</span>\n <kyn-tag\n label=${this.textStrings[this.tagStatus]}\n tagColor=${this._tagColor[this.tagStatus]}\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 private _handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n const hasContent = slot\n .assignedNodes()\n .some(\n (node) =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n );\n\n const descriptionDiv = this.shadowRoot?.querySelector(\n '.notification-description'\n ) as HTMLElement;\n if (descriptionDiv) {\n descriptionDiv.style.display = hasContent ? 'block' : 'none';\n }\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","errorIcon","warningIcon","infoIcon","ai","default","unsafeSVG","_handleClose","closeIcon","_handleSlotChange","updated","changedProperties","has","setTimeout","_close","animate","opacity","duration","easing","fill","onfinish","_a","parentNode","removeChild","event","CustomEvent","dispatchEvent","detail","origEvent","hasContent","target","assignedNodes","some","node","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","descriptionDiv","shadowRoot","querySelector","style","display","styles","NotificationScss","__decorate","property","String","prototype","Object","state","Boolean","reflect","Number","customElement"],"mappings":"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"}
package/components/reusable/notification/notificationContainer.js CHANGED
@@ -17,6 +17,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{e as i}from"../../.
17
17
  top: calc(var(--kd-header-height) + 10px);
18
18
  right: 10px;
19
19
  width: auto;
20
+ min-width: 440px;
20
21
  overflow-y: auto;
21
22
  max-height: calc(100vh - var(--kd-header-height) - 32px);
22
23
  z-index: 999999;
package/components/reusable/notification/notificationContainer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"notificationContainer.js","sources":["../../../../src/components/reusable/notification/notificationContainer.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport NotificationContainerScss from './notificationContainer.scss';\n\n/**\n * Notification container component for Toast notification.\n * Usage is limited for <kyn-notification type=\"toast\">..</kyn-notification>\n * @slot unnamed - Slot for <kyn-notification type=\"toast\"> component.\n */\n\n@customElement('kyn-notification-container')\nexport class NotificationContainer extends LitElement {\n static override styles = NotificationContainerScss;\n override render() {\n return html`<div class=\"notification-container\">\n <slot></slot>\n </div>`;\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-notification-container': NotificationContainer;\n }\n}\n"],"names":["NotificationContainer","LitElement","render","html","styles","NotificationContainerScss","__decorate","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAWO,IAAMA,EAAN,cAAoCC,EAEhC,MAAAC,GACP,OAAOC,CAAI;;WAGZ,GALeH,EAAMI,OAAGC,EADdL,EAAqBM,EAAA,CADjCC,EAAc,+BACFP"}
1
+ {"version":3,"file":"notificationContainer.js","sources":["../../../../src/components/reusable/notification/notificationContainer.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport NotificationContainerScss from './notificationContainer.scss';\n\n/**\n * Notification container component for Toast notification.\n * Usage is limited for <kyn-notification type=\"toast\">..</kyn-notification>\n * @slot unnamed - Slot for <kyn-notification type=\"toast\"> component.\n */\n\n@customElement('kyn-notification-container')\nexport class NotificationContainer extends LitElement {\n static override styles = NotificationContainerScss;\n override render() {\n return html`<div class=\"notification-container\">\n <slot></slot>\n </div>`;\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-notification-container': NotificationContainer;\n }\n}\n"],"names":["NotificationContainer","LitElement","render","html","styles","NotificationContainerScss","__decorate","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;GAWO,IAAMA,EAAN,cAAoCC,EAEhC,MAAAC,GACP,OAAOC,CAAI;;WAGZ,GALeH,EAAMI,OAAGC,EADdL,EAAqBM,EAAA,CADjCC,EAAc,+BACFP"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kyndryl-design-system/shidoka-applications",
3
- "version": "2.23.1",
3
+ "version": "2.23.2",
4
4
  "description": "Shidoka Web Components for Applications",
5
5
  "license": "MIT",
6
6
  "main": "index.js",
@@ -28,7 +28,7 @@
28
28
  "prepare": "npx husky install"
29
29
  },
30
30
  "dependencies": {
31
- "@kyndryl-design-system/shidoka-foundation": "^2.4.4",
31
+ "@kyndryl-design-system/shidoka-foundation": "^2.4.6",
32
32
  "@kyndryl-design-system/shidoka-icons": "^2.4.0",
33
33
  "@lit/context": "^1.1.0",
34
34
  "deepmerge-ts": "^7.1.0",