@kyndryl-design-system/shidoka-applications 1.0.2 → 1.0.4

package/components/reusable/dropdown/dropdownOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,+BAAsB;IAE5C,oBAAoB;IAEpB,KAAK,SAAM;IAEX,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,IAAI,EAAE,GAAG,CAAM;IAEN,MAAM;IAoCf,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,UAAU;CAWnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAC;KACvC;CACF"}
+{"version":3,"file":"dropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,+BAAsB;IAE5C,oBAAoB;IAEpB,KAAK,SAAM;IAEX,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,IAAI,EAAE,GAAG,CAAM;IAEN,MAAM;IAoCf,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,UAAU;CAWnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAC;KACvC;CACF"}

package/components/reusable/dropdown/dropdownOption.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as s}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as l}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import d from"./dropdownOption.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import n from'./../../../external/@carbon/icons/es/checkmark/20.js';let r=class extends s{constructor(){super(...arguments),this.value="",this.selected=!1,this.disabled=!1,this.highlighted=!1,this.multiple=!1,this.text=""}render(){return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as s}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import d from"./dropdownOption.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import n from'./../../../external/@carbon/icons/es/checkmark/20.js';let r=class extends s{constructor(){super(...arguments),this.value="",this.selected=!1,this.disabled=!1,this.highlighted=!1,this.multiple=!1,this.text=""}render(){return t`
       <li
         role="option"
         ?highlighted=${this.highlighted}
@@ -26,5 +26,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
 
         ${this.selected&&!this.multiple?t`<kd-icon .icon=${n}></kd-icon>`:null}
       </li>
-    `}handleSlotChange(e){const t=e.target.assignedNodes({flatten:!0});this.text=t[0].textContent.trim()}handleClick(e){if(this.disabled)return;this.selected=!this.selected;const t=new CustomEvent("on-click",{bubbles:!0,composed:!0,detail:{selected:this.selected,value:this.value,origEvent:e}});this.dispatchEvent(t)}handleBlur(e){const t=new CustomEvent("on-blur",{bubbles:!0,composed:!0,detail:{origEvent:e}});this.dispatchEvent(t)}};r.styles=d,e([i({type:String})],r.prototype,"value",void 0),e([i({type:Boolean,reflect:!0})],r.prototype,"selected",void 0),e([i({type:Boolean})],r.prototype,"disabled",void 0),e([l()],r.prototype,"highlighted",void 0),e([l()],r.prototype,"multiple",void 0),e([i()],r.prototype,"text",void 0),r=e([o("kyn-dropdown-option")],r);export{r as DropdownOption};
+    `}handleSlotChange(e){const t=e.target.assignedNodes({flatten:!0});let s="";for(let e=0;e<t.length;e++)s+=t[e].textContent.trim();this.text=s}handleClick(e){if(this.disabled)return;this.multiple?this.selected=!this.selected:this.selected=!0;const t=new CustomEvent("on-click",{bubbles:!0,composed:!0,detail:{selected:this.selected,value:this.value,origEvent:e}});this.dispatchEvent(t)}handleBlur(e){const t=new CustomEvent("on-blur",{bubbles:!0,composed:!0,detail:{origEvent:e}});this.dispatchEvent(t)}};r.styles=d,e([l({type:String})],r.prototype,"value",void 0),e([l({type:Boolean,reflect:!0})],r.prototype,"selected",void 0),e([l({type:Boolean})],r.prototype,"disabled",void 0),e([o()],r.prototype,"highlighted",void 0),e([o()],r.prototype,"multiple",void 0),e([l()],r.prototype,"text",void 0),r=e([i("kyn-dropdown-option")],r);export{r as DropdownOption};
 //# sourceMappingURL=dropdownOption.js.map

package/components/reusable/dropdown/dropdownOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DropdownOptionScss from './dropdownOption.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport checkmarkIcon from '@carbon/icons/es/checkmark/20';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @slot unnamed - Slot for option text.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n  static override styles = DropdownOptionScss;\n\n  /** Option value. */\n  @property({ type: String })\n  value = '';\n\n  /** Option selected state. */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /** Option disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Option highlighted state for keyboard navigation, automatically derived.\n   * @ignore\n   */\n  @state()\n  highlighted = false;\n\n  /** Multi-select state, derived from parent.\n   * @ignore\n   */\n  @state()\n  multiple = false;\n\n  /**\n   * Option text, automatically derived.\n   * @ignore\n   */\n  @property()\n  text: any = '';\n\n  override render() {\n    return html`\n      <li\n        role=\"option\"\n        ?highlighted=${this.highlighted}\n        ?selected=${this.selected}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @click=${(e: any) => this.handleClick(e)}\n        @blur=${(e: any) => this.handleBlur(e)}\n        tabindex=\"-1\"\n      >\n        <span>\n          ${this.multiple\n            ? html`\n                <input\n                  type=\"checkbox\"\n                  tabindex=\"-1\"\n                  @mousedown=${(e: any) => e.preventDefault()}\n                  .checked=${this.selected}\n                  ?checked=${this.selected}\n                  ?disabled=${this.disabled}\n                />\n              `\n            : null}\n\n          <slot @slotchange=${(e: any) => this.handleSlotChange(e)}></slot>\n        </span>\n\n        ${this.selected && !this.multiple\n          ? html`<kd-icon .icon=${checkmarkIcon}></kd-icon>`\n          : null}\n      </li>\n    `;\n  }\n\n  private handleSlotChange(e: any) {\n    // set text prop from slotted text, for ease of access\n    const nodes = e.target.assignedNodes({ flatten: true });\n    this.text = nodes[0].textContent.trim();\n  }\n\n  private handleClick(e: Event) {\n    // prevent click if disabled\n    if (this.disabled) {\n      return;\n    }\n\n    // update selected state\n    this.selected = !this.selected;\n\n    // emit selected value, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-click', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        selected: this.selected,\n        value: this.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleBlur(e: any) {\n    // emit blur event, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-blur', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown-option': DropdownOption;\n  }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","highlighted","multiple","text","render","html","e","handleClick","handleBlur","preventDefault","handleSlotChange","checkmarkIcon","nodes","target","assignedNodes","flatten","textContent","trim","event","CustomEvent","bubbles","composed","detail","origEvent","dispatchEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","Boolean","reflect","state","customElement"],"mappings":"0zBAYO,IAAMA,EAAN,cAA6BC,EAA7BC,kCAKLC,KAAKC,MAAG,GAIRD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAOXH,KAAWI,aAAG,EAMdJ,KAAQK,UAAG,EAOXL,KAAIM,KAAQ,EA6Eb,CA3EUC,SACP,OAAOC,CAAI;;;uBAGQR,KAAKI;oBACRJ,KAAKE;oBACLF,KAAKG;oBACLH,KAAKK;iBACPI,GAAWT,KAAKU,YAAYD;gBAC7BA,GAAWT,KAAKW,WAAWF;;;;YAIhCT,KAAKK,SACHG,CAAI;;;;+BAIcC,GAAWA,EAAEG;6BAChBZ,KAAKE;6BACLF,KAAKE;8BACJF,KAAKG;;gBAGrB;;8BAEiBM,GAAWT,KAAKa,iBAAiBJ;;;UAGtDT,KAAKE,WAAaF,KAAKK,SACrBG,CAAI,kBAAkBM,eACtB;;KAGT,CAEOD,iBAAiBJ,GAEvB,MAAMM,EAAQN,EAAEO,OAAOC,cAAc,CAAEC,SAAS,IAChDlB,KAAKM,KAAOS,EAAM,GAAGI,YAAYC,MAClC,CAEOV,YAAYD,GAElB,GAAIT,KAAKG,SACP,OAIFH,KAAKE,UAAYF,KAAKE,SAGtB,MAAMmB,EAAQ,IAAIC,YAAY,WAAY,CACxCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNvB,SAAUF,KAAKE,SACfD,MAAOD,KAAKC,MACZyB,UAAWjB,KAGfT,KAAK2B,cAAcN,EACpB,CAEOV,WAAWF,GAEjB,MAAMY,EAAQ,IAAIC,YAAY,UAAW,CACvCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNC,UAAWjB,KAGfT,KAAK2B,cAAcN,EACpB,GA5GexB,EAAM+B,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPpC,EAAAqC,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACnBvC,EAAAqC,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDtC,EAAAqC,UAAA,gBAAA,GAOjBJ,EAAA,CADCO,KACmBxC,EAAAqC,UAAA,mBAAA,GAMpBJ,EAAA,CADCO,KACgBxC,EAAAqC,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,KACclC,EAAAqC,UAAA,YAAA,GAjCJrC,EAAciC,EAAA,CAD1BQ,EAAc,wBACFzC"}
+{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DropdownOptionScss from './dropdownOption.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport checkmarkIcon from '@carbon/icons/es/checkmark/20';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @slot unnamed - Slot for option text.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n  static override styles = DropdownOptionScss;\n\n  /** Option value. */\n  @property({ type: String })\n  value = '';\n\n  /** Option selected state. */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /** Option disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Option highlighted state for keyboard navigation, automatically derived.\n   * @ignore\n   */\n  @state()\n  highlighted = false;\n\n  /** Multi-select state, derived from parent.\n   * @ignore\n   */\n  @state()\n  multiple = false;\n\n  /**\n   * Option text, automatically derived.\n   * @ignore\n   */\n  @property()\n  text: any = '';\n\n  override render() {\n    return html`\n      <li\n        role=\"option\"\n        ?highlighted=${this.highlighted}\n        ?selected=${this.selected}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @click=${(e: any) => this.handleClick(e)}\n        @blur=${(e: any) => this.handleBlur(e)}\n        tabindex=\"-1\"\n      >\n        <span>\n          ${this.multiple\n            ? html`\n                <input\n                  type=\"checkbox\"\n                  tabindex=\"-1\"\n                  @mousedown=${(e: any) => e.preventDefault()}\n                  .checked=${this.selected}\n                  ?checked=${this.selected}\n                  ?disabled=${this.disabled}\n                />\n              `\n            : null}\n\n          <slot @slotchange=${(e: any) => this.handleSlotChange(e)}></slot>\n        </span>\n\n        ${this.selected && !this.multiple\n          ? html`<kd-icon .icon=${checkmarkIcon}></kd-icon>`\n          : null}\n      </li>\n    `;\n  }\n\n  private handleSlotChange(e: any) {\n    // set text prop from slotted text, for ease of access\n    const nodes = e.target.assignedNodes({ flatten: true });\n    let text = '';\n\n    for (let i = 0; i < nodes.length; i++) {\n      text += nodes[i].textContent.trim();\n    }\n\n    this.text = text;\n  }\n\n  private handleClick(e: Event) {\n    // prevent click if disabled\n    if (this.disabled) {\n      return;\n    }\n\n    // update selected state\n    if (this.multiple) {\n      this.selected = !this.selected;\n    } else {\n      this.selected = true;\n    }\n\n    // emit selected value, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-click', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        selected: this.selected,\n        value: this.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleBlur(e: any) {\n    // emit blur event, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-blur', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown-option': DropdownOption;\n  }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","highlighted","multiple","text","render","html","e","handleClick","handleBlur","preventDefault","handleSlotChange","checkmarkIcon","nodes","target","assignedNodes","flatten","i","length","textContent","trim","event","CustomEvent","bubbles","composed","detail","origEvent","dispatchEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","Boolean","reflect","state","customElement"],"mappings":"0zBAYO,IAAMA,EAAN,cAA6BC,EAA7BC,kCAKLC,KAAKC,MAAG,GAIRD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAOXH,KAAWI,aAAG,EAMdJ,KAAQK,UAAG,EAOXL,KAAIM,KAAQ,EAuFb,CArFUC,SACP,OAAOC,CAAI;;;uBAGQR,KAAKI;oBACRJ,KAAKE;oBACLF,KAAKG;oBACLH,KAAKK;iBACPI,GAAWT,KAAKU,YAAYD;gBAC7BA,GAAWT,KAAKW,WAAWF;;;;YAIhCT,KAAKK,SACHG,CAAI;;;;+BAIcC,GAAWA,EAAEG;6BAChBZ,KAAKE;6BACLF,KAAKE;8BACJF,KAAKG;;gBAGrB;;8BAEiBM,GAAWT,KAAKa,iBAAiBJ;;;UAGtDT,KAAKE,WAAaF,KAAKK,SACrBG,CAAI,kBAAkBM,eACtB;;KAGT,CAEOD,iBAAiBJ,GAEvB,MAAMM,EAAQN,EAAEO,OAAOC,cAAc,CAAEC,SAAS,IAChD,IAAIZ,EAAO,GAEX,IAAK,IAAIa,EAAI,EAAGA,EAAIJ,EAAMK,OAAQD,IAChCb,GAAQS,EAAMI,GAAGE,YAAYC,OAG/BtB,KAAKM,KAAOA,CACb,CAEOI,YAAYD,GAElB,GAAIT,KAAKG,SACP,OAIEH,KAAKK,SACPL,KAAKE,UAAYF,KAAKE,SAEtBF,KAAKE,UAAW,EAIlB,MAAMqB,EAAQ,IAAIC,YAAY,WAAY,CACxCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNzB,SAAUF,KAAKE,SACfD,MAAOD,KAAKC,MACZ2B,UAAWnB,KAGfT,KAAK6B,cAAcN,EACpB,CAEOZ,WAAWF,GAEjB,MAAMc,EAAQ,IAAIC,YAAY,UAAW,CACvCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNC,UAAWnB,KAGfT,KAAK6B,cAAcN,EACpB,GAtHe1B,EAAMiC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPtC,EAAAuC,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACnBzC,EAAAuC,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDxC,EAAAuC,UAAA,gBAAA,GAOjBJ,EAAA,CADCO,KACmB1C,EAAAuC,UAAA,mBAAA,GAMpBJ,EAAA,CADCO,KACgB1C,EAAAuC,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,KACcpC,EAAAuC,UAAA,YAAA,GAjCJvC,EAAcmC,EAAA,CAD1BQ,EAAc,wBACF3C"}

package/components/reusable/table/data-table.d.ts

@@ -26,7 +26,7 @@ type ColumnDefinition = {
  * @fires on-sort-changed - Dispatched when the sort order changes.
  * @fires on-page-changed - Dispatched when the page number or page size changes.
  */
-export declare class KynDataTable extends LitElement {
+export declare class DataTable extends LitElement {
     static styles: import("lit").CSSResultGroup[];
     /**
      * rows: Array of objects representing each row in the data table.
@@ -122,7 +122,7 @@ export declare class KynDataTable extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'kyn-data-table': KynDataTable;
+        'kyn-data-table': DataTable;
     }
 }
 export {};

package/components/reusable/table/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/table/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAEnE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,SAAS,CAAC;AAGjB,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,gBAAgB,CAAA;KAAE,KAAK,GAAG,CAAC;CACtE,CAAC;AAEF;;;;;;;GAOG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,iCAAY;IAElC;;OAEG;IAEH,IAAI,EAAE,GAAG,EAAE,CAAM;IAEjB;;;OAGG;IAEH,OAAO,EAAE,gBAAgB,EAAE,CAAM;IAEjC;;;OAGG;IAEH,iBAAiB,UAAS;IAE1B;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,YAAY,cAAqB;IAEjC;;;;OAIG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,KAAK,UAAS;IAEd;;;OAGG;IAEH,eAAe;;;;;MAKb;IAEF,8CAA8C;IAE9C,cAAc,UAAS;IAEvB,6CAA6C;IAE7C,oBAAoB,UAAS;IAE7B,6CAA6C;IAE7C,qBAAqB,UAAS;IAE9B,sEAAsE;IAEtE,WAAW,UAAS;IAEpB;;;;OAIG;IAEH,2BAA2B,UAAS;IAEpC;;;;OAIG;IAEH,qBAAqB,UAAS;IAE9B;;;OAGG;IACH,oBAAoB;IAepB;;OAEG;IACH,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO;IAoB1D;;OAEG;IACH,kBAAkB;IAsBlB;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAWnC;;OAEG;IACH,kBAAkB,CAAC,KAAK,EAAE,WAAW;IAY5B,MAAM;CA2GhB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/table/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAEnE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,SAAS,CAAC;AAGjB,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,gBAAgB,CAAA;KAAE,KAAK,GAAG,CAAC;CACtE,CAAC;AAEF;;;;;;;GAOG;AAEH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,iCAAY;IAElC;;OAEG;IAEH,IAAI,EAAE,GAAG,EAAE,CAAM;IAEjB;;;OAGG;IAEH,OAAO,EAAE,gBAAgB,EAAE,CAAM;IAEjC;;;OAGG;IAEH,iBAAiB,UAAS;IAE1B;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,YAAY,cAAqB;IAEjC;;;;OAIG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,KAAK,UAAS;IAEd;;;OAGG;IAEH,eAAe;;;;;MAKb;IAEF,8CAA8C;IAE9C,cAAc,UAAS;IAEvB,6CAA6C;IAE7C,oBAAoB,UAAS;IAE7B,6CAA6C;IAE7C,qBAAqB,UAAS;IAE9B,sEAAsE;IAEtE,WAAW,UAAS;IAEpB;;;;OAIG;IAEH,2BAA2B,UAAS;IAEpC;;;;OAIG;IAEH,qBAAqB,UAAS;IAE9B;;;OAGG;IACH,oBAAoB;IAepB;;OAEG;IACH,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO;IAoB1D;;OAEG;IACH,kBAAkB;IAsBlB;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAWnC;;OAEG;IACH,kBAAkB,CAAC,KAAK,EAAE,WAAW;IAY5B,MAAM;CA2GhB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,SAAS,CAAC;KAC7B;CACF"}

package/components/reusable/table/data-table.js

@@ -0,0 +1,68 @@
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as a}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as d}from'./../../../external/lit-html/directives/class-map.js';import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import"../checkbox/checkbox.js";import"./Table.js";import"./table-cell.js";import"./table-row.js";import"./table-body.js";import"./table-head.js";import"./table-header.js";import"./table-footer.js";import"./table-toolbar.js";import"./table-container.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 l from"./data-table.scss.js";let h=class extends o{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:o,pageSize:i,pageNumber:s,pageSizeOptions:n}=this.paginationModel;return this.selectedRows=new Set(this.selectedRows||[]),this.updateHeaderCheckbox(),t`
+      <kyn-table-container>
+        <kyn-table ?fixedLayout=${this.fixedLayout}>
+          <kyn-thead ?stickyHeader=${this.stickyHeader}>
+            <kyn-tr>
+              ${this.checkboxSelection?t` <kyn-th .align=${"center"} ?dense=${this.dense}
+                    ><kyn-checkbox
+                      .indeterminate=${this.headerCheckboxIndeterminate}
+                      .checked=${this.headerCheckboxChecked}
+                      visiblyHidden
+                      @on-checkbox-change=${this.toggleSelectionAll}
+                      >Select All Items</kyn-checkbox
+                    >
+                  </kyn-th>`:null}
+              ${this.columns.map((({sortable:e,sortFn:o,field:i,align:s,headerName:n})=>t`<kyn-th
+                    ?dense=${this.dense}
+                    .sortable=${e}
+                    @on-sort-changed=${o}
+                    sortKey=${i}
+                    .align=${s}
+                    >${n}</kyn-th
+                  >`))}
+            </kyn-tr>
+          </kyn-thead>
+          <kyn-tbody .striped=${this.striped}>
+            ${this.rows.map((e=>t`
+                <kyn-tr
+                  selectable=${a(this.checkboxSelection)}
+                  class=${d({selected:this.selectedRows.has(e.id),clickable:this.checkboxSelection})}
+                  @on-row-clicked=${()=>{this.checkboxSelection&&this.handleRowSelectionChange(e.id,!this.selectedRows.has(e.id))}}
+                >
+                  ${this.checkboxSelection?t` <kyn-td .align=${"center"} ?dense=${this.dense}>
+                        <kyn-checkbox
+                          visiblyHidden
+                          .checked=${this.selectedRows.has(e.id)}
+                          @on-checkbox-change=${t=>{this.handleRowSelectionChange(e.id,t.detail.checked)}}
+                          >${e.id}</kyn-checkbox
+                        >
+                      </kyn-td>`:null}
+                  ${this.columns.map((o=>t`
+                      <kyn-td
+                        .align=${o.align}
+                        ?dense=${this.dense}
+                        .maxWidth=${o.maxWidth}
+                        .width=${o.width}
+                        ?ellipsis=${o.ellipsis}
+                      >
+                        ${o.cellRenderer?o.cellRenderer({row:e,column:o}):o.valueGetter?o.valueGetter({row:e}):e[o.field]}
+                      </kyn-td>
+                    `))}
+                </kyn-tr>
+              `))}
+          </kyn-tbody>
+        </kyn-table>
+      </kyn-table-container>
+      ${(null===(e=this.paginationModel)||void 0===e?void 0:e.count)>0?t` <kyn-pagination
+            .count=${o}
+            .pageSize=${i}
+            .pageNumber=${s}
+            .pageSizeOptions=${n}
+            .hideItemsRange=${this.hideItemsRange}
+            .hidePageSizeDropdown=${this.hidePageSizeDropdown}
+            .hideNavigationButtons=${this.hideNavigationButtons}
+            @on-page-size-change=${this.onPageSizeChange}
+            @on-page-number-change=${this.onPageNumberChange}
+          ></kyn-pagination>`:null}
+    `}};h.styles=[l],e([s({type:Array})],h.prototype,"rows",void 0),e([s({type:Array})],h.prototype,"columns",void 0),e([s({type:Boolean})],h.prototype,"checkboxSelection",void 0),e([s({type:Boolean})],h.prototype,"striped",void 0),e([s({type:Set})],h.prototype,"selectedRows",void 0),e([n()],h.prototype,"selectAll",void 0),e([s({type:Boolean})],h.prototype,"stickyHeader",void 0),e([s({type:Boolean})],h.prototype,"dense",void 0),e([s({type:Object})],h.prototype,"paginationModel",void 0),e([s({type:Boolean})],h.prototype,"hideItemsRange",void 0),e([s({type:Boolean})],h.prototype,"hidePageSizeDropdown",void 0),e([s({type:Boolean})],h.prototype,"hideNavigationButtons",void 0),e([s({type:Boolean})],h.prototype,"fixedLayout",void 0),e([n()],h.prototype,"headerCheckboxIndeterminate",void 0),e([n()],h.prototype,"headerCheckboxChecked",void 0),h=e([i("kyn-data-table")],h);export{h as DataTable};
+//# sourceMappingURL=data-table.js.map

package/components/reusable/table/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sources":["../../../../src/components/reusable/table/data-table.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\n\n// Import required components and icons\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport '../checkbox/checkbox';\nimport './index';\nimport styles from './data-table.scss';\n\ntype ColumnDefinition = {\n  sortable?: boolean;\n  sortFn?: Function;\n  field: string;\n  align?: string;\n  headerName: string;\n  valueGetter?: Function;\n  width?: string;\n  maxWidth?: string;\n  ellipsis?: boolean;\n  cellRenderer?: (data: { row: any; column: ColumnDefinition }) => any;\n};\n\n/**\n * `kyn-data-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-selected-rows-changed - Dispatched when the selected rows change.\n * @fires on-sort-changed - Dispatched when the sort order changes.\n * @fires on-page-changed - Dispatched when the page number or page size changes.\n */\n\n@customElement('kyn-data-table')\nexport class DataTable extends LitElement {\n  static override styles = [styles];\n\n  /**\n   * rows: Array of objects representing each row in the data table.\n   */\n  @property({ type: Array })\n  rows: any[] = [];\n\n  /**\n   * columns: Array of objects defining column properties such as\n   * field name, sorting function, etc.\n   */\n  @property({ type: Array })\n  columns: ColumnDefinition[] = [];\n\n  /**\n   * checkboxSelection: Boolean indicating whether rows should be\n   * selectable using checkboxes.\n   */\n  @property({ type: Boolean })\n  checkboxSelection = false;\n\n  /**\n   * striped: Boolean indicating whether rows should have alternate\n   * coloring.\n   */\n  @property({ type: Boolean })\n  striped = false;\n\n  /**\n   * selectedRows: Set of row ids that are currently selected.\n   */\n  @property({ type: Set })\n  selectedRows = new Set<number>();\n\n  /**\n   * selectAll: Boolean indicating whether all rows are currently\n   * selected.\n   * @ignore\n   */\n  @state()\n  selectAll = false;\n\n  /**\n   * stickyHeader: Boolean indicating whether the table header\n   * should be sticky.\n   */\n  @property({ type: Boolean })\n  stickyHeader = false;\n\n  /**\n   * dense: Boolean indicating whether the table should be displayed\n   * in dense mode.\n   */\n  @property({ type: Boolean })\n  dense = false;\n\n  /**\n   * paginationModel: Object holding pagination information such as\n   * current page, page size, etc.\n   */\n  @property({ type: Object })\n  paginationModel = {\n    count: 0,\n    pageSize: 5,\n    pageNumber: 0,\n    pageSizeOptions: [5, 10],\n  };\n\n  /** Option to hide the items range display. */\n  @property({ type: Boolean })\n  hideItemsRange = false;\n\n  /** Option to hide the page size dropdown. */\n  @property({ type: Boolean })\n  hidePageSizeDropdown = false;\n\n  /** Option to hide the navigation buttons. */\n  @property({ type: Boolean })\n  hideNavigationButtons = false;\n\n  /** Determines if the table layout is fixed (true) or auto (false). */\n  @property({ type: Boolean })\n  fixedLayout = false;\n\n  /**\n   * headerCheckboxIndeterminate: Boolean indicating whether the header\n   * checkbox is in an indeterminate state.\n   * @ignore\n   */\n  @state()\n  headerCheckboxIndeterminate = false;\n\n  /**\n   * headerCheckboxChecked: Boolean indicating whether the header checkbox is\n   * checked.\n   * @ignore\n   */\n  @state()\n  headerCheckboxChecked = false;\n\n  /**\n   * Updates the state of the header checkbox based on the number of\n   * selected rows.\n   */\n  updateHeaderCheckbox() {\n    if (this.selectedRows.size === 0) {\n      this.headerCheckboxIndeterminate = false;\n      this.headerCheckboxChecked = false;\n    } else if (this.selectedRows.size === this.rows.length) {\n      this.headerCheckboxIndeterminate = false;\n      this.headerCheckboxChecked = true;\n      this.selectAll = true;\n    } else {\n      this.headerCheckboxIndeterminate = true;\n      this.headerCheckboxChecked = false;\n      this.selectAll = false;\n    }\n  }\n\n  /**\n   * Handles the change of selection state for a specific row.\n   */\n  handleRowSelectionChange(rowId: number, isChecked: boolean) {\n    const newSet = new Set(this.selectedRows);\n    if (isChecked) {\n      newSet.add(rowId);\n    } else {\n      newSet.delete(rowId);\n    }\n    this.selectedRows = newSet;\n    this.updateHeaderCheckbox();\n\n    // Emit the custom event with the updated selectedRows\n    this.dispatchEvent(\n      new CustomEvent('on-selected-rows-changed', {\n        detail: { selectedRows: Array.from(this.selectedRows) },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Toggles the selection state of all rows in the table.\n   */\n  toggleSelectionAll() {\n    this.selectAll = !this.selectAll;\n    if (this.selectAll) {\n      // If selecting all, add all row ids to the selectedRows set\n      this.rows.forEach((row) => this.selectedRows.add(row.id));\n    } else {\n      // If deselecting all, clear the selectedRows set\n      this.selectedRows.clear();\n    }\n\n    this.updateHeaderCheckbox();\n    this.requestUpdate();\n\n    this.dispatchEvent(\n      new CustomEvent('on-selected-rows-changed', {\n        detail: { selectedRows: Array.from(this.selectedRows) },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handles the change of page size in pagination.\n   */\n  onPageSizeChange(event: CustomEvent) {\n    this.paginationModel.pageSize = event.detail.value;\n    this.dispatchEvent(\n      new CustomEvent('on-page-changed', {\n        detail: { pageSize: event.detail.value, pageNumber: 1 },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handles the change of page number in pagination.\n   */\n  onPageNumberChange(event: CustomEvent) {\n    this.paginationModel.pageNumber = event.detail.value;\n    const pageSize = this.paginationModel.pageSize;\n    this.dispatchEvent(\n      new CustomEvent('on-page-changed', {\n        detail: { pageNumber: event.detail.value, pageSize },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render() {\n    const { count, pageSize, pageNumber, pageSizeOptions } =\n      this.paginationModel;\n\n    this.selectedRows = new Set(this.selectedRows || []);\n    this.updateHeaderCheckbox();\n\n    return html`\n      <kyn-table-container>\n        <kyn-table ?fixedLayout=${this.fixedLayout}>\n          <kyn-thead ?stickyHeader=${this.stickyHeader}>\n            <kyn-tr>\n              ${this.checkboxSelection\n                ? html` <kyn-th .align=${'center'} ?dense=${this.dense}\n                    ><kyn-checkbox\n                      .indeterminate=${this.headerCheckboxIndeterminate}\n                      .checked=${this.headerCheckboxChecked}\n                      visiblyHidden\n                      @on-checkbox-change=${this.toggleSelectionAll}\n                      >Select All Items</kyn-checkbox\n                    >\n                  </kyn-th>`\n                : null}\n              ${this.columns.map(\n                ({ sortable, sortFn, field, align, headerName }) =>\n                  html`<kyn-th\n                    ?dense=${this.dense}\n                    .sortable=${sortable}\n                    @on-sort-changed=${sortFn}\n                    sortKey=${field}\n                    .align=${align}\n                    >${headerName}</kyn-th\n                  >`\n              )}\n            </kyn-tr>\n          </kyn-thead>\n          <kyn-tbody .striped=${this.striped}>\n            ${this.rows.map(\n              (row) => html`\n                <kyn-tr\n                  selectable=${ifDefined(this.checkboxSelection)}\n                  class=${classMap({\n                    selected: this.selectedRows.has(row.id),\n                    clickable: this.checkboxSelection,\n                  })}\n                  @on-row-clicked=${() => {\n                    if (this.checkboxSelection) {\n                      this.handleRowSelectionChange(\n                        row.id,\n                        !this.selectedRows.has(row.id)\n                      );\n                    }\n                  }}\n                >\n                  ${this.checkboxSelection\n                    ? html` <kyn-td .align=${'center'} ?dense=${this.dense}>\n                        <kyn-checkbox\n                          visiblyHidden\n                          .checked=${this.selectedRows.has(row.id)}\n                          @on-checkbox-change=${(e: CustomEvent) => {\n                            this.handleRowSelectionChange(\n                              row.id,\n                              e.detail.checked\n                            );\n                          }}\n                          >${row.id}</kyn-checkbox\n                        >\n                      </kyn-td>`\n                    : null}\n                  ${this.columns.map(\n                    (column) => html`\n                      <kyn-td\n                        .align=${column.align}\n                        ?dense=${this.dense}\n                        .maxWidth=${column.maxWidth}\n                        .width=${column.width}\n                        ?ellipsis=${column.ellipsis}\n                      >\n                        ${column.cellRenderer\n                          ? column.cellRenderer({ row, column })\n                          : column.valueGetter\n                          ? column.valueGetter({ row })\n                          : row[column.field]}\n                      </kyn-td>\n                    `\n                  )}\n                </kyn-tr>\n              `\n            )}\n          </kyn-tbody>\n        </kyn-table>\n      </kyn-table-container>\n      ${this.paginationModel?.count > 0\n        ? html` <kyn-pagination\n            .count=${count}\n            .pageSize=${pageSize}\n            .pageNumber=${pageNumber}\n            .pageSizeOptions=${pageSizeOptions}\n            .hideItemsRange=${this.hideItemsRange}\n            .hidePageSizeDropdown=${this.hidePageSizeDropdown}\n            .hideNavigationButtons=${this.hideNavigationButtons}\n            @on-page-size-change=${this.onPageSizeChange}\n            @on-page-number-change=${this.onPageNumberChange}\n          ></kyn-pagination>`\n        : null}\n    `;\n  }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-data-table': DataTable;\n  }\n}\n"],"names":["DataTable","LitElement","constructor","this","rows","columns","checkboxSelection","striped","selectedRows","Set","selectAll","stickyHeader","dense","paginationModel","count","pageSize","pageNumber","pageSizeOptions","hideItemsRange","hidePageSizeDropdown","hideNavigationButtons","fixedLayout","headerCheckboxIndeterminate","headerCheckboxChecked","updateHeaderCheckbox","size","length","handleRowSelectionChange","rowId","isChecked","newSet","add","delete","dispatchEvent","CustomEvent","detail","Array","from","bubbles","composed","toggleSelectionAll","forEach","row","id","clear","requestUpdate","onPageSizeChange","event","value","onPageNumberChange","render","html","map","sortable","sortFn","field","align","headerName","ifDefined","classMap","selected","has","clickable","e","checked","column","maxWidth","width","ellipsis","cellRenderer","valueGetter","_a","styles","__decorate","property","type","prototype","Boolean","state","Object","customElement"],"mappings":"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"}

package/components/reusable/table/data-table.scss.js

@@ -0,0 +1,4 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`kyn-tr.selected {
+  background-color: var(--kd-color-background-inverse-hover);
+}`;export{t as default};
+//# sourceMappingURL=data-table.scss.js.map

package/components/reusable/table/data-table.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/index.d.ts

@@ -12,5 +12,6 @@ export { DatePicker } from './components/reusable/datePicker';
 export { DateRangePicker } from './components/reusable/daterangepicker';
 export { Breadcrumbs, BreadcrumbItem } from './components/reusable/breadcrumbs';
 export { Table } from './components/reusable/table';
+export { DataTable } from './components/reusable/table/data-table';
 export { Pagination } from './components/reusable/pagination';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC"}

package/index.js

@@ -1,2 +1,2 @@
-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{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.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{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{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{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{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{Table}from"./components/reusable/table/Table.js";import"./components/reusable/table/table-cell.js";import"./components/reusable/table/table-row.js";import"./components/reusable/table/table-body.js";import"./components/reusable/table/table-head.js";import"./components/reusable/table/table-header.js";import"./components/reusable/table/table-footer.js";import"./components/reusable/table/table-toolbar.js";import"./components/reusable/table/table-container.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";
+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{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.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{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{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{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{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{Table}from"./components/reusable/table/Table.js";import"./components/reusable/table/table-cell.js";import"./components/reusable/table/table-row.js";import"./components/reusable/table/table-body.js";import"./components/reusable/table/table-head.js";import"./components/reusable/table/table-header.js";import"./components/reusable/table/table-footer.js";import"./components/reusable/table/table-toolbar.js";import"./components/reusable/table/table-container.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";export{DataTable}from"./components/reusable/table/data-table.js";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",