@kyndryl-design-system/shidoka-applications 2.0.1 → 2.1.0
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/link/defs.d.ts +2 -1
- package/components/reusable/link/defs.d.ts.map +1 -1
- package/components/reusable/link/defs.js +1 -1
- package/components/reusable/link/defs.js.map +1 -1
- package/components/reusable/link/link.d.ts.map +1 -1
- package/components/reusable/link/link.js +26 -3
- package/components/reusable/link/link.js.map +1 -1
- package/components/reusable/table/story-helpers/table-story.sample.d.ts.map +1 -1
- package/components/reusable/table/table.d.ts +2 -2
- package/package.json +2 -2
- package/table-f6b54ef0.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/link/defs.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,SAAS,cAAc;
|
|
1
|
+
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/link/defs.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,YAAY,OAAO;CACpB;AAED,oBAAY,UAAU;IACpB,MAAM,OAAO;IACb,KAAK,OAAO;IACZ,KAAK,OAAO;CACb;AAED,oBAAY,YAAY;IACtB,KAAK,WAAW;IAChB,IAAI,UAAU;IACd,MAAM,YAAY;IAClB,GAAG,SAAS;CACb;AAED,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,UAAU,eAAe;CAC1B;AAED,oBAAY,WAAW;IACrB,IAAI,SAAS;IACb,IAAI,SAAS;CACd"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var n,o,t
|
|
1
|
+
var n,A,a,o,t;!function(n){n.PRIMARY="primary",n.SECONDARY="secondary",n.AI_CONNECTED="ai"}(n||(n={})),function(n){n.MEDIUM="md",n.LARGE="lg",n.SMALL="sm"}(A||(A={})),function(n){n.BLANK="_blank",n.SELF="_self",n.PARENT="_parent",n.TOP="_top"}(a||(a={})),function(n){n.INLINE="inline",n.STANDALONE="standalone"}(o||(o={})),function(n){n.AUTO="auto",n.DARK="dark"}(t||(t={}));export{t as LINK_SHADES,A as LINK_SIZES,a as LINK_TARGETS,n as LINK_TYPES,o as LINK_VARIANTS};
|
|
2
2
|
//# sourceMappingURL=defs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/link/defs.ts"],"sourcesContent":["export enum LINK_TYPES {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n}\n\nexport enum LINK_SIZES {\n MEDIUM = 'md',\n LARGE = 'lg',\n SMALL = 'sm',\n}\n\nexport enum LINK_TARGETS {\n BLANK = '_blank',\n SELF = '_self',\n PARENT = '_parent',\n TOP = '_top',\n}\n\nexport enum LINK_VARIANTS {\n INLINE = 'inline',\n STANDALONE = 'standalone',\n}\n\nexport enum LINK_SHADES {\n AUTO = 'auto',\n DARK = 'dark',\n}\n"],"names":["LINK_TYPES","LINK_SIZES","LINK_TARGETS","LINK_VARIANTS","LINK_SHADES"],"mappings":"IAAYA,
|
|
1
|
+
{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/link/defs.ts"],"sourcesContent":["export enum LINK_TYPES {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n AI_CONNECTED = 'ai',\n}\n\nexport enum LINK_SIZES {\n MEDIUM = 'md',\n LARGE = 'lg',\n SMALL = 'sm',\n}\n\nexport enum LINK_TARGETS {\n BLANK = '_blank',\n SELF = '_self',\n PARENT = '_parent',\n TOP = '_top',\n}\n\nexport enum LINK_VARIANTS {\n INLINE = 'inline',\n STANDALONE = 'standalone',\n}\n\nexport enum LINK_SHADES {\n AUTO = 'auto',\n DARK = 'dark',\n}\n"],"names":["LINK_TYPES","LINK_SIZES","LINK_TARGETS","LINK_VARIANTS","LINK_SHADES"],"mappings":"IAAYA,EAMAC,EAMAC,EAOAC,EAKAC,GAxBZ,SAAYJ,GACVA,EAAA,QAAA,UACAA,EAAA,UAAA,YACAA,EAAA,aAAA,IACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACVA,EAAA,OAAA,KACAA,EAAA,MAAA,KACAA,EAAA,MAAA,IACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACVA,EAAA,MAAA,SACAA,EAAA,KAAA,QACAA,EAAA,OAAA,UACAA,EAAA,IAAA,MACD,CALD,CAAYA,IAAAA,EAKX,CAAA,IAED,SAAYC,GACVA,EAAA,OAAA,SACAA,EAAA,WAAA,YACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAED,SAAYC,GACVA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI/D;;;;;GAKG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,QAAgB;IAEtC,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,EAAE,YAAY,CAAqB;IAEzC,oDAAoD;IAEpD,IAAI,EAAE,UAAU,CAAsB;IAEtC,oIAAoI;IAEpI,GAAG,SAAM;IAET,yCAAyC;IAIzC,QAAQ,UAAS;IAEjB,iHAAiH;IAEjH,UAAU,UAAS;IAEnB,kCAAkC;IAElC,QAAQ,UAAS;IAEjB;;;;SAIK;IAEL,KAAK,cAAoB;IAEhB,MAAM;IAqBf,OAAO,CAAC,cAAc;
|
|
1
|
+
{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI/D;;;;;GAKG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,QAAgB;IAEtC,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,EAAE,YAAY,CAAqB;IAEzC,oDAAoD;IAEpD,IAAI,EAAE,UAAU,CAAsB;IAEtC,oIAAoI;IAEpI,GAAG,SAAM;IAET,yCAAyC;IAIzC,QAAQ,UAAS;IAEjB,iHAAiH;IAEjH,UAAU,UAAS;IAEnB,kCAAkC;IAElC,QAAQ,UAAS;IAEjB;;;;SAIK;IAEL,KAAK,cAAoB;IAEhB,MAAM;IAqBf,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,WAAW;CAWpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"../../../vendor/lit-6e2a7867.js";import{i as o,s as i,x as l}from"../../../vendor/lit-element-3185f710.js";import{e as r}from"../../../vendor/lit-html-29220869.js";import{LINK_TARGETS as
|
|
1
|
+
import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"../../../vendor/lit-6e2a7867.js";import{i as o,s as i,x as l}from"../../../vendor/lit-element-3185f710.js";import{e as r}from"../../../vendor/lit-html-29220869.js";import{LINK_TARGETS as a,LINK_TYPES as s,LINK_SHADES as d}from"./defs.js";var k=o`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -120,7 +120,30 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"
|
|
|
120
120
|
-moz-transition: 300ms ease-in-out;
|
|
121
121
|
-o-transition: 300ms ease-in-out;
|
|
122
122
|
-webkit-transition: 300ms ease-in-out;
|
|
123
|
-
}
|
|
123
|
+
}
|
|
124
|
+
.kyn-link-text-ai {
|
|
125
|
+
color: var(--kd-color-background-link-ai-default);
|
|
126
|
+
}
|
|
127
|
+
.kyn-link-text-ai:hover {
|
|
128
|
+
color: var(--kd-color-background-link-ai-hover);
|
|
129
|
+
}
|
|
130
|
+
.kyn-link-text-ai:focus {
|
|
131
|
+
color: var(--kd-color-background-link-ai-focused);
|
|
132
|
+
outline: 1px solid var(--kd-color-border-button-ai-state-focused);
|
|
133
|
+
-webkit-transition: outline 100ms ease-in-out;
|
|
134
|
+
-moz-transition: outline 100ms ease-in-out;
|
|
135
|
+
-o-transition: outline 100ms ease-in-out;
|
|
136
|
+
transition: outline 100ms ease-in-out;
|
|
137
|
+
text-decoration: none;
|
|
138
|
+
}
|
|
139
|
+
.kyn-link-text-ai:active {
|
|
140
|
+
color: var(--kd-color-background-link-ai-pressed);
|
|
141
|
+
text-decoration: underline;
|
|
142
|
+
outline: none;
|
|
143
|
+
}
|
|
144
|
+
.kyn-link-text-ai.kyn-link-text-disabled {
|
|
145
|
+
color: var(--kd-color-background-link-ai-disabled);
|
|
146
|
+
}`;let c=class extends i{constructor(){super(...arguments),this.href="",this.target=a.SELF,this.kind=s.PRIMARY,this.rel="",this.disabled=!1,this.standalone=!1,this.iconLeft=!1,this.shade=d.AUTO}render(){const t=this.returnClassMap();return l`
|
|
124
147
|
<a
|
|
125
148
|
class="kyn-link-text ${t}"
|
|
126
149
|
target=${this.target}
|
|
@@ -135,5 +158,5 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"
|
|
|
135
158
|
<slot name="icon"></slot>
|
|
136
159
|
</span>
|
|
137
160
|
</a>
|
|
138
|
-
`}returnClassMap(){
|
|
161
|
+
`}returnClassMap(){const t={"kyn-link-text-disabled":this.disabled,"icon-left":this.iconLeft,"kyn-link-text-ai":this.kind===s.AI_CONNECTED};return this.disabled?r(t):r({...t,"kyn-link-text-primary":(this.kind===s.PRIMARY||!this.kind)&&"auto"===this.shade,"kyn-link-text-primary-dark":this.kind===s.PRIMARY&&"dark"===this.shade,"kyn-link-text-secondary":this.kind===s.SECONDARY,"kyn-link-text-inline":!this.standalone,"kyn-link-text-standalone":this.standalone})}handleClick(t){if(this.disabled)return void t.preventDefault();const e=new CustomEvent("on-click",{detail:{href:this.href,origEvent:t}});this.dispatchEvent(e)}};c.styles=[k],t([e({type:String})],c.prototype,"href",void 0),t([e({type:String})],c.prototype,"target",void 0),t([e({type:String})],c.prototype,"kind",void 0),t([e({type:String})],c.prototype,"rel",void 0),t([e({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),t([e({type:Boolean})],c.prototype,"standalone",void 0),t([e({type:Boolean})],c.prototype,"iconLeft",void 0),t([e({type:String})],c.prototype,"shade",void 0),c=t([n("kyn-link")],c);export{c as Link};
|
|
139
162
|
//# sourceMappingURL=link.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.js","sources":["../../../../src/components/reusable/link/link.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { LINK_TYPES, LINK_TARGETS, LINK_SHADES } from './defs';\n\nimport LinkStyles from './link.scss';\n\n/**\n * Component for navigation links.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text.\n * @slot icon - Slot for an icon.\n */\n\n@customElement('kyn-link')\nexport class Link extends LitElement {\n static override styles = [LinkStyles];\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n @property({ type: String })\n target: LINK_TARGETS = LINK_TARGETS.SELF;\n\n /** The Link type. Primary(App) or Secondary(Web).*/\n @property({ type: String })\n kind: LINK_TYPES = LINK_TYPES.PRIMARY;\n\n /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n @property({ type: String })\n rel = '';\n\n /** Determines if the link is disabled.*/\n // Reference for disabled links:\n // https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Whether you want the standalone Link. By default false. Use this prop. (true) with icon with link variant. */\n @property({ type: Boolean })\n standalone = false;\n\n /** Positions icon on the left. */\n @property({ type: Boolean })\n iconLeft = false;\n\n /**\n * Determines the shade of the link. By default `auto`.\n * Set this prop to `dark` manually when the link needs to have a better contrast for visibility on light backgroud, irrespective of the theme.\n * **NOTE**: Applicable only for **primary** link.\n * */\n @property({ type: String })\n shade = LINK_SHADES.AUTO;\n\n override render() {\n const classes = this.returnClassMap();\n\n return html`\n <a\n class=\"kyn-link-text ${classes}\"\n target=${this.target}\n part=\"link\"\n rel=${this.rel}\n href=${this.href ? this.href : 'javascript:void(0)'}\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span class=\"kyn-link-text-span-flex\">\n <slot></slot>\n <slot name=\"icon\"></slot>\n </span>\n </a>\n `;\n }\n // -- Apply classes according to states, kind etc. -- //\n private returnClassMap() {\n
|
|
1
|
+
{"version":3,"file":"link.js","sources":["../../../../src/components/reusable/link/link.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { LINK_TYPES, LINK_TARGETS, LINK_SHADES } from './defs';\n\nimport LinkStyles from './link.scss';\n\n/**\n * Component for navigation links.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text.\n * @slot icon - Slot for an icon.\n */\n\n@customElement('kyn-link')\nexport class Link extends LitElement {\n static override styles = [LinkStyles];\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n @property({ type: String })\n target: LINK_TARGETS = LINK_TARGETS.SELF;\n\n /** The Link type. Primary(App) or Secondary(Web).*/\n @property({ type: String })\n kind: LINK_TYPES = LINK_TYPES.PRIMARY;\n\n /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n @property({ type: String })\n rel = '';\n\n /** Determines if the link is disabled.*/\n // Reference for disabled links:\n // https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Whether you want the standalone Link. By default false. Use this prop. (true) with icon with link variant. */\n @property({ type: Boolean })\n standalone = false;\n\n /** Positions icon on the left. */\n @property({ type: Boolean })\n iconLeft = false;\n\n /**\n * Determines the shade of the link. By default `auto`.\n * Set this prop to `dark` manually when the link needs to have a better contrast for visibility on light backgroud, irrespective of the theme.\n * **NOTE**: Applicable only for **primary** link.\n * */\n @property({ type: String })\n shade = LINK_SHADES.AUTO;\n\n override render() {\n const classes = this.returnClassMap();\n\n return html`\n <a\n class=\"kyn-link-text ${classes}\"\n target=${this.target}\n part=\"link\"\n rel=${this.rel}\n href=${this.href ? this.href : 'javascript:void(0)'}\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span class=\"kyn-link-text-span-flex\">\n <slot></slot>\n <slot name=\"icon\"></slot>\n </span>\n </a>\n `;\n }\n // -- Apply classes according to states, kind etc. -- //\n private returnClassMap() {\n const baseClasses = {\n ['kyn-link-text-disabled']: this.disabled,\n 'icon-left': this.iconLeft,\n ['kyn-link-text-ai']: this.kind === LINK_TYPES.AI_CONNECTED,\n };\n\n if (this.disabled) {\n return classMap(baseClasses);\n } else {\n return classMap({\n ...baseClasses,\n ['kyn-link-text-primary']:\n (this.kind === LINK_TYPES.PRIMARY || !this.kind) &&\n this.shade === 'auto',\n ['kyn-link-text-primary-dark']:\n this.kind === LINK_TYPES.PRIMARY && this.shade === 'dark',\n ['kyn-link-text-secondary']: this.kind === LINK_TYPES.SECONDARY,\n ['kyn-link-text-inline']: !this.standalone,\n ['kyn-link-text-standalone']: this.standalone,\n });\n }\n }\n\n private handleClick(e: Event) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n\n const event = new CustomEvent('on-click', {\n detail: { href: this.href, origEvent: e },\n });\n this.dispatchEvent(event);\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-link': Link;\n }\n}\n"],"names":["Link","LitElement","constructor","this","href","target","LINK_TARGETS","SELF","kind","LINK_TYPES","PRIMARY","rel","disabled","standalone","iconLeft","shade","LINK_SHADES","AUTO","render","classes","returnClassMap","html","e","handleClick","baseClasses","AI_CONNECTED","classMap","SECONDARY","preventDefault","event","CustomEvent","detail","origEvent","dispatchEvent","styles","LinkStyles","__decorate","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAeO,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAKLC,KAAIC,KAAG,GAIPD,KAAAE,OAAuBC,EAAaC,KAIpCJ,KAAAK,KAAmBC,EAAWC,QAI9BP,KAAGQ,IAAG,GAMNR,KAAQS,UAAG,EAIXT,KAAUU,YAAG,EAIbV,KAAQW,UAAG,EAQXX,KAAAY,MAAQC,EAAYC,IA0DrB,CAxDU,MAAAC,GACP,MAAMC,EAAUhB,KAAKiB,iBAErB,OAAOC,CAAI;;+BAEgBF;iBACdhB,KAAKE;;cAERF,KAAKQ;eACJR,KAAKC,KAAOD,KAAKC,KAAO;oBACnBD,KAAKS;iBACPU,GAAanB,KAAKoB,YAAYD;;;;;;;KAQ7C,CAEO,cAAAF,GACN,MAAMI,EAAc,CAClB,yBAA4BrB,KAAKS,SACjC,YAAaT,KAAKW,SAClB,mBAAsBX,KAAKK,OAASC,EAAWgB,cAGjD,OAAItB,KAAKS,SACAc,EAASF,GAETE,EAAS,IACXF,EACH,yBACGrB,KAAKK,OAASC,EAAWC,UAAYP,KAAKK,OAC5B,SAAfL,KAAKY,MACP,6BACEZ,KAAKK,OAASC,EAAWC,SAA0B,SAAfP,KAAKY,MAC3C,0BAA6BZ,KAAKK,OAASC,EAAWkB,UACtD,wBAA2BxB,KAAKU,WAChC,2BAA8BV,KAAKU,YAGxC,CAEO,WAAAU,CAAYD,GAClB,GAAInB,KAAKS,SAEP,YADAU,EAAEM,iBAIJ,MAAMC,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CAAE3B,KAAMD,KAAKC,KAAM4B,UAAWV,KAExCnB,KAAK8B,cAAcJ,EACpB,GA/Fe7B,EAAAkC,OAAS,CAACC,GAI1BC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRvC,EAAAwC,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACuBvC,EAAAwC,UAAA,cAAA,GAIzCJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACoBvC,EAAAwC,UAAA,YAAA,GAItCJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACTvC,EAAAwC,UAAA,WAAA,GAMTJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACnB1C,EAAAwC,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACCzC,EAAAwC,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDzC,EAAAwC,UAAA,gBAAA,GAQjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACOvC,EAAAwC,UAAA,aAAA,GAvCdxC,EAAIoC,EAAA,CADhBO,EAAc,aACF3C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-story.sample.d.ts","sourceRoot":"","sources":["../../../../../src/components/reusable/table/story-helpers/table-story.sample.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,cAAc,CAAC;AAMtB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAW1B,OAAO,UAAU,CAAC;AAGlB,cACM,YAAa,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAMpB;IAEF;;;OAGG;IAEH,OAAO,CAAC,QAAQ,CAA2B;IAG3C,IAAI,EAAE,GAAG,CAAM;IAGf,YAAY,UAAM;IAGlB,iBAAiB,UAAS;IAG1B,OAAO,UAAS;IAGhB,YAAY,UAAS;IAGrB,KAAK,UAAS;IAGd,WAAW,UAAS;IAGpB,aAAa,SAAK;IAGlB,gBAAgB,UAAS;IAGzB,QAAQ,UAAS;IAGjB,UAAU,SAAiB;IAG3B,aAAa,SAAoB;IAGjC,cAAc,UAAS;IAGvB,UAAU,UAAS;IAGnB,QAAQ,SAAK;IAGb,UAAU,SAAK;IAGf,eAAe,WAAW;IAE1B,8CAA8C;IAE9C,cAAc,UAAS;IAEvB,6CAA6C;IAE7C,oBAAoB,UAAS;IAE7B,6CAA6C;IAE7C,qBAAqB,UAAS;IAE9B;;;;OAIG;IAEH,sBAAsB,SAAU;IAEhC;;OAEG;IACG,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAQzC;;OAEG;IACG,kBAAkB,CAAC,KAAK,EAAE,WAAW;IAO3C,oBAAoB,CAAC,CAAC,EAAE,WAAW;IAMnC,eAAe,CAAC,CAAC,EAAE,WAAW;IAM9B,iBAAiB,CAAC,CAAC,EAAE,WAAW;IAMhC,iBAAiB,CAAC,CAAC,EAAE,WAAW;IAMhC,gBAAgB,CAAC,CAAC,EAAE,WAAW;IAMzB,YAAY,CAAC,EAAE,EAAE,MAAM;IAavB,kBAAkB;IAaxB,wBAAwB,CAAC,CAAC,EAAE,WAAW;IAO9B,YAAY;IAIZ,MAAM;
|
|
1
|
+
{"version":3,"file":"table-story.sample.d.ts","sourceRoot":"","sources":["../../../../../src/components/reusable/table/story-helpers/table-story.sample.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,cAAc,CAAC;AAMtB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAW1B,OAAO,UAAU,CAAC;AAGlB,cACM,YAAa,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAMpB;IAEF;;;OAGG;IAEH,OAAO,CAAC,QAAQ,CAA2B;IAG3C,IAAI,EAAE,GAAG,CAAM;IAGf,YAAY,UAAM;IAGlB,iBAAiB,UAAS;IAG1B,OAAO,UAAS;IAGhB,YAAY,UAAS;IAGrB,KAAK,UAAS;IAGd,WAAW,UAAS;IAGpB,aAAa,SAAK;IAGlB,gBAAgB,UAAS;IAGzB,QAAQ,UAAS;IAGjB,UAAU,SAAiB;IAG3B,aAAa,SAAoB;IAGjC,cAAc,UAAS;IAGvB,UAAU,UAAS;IAGnB,QAAQ,SAAK;IAGb,UAAU,SAAK;IAGf,eAAe,WAAW;IAE1B,8CAA8C;IAE9C,cAAc,UAAS;IAEvB,6CAA6C;IAE7C,oBAAoB,UAAS;IAE7B,6CAA6C;IAE7C,qBAAqB,UAAS;IAE9B;;;;OAIG;IAEH,sBAAsB,SAAU;IAEhC;;OAEG;IACG,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAQzC;;OAEG;IACG,kBAAkB,CAAC,KAAK,EAAE,WAAW;IAO3C,oBAAoB,CAAC,CAAC,EAAE,WAAW;IAMnC,eAAe,CAAC,CAAC,EAAE,WAAW;IAM9B,iBAAiB,CAAC,CAAC,EAAE,WAAW;IAMhC,iBAAiB,CAAC,CAAC,EAAE,WAAW;IAMhC,gBAAgB,CAAC,CAAC,EAAE,WAAW;IAMzB,YAAY,CAAC,EAAE,EAAE,MAAM;IAavB,kBAAkB;IAaxB,wBAAwB,CAAC,CAAC,EAAE,WAAW;IAO9B,YAAY;IAIZ,MAAM;CAiLhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|
|
@@ -28,8 +28,8 @@ export declare class Table extends LitElement {
|
|
|
28
28
|
*/
|
|
29
29
|
striped?: boolean;
|
|
30
30
|
/**
|
|
31
|
-
* stickyHeader: Boolean indicating whether the table header
|
|
32
|
-
*
|
|
31
|
+
* stickyHeader: Boolean indicating whether the table header should be sticky.
|
|
32
|
+
* Must also set a height or max-height on kyn-table-container.
|
|
33
33
|
* @type {boolean}
|
|
34
34
|
* @default false
|
|
35
35
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-applications",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "Shidoka Web Components for Applications",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"prepare": "npx husky install"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@kyndryl-design-system/shidoka-foundation": "^2.
|
|
30
|
+
"@kyndryl-design-system/shidoka-foundation": "^2.1.1",
|
|
31
31
|
"@kyndryl-design-system/shidoka-icons": "^2.0.0",
|
|
32
32
|
"@lit/context": "^1.1.0",
|
|
33
33
|
"deepmerge-ts": "^7.1.0",
|
package/table-f6b54ef0.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-f6b54ef0.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 * 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('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","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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"}
|
|
1
|
+
{"version":3,"file":"table-f6b54ef0.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 should be sticky.\n * Must also set a height or max-height on kyn-table-container.\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 * 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('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","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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"}
|