@kyndryl-design-system/shidoka-applications 1.49.2 → 1.49.4
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.
- package/components/reusable/notification/notification.js +21 -7
- package/components/reusable/notification/notification.js.map +1 -1
- package/components/reusable/table/data-table.js +1 -1
- package/components/reusable/table/index.js +1 -1
- package/components/reusable/table/table.js +1 -1
- package/components/reusable/table/table.skeleton.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/{table-c2115867.js → table-bb0d1690.js} +2 -2
- package/table-bb0d1690.js.map +1 -0
- package/table-c2115867.js.map +0 -1
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BO,IAAMA,EAAN,cAA2BC,EAA3B,WAAAC,uBAKLC,KAAiBC,kBAAG,GAIpBD,KAAoBE,qBAAG,GAOvBF,KAASG,UAAG,GAIZH,KAAII,KAAG,GAIPJ,KAASK,UAAG,UAIZL,KAAIM,KAAG,SAIPN,KAAAO,YAAmB,CACjBC,QAAS,UACTC,QAAS,UACTC,KAAM,OACNC,MAAO,SAKTX,KAAmBY,oBAAG,QAOtBZ,KAA6Ba,8BAAG,GAWhCb,KAAWc,YAAG,SAMdd,KAAAe,UAAiB,CACfP,QAAS,SACTC,QAAS,UACTC,KAAM,QACNC,MAAO,UAKTX,KAAMgB,QAAG,EAIThB,KAAeiB,iBAAG,EAIlBjB,KAAOkB,QAAG,CAmLX,CAjLU,MAAAC,GACP,MAAMC,EAAgB,CACpB,sBAAqC,WAAdpB,KAAKM,KAC5B,qBAAoC,UAAdN,KAAKM,KAC3B,sBACiB,WAAdN,KAAKM,MAAmC,UAAdN,KAAKM,OACb,UAAnBN,KAAKK,UACP,wBACiB,WAAdL,KAAKM,MAAmC,UAAdN,KAAKM,OACb,YAAnBN,KAAKK,UACP,wBACiB,WAAdL,KAAKM,MAAmC,UAAdN,KAAKM,OACb,YAAnBN,KAAKK,UACP,qBACiB,WAAdL,KAAKM,MAAmC,UAAdN,KAAKM,OACb,SAAnBN,KAAKK,UACP,wBACiB,WAAdL,KAAKM,MAAmC,UAAdN,KAAKM,OACb,YAAnBN,KAAKK,WAGT,OAAOgB,CAAI;QACO,cAAdrB,KAAKM,KACHe,CAAI;qBACOrB,KAAKgB,OACV,2BACA;mBACGhB,KAAKM;mBACLN,KAAKI;;;6BAGMkB,GAAWtB,KAAKuB,iBAAiBD;;mBAE5CE,EAAUxB,KAAKyB;4CACUzB,KAAKa;gBACjCb,KAAK0B;;aAGXL,CAAI;wBACUrB,KAAKM,aAAakB,EAAUxB,KAAKyB,4BAA4BE,EAASP;YACpE,WAAdpB,KAAKM,MAAmC,UAAdN,KAAKM,KAAmBe,CAAK,+BAA+BrB,KAAKa,uCAAyC;YACpIb,KAAK0B;;KAId,CAEO,aAAAA,GACN,MAAME,EAAwB,CAC5BpB,QAASqB,EACTlB,MAAOmB,EACPrB,QAASqB,EACTpB,KAAMqB,GAUR,OAAOV,CAAI;;;YAGY,WAAdrB,KAAKM,MAAmC,UAAdN,KAAKM,MACf,YAAnBN,KAAKK,UASD,KARAgB,CAAI;;;uBAZyB,CACrCb,QAAS,0CACTG,MAAO,8CACPF,QAAS,yCACTC,KAAM,iDAWqCV,KAAKK;wBAC9BuB,EAAiB5B,KAAKK;;6BAEjB,GAAGL,KAAKO,YAAYP,KAAKK;;;4CAIVL,KAAKC;;YAEP,KAA9BD,KAAKE,sBACQ,WAAdF,KAAKM,MAAmC,cAAdN,KAAKM,KAM5B,KALAe,CAAI;;oBAEErB,KAAKE;;;;;;YAOE,UAAdF,KAAKM,MAAkC,WAAdN,KAAKM,MAChCN,KAAKiB,gBAiBF,KAhBAI,CAAI;;;;8BAIYG,EAAUxB,KAAKY;;6BAEhB,IAAMZ,KAAKgC;;;;;0BAKdC;;+BAEKT,EAAUxB,KAAKY;;;;;;;;;;;;;;YAef,YAAnBZ,KAAKK,WACQ,WAAdL,KAAKM,MAAmC,cAAdN,KAAKM,KAQ5B,KAPAe,CAAI;qCACmBrB,KAAKc;;wBAElBd,KAAKO,YAAYP,KAAKK;2BACnBL,KAAKe,UAAUf,KAAKK;;;;;wCAMPL,KAAKG;;;WAI1C,CAEQ,OAAA+B,CAAQC,GAGC,UAAdnC,KAAKM,MACL6B,EAAkBC,IAAI,YACtBpC,KAAKkB,QAAU,GAEfmB,YAAW,KACTrC,KAAKsC,QAAQ,GACG,IAAftC,KAAKkB,QAEX,CAGO,MAAAoB,GACYtC,KAAKuC,QAAQ,CAAC,CAAEC,QAAS,KAAO,CAAEA,QAAS,MAAQ,CACnEC,SAAU,IACVC,OAAQ,cACRC,KAAM,aAEEC,SAAW,WACJ,QAAfC,EAAA7C,KAAK8C,kBAAU,IAAAD,GAAAA,EAAEE,YAAY/C,KAAK,EAIpC,MAAMgD,EAAQ,IAAIC,YAAY,YAC9BjD,KAAKkD,cAAcF,EACpB,CAEO,YAAAhB,GACNhC,KAAKsC,QACN,CAEO,gBAAAf,CAAiBD,GACvB,MAAM0B,EAAQ,IAAIC,YAAY,wBAAyB,CACrDE,OAAQ7B,EAAE6B,OAAOC,YAEnBpD,KAAKkD,cAAcF,EACpB,GAnQenD,EAAMwD,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UACK5D,EAAA6D,UAAA,yBAAA,GAIvBH,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UACQ5D,EAAA6D,UAAA,4BAAA,GAO1BH,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UACH5D,EAAA6D,UAAA,iBAAA,GAIfH,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UACR5D,EAAA6D,UAAA,YAAA,GAIVH,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UACI5D,EAAA6D,UAAA,iBAAA,GAItBH,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UACF5D,EAAA6D,UAAA,YAAA,GAIhBH,EAAA,CADCC,EAAS,CAAElD,KAAMqD,UAMhB9D,EAAA6D,UAAA,mBAAA,GAIFH,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UACY5D,EAAA6D,UAAA,2BAAA,GAO9BH,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UACiB5D,EAAA6D,UAAA,qCAAA,GAInCH,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UAC4B5D,EAAA6D,UAAA,wBAAA,GAO9CH,EAAA,CADCC,EAAS,CAAElD,KAAMmD,UACK5D,EAAA6D,UAAA,mBAAA,GAMvBH,EAAA,CADCK,KAMC/D,EAAA6D,UAAA,iBAAA,GAIFH,EAAA,CADCC,EAAS,CAAElD,KAAMuD,QAASC,SAAS,KACrBjE,EAAA6D,UAAA,cAAA,GAIfH,EAAA,CADCC,EAAS,CAAElD,KAAMuD,WACMhE,EAAA6D,UAAA,uBAAA,GAIxBH,EAAA,CADCC,EAAS,CAAElD,KAAMyD,UACNlE,EAAA6D,UAAA,eAAA,GAlFD7D,EAAY0D,EAAA,CADxBS,EAAc,qBACFnE"}
|
|
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,4 +1,4 @@
|
|
|
1
|
-
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as o,b as i,e as s}from"../../../vendor/lit-52eb9e23.js";import{i as n,s as a,x as d}from"../../../vendor/lit-element-3185f710.js";import{e as r}from"../../../vendor/lit-html-244138f0.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import"../checkbox/checkbox.js";import"../pagination/Pagination.js";import"../pagination/pagination-items-range.js";import"../pagination/pagination-page-size-dropdown.js";import"../pagination/pagination-navigation-buttons.js";import"../pagination/pagination.skeleton.js";import"../../../table-
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as o,b as i,e as s}from"../../../vendor/lit-52eb9e23.js";import{i as n,s as a,x as d}from"../../../vendor/lit-element-3185f710.js";import{e as r}from"../../../vendor/lit-html-244138f0.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import"../checkbox/checkbox.js";import"../pagination/Pagination.js";import"../pagination/pagination-items-range.js";import"../pagination/pagination-page-size-dropdown.js";import"../pagination/pagination-navigation-buttons.js";import"../pagination/pagination.skeleton.js";import"../../../table-bb0d1690.js";import"./table-cell.js";import"./table-row.js";import"./table-body.js";import"./table-head.js";import"./table-header.js";import"./table-foot.js";import"./table-footer.js";import"./table-legend.js";import"./table-legend-item.js";import"./table-toolbar.js";import"./table-container.js";import"./table-header-row.js";import"./table-expanded-row.js";import"./table.skeleton.js";import"../../../pagination-9cc71a5d.js";import"../dropdown/dropdown.js";import"../dropdown/dropdownOption.js";import"../../../vendor/@carbon/icons-c6f09e5f.js";import"../tag/tag.js";import"../../../tag-e16a93ec.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../loaders/skeleton.js";import"../../../common/mixins/form-input.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../../vendor/@lit/context-81eb2692.js";import"./table-context.js";import"./defs.js";import"../globalFilter/globalFilter.js";var l=n`kyn-tr.selected {
|
|
2
2
|
background-color: var(--kd-color-background-inverse-hover);
|
|
3
3
|
}`;let h=class extends a{constructor(){super(...arguments),this.rows=[],this.columns=[],this.checkboxSelection=!1,this.striped=!1,this.selectedRows=new Set,this.selectAll=!1,this.stickyHeader=!1,this.dense=!1,this.paginationModel={count:0,pageSize:5,pageNumber:0,pageSizeOptions:[5,10]},this.hideItemsRange=!1,this.hidePageSizeDropdown=!1,this.hideNavigationButtons=!1,this.fixedLayout=!1,this.headerCheckboxIndeterminate=!1,this.headerCheckboxChecked=!1}updateHeaderCheckbox(){0===this.selectedRows.size?(this.headerCheckboxIndeterminate=!1,this.headerCheckboxChecked=!1):this.selectedRows.size===this.rows.length?(this.headerCheckboxIndeterminate=!1,this.headerCheckboxChecked=!0,this.selectAll=!0):(this.headerCheckboxIndeterminate=!0,this.headerCheckboxChecked=!1,this.selectAll=!1)}handleRowSelectionChange(e,t){const o=new Set(this.selectedRows);t?o.add(e):o.delete(e),this.selectedRows=o,this.updateHeaderCheckbox(),this.dispatchEvent(new CustomEvent("on-selected-rows-changed",{detail:{selectedRows:Array.from(this.selectedRows)},bubbles:!0,composed:!0}))}toggleSelectionAll(){this.selectAll=!this.selectAll,this.selectAll?this.rows.forEach((e=>this.selectedRows.add(e.id))):this.selectedRows.clear(),this.updateHeaderCheckbox(),this.requestUpdate(),this.dispatchEvent(new CustomEvent("on-selected-rows-changed",{detail:{selectedRows:Array.from(this.selectedRows)},bubbles:!0,composed:!0}))}onPageSizeChange(e){this.paginationModel.pageSize=e.detail.value,this.dispatchEvent(new CustomEvent("on-page-changed",{detail:{pageSize:e.detail.value,pageNumber:1},bubbles:!0,composed:!0}))}onPageNumberChange(e){this.paginationModel.pageNumber=e.detail.value;const t=this.paginationModel.pageSize;this.dispatchEvent(new CustomEvent("on-page-changed",{detail:{pageNumber:e.detail.value,pageSize:t},bubbles:!0,composed:!0}))}render(){var e;const{count:t,pageSize:o,pageNumber:s,pageSizeOptions:n}=this.paginationModel;return this.selectedRows=new Set(this.selectedRows||[]),this.updateHeaderCheckbox(),d`
|
|
4
4
|
<kyn-table-container>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{T as Table}from"../../../table-
|
|
1
|
+
export{T as Table}from"../../../table-bb0d1690.js";export{TableCell}from"./table-cell.js";export{TableRow}from"./table-row.js";export{TableBody}from"./table-body.js";export{TableHead}from"./table-head.js";export{TableHeader}from"./table-header.js";export{TableFoot}from"./table-foot.js";export{TableFooter}from"./table-footer.js";export{TableLegend}from"./table-legend.js";export{TableLegendItem}from"./table-legend-item.js";export{TableToolbar}from"./table-toolbar.js";export{TableContainer}from"./table-container.js";export{TableHeaderRow}from"./table-header-row.js";export{TableExpandedRow}from"./table-expanded-row.js";export{TableSkeleton}from"./table.skeleton.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-52eb9e23.js";import"../../../vendor/lit-element-3185f710.js";import"../../../vendor/@lit/context-81eb2692.js";import"./table-context.js";import"./defs.js";import"../../../vendor/@carbon/icons-c6f09e5f.js";import"../checkbox/checkbox.js";import"../../../vendor/lit-html-244138f0.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import"../loaders/skeleton.js";import"../pagination/pagination.skeleton.js";import"../../../pagination-9cc71a5d.js";import"../globalFilter/globalFilter.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-52eb9e23.js";import"../../../vendor/lit-element-3185f710.js";import"../../../vendor/@lit/context-81eb2692.js";import"./table-context.js";export{T as Table}from"../../../table-
|
|
1
|
+
import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-52eb9e23.js";import"../../../vendor/lit-element-3185f710.js";import"../../../vendor/@lit/context-81eb2692.js";import"./table-context.js";export{T as Table}from"../../../table-bb0d1690.js";
|
|
2
2
|
//# sourceMappingURL=table.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{c as t}from"../../../table-
|
|
1
|
+
import{c as t}from"../../../table-bb0d1690.js";import"./table-cell.js";import"./table-row.js";import"./table-body.js";import"./table-head.js";import"./table-header.js";import"./table-foot.js";import"./table-footer.js";import"./table-legend.js";import"./table-legend-item.js";import"./table-toolbar.js";import"./table-container.js";import"./table-header-row.js";import"./table-expanded-row.js";import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{e as o,n as l}from"../../../vendor/lit-52eb9e23.js";import{i,s as n,x as r}from"../../../vendor/lit-element-3185f710.js";import"../loaders/skeleton.js";import"../pagination/pagination.skeleton.js";import"../globalFilter/globalFilter.js";import"../../../vendor/@lit/context-81eb2692.js";import"./table-context.js";import"./defs.js";import"../../../vendor/@carbon/icons-c6f09e5f.js";import"../checkbox/checkbox.js";import"../../../vendor/lit-html-244138f0.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import"../../../pagination-9cc71a5d.js";let s=class extends n{render(){return r`
|
|
2
2
|
<kyn-global-filter>
|
|
3
3
|
<div class="left-wrapper">
|
|
4
4
|
<kyn-skeleton
|
package/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderCategory}from"./components/global/header/headerCategory.js";export{HeaderDivider}from"./components/global/header/headerDivider.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderUserProfile}from"./components/global/header/headerUserProfile.js";export{HeaderAvatar}from"./components/global/header/headerAvatar.js";export{HeaderPanel}from"./components/global/header/headerPanel.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{HeaderNotificationPanel}from"./components/global/header/headerNotificationPanel.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{Footer}from"./components/global/footer/footer.js";export{FooterNav}from"./components/global/footer/footerNav.js";export{FooterNavLink}from"./components/global/footer/footerLink.js";export{UiShell}from"./components/global/uiShell/uiShell.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{CheckboxSubgroup}from"./components/reusable/checkbox/checkboxSubgroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DropdownCategory}from"./components/reusable/dropdown/dropdownCategory.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{BreadcrumbItem}from"./components/reusable/breadcrumbs/breadcrumbItem.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{T as Table}from"./table-
|
|
1
|
+
export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderCategory}from"./components/global/header/headerCategory.js";export{HeaderDivider}from"./components/global/header/headerDivider.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderUserProfile}from"./components/global/header/headerUserProfile.js";export{HeaderAvatar}from"./components/global/header/headerAvatar.js";export{HeaderPanel}from"./components/global/header/headerPanel.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{HeaderNotificationPanel}from"./components/global/header/headerNotificationPanel.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{Footer}from"./components/global/footer/footer.js";export{FooterNav}from"./components/global/footer/footerNav.js";export{FooterNavLink}from"./components/global/footer/footerLink.js";export{UiShell}from"./components/global/uiShell/uiShell.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{CheckboxSubgroup}from"./components/reusable/checkbox/checkboxSubgroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DropdownCategory}from"./components/reusable/dropdown/dropdownCategory.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{BreadcrumbItem}from"./components/reusable/breadcrumbs/breadcrumbItem.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{T as Table}from"./table-bb0d1690.js";export{TableCell}from"./components/reusable/table/table-cell.js";export{TableRow}from"./components/reusable/table/table-row.js";export{TableBody}from"./components/reusable/table/table-body.js";export{TableHead}from"./components/reusable/table/table-head.js";export{TableHeader}from"./components/reusable/table/table-header.js";export{TableFoot}from"./components/reusable/table/table-foot.js";export{TableFooter}from"./components/reusable/table/table-footer.js";export{TableLegend}from"./components/reusable/table/table-legend.js";export{TableLegendItem}from"./components/reusable/table/table-legend-item.js";export{TableToolbar}from"./components/reusable/table/table-toolbar.js";export{TableContainer}from"./components/reusable/table/table-container.js";export{TableHeaderRow}from"./components/reusable/table/table-header-row.js";export{TableExpandedRow}from"./components/reusable/table/table-expanded-row.js";import"./components/reusable/table/table.skeleton.js";export{Pagination}from"./components/reusable/pagination/Pagination.js";import"./components/reusable/pagination/pagination-items-range.js";import"./components/reusable/pagination/pagination-page-size-dropdown.js";import"./components/reusable/pagination/pagination-navigation-buttons.js";import"./components/reusable/pagination/pagination.skeleton.js";export{OverflowMenu}from"./components/reusable/overflowMenu/overflowMenu.js";export{OverflowMenuItem}from"./components/reusable/overflowMenu/overflowMenuItem.js";export{Tabs}from"./components/reusable/tabs/tabs.js";export{Tab}from"./components/reusable/tabs/tab.js";export{TabPanel}from"./components/reusable/tabs/tabPanel.js";export{Modal}from"./components/reusable/modal/modal.js";export{Tooltip}from"./components/reusable/tooltip/tooltip.js";export{Tag}from"./components/reusable/tag/tag.js";export{TagGroup}from"./components/reusable/tag/tagGroup.js";import"./components/reusable/tag/tag.skeleton.js";export{GlobalFilter}from"./components/reusable/globalFilter/globalFilter.js";export{SideDrawer}from"./components/reusable/sideDrawer/sideDrawer.js";export{PageTitle}from"./components/reusable/pagetitle/pageTitle.js";export{Card}from"./components/reusable/card/card.js";import"./components/reusable/card/vitalCard.skeleton.js";import"./components/reusable/card/informationalCard.skeleton.js";export{Notification}from"./components/reusable/notification/notification.js";export{NotificationContainer}from"./components/reusable/notification/notificationContainer.js";export{Widget}from"./components/reusable/widget/widget.js";export{WidgetDragHandle}from"./components/reusable/widget/widgetDragHandle.js";export{WidgetGridstack}from"./components/reusable/widget/widgetGridstack.js";export{Search}from"./components/reusable/search/search.js";export{Loader}from"./components/reusable/loaders/loader.js";export{LoaderInline}from"./components/reusable/loaders/inline.js";export{Skeleton}from"./components/reusable/loaders/skeleton.js";export{NumberInput}from"./components/reusable/numberInput/numberInput.js";export{createOptionsArray,debounce,stringToReactHtml}from"./common/helpers/helpers.js";export{Config,WidgetConstraints,WidgetSizes}from"./common/helpers/gridstack.js";export{SwiperConfig}from"./common/helpers/swiper.js";export{Stepper}from"./components/reusable/stepper/stepper.js";export{StepperItem}from"./components/reusable/stepper/stepperItem.js";export{StepperItemChild}from"./components/reusable/stepper/stepperItemChild.js";export{ProgressBar}from"./components/reusable/progressBar/progressBar.js";export{BlockCodeView}from"./components/reusable/blockCodeView/blockCodeView.js";export{InlineCodeView}from"./components/reusable/inlineCodeView/inlineCodeView.js";import"./vendor/tslib-53a81efe.js";import"./vendor/lit-52eb9e23.js";import"./vendor/lit-element-3185f710.js";import"./vendor/lit-html-244138f0.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import"./vendor/@kyndryl-design-system/shidoka-foundation-61c066a3.js";import"./vendor/@carbon/icons-c6f09e5f.js";import"@kyndryl-design-system/shidoka-foundation/components/link";import"@kyndryl-design-system/shidoka-foundation/components/button";import"./vendor/deepmerge-ts-e62363e6.js";import"./common/mixins/form-input.js";import"./components/reusable/datePicker/defs.js";import"./vendor/@lit/context-81eb2692.js";import"./components/reusable/table/table-context.js";import"./components/reusable/table/defs.js";import"./pagination-9cc71a5d.js";import"./tag-e16a93ec.js";import"./cardSample-01a2374a.js";import"@kyndryl-design-system/shidoka-foundation/components/card";import"./vendor/query-selector-shadow-dom-013e9d24.js";import"./vendor/gridstack-79fea57d.js";import"./vendor/lottie-web-cef0fc90.js";import"./vendor/prismjs-257fc4fa.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -17,5 +17,5 @@ import{_ as e}from"./vendor/tslib-53a81efe.js";import{n as t,t as o,e as s}from"
|
|
|
17
17
|
|
|
18
18
|
kyn-tr.selected {
|
|
19
19
|
background-color: var(--kd-color-background-inverse-hover);
|
|
20
|
-
}`;let c=class extends i{constructor(){super(...arguments),this.role="table",this._provider=new a(this,h),this._tableHeaderRow=null,this._allRows=[],this._selectedRows=[],this._selectedRowIds=new Set,this._headerCheckboxIndeterminate=!1,this._headerCheckboxChecked=!1}updated(e){super.updated(e);const t={};e.has("dense")&&(t.dense=this.dense),e.has("ellipsis")&&(t.ellipsis=this.ellipsis),e.has("striped")&&(t.striped=this.striped),e.has("checkboxSelection")&&(t.checkboxSelection=this.checkboxSelection),e.has("stickyHeader")&&(t.stickyHeader=this.stickyHeader),this._provider.setValue(t)}_updateHeaderCheckbox(){var e;0===this._selectedRows.length||0===this._allRows.length?(this._headerCheckboxIndeterminate=!1,this._headerCheckboxChecked=!1):this._selectedRows.length===this._allRows.length?(this._headerCheckboxIndeterminate=!1,this._headerCheckboxChecked=!0):(this._headerCheckboxIndeterminate=!0,this._headerCheckboxChecked=!1),null===(e=this._tableHeaderRow)||void 0===e||e.updateHeaderCheckboxState(this._headerCheckboxIndeterminate,this._headerCheckboxChecked)}_handleRowSelectionChange(e){e.stopPropagation();const{target:t}=e,{_selectedRows:o}=this;if(!this.contains(t))return;o.includes(t)?(this._selectedRows=o.filter((e=>e!==t)),this._selectedRowIds.delete(t.rowId)):(this._selectedRows.push(t),this._selectedRowIds.add(t.rowId)),this._updateHeaderCheckbox();const s={bubbles:!
|
|
21
|
-
//# sourceMappingURL=table-
|
|
20
|
+
}`;let c=class extends i{constructor(){super(...arguments),this.role="table",this._provider=new a(this,h),this._tableHeaderRow=null,this._allRows=[],this._selectedRows=[],this._selectedRowIds=new Set,this._headerCheckboxIndeterminate=!1,this._headerCheckboxChecked=!1}updated(e){super.updated(e);const t={};e.has("dense")&&(t.dense=this.dense),e.has("ellipsis")&&(t.ellipsis=this.ellipsis),e.has("striped")&&(t.striped=this.striped),e.has("checkboxSelection")&&(t.checkboxSelection=this.checkboxSelection),e.has("stickyHeader")&&(t.stickyHeader=this.stickyHeader),this._provider.setValue(t)}_updateHeaderCheckbox(){var e;0===this._selectedRows.length||0===this._allRows.length?(this._headerCheckboxIndeterminate=!1,this._headerCheckboxChecked=!1):this._selectedRows.length===this._allRows.length?(this._headerCheckboxIndeterminate=!1,this._headerCheckboxChecked=!0):(this._headerCheckboxIndeterminate=!0,this._headerCheckboxChecked=!1),null===(e=this._tableHeaderRow)||void 0===e||e.updateHeaderCheckboxState(this._headerCheckboxIndeterminate,this._headerCheckboxChecked)}_handleRowSelectionChange(e){e.stopPropagation();const{target:t}=e,{_selectedRows:o}=this;if(!this.contains(t))return;o.includes(t)?(this._selectedRows=o.filter((e=>e!==t)),this._selectedRowIds.delete(t.rowId)):(this._selectedRows.push(t),this._selectedRowIds.add(t.rowId)),this._updateHeaderCheckbox();const s={bubbles:!1,cancelable:!0,composed:!0,detail:{selectedRow:t,selectedRows:this._selectedRows}};this.dispatchEvent(new CustomEvent("on-row-selection-change",s))}_toggleSelectionAll(e){e.stopPropagation();const{detail:{checked:t},target:o}=e,{_allRows:s}=this;if(!this.contains(o))return;s.forEach((e=>{e.disabled||(e.selected=t)})),this._selectedRows=[...s.filter((e=>e.selected))],this._selectedRowIds=new Set(this._selectedRows.map((e=>e.rowId))),this._updateHeaderCheckbox();const d={bubbles:!1,cancelable:!0,composed:!0,detail:{selectedRows:this._selectedRows}};this.dispatchEvent(new CustomEvent("on-all-rows-selection-change",d))}updateAfterExternalChanges(){this._allRows=Array.from(this.querySelectorAll("kyn-tr")),this._selectedRows=this._allRows.filter((e=>e.selected)),this._updateHeaderCheckbox(),this.requestUpdate()}getSelectedRows(){return this._selectedRows}_handleRowsChange(e){const{detail:{rows:t}}=e;e.stopPropagation(),this._allRows=t,this._updateSelectionStates(),this._updateHeaderCheckbox()}_updateSelectionStates(){const e=[];this._allRows.forEach((t=>{this._selectedRowIds.has(t.rowId)?(t.selected=!0,e.push(t)):t.selected&&(this._selectedRowIds.add(t.rowId),e.push(t))})),this._selectedRows=e}connectedCallback(){super.connectedCallback(),this.addEventListener("on-header-checkbox-toggle",this._toggleSelectionAll),this.addEventListener("on-row-select",this._handleRowSelectionChange),this.addEventListener("on-rows-change",this._handleRowsChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("on-header-checkbox-toggle",this._toggleSelectionAll),this.removeEventListener("on-row-select",this._handleRowSelectionChange),this.removeEventListener("on-rows-change",this._handleRowsChange)}firstUpdated(){this._tableHeaderRow=this.querySelector("kyn-header-tr")}render(){return l` <slot></slot> `}};c.styles=[r],e([t({type:String,reflect:!0})],c.prototype,"role",void 0),e([t({type:Boolean})],c.prototype,"checkboxSelection",void 0),e([t({type:Boolean})],c.prototype,"striped",void 0),e([t({type:Boolean})],c.prototype,"stickyHeader",void 0),e([t({type:Boolean})],c.prototype,"dense",void 0),e([t({type:Boolean})],c.prototype,"ellipsis",void 0),e([t({type:Boolean})],c.prototype,"fixedLayout",void 0),e([o()],c.prototype,"_provider",void 0),e([o()],c.prototype,"_tableHeaderRow",void 0),e([o()],c.prototype,"_allRows",void 0),e([o()],c.prototype,"_selectedRows",void 0),e([o()],c.prototype,"_selectedRowIds",void 0),e([o()],c.prototype,"_headerCheckboxIndeterminate",void 0),e([o()],c.prototype,"_headerCheckboxChecked",void 0),c=e([s("kyn-table")],c);export{c as T,r as c};
|
|
21
|
+
//# sourceMappingURL=table-bb0d1690.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-bb0d1690.js","sources":["../src/components/reusable/table/table.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ContextProvider } from '@lit/context';\nimport { tableContext } from './table-context';\n\nimport { TableRow } from './table-row';\nimport { TableHeaderRow } from './table-header-row';\n\nimport styles from './table.scss';\n\n/**\n * `kyn-table` Web Component.\n * This component provides a table with sorting, pagination, and selection capabilities.\n * It is designed to be used with the `kyn-table-toolbar` and `kyn-table-container` components.\n * @fires on-row-selection-change - Dispatched when the selection state of a row is toggled.\n * @fires on-all-rows-selection-change - Dispatched when the selection state of all rows is toggled.\n */\n\n@customElement('kyn-table')\nexport class Table extends LitElement {\n static override styles = [styles];\n\n /** aria role.\n * @internal\n */\n @property({ type: String, reflect: true })\n override role = 'table';\n\n /**\n * checkboxSelection: Boolean indicating whether rows should be\n * selectable using checkboxes.\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean })\n checkboxSelection?: boolean;\n\n /**\n * striped: Boolean indicating whether rows should have alternate\n * coloring.\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean })\n striped?: boolean;\n\n /**\n * stickyHeader: Boolean indicating whether the table header\n * should be sticky.\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean })\n stickyHeader?: boolean;\n\n /**\n * dense: Boolean indicating whether the table should be displayed\n * in dense mode.\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean })\n dense?: boolean;\n\n /**\n * ellipsis: Boolean indicating whether the table should truncate\n * text content with an ellipsis.\n * @type {boolean}\n * @default false\n * @ignore\n */\n @property({ type: Boolean })\n ellipsis?: boolean;\n\n /**\n * fixedLayout: Boolean indicating whether the table should have a fixed layout.\n * This will set the table's layout to fixed, which means the table and column widths\n * will be determined by the width of the columns and not by the content of the cells.\n * This can be useful when you want to have a consistent column width across multiple tables.\n * @type {boolean}\n * @default false\n * */\n @property({ type: Boolean })\n fixedLayout?: boolean;\n\n /**\n * _provider: Context provider for the table.\n * @ignore\n * @private\n */\n @state()\n private _provider = new ContextProvider(this, tableContext);\n\n /**\n * updated: Lifecycle method called when the element is updated.\n */\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n // Create an object to hold the new values\n const newValues: Partial<any> = {};\n\n // Check each property in _propsToCheck and add it to newValues if it has really changed\n if (changedProperties.has('dense')) newValues.dense = this.dense;\n if (changedProperties.has('ellipsis')) newValues.ellipsis = this.ellipsis;\n if (changedProperties.has('striped')) newValues.striped = this.striped;\n if (changedProperties.has('checkboxSelection'))\n newValues.checkboxSelection = this.checkboxSelection;\n if (changedProperties.has('stickyHeader'))\n newValues.stickyHeader = this.stickyHeader;\n\n // Update the context provider with the new values\n this._provider.setValue(newValues);\n }\n\n /**\n * tableHeaderRow: Reference to the header row of the table.\n * @ignore\n * @private\n */\n @state()\n private _tableHeaderRow: TableHeaderRow | null = null;\n\n /**\n * allRows: Array of objects representing each row in the data table.\n * @ignore\n * @private\n */\n @state()\n private _allRows: TableRow[] = [];\n\n /**\n * selectedRows: Set of row ids that are currently selected.\n * @ignore\n * @private\n */\n @state()\n private _selectedRows: TableRow[] = [];\n\n /**\n * selectedRowIds: Set of row ids that are currently selected.\n * @ignore\n * @private\n */\n @state()\n private _selectedRowIds: Set<string> = new Set();\n\n /**\n * headerCheckboxIndeterminate: Boolean indicating whether the header\n * checkbox is in an indeterminate state.\n * @ignore\n * @private\n */\n @state()\n private _headerCheckboxIndeterminate = false;\n\n /**\n * headerCheckboxChecked: Boolean indicating whether the header checkbox is\n * checked.\n * @ignore\n * @private\n */\n @state()\n private _headerCheckboxChecked = false;\n\n /**\n * Updates the state of the header checkbox based on the number of\n * selected rows.\n * @private\n */\n private _updateHeaderCheckbox() {\n if (this._selectedRows.length === 0 || this._allRows.length === 0) {\n this._headerCheckboxIndeterminate = false;\n this._headerCheckboxChecked = false;\n } else if (this._selectedRows.length === this._allRows.length) {\n this._headerCheckboxIndeterminate = false;\n this._headerCheckboxChecked = true;\n } else {\n this._headerCheckboxIndeterminate = true;\n this._headerCheckboxChecked = false;\n }\n\n this._tableHeaderRow?.updateHeaderCheckboxState(\n this._headerCheckboxIndeterminate,\n this._headerCheckboxChecked\n );\n }\n\n /**\n * Handles the change of selection state for a specific row.\n */\n private _handleRowSelectionChange(event: CustomEvent) {\n event.stopPropagation();\n\n const { target } = event;\n const { _selectedRows: selectedRows } = this;\n\n if (!this.contains(target as TableRow)) {\n return;\n }\n\n if (selectedRows.includes(target as TableRow)) {\n this._selectedRows = selectedRows.filter((e) => e !== target);\n this._selectedRowIds.delete((target as TableRow).rowId);\n } else {\n this._selectedRows.push(target as TableRow);\n this._selectedRowIds.add((target as TableRow).rowId);\n }\n\n this._updateHeaderCheckbox();\n\n const init = {\n bubbles: false,\n cancelable: true,\n composed: true,\n detail: {\n selectedRow: target,\n selectedRows: this._selectedRows,\n },\n };\n this.dispatchEvent(new CustomEvent('on-row-selection-change', init));\n }\n\n /**\n * Toggles the selection state of all rows in the table.\n */\n private _toggleSelectionAll(event: CustomEvent) {\n event.stopPropagation();\n\n const {\n detail: { checked },\n target,\n } = event;\n const { _allRows: allRows } = this;\n\n if (!this.contains(target as TableRow)) {\n return;\n }\n\n allRows.forEach((row) => {\n if ((row as TableRow).disabled) return;\n\n (row as TableRow).selected = checked;\n });\n\n this._selectedRows = [...allRows.filter((row) => row.selected)];\n this._selectedRowIds = new Set(this._selectedRows.map((row) => row.rowId));\n\n this._updateHeaderCheckbox();\n\n const init = {\n bubbles: false,\n cancelable: true,\n composed: true,\n detail: {\n selectedRows: this._selectedRows,\n },\n };\n this.dispatchEvent(new CustomEvent('on-all-rows-selection-change', init));\n }\n\n /**\n * Resets the selection state of all rows in the table.\n * This method is called when the table is reset or cleared.\n * @public\n * @returns void\n */\n public updateAfterExternalChanges() {\n // Re-query the DOM to update the _allRows based on current children elements\n this._allRows = Array.from(this.querySelectorAll('kyn-tr'));\n\n // Update _selectedRows based on whether the row elements are marked as selected\n this._selectedRows = this._allRows.filter((row) => row.selected);\n\n this._updateHeaderCheckbox();\n this.requestUpdate();\n }\n\n /**\n * Returns the selected rows in the table.\n * @returns Array of selected rows.\n * @public\n */\n public getSelectedRows() {\n return this._selectedRows;\n }\n\n /**\n * Handles the change of rows in the table body.\n * @param {CustomEvent} event - The custom event containing the updated rows.\n * @private\n */\n private _handleRowsChange(event: CustomEvent) {\n const {\n detail: { rows },\n } = event;\n event.stopPropagation();\n\n this._allRows = rows;\n this._updateSelectionStates();\n this._updateHeaderCheckbox();\n }\n\n private _updateSelectionStates() {\n // Temporary array to hold updated selected rows\n const updatedSelectedRows: TableRow[] = [];\n\n // Loop through all rows to update their selected state and rebuild the selectedRows array\n this._allRows.forEach((row) => {\n if (this._selectedRowIds.has(row.rowId)) {\n row.selected = true; // Update the selected property if the rowId matches\n updatedSelectedRows.push(row); // Add the actual row element to the updated selected rows array\n } else if (row.selected) {\n this._selectedRowIds.add(row.rowId); // Add the rowId to the selectedRowIds set\n updatedSelectedRows.push(row); // Add the actual row element to the updated selected rows array\n }\n });\n\n // Replace the old selectedRows with the updated selected rows\n this._selectedRows = updatedSelectedRows;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener(\n 'on-header-checkbox-toggle',\n this._toggleSelectionAll as EventListener\n );\n this.addEventListener(\n 'on-row-select',\n this._handleRowSelectionChange as EventListener\n );\n this.addEventListener(\n 'on-rows-change',\n this._handleRowsChange as EventListener\n );\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\n 'on-header-checkbox-toggle',\n this._toggleSelectionAll as EventListener\n );\n this.removeEventListener(\n 'on-row-select',\n this._handleRowSelectionChange as EventListener\n );\n this.removeEventListener(\n 'on-rows-change',\n this._handleRowsChange as EventListener\n );\n }\n\n override firstUpdated() {\n this._tableHeaderRow = this.querySelector('kyn-header-tr');\n }\n\n override render() {\n return html` <slot></slot> `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-table': Table;\n }\n}\n"],"names":["Table","LitElement","constructor","this","role","_provider","ContextProvider","tableContext","_tableHeaderRow","_allRows","_selectedRows","_selectedRowIds","Set","_headerCheckboxIndeterminate","_headerCheckboxChecked","updated","changedProperties","super","newValues","has","dense","ellipsis","striped","checkboxSelection","stickyHeader","setValue","_updateHeaderCheckbox","length","_a","updateHeaderCheckboxState","_handleRowSelectionChange","event","stopPropagation","target","selectedRows","contains","includes","filter","e","delete","rowId","push","add","init","bubbles","cancelable","composed","detail","selectedRow","dispatchEvent","CustomEvent","_toggleSelectionAll","checked","allRows","forEach","row","disabled","selected","map","updateAfterExternalChanges","Array","from","querySelectorAll","requestUpdate","getSelectedRows","_handleRowsChange","rows","_updateSelectionStates","updatedSelectedRows","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","querySelector","render","html","styles","__decorate","property","type","String","reflect","prototype","Boolean","state","customElement"],"mappings":"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"}
|
package/table-c2115867.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table-c2115867.js","sources":["../src/components/reusable/table/table.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ContextProvider } from '@lit/context';\nimport { tableContext } from './table-context';\n\nimport { TableRow } from './table-row';\nimport { TableHeaderRow } from './table-header-row';\n\nimport styles from './table.scss';\n\n/**\n * `kyn-table` Web Component.\n * This component provides a table with sorting, pagination, and selection capabilities.\n * It is designed to be used with the `kyn-table-toolbar` and `kyn-table-container` components.\n * @fires on-row-selection-change - Dispatched when the selection state of a row is toggled.\n * @fires on-all-rows-selection-change - Dispatched when the selection state of all rows is toggled.\n */\n\n@customElement('kyn-table')\nexport class Table extends LitElement {\n static override styles = [styles];\n\n /** aria role.\n * @internal\n */\n @property({ type: String, reflect: true })\n override role = 'table';\n\n /**\n * checkboxSelection: Boolean indicating whether rows should be\n * selectable using checkboxes.\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean })\n checkboxSelection?: boolean;\n\n /**\n * striped: Boolean indicating whether rows should have alternate\n * coloring.\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean })\n striped?: boolean;\n\n /**\n * stickyHeader: Boolean indicating whether the table header\n * should be sticky.\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean })\n stickyHeader?: boolean;\n\n /**\n * dense: Boolean indicating whether the table should be displayed\n * in dense mode.\n * @type {boolean}\n * @default false\n */\n @property({ type: Boolean })\n dense?: boolean;\n\n /**\n * ellipsis: Boolean indicating whether the table should truncate\n * text content with an ellipsis.\n * @type {boolean}\n * @default false\n * @ignore\n */\n @property({ type: Boolean })\n ellipsis?: boolean;\n\n /**\n * fixedLayout: Boolean indicating whether the table should have a fixed layout.\n * This will set the table's layout to fixed, which means the table and column widths\n * will be determined by the width of the columns and not by the content of the cells.\n * This can be useful when you want to have a consistent column width across multiple tables.\n * @type {boolean}\n * @default false\n * */\n @property({ type: Boolean })\n fixedLayout?: boolean;\n\n /**\n * _provider: Context provider for the table.\n * @ignore\n * @private\n */\n @state()\n private _provider = new ContextProvider(this, tableContext);\n\n /**\n * updated: Lifecycle method called when the element is updated.\n */\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n // Create an object to hold the new values\n const newValues: Partial<any> = {};\n\n // Check each property in _propsToCheck and add it to newValues if it has really changed\n if (changedProperties.has('dense')) newValues.dense = this.dense;\n if (changedProperties.has('ellipsis')) newValues.ellipsis = this.ellipsis;\n if (changedProperties.has('striped')) newValues.striped = this.striped;\n if (changedProperties.has('checkboxSelection'))\n newValues.checkboxSelection = this.checkboxSelection;\n if (changedProperties.has('stickyHeader'))\n newValues.stickyHeader = this.stickyHeader;\n\n // Update the context provider with the new values\n this._provider.setValue(newValues);\n }\n\n /**\n * tableHeaderRow: Reference to the header row of the table.\n * @ignore\n * @private\n */\n @state()\n private _tableHeaderRow: TableHeaderRow | null = null;\n\n /**\n * allRows: Array of objects representing each row in the data table.\n * @ignore\n * @private\n */\n @state()\n private _allRows: TableRow[] = [];\n\n /**\n * selectedRows: Set of row ids that are currently selected.\n * @ignore\n * @private\n */\n @state()\n private _selectedRows: TableRow[] = [];\n\n /**\n * selectedRowIds: Set of row ids that are currently selected.\n * @ignore\n * @private\n */\n @state()\n private _selectedRowIds: Set<string> = new Set();\n\n /**\n * headerCheckboxIndeterminate: Boolean indicating whether the header\n * checkbox is in an indeterminate state.\n * @ignore\n * @private\n */\n @state()\n private _headerCheckboxIndeterminate = false;\n\n /**\n * headerCheckboxChecked: Boolean indicating whether the header checkbox is\n * checked.\n * @ignore\n * @private\n */\n @state()\n private _headerCheckboxChecked = false;\n\n /**\n * Updates the state of the header checkbox based on the number of\n * selected rows.\n * @private\n */\n private _updateHeaderCheckbox() {\n if (this._selectedRows.length === 0 || this._allRows.length === 0) {\n this._headerCheckboxIndeterminate = false;\n this._headerCheckboxChecked = false;\n } else if (this._selectedRows.length === this._allRows.length) {\n this._headerCheckboxIndeterminate = false;\n this._headerCheckboxChecked = true;\n } else {\n this._headerCheckboxIndeterminate = true;\n this._headerCheckboxChecked = false;\n }\n\n this._tableHeaderRow?.updateHeaderCheckboxState(\n this._headerCheckboxIndeterminate,\n this._headerCheckboxChecked\n );\n }\n\n /**\n * Handles the change of selection state for a specific row.\n */\n private _handleRowSelectionChange(event: CustomEvent) {\n event.stopPropagation();\n\n const { target } = event;\n const { _selectedRows: selectedRows } = this;\n\n if (!this.contains(target as TableRow)) {\n return;\n }\n\n if (selectedRows.includes(target as TableRow)) {\n this._selectedRows = selectedRows.filter((e) => e !== target);\n this._selectedRowIds.delete((target as TableRow).rowId);\n } else {\n this._selectedRows.push(target as TableRow);\n this._selectedRowIds.add((target as TableRow).rowId);\n }\n\n this._updateHeaderCheckbox();\n\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n selectedRow: target,\n selectedRows: this._selectedRows,\n },\n };\n this.dispatchEvent(new CustomEvent('on-row-selection-change', init));\n }\n\n /**\n * Toggles the selection state of all rows in the table.\n */\n private _toggleSelectionAll(event: CustomEvent) {\n event.stopPropagation();\n\n const {\n detail: { checked },\n target,\n } = event;\n const { _allRows: allRows } = this;\n\n if (!this.contains(target as TableRow)) {\n return;\n }\n\n allRows.forEach((row) => {\n if ((row as TableRow).disabled) return;\n\n (row as TableRow).selected = checked;\n });\n\n this._selectedRows = [...allRows.filter((row) => row.selected)];\n this._selectedRowIds = new Set(this._selectedRows.map((row) => row.rowId));\n\n this._updateHeaderCheckbox();\n\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n selectedRows: this._selectedRows,\n },\n };\n this.dispatchEvent(new CustomEvent('on-all-rows-selection-change', init));\n }\n\n /**\n * Resets the selection state of all rows in the table.\n * This method is called when the table is reset or cleared.\n * @public\n * @returns void\n */\n public updateAfterExternalChanges() {\n // Re-query the DOM to update the _allRows based on current children elements\n this._allRows = Array.from(this.querySelectorAll('kyn-tr'));\n\n // Update _selectedRows based on whether the row elements are marked as selected\n this._selectedRows = this._allRows.filter((row) => row.selected);\n\n this._updateHeaderCheckbox();\n this.requestUpdate();\n }\n\n /**\n * Returns the selected rows in the table.\n * @returns Array of selected rows.\n * @public\n */\n public getSelectedRows() {\n return this._selectedRows;\n }\n\n /**\n * Handles the change of rows in the table body.\n * @param {CustomEvent} event - The custom event containing the updated rows.\n * @private\n */\n private _handleRowsChange(event: CustomEvent) {\n const {\n detail: { rows },\n } = event;\n event.stopPropagation();\n\n this._allRows = rows;\n this._updateSelectionStates();\n this._updateHeaderCheckbox();\n }\n\n private _updateSelectionStates() {\n // Temporary array to hold updated selected rows\n const updatedSelectedRows: TableRow[] = [];\n\n // Loop through all rows to update their selected state and rebuild the selectedRows array\n this._allRows.forEach((row) => {\n if (this._selectedRowIds.has(row.rowId)) {\n row.selected = true; // Update the selected property if the rowId matches\n updatedSelectedRows.push(row); // Add the actual row element to the updated selected rows array\n } else if (row.selected) {\n this._selectedRowIds.add(row.rowId); // Add the rowId to the selectedRowIds set\n updatedSelectedRows.push(row); // Add the actual row element to the updated selected rows array\n }\n });\n\n // Replace the old selectedRows with the updated selected rows\n this._selectedRows = updatedSelectedRows;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener(\n 'on-header-checkbox-toggle',\n this._toggleSelectionAll as EventListener\n );\n this.addEventListener(\n 'on-row-select',\n this._handleRowSelectionChange as EventListener\n );\n this.addEventListener(\n 'on-rows-change',\n this._handleRowsChange as EventListener\n );\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\n 'on-header-checkbox-toggle',\n this._toggleSelectionAll as EventListener\n );\n this.removeEventListener(\n 'on-row-select',\n this._handleRowSelectionChange as EventListener\n );\n this.removeEventListener(\n 'on-rows-change',\n this._handleRowsChange as EventListener\n );\n }\n\n override firstUpdated() {\n this._tableHeaderRow = this.querySelector('kyn-header-tr');\n }\n\n override render() {\n return html` <slot></slot> `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-table': Table;\n }\n}\n"],"names":["Table","LitElement","constructor","this","role","_provider","ContextProvider","tableContext","_tableHeaderRow","_allRows","_selectedRows","_selectedRowIds","Set","_headerCheckboxIndeterminate","_headerCheckboxChecked","updated","changedProperties","super","newValues","has","dense","ellipsis","striped","checkboxSelection","stickyHeader","setValue","_updateHeaderCheckbox","length","_a","updateHeaderCheckboxState","_handleRowSelectionChange","event","stopPropagation","target","selectedRows","contains","includes","filter","e","delete","rowId","push","add","init","bubbles","cancelable","composed","detail","selectedRow","dispatchEvent","CustomEvent","_toggleSelectionAll","checked","allRows","forEach","row","disabled","selected","map","updateAfterExternalChanges","Array","from","querySelectorAll","requestUpdate","getSelectedRows","_handleRowsChange","rows","_updateSelectionStates","updatedSelectedRows","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","querySelector","render","html","styles","__decorate","property","type","String","reflect","prototype","Boolean","state","customElement"],"mappings":"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"}
|