npm - @kyndryl-design-system/shidoka-applications - Versions diffs - 2.0.0 → 2.1.0 - Mend

@kyndryl-design-system/shidoka-applications 2.0.0 → 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.

Files changed (14) hide show

package/README.md +1 -1
package/components/reusable/button/button.js +11 -6
package/components/reusable/button/button.js.map +1 -1
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

package/README.md CHANGED Viewed

@@ -42,7 +42,7 @@ After installation, you can make use of tokens/variables included in root.css su
 ## Start using components
-See [Storybook](https://kyndryl-design-system.github.io/shidoka-applications/) for the full components documentation.
+See [Storybook](https://shidoka-applications.netlify.app) for the full components documentation.
 ### Example: Component with Sub-components

package/components/reusable/button/button.js CHANGED Viewed

@@ -119,15 +119,15 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,b as e,l a
 .kd-btn[disabled] {
   cursor: not-allowed;
 }
-.kd-btn--solid-styles {
-  position: relative;
-  overflow: hidden;
-}
-.kd-btn--solid-styles span {
+.kd-btn span {
   display: flex;
   align-items: center;
   z-index: 1;
 }
+.kd-btn--solid-styles {
+  position: relative;
+  overflow: hidden;
+}
 .kd-btn--solid-styles:before {
   content: "";
   position: absolute;
@@ -141,7 +141,7 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,b as e,l a
   transform-origin: left;
   opacity: 0;
 }
-.kd-btn--solid-styles:hover:before {
+.kd-btn--solid-styles:hover:before, .kd-btn--solid-styles:active:before {
   transform: scaleX(1);
   opacity: 1;
 }
@@ -220,6 +220,9 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,b as e,l a
 .kd-btn--secondary-ai:focus {
   outline-color: var(--kd-color-border-button-ai-state-focused);
 }
+.kd-btn--secondary-ai:active {
+  color: var(--kd-color-text-button-dark-primary);
+}
 .kd-btn--secondary-ai:active:before {
   background-color: var(--kd-color-background-button-secondary-ai-pressed);
 }
@@ -309,6 +312,7 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,b as e,l a
 .kd-btn--outline-ai:hover {
   background-color: var(--kd-color-background-button-primary-ai-hover);
   border-color: var(--kd-color-border-button-ai-state-hover);
+  color: var(--kd-color-text-level-light);
 }
 .kd-btn--outline-ai:focus {
   border-color: var(--kd-color-border-button-ai-state-focused);
@@ -317,6 +321,7 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,b as e,l a
 .kd-btn--outline-ai:active {
   background-color: var(--kd-color-background-button-primary-ai-pressed);
   border-color: var(--kd-color-border-button-ai-state-pressed);
+  color: var(--kd-color-text-level-light);
 }
 .kd-btn--outline-destructive {
   color: var(--kd-color-text-button-light-destructive);

package/components/reusable/button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/*\n Copyright Kyndryl, Inc. 2023\n /\n\nimport { html, LitElement } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedNodes,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n BUTTON_KINDS,\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_ICON_POSITION,\n BUTTON_KINDS_SOLID,\n BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/\n Button component.\n \n @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n /\n@customElement('kyn-button')\nexport class Button extends LitElement {\n static override styles = [stylesheet];\n\n /* @ignore /\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /\n Associate the component with forms.\n * @ignore\n /\n static formAssociated = true;\n\n /\n Attached internals for form association.\n * @ignore\n /\n @state()\n internals = this.attachInternals();\n\n /* ARIA label for the button for accessibility. /\n @property({ type: String })\n description = '';\n\n /* Type for the <button> element. /\n @property({ type: String })\n type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n /* Specifies the visual appearance/kind of the button. /\n @property({ type: String })\n kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n /* Converts the button to an <a> tag if specified. /\n @property({ type: String })\n href = '';\n\n /* Specifies the size of the button. /\n @property({ type: String })\n size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n /* Specifies the position of the icon relative to any button text. /\n @property({ type: String })\n iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n /* Determines if the button is disabled.\n * @internal\n /\n @state()\n iconOnly = false;\n\n /* Determines if the button is disabled. /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Button value. /\n @property({ type: String })\n value = '';\n\n /* Button name. /\n @property({ type: String })\n name = '';\n\n /* Determines if the button is Floatable /\n @property({ type: Boolean })\n isFloating = false;\n\n /* Show button after scrolling to 50% of the page/\n @property({ type: Boolean })\n showOnScroll = false;\n\n /* Determines showButton state .\n * @internal\n /\n @state()\n _showButton = false;\n\n /* re-size button to 'medium' at mobile breakpoint.\n * @internal\n /\n @state()\n _reSizeBtn = false;\n\n /* Button formmethod. /\n @property({ type: String })\n formmethod!: any;\n\n /* Queries default slot nodes.\n * @internal\n /\n @queryAssignedNodes()\n _slottedEls!: Array<any>;\n\n /* Queries icon slot nodes.\n * @internal\n /\n @queryAssignedElements({ slot: 'icon' })\n _iconEls!: Array<any>;\n\n /* Queries the .button element.\n * @internal\n /\n @query('.button')\n _btnEl!: any;\n\n override render() {\n const BtnClasses = {\n 'kd-btn': true,\n [`kd-btn--${this.kind}`]: true,\n 'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n 'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n 'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n 'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n 'kd-btn--medium': this._reSizeBtn \|\| this.size === BUTTON_SIZES.MEDIUM,\n 'kd-btn--icon-align': !!this.iconPosition,\n [`kd-btn--icon-${this.iconPosition}`]:\n !!this.iconPosition && !this.iconOnly,\n [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n 'kd-btn--float': this.isFloating,\n 'kd-btn--hidden': this.showOnScroll && !this._showButton,\n 'icon-only': this._iconEls?.length && this.iconOnly,\n };\n\n return html`\n ${this.href && this.href !== ''\n ? html`\n <a\n part=\"button\"\n class=${classMap(BtnClasses)}\n href=${this.href}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </a>\n `\n : html`\n <button\n part=\"button\"\n class=${classMap(BtnClasses)}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n formmethod=${ifDefined(this.formmethod)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </button>\n `}\n `;\n }\n\n private handleClick(e: Event) {\n if (this.internals.form) {\n if (this.type === 'submit') {\n this.internals.form.requestSubmit();\n } else if (this.type === 'reset') {\n this.internals.form.reset();\n }\n }\n\n const event = new CustomEvent('on-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _testIconOnly() {\n if (!this._iconEls?.length) {\n return false;\n }\n\n const TextNodes = this._slottedEls?.filter((node: any) => {\n return node.textContent.trim() !== '';\n });\n\n const VisibleTextNodes = TextNodes.filter((node: any) => {\n if (node.tagName) {\n const Styles = getComputedStyle(node);\n return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n } else {\n return true;\n }\n });\n\n return !VisibleTextNodes.length;\n }\n\n private _handleSlotChange() {\n this.iconOnly = this._testIconOnly();\n this.requestUpdate();\n }\n\n /* @internal /\n private _debounceResize = debounce(() => {\n this._reSizeButton();\n this.iconOnly = this._testIconOnly();\n });\n\n /* @internal /\n private _reSizeButton() {\n // Resize button to medium at mobile breakpoint\n if ((this.isFloating \|\| this.showOnScroll) && window.innerWidth <= 672) {\n this._reSizeBtn = true;\n } else {\n this._reSizeBtn = false;\n }\n }\n\n /* @internal /\n private _debounceScroll = debounce(() => {\n if (this.showOnScroll) {\n this._handleScroll();\n }\n });\n\n /* @internal */\n private _handleScroll() {\n const scrollPosition = window.scrollY;\n const windowHeight = window.innerHeight;\n const pageHeight = document.documentElement.scrollHeight;\n // Show the button if scrolled 50% of the page\n this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.addEventListener('scroll', this._debounceScroll);\n }\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.removeEventListener('scroll', this._debounceScroll);\n }\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-button': Button;\n }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/*\n Copyright Kyndryl, Inc. 2023\n /\n\nimport { html, LitElement } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedNodes,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n BUTTON_KINDS,\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_ICON_POSITION,\n BUTTON_KINDS_SOLID,\n BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/\n Button component.\n \n @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n /\n@customElement('kyn-button')\nexport class Button extends LitElement {\n static override styles = [stylesheet];\n\n /* @ignore /\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /\n Associate the component with forms.\n * @ignore\n /\n static formAssociated = true;\n\n /\n Attached internals for form association.\n * @ignore\n /\n @state()\n internals = this.attachInternals();\n\n /* ARIA label for the button for accessibility. /\n @property({ type: String })\n description = '';\n\n /* Type for the <button> element. /\n @property({ type: String })\n type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n /* Specifies the visual appearance/kind of the button. /\n @property({ type: String })\n kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n /* Converts the button to an <a> tag if specified. /\n @property({ type: String })\n href = '';\n\n /* Specifies the size of the button. /\n @property({ type: String })\n size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n /* Specifies the position of the icon relative to any button text. /\n @property({ type: String })\n iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n /* Determines if the button is disabled.\n * @internal\n /\n @state()\n iconOnly = false;\n\n /* Determines if the button is disabled. /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Button value. /\n @property({ type: String })\n value = '';\n\n /* Button name. /\n @property({ type: String })\n name = '';\n\n /* Determines if the button is Floatable /\n @property({ type: Boolean })\n isFloating = false;\n\n /* Show button after scrolling to 50% of the page/\n @property({ type: Boolean })\n showOnScroll = false;\n\n /* Determines showButton state .\n * @internal\n /\n @state()\n _showButton = false;\n\n /* re-size button to 'medium' at mobile breakpoint.\n * @internal\n /\n @state()\n _reSizeBtn = false;\n\n /* Button formmethod. /\n @property({ type: String })\n formmethod!: any;\n\n /* Queries default slot nodes.\n * @internal\n /\n @queryAssignedNodes()\n _slottedEls!: Array<any>;\n\n /* Queries icon slot nodes.\n * @internal\n /\n @queryAssignedElements({ slot: 'icon' })\n _iconEls!: Array<any>;\n\n /* Queries the .button element.\n * @internal\n /\n @query('.button')\n _btnEl!: any;\n\n override render() {\n const BtnClasses = {\n 'kd-btn': true,\n [`kd-btn--${this.kind}`]: true,\n 'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n 'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n 'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n 'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n 'kd-btn--medium': this._reSizeBtn \|\| this.size === BUTTON_SIZES.MEDIUM,\n 'kd-btn--icon-align': !!this.iconPosition,\n [`kd-btn--icon-${this.iconPosition}`]:\n !!this.iconPosition && !this.iconOnly,\n [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n 'kd-btn--float': this.isFloating,\n 'kd-btn--hidden': this.showOnScroll && !this._showButton,\n 'icon-only': this._iconEls?.length && this.iconOnly,\n };\n\n return html`\n ${this.href && this.href !== ''\n ? html`\n <a\n part=\"button\"\n class=${classMap(BtnClasses)}\n href=${this.href}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </a>\n `\n : html`\n <button\n part=\"button\"\n class=${classMap(BtnClasses)}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n formmethod=${ifDefined(this.formmethod)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </button>\n `}\n `;\n }\n\n private handleClick(e: Event) {\n if (this.internals.form) {\n if (this.type === 'submit') {\n this.internals.form.requestSubmit();\n } else if (this.type === 'reset') {\n this.internals.form.reset();\n }\n }\n\n const event = new CustomEvent('on-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _testIconOnly() {\n if (!this._iconEls?.length) {\n return false;\n }\n\n const TextNodes = this._slottedEls?.filter((node: any) => {\n return node.textContent.trim() !== '';\n });\n\n const VisibleTextNodes = TextNodes.filter((node: any) => {\n if (node.tagName) {\n const Styles = getComputedStyle(node);\n return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n } else {\n return true;\n }\n });\n\n return !VisibleTextNodes.length;\n }\n\n private _handleSlotChange() {\n this.iconOnly = this._testIconOnly();\n this.requestUpdate();\n }\n\n /* @internal /\n private _debounceResize = debounce(() => {\n this._reSizeButton();\n this.iconOnly = this._testIconOnly();\n });\n\n /* @internal /\n private _reSizeButton() {\n // Resize button to medium at mobile breakpoint\n if ((this.isFloating \|\| this.showOnScroll) && window.innerWidth <= 672) {\n this._reSizeBtn = true;\n } else {\n this._reSizeBtn = false;\n }\n }\n\n /* @internal /\n private _debounceScroll = debounce(() => {\n if (this.showOnScroll) {\n this._handleScroll();\n }\n });\n\n /* @internal */\n private _handleScroll() {\n const scrollPosition = window.scrollY;\n const windowHeight = window.innerHeight;\n const pageHeight = document.documentElement.scrollHeight;\n // Show the button if scrolled 50% of the page\n this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.addEventListener('scroll', this._debounceScroll);\n }\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.removeEventListener('scroll', this._debounceScroll);\n }\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-button': Button;\n }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}

package/components/reusable/link/defs.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 export declare enum LINK_TYPES {
     PRIMARY = "primary",
-    SECONDARY = "secondary"
+    SECONDARY = "secondary",
+    AI_CONNECTED = "ai"
 }
 export declare enum LINK_SIZES {
     MEDIUM = "md",

package/components/reusable/link/defs.d.ts.map CHANGED Viewed

	@@ -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;~~CACxB~~;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	+ {"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"}

package/components/reusable/link/defs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n,o,t,A,a;!function(n){n.PRIMARY="primary",n.SECONDARY="secondary"}(n||(n={})),function(n){n.MEDIUM="md",n.LARGE="lg",n.SMALL="sm"}(o||(o={})),function(n){n.BLANK="_blank",n.SELF="_self",n.PARENT="_parent",n.TOP="_top"}(t||(t={})),function(n){n.INLINE="inline",n.STANDALONE="standalone"}(A||(A={})),function(n){n.AUTO="auto",n.DARK="dark"}(a||(a={}));export{a as LINK_SHADES,o as LINK_SIZES,t as LINK_TARGETS,n as LINK_TYPES,A as LINK_VARIANTS};
+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};
 //# sourceMappingURL=defs.js.map

package/components/reusable/link/defs.js.map CHANGED Viewed

	@@ -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,~~EAKAC~~,EAMAC,EAOAC,EAKAC,~~GAvBZ~~,SAAYJ,GACVA,EAAA,QAAA,UACAA,EAAA,UAAA,~~WACD~~,~~CAHD~~,CAAYA,IAAAA,~~EAGX~~,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	+ {"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"}

package/components/reusable/link/link.d.ts.map CHANGED Viewed

	@@ -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;~~IAqBtB~~,OAAO,CAAC,WAAW;CAWpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
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"}

package/components/reusable/link/link.js CHANGED Viewed

@@ -1,4 +1,4 @@
-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 s,LINK_TYPES as a,LINK_SHADES as d}from"./defs.js";var k=o`*,
+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`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -120,7 +120,30 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"
   -moz-transition: 300ms ease-in-out;
   -o-transition: 300ms ease-in-out;
   -webkit-transition: 300ms ease-in-out;
-}`;let c=class extends i{constructor(){super(...arguments),this.href="",this.target=s.SELF,this.kind=a.PRIMARY,this.rel="",this.disabled=!1,this.standalone=!1,this.iconLeft=!1,this.shade=d.AUTO}render(){const t=this.returnClassMap();return l`
+}
+.kyn-link-text-ai {
+  color: var(--kd-color-background-link-ai-default);
+}
+.kyn-link-text-ai:hover {
+  color: var(--kd-color-background-link-ai-hover);
+}
+.kyn-link-text-ai:focus {
+  color: var(--kd-color-background-link-ai-focused);
+  outline: 1px solid var(--kd-color-border-button-ai-state-focused);
+  -webkit-transition: outline 100ms ease-in-out;
+  -moz-transition: outline 100ms ease-in-out;
+  -o-transition: outline 100ms ease-in-out;
+  transition: outline 100ms ease-in-out;
+  text-decoration: none;
+}
+.kyn-link-text-ai:active {
+  color: var(--kd-color-background-link-ai-pressed);
+  text-decoration: underline;
+  outline: none;
+}
+.kyn-link-text-ai.kyn-link-text-disabled {
+  color: var(--kd-color-background-link-ai-disabled);
+}`;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`
       <a
         class="kyn-link-text ${t}"
         target=${this.target}
@@ -135,5 +158,5 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,e as n}from"
           <slot name="icon"></slot>
         </span>
       </a>
-    `}returnClassMap(){return this.disabled?r({"kyn-link-text-disabled":this.disabled,"icon-left":this.iconLeft}):r({"kyn-link-text-primary":(this.kind===a.PRIMARY||!this.kind)&&"auto"===this.shade,"kyn-link-text-primary-dark":this.kind===a.PRIMARY&&"dark"===this.shade,"kyn-link-text-secondary":this.kind===a.SECONDARY,"kyn-link-text-inline":!this.standalone,"kyn-link-text-standalone":this.standalone,"icon-left":this.iconLeft})}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};
+    `}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};
 //# sourceMappingURL=link.js.map

package/components/reusable/link/link.js.map CHANGED Viewed

	@@ -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 if ~~(this.disabled)~~ {\n ~~return classMap({\n~~ ['kyn-link-text-disabled']: this.disabled,\n 'icon-left': this.iconLeft,\n });\n } else {\n return classMap({\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 ~~'icon-left': this.iconLeft,\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","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,~~IAuDrB~~,~~CArDU~~,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,~~OAAIjB~~,~~KAAKS~~,~~SACAY~~,~~EAAS,CACd,~~yBAA4BrB,KAAKS,SACjC,YAAaT,KAAKW,~~WAGbU~~,EAAS,~~CACd~~,yBACGrB,KAAKK,OAASC,EAAWC,UAAYP,KAAKK,OAC5B,SAAfL,KAAKY,MACP,6BACEZ,KAAKK,OAASC,EAAWC,SAA0B,SAAfP,KAAKY,MAC3C,0BAA6BZ,KAAKK,OAASC,~~EAAWgB~~,UACtD,~~wBAA2BtB~~,KAAKU,WAChC,2BAA8BV,KAAKU,~~WACnC~~,~~YAAaV,KAAKW,UAGvB,~~CAEO,~~WAAAS~~,CAAYD,GAClB,GAAInB,KAAKS,SAEP,YADAU,~~EAAEI~~,iBAIJ,MAAMC,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,~~CAAEzB~~,KAAMD,KAAKC,~~KAAM0B~~,~~UAAWR~~,KAExCnB,~~KAAK4B~~,cAAcJ,EACpB,~~GA5Fe3B~~,~~EAAAgC~~,OAAS,CAACC,GAI1BC,EAAA,CADCC,EAAS,CAAEC,KAAMC,~~UACRrC~~,~~EAAAsC~~,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,~~UACuBrC~~,~~EAAAsC~~,UAAA,cAAA,GAIzCJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,~~UACoBrC~~,~~EAAAsC~~,UAAA,YAAA,GAItCJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,~~UACTrC~~,~~EAAAsC~~,UAAA,WAAA,GAMTJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,~~KACnBxC~~,~~EAAAsC~~,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,~~WACCvC~~,~~EAAAsC~~,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,~~WACDvC~~,~~EAAAsC~~,UAAA,gBAAA,GAQjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,~~UACOrC~~,~~EAAAsC~~,UAAA,aAAA,~~GAvCdtC~~,~~EAAIkC~~,EAAA,CADhBO,EAAc,~~aACFzC~~"}
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"}

package/components/reusable/table/story-helpers/table-story.sample.d.ts.map CHANGED Viewed

	@@ -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;~~CAmLhB~~;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
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"}

package/components/reusable/table/table.d.ts CHANGED Viewed

@@ -28,8 +28,8 @@ export declare class Table extends LitElement {
      */
     striped?: boolean;
     /**
-     * stickyHeader: Boolean indicating whether the table header
-     * should be sticky.
+     * stickyHeader: Boolean indicating whether the table header should be sticky.
+     * Must also set a height or max-height on kyn-table-container.
      * @type {boolean}
      * @default false
      */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",
@@ -27,7 +27,7 @@
     "prepare": "npx husky install"
   },
   "dependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^2.0.0",
+    "@kyndryl-design-system/shidoka-foundation": "^2.1.1",
     "@kyndryl-design-system/shidoka-icons": "^2.0.0",
     "@lit/context": "^1.1.0",
     "deepmerge-ts": "^7.1.0",

package/table-f6b54ef0.js.map CHANGED Viewed

	@@ -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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"}