npm - @kyndryl-design-system/shidoka-applications - Versions diffs - 2.9.1 → 2.9.2 - Mend

@kyndryl-design-system/shidoka-applications 2.9.1 → 2.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

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

@@ -16,6 +16,8 @@ export declare class Card extends LitElement {
     target: any;
     /** Hide card border. Useful when clickable card use inside `<kyn-notification>` component. */
     hideBorder: boolean;
+    /** Set this to `true` for highlight */
+    highlight: boolean;
     render(): import("lit").TemplateResult<1>;
     private handleClick;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;GAIG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,4CAA4C;IAE5C,IAAI,SAAY;IAEhB,yCAAyC;IAEzC,IAAI,SAAM;IAEV,sKAAsK;IAEtK,GAAG,SAAM;IAET,sKAAsK;IAEtK,MAAM,EAAE,GAAG,CAAW;IAEtB,8FAA8F;IAE9F,UAAU,UAAS;~~IAEV~~,MAAM;~~IAsBf~~,OAAO,CAAC,WAAW;CAMpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
1	+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;GAIG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,4CAA4C;IAE5C,IAAI,SAAY;IAEhB,yCAAyC;IAEzC,IAAI,SAAM;IAEV,sKAAsK;IAEtK,GAAG,SAAM;IAET,sKAAsK;IAEtK,MAAM,EAAE,GAAG,CAAW;IAEtB,8FAA8F;IAE9F,UAAU,UAAS;IAEnB,uCAAuC;IAEvC,SAAS,UAAS;IAET,MAAM;IA+Bf,OAAO,CAAC,WAAW;CAMpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}

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

@@ -1,4 +1,4 @@
-import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as e,o,e as t}from"../../../vendor/lit-6e2a7867.js";import{i,s as a,x as d}from"../../../vendor/lit-element-3185f710.js";var l=i`*,
+import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as t}from"../../../vendor/lit-6e2a7867.js";import{i,s as a,x as d}from"../../../vendor/lit-element-3185f710.js";var l=i`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -64,16 +64,24 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as e,o,e as t}fro
 .card-border {
   outline: 1px solid var(--kd-color-border-level-secondary);
   box-shadow: var(--kd-elevation-level-1);
-}`;let n=class extends a{constructor(){super(...arguments),this.type="normal",this.href="",this.rel="",this.target="_self",this.hideBorder=!1}render(){const r={"card-wrapper-clickable":!0,"card-border":!1===this.hideBorder};return d`${"clickable"===this.type?d`<a
+}
+.card-highlight {
+  outline: 1px solid var(--kd-color-background-highlight-border);
+  background: var(--kd-color-background-highlight-fill);
+  color: var(--kd-color-text-level-primary);
+}`;let n=class extends a{constructor(){super(...arguments),this.type="normal",this.href="",this.rel="",this.target="_self",this.hideBorder=!1,this.highlight=!1}render(){const r={"card-wrapper-clickable":!0,"card-border":!1===this.hideBorder,"card-highlight":this.highlight},o={"card-wrapper":!0,"card-highlight":this.highlight};return d`${"clickable"===this.type?d`<a
           part="card-wrapper"
-          class="${o(r)}"
+          class="${e(r)}"
           href=${this.href}
           target=${this.target}
           rel=${this.rel}
           @click=${r=>this.handleClick(r)}
         >
           <slot></slot>
-        </a>`:d`<div part="card-wrapper" class="card-wrapper">
+        </a>`:d`<div
+          part="card-wrapper"
+          class="${e(o)}"
+        >
           <slot></slot>
-        </div>`} `}handleClick(r){const e=new CustomEvent("on-card-click",{detail:{origEvent:r}});this.dispatchEvent(e)}};n.styles=l,r([e({type:String})],n.prototype,"type",void 0),r([e({type:String})],n.prototype,"href",void 0),r([e({type:String})],n.prototype,"rel",void 0),r([e({type:String})],n.prototype,"target",void 0),r([e({type:Boolean})],n.prototype,"hideBorder",void 0),n=r([t("kyn-card")],n);export{n as Card};
+        </div>`} `}handleClick(r){const o=new CustomEvent("on-card-click",{detail:{origEvent:r}});this.dispatchEvent(o)}};n.styles=l,r([o({type:String})],n.prototype,"type",void 0),r([o({type:String})],n.prototype,"href",void 0),r([o({type:String})],n.prototype,"rel",void 0),r([o({type:String})],n.prototype,"target",void 0),r([o({type:Boolean})],n.prototype,"hideBorder",void 0),r([o({type:Boolean})],n.prototype,"highlight",void 0),n=r([t("kyn-card")],n);export{n as Card};
 //# sourceMappingURL=card.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sources":["../../../../src/components/reusable/card/card.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport CardScss from './card.scss';\n\n/*\n Card.\n * @fires on-card-click - Captures the click event of clickable card and emits the original event details. Use `e.stopPropogation()` / `e.preventDefault()` for any internal clickable elements when card type is `'clickable'` to stop bubbling / prevent event.\n * @slot unnamed - Slot for card contents.\n /\n\n@customElement('kyn-card')\nexport class Card extends LitElement {\n static override styles = CardScss;\n\n /* Card Type. `'normal'` & `'clickable'` /\n @property({ type: String })\n type = 'normal';\n\n /* Card link url for clickable cards. /\n @property({ type: String })\n href = '';\n\n /* Use for Card type `'clickable'`. 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 /* Defines a target attribute for where to load the URL in case of clickable card. Possible options include `'_self'` (deafult), `'_blank'`, `'_parent`', `'_top'` /\n @property({ type: String })\n target: any = '_self';\n\n /* Hide card border. Useful when clickable card use inside `<kyn-notification>` component. */\n @property({ type: Boolean })\n hideBorder = false;\n\n override render() {\n const cardWrapperClasses = {\n 'card-wrapper-clickable': true,\n 'card-border': this.hideBorder === false,\n };\n\n return html`${this.type === 'clickable'\n ? html`<a\n part=\"card-wrapper\"\n class=\"${classMap(cardWrapperClasses)}\"\n href=${this.href}\n target=${this.target}\n rel=${this.rel}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <slot></slot>\n </a>`\n : html`<div part=\"card-wrapper\" class=\"~~card-wrapper~~\">\n <slot></slot>\n </div>`} `;\n }\n\n private handleClick(e: Event) {\n const event = new CustomEvent('on-card-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-card': Card;\n }\n}\n"],"names":["Card","LitElement","constructor","this","type","href","rel","target","hideBorder","render","cardWrapperClasses","html","classMap","e","handleClick","event","CustomEvent","detail","origEvent","dispatchEvent","styles","CardScss","__decorate","property","String","prototype","Boolean","customElement"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~GAaO,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAKLC,KAAIC,KAAG,SAIPD,KAAIE,KAAG,GAIPF,KAAGG,IAAG,GAINH,KAAMI,OAAQ,QAIdJ,KAAUK,YAAG,~~CA8Bd~~,~~CA5BU~~,MAAAC,GACP,MAAMC,EAAqB,CACzB,0BAA0B,EAC1B,eAAmC,~~IAApBP~~,KAAKK,~~YAGtB~~,~~OAAOG~~,CAAI,GAAiB,~~cAAdR~~,KAAKC,~~KACfO~~,CAAI;;mBAEOC,~~EAASF~~;~~iBACXP~~,KAAKE;mBACHF,KAAKI;gBACRJ,KAAKG;~~mBACDO~~,~~GAAaV~~,~~KAAKW~~,YAAYD;;;cAI1CF,CAAI;;~~kBAGT~~,CAEO,~~WAAAG~~,CAAYD,GAClB,MAAME,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,OAAQ,CAAEC,UAAWL,~~KAEvBV~~,~~KAAKgB~~,cAAcJ,EACpB,~~GAjDef~~,~~EAAMoB~~,OAAGC,EAIzBC,EAAA,CADCC,EAAS,~~CAAEnB~~,~~KAAMoB~~,~~UACFxB~~,~~EAAAyB~~,UAAA,YAAA,GAIhBH,EAAA,CADCC,EAAS,~~CAAEnB~~,~~KAAMoB~~,~~UACRxB~~,~~EAAAyB~~,UAAA,YAAA,GAIVH,EAAA,CADCC,EAAS,~~CAAEnB~~,~~KAAMoB~~,~~UACTxB~~,~~EAAAyB~~,UAAA,WAAA,GAITH,EAAA,CADCC,EAAS,~~CAAEnB~~,~~KAAMoB~~,~~UACIxB~~,~~EAAAyB~~,UAAA,cAAA,GAItBH,EAAA,CADCC,EAAS,~~CAAEnB~~,~~KAAMsB~~,~~WACC1B~~,~~EAAAyB~~,UAAA,kBAAA,~~GArBRzB~~,~~EAAIsB~~,EAAA,CADhBK,EAAc,~~aACF3B~~"}
1	+ {"version":3,"file":"card.js","sources":["../../../../src/components/reusable/card/card.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport CardScss from './card.scss';\n\n/*\n Card.\n * @fires on-card-click - Captures the click event of clickable card and emits the original event details. Use `e.stopPropogation()` / `e.preventDefault()` for any internal clickable elements when card type is `'clickable'` to stop bubbling / prevent event.\n * @slot unnamed - Slot for card contents.\n /\n\n@customElement('kyn-card')\nexport class Card extends LitElement {\n static override styles = CardScss;\n\n /* Card Type. `'normal'` & `'clickable'` /\n @property({ type: String })\n type = 'normal';\n\n /* Card link url for clickable cards. /\n @property({ type: String })\n href = '';\n\n /* Use for Card type `'clickable'`. 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 /* Defines a target attribute for where to load the URL in case of clickable card. Possible options include `'_self'` (deafult), `'_blank'`, `'_parent`', `'_top'` /\n @property({ type: String })\n target: any = '_self';\n\n /* Hide card border. Useful when clickable card use inside `<kyn-notification>` component. /\n @property({ type: Boolean })\n hideBorder = false;\n\n /* Set this to `true` for highlight */\n @property({ type: Boolean })\n highlight = false;\n\n override render() {\n const cardWrapperClasses = {\n 'card-wrapper-clickable': true,\n 'card-border': this.hideBorder === false,\n 'card-highlight': this.highlight,\n };\n\n const cardWrapperDefaultClasses = {\n 'card-wrapper': true,\n 'card-highlight': this.highlight,\n };\n\n return html`${this.type === 'clickable'\n ? html`<a\n part=\"card-wrapper\"\n class=\"${classMap(cardWrapperClasses)}\"\n href=${this.href}\n target=${this.target}\n rel=${this.rel}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <slot></slot>\n </a>`\n : html`<div\n part=\"card-wrapper\"\n class=\"${classMap(cardWrapperDefaultClasses)}\"\n >\n <slot></slot>\n </div>`} `;\n }\n\n private handleClick(e: Event) {\n const event = new CustomEvent('on-card-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-card': Card;\n }\n}\n"],"names":["Card","LitElement","constructor","this","type","href","rel","target","hideBorder","highlight","render","cardWrapperClasses","cardWrapperDefaultClasses","html","classMap","e","handleClick","event","CustomEvent","detail","origEvent","dispatchEvent","styles","CardScss","__decorate","property","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAaO,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAKLC,KAAIC,KAAG,SAIPD,KAAIE,KAAG,GAIPF,KAAGG,IAAG,GAINH,KAAMI,OAAQ,QAIdJ,KAAUK,YAAG,EAIbL,KAASM,WAAG,CAuCb,CArCU,MAAAC,GACP,MAAMC,EAAqB,CACzB,0BAA0B,EAC1B,eAAmC,IAApBR,KAAKK,WACpB,iBAAkBL,KAAKM,WAGnBG,EAA4B,CAChC,gBAAgB,EAChB,iBAAkBT,KAAKM,WAGzB,OAAOI,CAAI,GAAiB,cAAdV,KAAKC,KACfS,CAAI;;mBAEOC,EAASH;iBACXR,KAAKE;mBACHF,KAAKI;gBACRJ,KAAKG;mBACDS,GAAaZ,KAAKa,YAAYD;;;cAI1CF,CAAI;;mBAEOC,EAASF;;;kBAIzB,CAEO,WAAAI,CAAYD,GAClB,MAAME,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,OAAQ,CAAEC,UAAWL,KAEvBZ,KAAKkB,cAAcJ,EACpB,GA9DejB,EAAMsB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACF1B,EAAA2B,UAAA,YAAA,GAIhBH,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACR1B,EAAA2B,UAAA,YAAA,GAIVH,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACT1B,EAAA2B,UAAA,WAAA,GAITH,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACI1B,EAAA2B,UAAA,cAAA,GAItBH,EAAA,CADCC,EAAS,CAAErB,KAAMwB,WACC5B,EAAA2B,UAAA,kBAAA,GAInBH,EAAA,CADCC,EAAS,CAAErB,KAAMwB,WACA5B,EAAA2B,UAAA,iBAAA,GAzBP3B,EAAIwB,EAAA,CADhBK,EAAc,aACF7B"}

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

@@ -4,6 +4,7 @@ import '../button';
  * Modal.
  * @slot unnamed - Slot for modal body content.
  * @slot anchor - Slot for the anchor button content.
+ * @slot footer - Slot for the footer content which replaces the ok, cancel, and second ary buttons.
  * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).
  * @fires on-open - Emits the modal open event.
  */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,WAAW,CAAC;AAInB~~;;;;;;GAMG~~;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,QAkBpB;IAEF,wBAAwB;IAExB,IAAI,UAAS;IAEb,yDAAyD;IAEzD,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,mCAAmC;IAEnC,UAAU,UAAS;IAEnB,qCAAqC;IAErC,iBAAiB,UAAS;IAE1B,iEAAiE;IAEjE,UAAU,UAAS;IAEnB,6BAA6B;IAE7B,mBAAmB,SAAe;IAElC,kCAAkC;IAElC,mBAAmB,UAAS;IAE5B,+BAA+B;IAE/B,gBAAgB,UAAS;IAEzB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB,yBAAyB;IAEzB,SAAS,SAAW;IAEpB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEd,sDAAsD;IAEtD,WAAW,UAAS;IAEpB,sFAAsF;IAEtF,aAAa,UAAS;IAEb,MAAM;IAoGf,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAKb,OAAO,CAAC,YAAY,EAAE,GAAG;CAUnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}
1	+ {"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,WAAW,CAAC;AAInB;;;;;;;GAOG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,QAkBpB;IAEF,wBAAwB;IAExB,IAAI,UAAS;IAEb,yDAAyD;IAEzD,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,mCAAmC;IAEnC,UAAU,UAAS;IAEnB,qCAAqC;IAErC,iBAAiB,UAAS;IAE1B,iEAAiE;IAEjE,UAAU,UAAS;IAEnB,6BAA6B;IAE7B,mBAAmB,SAAe;IAElC,kCAAkC;IAElC,mBAAmB,UAAS;IAE5B,+BAA+B;IAE/B,gBAAgB,UAAS;IAEzB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB,yBAAyB;IAEzB,SAAS,SAAW;IAEpB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEd,sDAAsD;IAEtD,WAAW,UAAS;IAEpB,sFAAsF;IAEtF,aAAa,UAAS;IAEb,MAAM;IAoGf,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAKb,OAAO,CAAC,YAAY,EAAE,GAAG;CAUnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\n/*\n Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the modal open event.\n /\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = [\n ModalScss,\n css`\n @supports (transition-behavior: allow-discrete) {\n @starting-style {\n dialog[open] {\n opacity: 0;\n transform: scale(0);\n }\n }\n\n @starting-style {\n dialog[open]::backdrop {\n background-color: rgb(0, 0, 0, 0);\n }\n }\n }\n `,\n ];\n\n /* Modal open state. /\n @property({ type: Boolean })\n open = false;\n\n /* Modal size. `'auto'`, `'md'`, or `'lg', or `'xl'`. /\n @property({ type: String })\n size = 'auto';\n\n /* Title/heading text, required. /\n @property({ type: String })\n titleText = '';\n\n /* Label text, optional. /\n @property({ type: String })\n labelText = '';\n\n /* OK button text. /\n @property({ type: String })\n okText = 'OK';\n\n /* Cancel button text. /\n @property({ type: String })\n cancelText = 'Cancel';\n\n /* Changes the primary button styles to indicate the action is destructive. /\n @property({ type: Boolean })\n destructive = false;\n\n /* Disables the primary button. /\n @property({ type: Boolean })\n okDisabled = false;\n\n /* Disables the secondary button. /\n @property({ type: Boolean })\n secondaryDisabled = false;\n\n /* Hides the footer/action buttons to create a passive modal. /\n @property({ type: Boolean })\n hideFooter = false;\n\n /* Secondary button text. /\n @property({ type: String })\n secondaryButtonText = 'Secondary';\n\n /* Hides the secondary button. /\n @property({ type: Boolean })\n showSecondaryButton = false;\n\n /* Hides the cancel button. /\n @property({ type: Boolean })\n hideCancelButton = false;\n\n /* Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. /\n @property({ attribute: false })\n beforeClose!: Function;\n\n /* Close button text. /\n @property({ type: String })\n closeText = 'Close';\n\n /* The dialog element\n * @internal\n /\n @query('dialog')\n _dialog!: any;\n\n /* Determines if the component is themed for GenAI./\n @property({ type: Boolean, reflect: true })\n aiConnected = false;\n\n /* Disables scroll on the modal body to allow scrolling of nested elements inside. */\n @property({ type: Boolean })\n disableScroll = false;\n\n override render() {\n const classes = {\n modal: true,\n 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n 'size--xl': this.size === 'xl',\n 'ai-connected': this.aiConnected,\n };\n\n return html`\n <span class=\"anchor\" @click=${this._openModal}>\n <slot name=\"anchor\"></slot>\n </span>\n\n <dialog\n class=\"${classMap(classes)}\"\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <form method=\"dialog\">\n <kyn-button\n class=\"close\"\n kind=\"ghost\"\n size=\"small\"\n description=${this.closeText}\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n <header>\n <div>\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n </div>\n </header>\n\n <div class=\"body ${this.disableScroll ? 'disableScroll' : ''}\">\n <slot></slot>\n </div>\n\n ${!this.hideFooter\n ? html`\n <slot name=\"footer\">\n <div class=\"footer\">\n <kyn-button\n class=\"action-button\"\n value=\"ok\"\n kind=${this.destructive\n ? 'primary-destructive'\n : this.aiConnected\n ? 'primary-ai'\n : 'primary'}\n ?disabled=${this.okDisabled}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kyn-button>\n ${this.showSecondaryButton\n ? html`\n <kyn-button\n class=\"action-button\"\n value=\"Secondary\"\n kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n ?disabled=${this.secondaryDisabled}\n @click=${(e: Event) =>\n this._closeModal(e, 'secondary')}\n >\n ${this.secondaryButtonText}\n </kyn-button>\n `\n : null}\n ${this.hideCancelButton\n ? null\n : html`\n <kyn-button\n class=\"action-button\"\n value=\"cancel\"\n kind=\"ghost\"\n @click=${(e: Event) =>\n this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kyn-button>\n `}\n <!--\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n -->\n </div>\n </slot>\n `\n : null}\n </form>\n </dialog>\n `;\n }\n\n private _openModal() {\n this.open = true;\n }\n\n private _closeModal(e: Event, returnValue: string) {\n if (\n !this.beforeClose \|\|\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private _emitOpenEvent() {\n const event = new CustomEvent('on-open');\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n this._emitOpenEvent();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-modal': Modal;\n }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","secondaryDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","closeText","aiConnected","disableScroll","render","classes","modal","html","_openModal","classMap","e","_closeModal","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","reflect","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\n/*\n Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot footer - Slot for the footer content which replaces the ok, cancel, and second ary buttons.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the modal open event.\n /\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = [\n ModalScss,\n css`\n @supports (transition-behavior: allow-discrete) {\n @starting-style {\n dialog[open] {\n opacity: 0;\n transform: scale(0);\n }\n }\n\n @starting-style {\n dialog[open]::backdrop {\n background-color: rgb(0, 0, 0, 0);\n }\n }\n }\n `,\n ];\n\n /* Modal open state. /\n @property({ type: Boolean })\n open = false;\n\n /* Modal size. `'auto'`, `'md'`, or `'lg', or `'xl'`. /\n @property({ type: String })\n size = 'auto';\n\n /* Title/heading text, required. /\n @property({ type: String })\n titleText = '';\n\n /* Label text, optional. /\n @property({ type: String })\n labelText = '';\n\n /* OK button text. /\n @property({ type: String })\n okText = 'OK';\n\n /* Cancel button text. /\n @property({ type: String })\n cancelText = 'Cancel';\n\n /* Changes the primary button styles to indicate the action is destructive. /\n @property({ type: Boolean })\n destructive = false;\n\n /* Disables the primary button. /\n @property({ type: Boolean })\n okDisabled = false;\n\n /* Disables the secondary button. /\n @property({ type: Boolean })\n secondaryDisabled = false;\n\n /* Hides the footer/action buttons to create a passive modal. /\n @property({ type: Boolean })\n hideFooter = false;\n\n /* Secondary button text. /\n @property({ type: String })\n secondaryButtonText = 'Secondary';\n\n /* Hides the secondary button. /\n @property({ type: Boolean })\n showSecondaryButton = false;\n\n /* Hides the cancel button. /\n @property({ type: Boolean })\n hideCancelButton = false;\n\n /* Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. /\n @property({ attribute: false })\n beforeClose!: Function;\n\n /* Close button text. /\n @property({ type: String })\n closeText = 'Close';\n\n /* The dialog element\n * @internal\n /\n @query('dialog')\n _dialog!: any;\n\n /* Determines if the component is themed for GenAI./\n @property({ type: Boolean, reflect: true })\n aiConnected = false;\n\n /* Disables scroll on the modal body to allow scrolling of nested elements inside. */\n @property({ type: Boolean })\n disableScroll = false;\n\n override render() {\n const classes = {\n modal: true,\n 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n 'size--xl': this.size === 'xl',\n 'ai-connected': this.aiConnected,\n };\n\n return html`\n <span class=\"anchor\" @click=${this._openModal}>\n <slot name=\"anchor\"></slot>\n </span>\n\n <dialog\n class=\"${classMap(classes)}\"\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <form method=\"dialog\">\n <kyn-button\n class=\"close\"\n kind=\"ghost\"\n size=\"small\"\n description=${this.closeText}\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n <header>\n <div>\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n </div>\n </header>\n\n <div class=\"body ${this.disableScroll ? 'disableScroll' : ''}\">\n <slot></slot>\n </div>\n\n ${!this.hideFooter\n ? html`\n <slot name=\"footer\">\n <div class=\"footer\">\n <kyn-button\n class=\"action-button\"\n value=\"ok\"\n kind=${this.destructive\n ? 'primary-destructive'\n : this.aiConnected\n ? 'primary-ai'\n : 'primary'}\n ?disabled=${this.okDisabled}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kyn-button>\n ${this.showSecondaryButton\n ? html`\n <kyn-button\n class=\"action-button\"\n value=\"Secondary\"\n kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n ?disabled=${this.secondaryDisabled}\n @click=${(e: Event) =>\n this._closeModal(e, 'secondary')}\n >\n ${this.secondaryButtonText}\n </kyn-button>\n `\n : null}\n ${this.hideCancelButton\n ? null\n : html`\n <kyn-button\n class=\"action-button\"\n value=\"cancel\"\n kind=\"ghost\"\n @click=${(e: Event) =>\n this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kyn-button>\n `}\n <!--\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n -->\n </div>\n </slot>\n `\n : null}\n </form>\n </dialog>\n `;\n }\n\n private _openModal() {\n this.open = true;\n }\n\n private _closeModal(e: Event, returnValue: string) {\n if (\n !this.beforeClose \|\|\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private _emitOpenEvent() {\n const event = new CustomEvent('on-open');\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n this._emitOpenEvent();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-modal': Modal;\n }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","secondaryDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","closeText","aiConnected","disableScroll","render","classes","modal","html","_openModal","classMap","e","_closeModal","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","reflect","customElement"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,WAAW,CAAC;AAInB,OAAO,SAAS,CAAC;AAMjB,OAAO,QAAQ,CAAC;AAChB;;;;;;GAMG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,qCAAqC;IAErC,iBAAiB,SAAM;IAEvB,uCAAuC;IAEvC,oBAAoB,SAAM;IAE1B;;;OAGG;IAEH,SAAS,SAAM;IAEf,qBAAqB;IAErB,IAAI,SAAM;IAEV,mGAAmG;IAEnG,SAAS,SAAa;IAEtB,kIAAkI;IAElI,IAAI,SAAY;IAEhB,iCAAiC;IAEjC,WAAW,EAAE,GAAG,CAKd;IAEF,oEAAoE;IAEpE,mBAAmB,SAAW;IAE9B;;;SAGK;IAEL,6BAA6B,SAAM;IAEnC,6DAA6D;IAE7D,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAE9C;;;SAGK;IAEL,WAAW,SAAY;IAEvB;;OAEG;IAEH,SAAS,EAAE,GAAG,CAKZ;IAEF,4EAA4E;IAE5E,MAAM,UAAS;IAEf,6JAA6J;IAE7J,eAAe,UAAS;IAExB,uJAAuJ;IAEvJ,OAAO,SAAK;IAEH,MAAM;~~IAwDf~~,OAAO,CAAC,aAAa;IA+EZ,OAAO,CAAC,iBAAiB,EAAE,GAAG;IAcvC,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,gBAAgB;CAMzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,YAAY,CAAC;KAClC;CACF"}
1	+ {"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,WAAW,CAAC;AAInB,OAAO,SAAS,CAAC;AAMjB,OAAO,QAAQ,CAAC;AAChB;;;;;;GAMG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,qCAAqC;IAErC,iBAAiB,SAAM;IAEvB,uCAAuC;IAEvC,oBAAoB,SAAM;IAE1B;;;OAGG;IAEH,SAAS,SAAM;IAEf,qBAAqB;IAErB,IAAI,SAAM;IAEV,mGAAmG;IAEnG,SAAS,SAAa;IAEtB,kIAAkI;IAElI,IAAI,SAAY;IAEhB,iCAAiC;IAEjC,WAAW,EAAE,GAAG,CAKd;IAEF,oEAAoE;IAEpE,mBAAmB,SAAW;IAE9B;;;SAGK;IAEL,6BAA6B,SAAM;IAEnC,6DAA6D;IAE7D,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAE9C;;;SAGK;IAEL,WAAW,SAAY;IAEvB;;OAEG;IAEH,SAAS,EAAE,GAAG,CAKZ;IAEF,4EAA4E;IAE5E,MAAM,UAAS;IAEf,6JAA6J;IAE7J,eAAe,UAAS;IAExB,uJAAuJ;IAEvJ,OAAO,SAAK;IAEH,MAAM;IAuDf,OAAO,CAAC,aAAa;IA+EZ,OAAO,CAAC,iBAAiB,EAAE,GAAG;IAcvC,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,gBAAgB;CAMzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,YAAY,CAAC;KAClC;CACF"}

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

@@ -73,18 +73,6 @@ kyn-card.notification-normal::part(card-wrapper) {
   background-color: var(--kd-color-background-card-background);
 }
-kyn-card.notification-mark-unread::part(card-wrapper) {
-  background-color: var(--kd-color-background-highlight-fill);
-  outline: 1px solid var(--kd-color-background-highlight-border);
-}
-kyn-card.notification-mark-unread::part(card-wrapper):hover {
-  outline: 2px solid var(--kd-color-background-card-hover);
-}
-kyn-card.notification-mark-read::part(card-wrapper) {
-  background-color: var(--kd-color-background-card-background);
-}
 .notification-title-wrap {
   display: flex;
   flex-direction: row;
@@ -270,12 +258,9 @@ kyn-card.notification-mark-read::part(card-wrapper) {
 .notification-normal .notification-title,
 .notification-normal .notification-description,
 .notification-normal .timestamp-text,
-.notification-mark-unread .notification-title,
-.notification-mark-unread .notification-description,
-.notification-mark-unread .timestamp-text,
-.notification-mark-read .notification-title,
-.notification-mark-read .notification-description,
-.notification-mark-read .timestamp-text {
+.notification-clickable .notification-title,
+.notification-clickable .notification-description,
+.notification-clickable .timestamp-text {
   color: var(--kd-color-text-level-primary);
 }
@@ -379,9 +364,10 @@ kyn-card.notification-mark-read::part(card-wrapper) {
 .error svg {
   fill: var(--kd-color-status-error-dark);
   display: flex;
-}`;let u=class extends l{constructor(){super(...arguments),this.notificationTitle="",this.notificationSubtitle="",this.timeStamp="",this.href="",this.tagStatus="default",this.type="normal",this.textStrings={success:"Success",warning:"Warning",info:"Info",error:"Error"},this.closeBtnDescription="Close",this.assistiveNotificationTypeText="",this.statusLabel="Status",this._tagColor={success:"success",warning:"warning",info:"cat01",error:"error"},this.unRead=!1,this.hideCloseButton=!1,this.timeout=8}render(){const t={"notification-normal":"normal"===this.type,"notification-inline":"inline"===this.type,"notification-toast":"toast"===this.type,"notification-error":("inline"===this.type||"toast"===this.type)&&"error"===this.tagStatus,"notification-success":("inline"===this.type||"toast"===this.type)&&"success"===this.tagStatus,"notification-warning":("inline"===this.type||"toast"===this.type)&&"warning"===this.tagStatus,"notification-info":("inline"===this.type||"toast"===this.type)&&"info"===this.tagStatus,"notification-default":("inline"===this.type||"toast"===this.type)&&"default"===this.tagStatus};return d`
+}`;let y=class extends l{constructor(){super(...arguments),this.notificationTitle="",this.notificationSubtitle="",this.timeStamp="",this.href="",this.tagStatus="default",this.type="normal",this.textStrings={success:"Success",warning:"Warning",info:"Info",error:"Error"},this.closeBtnDescription="Close",this.assistiveNotificationTypeText="",this.statusLabel="Status",this._tagColor={success:"success",warning:"warning",info:"cat01",error:"error"},this.unRead=!1,this.hideCloseButton=!1,this.timeout=8}render(){const t={"notification-normal":"normal"===this.type,"notification-inline":"inline"===this.type,"notification-toast":"toast"===this.type,"notification-error":("inline"===this.type||"toast"===this.type)&&"error"===this.tagStatus,"notification-success":("inline"===this.type||"toast"===this.type)&&"success"===this.tagStatus,"notification-warning":("inline"===this.type||"toast"===this.type)&&"warning"===this.tagStatus,"notification-info":("inline"===this.type||"toast"===this.type)&&"info"===this.tagStatus,"notification-default":("inline"===this.type||"toast"===this.type)&&"default"===this.tagStatus};return d`
       ${"clickable"===this.type?d`<kyn-card
-            class="${this.unRead?"notification-mark-unread":"notification-mark-read"}"
+            class="notification-clickable"
+            ?highlight=${this.unRead}
             type=${this.type}
             href=${this.href}
             target="_blank"
@@ -460,5 +446,5 @@ kyn-card.notification-mark-read::part(card-wrapper) {
           <div class="timestamp-text">${this.timeStamp}</div>
         </div>
       </div>
-    </div>`}updated(t){"toast"===this.type&&t.has("timeout")&&this.timeout>0&&setTimeout((()=>{this._close()}),1e3*this.timeout)}_close(){this.animate([{opacity:"1"},{opacity:"0"}],{duration:500,easing:"ease-in-out",fill:"forwards"}).onfinish=()=>{var t;null===(t=this.parentNode)||void 0===t||t.removeChild(this)};const t=new CustomEvent("on-close");this.dispatchEvent(t)}_handleClose(){this._close()}_handleCardClick(t){const i=new CustomEvent("on-notification-click",{detail:t.detail.origEvent});this.dispatchEvent(i)}};u.styles=g,t([o({type:String})],u.prototype,"notificationTitle",void 0),t([o({type:String})],u.prototype,"notificationSubtitle",void 0),t([o({type:String})],u.prototype,"timeStamp",void 0),t([o({type:String})],u.prototype,"href",void 0),t([o({type:String})],u.prototype,"tagStatus",void 0),t([o({type:String})],u.prototype,"type",void 0),t([o({type:Object})],u.prototype,"textStrings",void 0),t([o({type:String})],u.prototype,"closeBtnDescription",void 0),t([o({type:String})],u.prototype,"assistiveNotificationTypeText",void 0),t([o({type:String})],u.prototype,"notificationRole",void 0),t([o({type:String})],u.prototype,"statusLabel",void 0),t([n()],u.prototype,"_tagColor",void 0),t([o({type:Boolean,reflect:!0})],u.prototype,"unRead",void 0),t([o({type:Boolean})],u.prototype,"hideCloseButton",void 0),t([o({type:Number})],u.prototype,"timeout",void 0),u=t([r("kyn-notification")],u);export{u as Notification};
+    </div>`}updated(t){"toast"===this.type&&t.has("timeout")&&this.timeout>0&&setTimeout((()=>{this._close()}),1e3*this.timeout)}_close(){this.animate([{opacity:"1"},{opacity:"0"}],{duration:500,easing:"ease-in-out",fill:"forwards"}).onfinish=()=>{var t;null===(t=this.parentNode)||void 0===t||t.removeChild(this)};const t=new CustomEvent("on-close");this.dispatchEvent(t)}_handleClose(){this._close()}_handleCardClick(t){const i=new CustomEvent("on-notification-click",{detail:t.detail.origEvent});this.dispatchEvent(i)}};y.styles=g,t([o({type:String})],y.prototype,"notificationTitle",void 0),t([o({type:String})],y.prototype,"notificationSubtitle",void 0),t([o({type:String})],y.prototype,"timeStamp",void 0),t([o({type:String})],y.prototype,"href",void 0),t([o({type:String})],y.prototype,"tagStatus",void 0),t([o({type:String})],y.prototype,"type",void 0),t([o({type:Object})],y.prototype,"textStrings",void 0),t([o({type:String})],y.prototype,"closeBtnDescription",void 0),t([o({type:String})],y.prototype,"assistiveNotificationTypeText",void 0),t([o({type:String})],y.prototype,"notificationRole",void 0),t([o({type:String})],y.prototype,"statusLabel",void 0),t([n()],y.prototype,"_tagColor",void 0),t([o({type:Boolean,reflect:!0})],y.prototype,"unRead",void 0),t([o({type:Boolean})],y.prototype,"hideCloseButton",void 0),t([o({type:Number})],y.prototype,"timeout",void 0),y=t([r("kyn-notification")],y);export{y as Notification};
 //# sourceMappingURL=notification.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"notification.js","sources":["../../../../src/components/reusable/notification/notification.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport NotificationScss from './notification.scss';\nimport '../card';\nimport successIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg';\nimport warningIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport infoIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/information-filled.svg';\n\nimport '../tag';\n/*\n Notification component.\n * @slot unnamed - Slot for notification message body.\n * @slot actions - Slot for menu.\n * @fires on-notification-click - Emit event for clickable notification.\n * @fires on-close - Emits when an inline/toast notification closes.\n /\n\n@customElement('kyn-notification')\nexport class Notification extends LitElement {\n static override styles = NotificationScss;\n\n /* Notification Title (Required). /\n @property({ type: String })\n notificationTitle = '';\n\n /* Notification subtitle.(optional) /\n @property({ type: String })\n notificationSubtitle = '';\n\n /\n Timestamp of notification.\n * It is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.\n /\n @property({ type: String })\n timeStamp = '';\n\n /* Card href link /\n @property({ type: String })\n href = '';\n\n /* Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`. /\n @property({ type: String })\n tagStatus = 'default';\n\n /* Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel /\n @property({ type: String })\n type = 'normal';\n\n /* Customizable text strings. /\n @property({ type: Object })\n textStrings: any = {\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n };\n\n /* Close button description (Required to support accessibility). /\n @property({ type: String })\n closeBtnDescription = 'Close';\n\n /\n Assistive text for notification type.\n * Required for `'clickable'`, `'inline'` and `'toast'` notification types.\n * /\n @property({ type: String })\n assistiveNotificationTypeText = '';\n\n /* Notification role (Required to support accessibility). /\n @property({ type: String })\n notificationRole?: 'alert' \| 'log' \| 'status';\n\n /\n Status label (Required to support accessibility).\n * Assign the localized string value for the word Status.\n * /\n @property({ type: String })\n statusLabel = 'Status';\n\n /* Set tagColor based on provided tagStatus.\n * @internal\n /\n @state()\n _tagColor: any = {\n success: 'success',\n warning: 'warning',\n info: 'cat01',\n error: 'error',\n };\n\n /* Set notification mark read prop. Required ony for `type: 'clickable'`./\n @property({ type: Boolean, reflect: true })\n unRead = false;\n\n /* Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true. /\n @property({ type: Boolean })\n hideCloseButton = false;\n\n /* Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'` /\n @property({ type: Number })\n timeout = 8;\n\n override render() {\n const cardBgClasses = {\n 'notification-normal': this.type === 'normal',\n 'notification-inline': this.type === 'inline',\n 'notification-toast': this.type === 'toast',\n 'notification-error':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'error',\n 'notification-success':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'success',\n 'notification-warning':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'warning',\n 'notification-info':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'info',\n 'notification-default':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'default',\n };\n\n return html`\n ${this.type === 'clickable'\n ? html`<kyn-card\n class=\"${this.unRead\n ? 'notification-mark-unread'\n : 'notification-mark-read'}\"\n type=${this.type}\n href=${this.href}\n target=\"_blank\"\n rel=\"noopener\"\n @on-card-click=${(e: any) => this._handleCardClick(e)}\n hideBorder\n role=${ifDefined(this.notificationRole)}\n >\n <span id=\"notificationType\"\n >${this.assistiveNotificationTypeText}</span\n >\n ${this.renderInnerUI()}\n </kyn-card>`\n : html` <kyn-card\n type=${this.type}\n role=${ifDefined(this.notificationRole)}\n class=\"${classMap(cardBgClasses)}\"\n >\n ${this.type === 'inline' \|\| this.type === 'toast'\n ? html`<span id=\"notificationType\"\n >${this.assistiveNotificationTypeText}</span\n >`\n : null}\n ${this.renderInnerUI()}\n </kyn-card>`}\n `;\n }\n\n private renderInnerUI() {\n const notificationIcon: any = {\n success: successIcon,\n error: errorIcon,\n warning: warningIcon,\n info: infoIcon,\n };\n\n return html`<div class=\"notification-wrapper\">\n <div class=\"notification-title-wrap\">\n <div class=\"notification-head\">\n ${(this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus !== 'default'\n ? html` <span\n class=\"notification-state-icon ${this.tagStatus}\"\n slot=\"icon\"\n role=\"img\"\n aria-label=${`${this.textStrings[this.tagStatus]} icon`}\n >${unsafeSVG(notificationIcon[this.tagStatus])}</span\n >`\n : null}\n\n <div class=\"notification-title\">${this.notificationTitle}</div>\n\n ${this.notificationSubtitle !== '' &&\n (this.type === 'normal' \|\| this.type === 'clickable')\n ? html`\n <div class=\"notification-subtitle\">\n ${this.notificationSubtitle}\n </div>\n `\n : null}\n </div>\n\n <div>\n ${(this.type === 'toast' \|\| this.type === 'inline') &&\n !this.hideCloseButton\n ? html` <kyn-button\n class=\"notification-toast-close-btn\"\n kind=\"ghost\"\n size=\"small\"\n description=${ifDefined(this.closeBtnDescription)}\n @on-click=\"${() => this._handleClose()}\"\n >\n <span\n slot=\"icon\"\n role=\"img\"\n aria-label=${ifDefined(this.closeBtnDescription)}\n >${unsafeSVG(closeIcon)}</span\n >\n </kyn-button>`\n : null}\n <!-- actions slot could be an overflow menu, close icon (for other notification types) etc. -->\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n <div class=\"notification-description\">\n <slot></slot>\n </div>\n\n <div class=\"notification-content-wrapper\">\n <div class=\"status-tag\">\n ${this.tagStatus !== 'default' &&\n (this.type === 'normal' \|\| this.type === 'clickable')\n ? html` <span id=\"statusLabel\">${this.statusLabel}</span>\n <kyn-tag\n label=${this.textStrings[this.tagStatus]}\n tagColor=${this._tagColor[this.tagStatus]}\n ></kyn-tag>`\n : null}\n </div>\n <div class=\"timestamp-wrapper\">\n <div class=\"timestamp-text\">${this.timeStamp}</div>\n </div>\n </div>\n </div>`;\n }\n\n override updated(changedProperties: any) {\n // Close toast notification if timeout > 0\n if (\n this.type === 'toast' &&\n changedProperties.has('timeout') &&\n this.timeout > 0\n ) {\n setTimeout(() => {\n this._close();\n }, this.timeout 1000);\n }\n }\n\n // Remove toast from DOM\n private _close() {\n const animation = this.animate([{ opacity: '1' }, { opacity: '0' }], {\n duration: 500,\n easing: 'ease-in-out',\n fill: 'forwards',\n });\n animation.onfinish = () => {\n this.parentNode?.removeChild(this);\n };\n\n // emit on-close event\n const event = new CustomEvent('on-close');\n this.dispatchEvent(event);\n }\n\n private _handleClose() {\n this._close();\n }\n\n private _handleCardClick(e: any) {\n const event = new CustomEvent('on-notification-click', {\n detail: e.detail.origEvent,\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-notification': Notification;\n }\n}\n"],"names":["Notification","LitElement","constructor","this","notificationTitle","notificationSubtitle","timeStamp","href","tagStatus","type","textStrings","success","warning","info","error","closeBtnDescription","assistiveNotificationTypeText","statusLabel","_tagColor","unRead","hideCloseButton","timeout","render","cardBgClasses","html","e","_handleCardClick","ifDefined","notificationRole","renderInnerUI","classMap","notificationIcon","successIcon","errorIcon","warningIcon","infoIcon","unsafeSVG","_handleClose","closeIcon","updated","changedProperties","has","setTimeout","_close","animate","opacity","duration","easing","fill","onfinish","_a","parentNode","removeChild","event","CustomEvent","dispatchEvent","detail","origEvent","styles","NotificationScss","__decorate","property","String","prototype","Object","state","Boolean","reflect","Number","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"notification.js","sources":["../../../../src/components/reusable/notification/notification.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport NotificationScss from './notification.scss';\nimport '../card';\nimport successIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg';\nimport warningIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport infoIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/information-filled.svg';\n\nimport '../tag';\n/*\n Notification component.\n * @slot unnamed - Slot for notification message body.\n * @slot actions - Slot for menu.\n * @fires on-notification-click - Emit event for clickable notification.\n * @fires on-close - Emits when an inline/toast notification closes.\n /\n\n@customElement('kyn-notification')\nexport class Notification extends LitElement {\n static override styles = NotificationScss;\n\n /* Notification Title (Required). /\n @property({ type: String })\n notificationTitle = '';\n\n /* Notification subtitle.(optional) /\n @property({ type: String })\n notificationSubtitle = '';\n\n /\n Timestamp of notification.\n * It is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.\n /\n @property({ type: String })\n timeStamp = '';\n\n /* Card href link /\n @property({ type: String })\n href = '';\n\n /* Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`. /\n @property({ type: String })\n tagStatus = 'default';\n\n /* Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel /\n @property({ type: String })\n type = 'normal';\n\n /* Customizable text strings. /\n @property({ type: Object })\n textStrings: any = {\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n };\n\n /* Close button description (Required to support accessibility). /\n @property({ type: String })\n closeBtnDescription = 'Close';\n\n /\n Assistive text for notification type.\n * Required for `'clickable'`, `'inline'` and `'toast'` notification types.\n * /\n @property({ type: String })\n assistiveNotificationTypeText = '';\n\n /* Notification role (Required to support accessibility). /\n @property({ type: String })\n notificationRole?: 'alert' \| 'log' \| 'status';\n\n /\n Status label (Required to support accessibility).\n * Assign the localized string value for the word Status.\n * /\n @property({ type: String })\n statusLabel = 'Status';\n\n /* Set tagColor based on provided tagStatus.\n * @internal\n /\n @state()\n _tagColor: any = {\n success: 'success',\n warning: 'warning',\n info: 'cat01',\n error: 'error',\n };\n\n /* Set notification mark read prop. Required ony for `type: 'clickable'`./\n @property({ type: Boolean, reflect: true })\n unRead = false;\n\n /* Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true. /\n @property({ type: Boolean })\n hideCloseButton = false;\n\n /* Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'` /\n @property({ type: Number })\n timeout = 8;\n\n override render() {\n const cardBgClasses = {\n 'notification-normal': this.type === 'normal',\n 'notification-inline': this.type === 'inline',\n 'notification-toast': this.type === 'toast',\n 'notification-error':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'error',\n 'notification-success':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'success',\n 'notification-warning':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'warning',\n 'notification-info':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'info',\n 'notification-default':\n (this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus === 'default',\n };\n\n return html`\n ${this.type === 'clickable'\n ? html`<kyn-card\n class=\"notification-clickable\"\n ?highlight=${this.unRead}\n type=${this.type}\n href=${this.href}\n target=\"_blank\"\n rel=\"noopener\"\n @on-card-click=${(e: any) => this._handleCardClick(e)}\n hideBorder\n role=${ifDefined(this.notificationRole)}\n >\n <span id=\"notificationType\"\n >${this.assistiveNotificationTypeText}</span\n >\n ${this.renderInnerUI()}\n </kyn-card>`\n : html` <kyn-card\n type=${this.type}\n role=${ifDefined(this.notificationRole)}\n class=\"${classMap(cardBgClasses)}\"\n >\n ${this.type === 'inline' \|\| this.type === 'toast'\n ? html`<span id=\"notificationType\"\n >${this.assistiveNotificationTypeText}</span\n >`\n : null}\n ${this.renderInnerUI()}\n </kyn-card>`}\n `;\n }\n\n private renderInnerUI() {\n const notificationIcon: any = {\n success: successIcon,\n error: errorIcon,\n warning: warningIcon,\n info: infoIcon,\n };\n\n return html`<div class=\"notification-wrapper\">\n <div class=\"notification-title-wrap\">\n <div class=\"notification-head\">\n ${(this.type === 'inline' \|\| this.type === 'toast') &&\n this.tagStatus !== 'default'\n ? html` <span\n class=\"notification-state-icon ${this.tagStatus}\"\n slot=\"icon\"\n role=\"img\"\n aria-label=${`${this.textStrings[this.tagStatus]} icon`}\n >${unsafeSVG(notificationIcon[this.tagStatus])}</span\n >`\n : null}\n\n <div class=\"notification-title\">${this.notificationTitle}</div>\n\n ${this.notificationSubtitle !== '' &&\n (this.type === 'normal' \|\| this.type === 'clickable')\n ? html`\n <div class=\"notification-subtitle\">\n ${this.notificationSubtitle}\n </div>\n `\n : null}\n </div>\n\n <div>\n ${(this.type === 'toast' \|\| this.type === 'inline') &&\n !this.hideCloseButton\n ? html` <kyn-button\n class=\"notification-toast-close-btn\"\n kind=\"ghost\"\n size=\"small\"\n description=${ifDefined(this.closeBtnDescription)}\n @on-click=\"${() => this._handleClose()}\"\n >\n <span\n slot=\"icon\"\n role=\"img\"\n aria-label=${ifDefined(this.closeBtnDescription)}\n >${unsafeSVG(closeIcon)}</span\n >\n </kyn-button>`\n : null}\n <!-- actions slot could be an overflow menu, close icon (for other notification types) etc. -->\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n <div class=\"notification-description\">\n <slot></slot>\n </div>\n\n <div class=\"notification-content-wrapper\">\n <div class=\"status-tag\">\n ${this.tagStatus !== 'default' &&\n (this.type === 'normal' \|\| this.type === 'clickable')\n ? html` <span id=\"statusLabel\">${this.statusLabel}</span>\n <kyn-tag\n label=${this.textStrings[this.tagStatus]}\n tagColor=${this._tagColor[this.tagStatus]}\n ></kyn-tag>`\n : null}\n </div>\n <div class=\"timestamp-wrapper\">\n <div class=\"timestamp-text\">${this.timeStamp}</div>\n </div>\n </div>\n </div>`;\n }\n\n override updated(changedProperties: any) {\n // Close toast notification if timeout > 0\n if (\n this.type === 'toast' &&\n changedProperties.has('timeout') &&\n this.timeout > 0\n ) {\n setTimeout(() => {\n this._close();\n }, this.timeout 1000);\n }\n }\n\n // Remove toast from DOM\n private _close() {\n const animation = this.animate([{ opacity: '1' }, { opacity: '0' }], {\n duration: 500,\n easing: 'ease-in-out',\n fill: 'forwards',\n });\n animation.onfinish = () => {\n this.parentNode?.removeChild(this);\n };\n\n // emit on-close event\n const event = new CustomEvent('on-close');\n this.dispatchEvent(event);\n }\n\n private _handleClose() {\n this._close();\n }\n\n private _handleCardClick(e: any) {\n const event = new CustomEvent('on-notification-click', {\n detail: e.detail.origEvent,\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-notification': Notification;\n }\n}\n"],"names":["Notification","LitElement","constructor","this","notificationTitle","notificationSubtitle","timeStamp","href","tagStatus","type","textStrings","success","warning","info","error","closeBtnDescription","assistiveNotificationTypeText","statusLabel","_tagColor","unRead","hideCloseButton","timeout","render","cardBgClasses","html","e","_handleCardClick","ifDefined","notificationRole","renderInnerUI","classMap","notificationIcon","successIcon","errorIcon","warningIcon","infoIcon","unsafeSVG","_handleClose","closeIcon","updated","changedProperties","has","setTimeout","_close","animate","opacity","duration","easing","fill","onfinish","_a","parentNode","removeChild","event","CustomEvent","dispatchEvent","detail","origEvent","styles","NotificationScss","__decorate","property","String","prototype","Object","state","Boolean","reflect","Number","customElement"],"mappings":"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"}

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

@@ -25,7 +25,7 @@ export declare class TableCell extends LitElement {
      */
     width: string;
     /**
-     * Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.
+     * Sets a maximum width for the cell.
      * Accepts standard CSS width values (e.g., '150px', '50%').
      */
     maxWidth: string;

package/components/reusable/table/table-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-cell.js","sources":["../../../../src/components/reusable/table/table-cell.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ContextConsumer } from '@lit/context';\nimport { tableContext, TableContextType } from './table-context';\n\nimport styles from './table-cell.scss';\n\nimport { TABLE_CELL_ALIGN } from './defs';\n\n/*\n `kyn-td` Web Component.\n \n Represents a table cell (data cell) within Shidoka's design system tables.\n * Allows customization of alignment and can reflect the sort direction when\n * used within sortable columns.\n \n @slot unnamed - The content slot for adding table data inside the cell.\n /\n@customElement('kyn-td')\nexport class TableCell extends LitElement {\n static override styles = [styles];\n\n @property({ type: Boolean, reflect: true })\n dense = false;\n\n /* aria role.\n * @internal\n /\n @property({ type: String, reflect: true })\n override role = 'cell';\n\n /* Determines the text alignment of the table cell's content. /\n @property({ type: String, reflect: true })\n align: TABLE_CELL_ALIGN = TABLE_CELL_ALIGN.LEFT;\n\n /\n Sets a fixed width for the cell.\n * Accepts standard CSS width values (e.g., '150px', '50%').\n /\n @property({ type: String, reflect: true })\n width = '';\n\n /\n Sets a maximum width for the cell~~; contents exceeding this limit will be truncated with ellipsis~~.\n * Accepts standard CSS width values (e.g., '150px', '50%').\n /\n @property({ type: String, reflect: true })\n maxWidth = '';\n\n /\n Sets a minimum width for the cell;\n * Accepts standard CSS width values (e.g., '150px', '50%').\n * @type {string}\n /\n @property({ type: String, reflect: true })\n minWidth = '';\n\n /* Disables the cell. /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Dim the cell. /\n @property({ type: Boolean, reflect: true })\n dimmed = false;\n\n /\n Context consumer for the table context.\n * Updates the cell's dense properties when the context changes.\n * @private\n * @ignore\n * @type {ContextConsumer<TableContextType, TableCell>}\n /\n @state()\n // @ts-expect-error - This is a context consumer\n private _contextConsumer = new ContextConsumer(\n this,\n tableContext,\n (context) => {\n if (context) this.handleContextChange(context);\n },\n true\n );\n\n /\n Updates the cell's dense properties when the context changes.\n * @param {TableContextType} context - The updated context.\n */\n handleContextChange = ({ dense }: TableContextType) => {\n if (typeof dense == 'boolean') {\n this.dense = dense;\n }\n };\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (this.maxWidth && changedProperties.has('maxWidth')) {\n this.style.setProperty('--kyn-td-max-width', this.maxWidth);\n }\n\n if (this.width && changedProperties.has('width')) {\n this.style.setProperty('--kyn-td-width', this.width);\n }\n\n if (this.minWidth && changedProperties.has('minWidth')) {\n this.style.setProperty('--kyn-td-min-width', this.minWidth);\n }\n }\n\n override render() {\n return html`\n <div class=\"slot-wrapper\">\n <slot></slot>\n </div>\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-td': TableCell;\n }\n}\n"],"names":["TableCell","LitElement","constructor","this","dense","role","align","TABLE_CELL_ALIGN","LEFT","width","maxWidth","minWidth","disabled","dimmed","_contextConsumer","ContextConsumer","tableContext","context","handleContextChange","updated","changedProperties","super","has","style","setProperty","render","html","styles","__decorate","property","type","Boolean","reflect","prototype","String","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmBO,IAAMA,EAAN,cAAwBC,EAAxB,WAAAC,uBAILC,KAAKC,OAAG,EAMCD,KAAIE,KAAG,OAIhBF,KAAAG,MAA0BC,EAAiBC,KAO3CL,KAAKM,MAAG,GAORN,KAAQO,SAAG,GAQXP,KAAQQ,SAAG,GAIXR,KAAQS,UAAG,EAIXT,KAAMU,QAAG,EAWDV,KAAgBW,iBAAG,IAAIC,EAC7BZ,KACAa,GACCC,IACKA,GAASd,KAAKe,oBAAoBD,EAAQ,IAEhD,GAOFd,KAAAe,oBAAsB,EAAGd,YACH,kBAATA,IACTD,KAAKC,MAAQA,EACd,CAyBJ,CAtBU,OAAAe,CAAQC,GACfC,MAAMF,QAAQC,GACVjB,KAAKO,UAAYU,EAAkBE,IAAI,aACzCnB,KAAKoB,MAAMC,YAAY,qBAAsBrB,KAAKO,UAGhDP,KAAKM,OAASW,EAAkBE,IAAI,UACtCnB,KAAKoB,MAAMC,YAAY,iBAAkBrB,KAAKM,OAG5CN,KAAKQ,UAAYS,EAAkBE,IAAI,aACzCnB,KAAKoB,MAAMC,YAAY,qBAAsBrB,KAAKQ,SAErD,CAEQ,MAAAc,GACP,OAAOC,CAAI;;;;KAKZ,GA9Fe1B,EAAA2B,OAAS,CAACA,GAG1BC,EAAA,CADCC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACtBhC,EAAAiC,UAAA,aAAA,GAMdL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACZhC,EAAAiC,UAAA,YAAA,GAIvBL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACahC,EAAAiC,UAAA,aAAA,GAOhDL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACxBhC,EAAAiC,UAAA,aAAA,GAOXL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACrBhC,EAAAiC,UAAA,gBAAA,GAQdL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACrBhC,EAAAiC,UAAA,gBAAA,GAIdL,EAAA,CADCC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACnBhC,EAAAiC,UAAA,gBAAA,GAIjBL,EAAA,CADCC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACrBhC,EAAAiC,UAAA,cAAA,GAWfL,EAAA,CAFCO,KASCnC,EAAAiC,UAAA,wBAAA,GA9DSjC,EAAS4B,EAAA,CADrBQ,EAAc,WACFpC"}
1	+ {"version":3,"file":"table-cell.js","sources":["../../../../src/components/reusable/table/table-cell.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ContextConsumer } from '@lit/context';\nimport { tableContext, TableContextType } from './table-context';\n\nimport styles from './table-cell.scss';\n\nimport { TABLE_CELL_ALIGN } from './defs';\n\n/*\n `kyn-td` Web Component.\n \n Represents a table cell (data cell) within Shidoka's design system tables.\n * Allows customization of alignment and can reflect the sort direction when\n * used within sortable columns.\n \n @slot unnamed - The content slot for adding table data inside the cell.\n /\n@customElement('kyn-td')\nexport class TableCell extends LitElement {\n static override styles = [styles];\n\n @property({ type: Boolean, reflect: true })\n dense = false;\n\n /* aria role.\n * @internal\n /\n @property({ type: String, reflect: true })\n override role = 'cell';\n\n /* Determines the text alignment of the table cell's content. /\n @property({ type: String, reflect: true })\n align: TABLE_CELL_ALIGN = TABLE_CELL_ALIGN.LEFT;\n\n /\n Sets a fixed width for the cell.\n * Accepts standard CSS width values (e.g., '150px', '50%').\n /\n @property({ type: String, reflect: true })\n width = '';\n\n /\n Sets a maximum width for the cell.\n * Accepts standard CSS width values (e.g., '150px', '50%').\n /\n @property({ type: String, reflect: true })\n maxWidth = '';\n\n /\n Sets a minimum width for the cell;\n * Accepts standard CSS width values (e.g., '150px', '50%').\n * @type {string}\n /\n @property({ type: String, reflect: true })\n minWidth = '';\n\n /* Disables the cell. /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Dim the cell. /\n @property({ type: Boolean, reflect: true })\n dimmed = false;\n\n /\n Context consumer for the table context.\n * Updates the cell's dense properties when the context changes.\n * @private\n * @ignore\n * @type {ContextConsumer<TableContextType, TableCell>}\n /\n @state()\n // @ts-expect-error - This is a context consumer\n private _contextConsumer = new ContextConsumer(\n this,\n tableContext,\n (context) => {\n if (context) this.handleContextChange(context);\n },\n true\n );\n\n /\n Updates the cell's dense properties when the context changes.\n * @param {TableContextType} context - The updated context.\n */\n handleContextChange = ({ dense }: TableContextType) => {\n if (typeof dense == 'boolean') {\n this.dense = dense;\n }\n };\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (this.maxWidth && changedProperties.has('maxWidth')) {\n this.style.setProperty('--kyn-td-max-width', this.maxWidth);\n }\n\n if (this.width && changedProperties.has('width')) {\n this.style.setProperty('--kyn-td-width', this.width);\n }\n\n if (this.minWidth && changedProperties.has('minWidth')) {\n this.style.setProperty('--kyn-td-min-width', this.minWidth);\n }\n }\n\n override render() {\n return html`\n <div class=\"slot-wrapper\">\n <slot></slot>\n </div>\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-td': TableCell;\n }\n}\n"],"names":["TableCell","LitElement","constructor","this","dense","role","align","TABLE_CELL_ALIGN","LEFT","width","maxWidth","minWidth","disabled","dimmed","_contextConsumer","ContextConsumer","tableContext","context","handleContextChange","updated","changedProperties","super","has","style","setProperty","render","html","styles","__decorate","property","type","Boolean","reflect","prototype","String","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmBO,IAAMA,EAAN,cAAwBC,EAAxB,WAAAC,uBAILC,KAAKC,OAAG,EAMCD,KAAIE,KAAG,OAIhBF,KAAAG,MAA0BC,EAAiBC,KAO3CL,KAAKM,MAAG,GAORN,KAAQO,SAAG,GAQXP,KAAQQ,SAAG,GAIXR,KAAQS,UAAG,EAIXT,KAAMU,QAAG,EAWDV,KAAgBW,iBAAG,IAAIC,EAC7BZ,KACAa,GACCC,IACKA,GAASd,KAAKe,oBAAoBD,EAAQ,IAEhD,GAOFd,KAAAe,oBAAsB,EAAGd,YACH,kBAATA,IACTD,KAAKC,MAAQA,EACd,CAyBJ,CAtBU,OAAAe,CAAQC,GACfC,MAAMF,QAAQC,GACVjB,KAAKO,UAAYU,EAAkBE,IAAI,aACzCnB,KAAKoB,MAAMC,YAAY,qBAAsBrB,KAAKO,UAGhDP,KAAKM,OAASW,EAAkBE,IAAI,UACtCnB,KAAKoB,MAAMC,YAAY,iBAAkBrB,KAAKM,OAG5CN,KAAKQ,UAAYS,EAAkBE,IAAI,aACzCnB,KAAKoB,MAAMC,YAAY,qBAAsBrB,KAAKQ,SAErD,CAEQ,MAAAc,GACP,OAAOC,CAAI;;;;KAKZ,GA9Fe1B,EAAA2B,OAAS,CAACA,GAG1BC,EAAA,CADCC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACtBhC,EAAAiC,UAAA,aAAA,GAMdL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACZhC,EAAAiC,UAAA,YAAA,GAIvBL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACahC,EAAAiC,UAAA,aAAA,GAOhDL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACxBhC,EAAAiC,UAAA,aAAA,GAOXL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACrBhC,EAAAiC,UAAA,gBAAA,GAQdL,EAAA,CADCC,EAAS,CAAEC,KAAMI,OAAQF,SAAS,KACrBhC,EAAAiC,UAAA,gBAAA,GAIdL,EAAA,CADCC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACnBhC,EAAAiC,UAAA,gBAAA,GAIjBL,EAAA,CADCC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACrBhC,EAAAiC,UAAA,cAAA,GAWfL,EAAA,CAFCO,KASCnC,EAAAiC,UAAA,wBAAA,GA9DSjC,EAAS4B,EAAA,CADrBQ,EAAc,WACFpC"}

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

@@ -69,7 +69,7 @@ export declare class TableHeader extends LitElement {
      */
     width: string;
     /**
-     * Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.
+     * Sets a maximum width for the cell.
      * Accepts standard CSS width values (e.g., '150px', '50%').
      */
     maxWidth: string;

package/components/reusable/table/table-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-header.js","sources":["../../../../src/components/reusable/table/table-header.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { html, LitElement, PropertyValues } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedNodes,\n state,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { ContextConsumer } from '@lit/context';\nimport { tableContext, TableContextType } from './table-context';\n\nimport arrowUpIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-up.svg';\nimport styles from './table-header.scss';\n\nimport { SORT_DIRECTION, TABLE_CELL_ALIGN } from './defs';\n\n/*\n `kyn-th` Web Component.\n \n Represents a custom table header cell (`<th>`) for Shidoka's design system tables.\n * Provides sorting functionality when enabled and allows alignment customization.\n \n @fires on-sort-changed - Dispatched when the sort direction is changed.\n * @slot unnamed - The content slot for adding header text or content.\n /\n@customElement('kyn-th')\nexport class TableHeader extends LitElement {\n static override styles = [styles];\n\n /* aria role.\n * @internal\n /\n @property({ type: String, reflect: true })\n override role = 'columnheader';\n\n /* Determines if the cell should have a denser layout. /\n @property({ type: Boolean, reflect: true })\n dense = false;\n\n /\n Context consumer for the table context.\n * Updates the cell's dense properties when the context changes.\n * @private\n * @ignore\n * @type {ContextConsumer<TableContextType, TableHeader>}\n /\n @state()\n // @ts-expect-error - This is a context consumer\n private _contextConsumer = new ContextConsumer(\n this,\n tableContext,\n (context) => {\n if (context) this.handleContextChange(context);\n },\n true\n );\n\n /\n Updates the cell's dense properties when the context changes.\n * @param {TableContextType} context - The updated context.\n /\n handleContextChange = ({ dense }: TableContextType) => {\n if (typeof dense == 'boolean') {\n this.dense = dense;\n }\n };\n\n /\n Specifies the alignment of the content within the table header.\n * Options: 'left', 'center', 'right'\n /\n @property({ type: String, reflect: true })\n align: TABLE_CELL_ALIGN = TABLE_CELL_ALIGN.LEFT;\n\n /\n Specifies if the column is sortable.\n * If set to true, an arrow icon will be displayed unpon hover,\n * allowing the user to toggle sort directions.\n /\n @property({ type: Boolean, reflect: true })\n sortable = false;\n\n /* Specifies the direction of sorting applied to the column. /\n @property({ type: String, reflect: true })\n sortDirection: SORT_DIRECTION = SORT_DIRECTION.DEFAULT;\n\n /\n The textual content associated with this component.\n * Represents the primary content or label that will be displayed.\n /\n @property({ type: String })\n headerLabel = '';\n\n /\n The unique identifier representing this column header.\n * Used to distinguish between different sortable columns and\n * to ensure that only one column is sorted at a time.\n /\n @property({ type: String })\n sortKey = '';\n\n /\n Determines whether the content should be hidden from visual view but remain accessible\n * to screen readers for accessibility purposes. When set to `true`, the content\n * will not be visibly shown, but its content can still be read by screen readers.\n * This is especially useful for providing additional context or information to\n * assistive technologies without cluttering the visual UI.\n /\n @property({ type: Boolean })\n visiblyHidden = false;\n\n /\n Sets a fixed width for the cell.\n * Accepts standard CSS width values (e.g., '150px', '50%').\n /\n @property({ type: String, reflect: true })\n width = '';\n\n /\n Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\n * Accepts standard CSS width values (e.g., '150px', '50%').\n /\n @property({ type: String, reflect: true })\n maxWidth = '';\n\n /\n Sets a minimum width for the cell;\n * Accepts standard CSS width values (e.g., '150px', '50%').\n * @type {string}\n /\n @property({ type: String, reflect: true })\n minWidth = '';\n\n /\n @ignore\n /\n @queryAssignedNodes({ flatten: true })\n listItems!: Array<Node>;\n\n /\n Resets the sorting direction of the component to its default state.\n * Useful for initializing or clearing any applied sorting on the element.\n /\n resetSort() {\n this.sortDirection = SORT_DIRECTION.DEFAULT;\n }\n\n /\n Assistive text for screen readers.\n * @ignore\n /\n @state()\n assistiveText = '';\n\n /\n Toggles the sort direction between ascending, descending, and default states.\n * It also dispatches an event to notify parent components of the sorting change.\n /\n private toggleSortDirection() {\n if (!this.sortKey) {\n console.error('sortKey is missing for a sortable column.');\n return;\n }\n\n switch (this.sortDirection) {\n case SORT_DIRECTION.DEFAULT:\n case SORT_DIRECTION.DESC: {\n this.sortDirection = SORT_DIRECTION.ASC;\n const assistiveText1 = `Column header ${this.sortKey} sorted in ascending order`;\n this.assistiveText =\n this.assistiveText === '' \|\| this.assistiveText === assistiveText1\n ? `${assistiveText1}.`\n : assistiveText1;\n break;\n }\n case SORT_DIRECTION.ASC: {\n this.sortDirection = SORT_DIRECTION.DESC;\n const assistiveText2 = `Column header ${this.sortKey} sorted in descending order`;\n this.assistiveText =\n this.assistiveText === '' \|\| this.assistiveText === assistiveText2\n ? `${assistiveText2}.`\n : assistiveText2;\n break;\n }\n }\n\n // Dispatch event to notify parent components of the sorting change\n this.dispatchEvent(\n new CustomEvent('on-sort-changed', {\n bubbles: true,\n composed: true,\n detail: { sortDirection: this.sortDirection, sortKey: this.sortKey },\n })\n );\n }\n\n override updated(changedProperties: PropertyValues) {\n this.getTextContent();\n\n super.updated(changedProperties);\n if (this.maxWidth && changedProperties.has('maxWidth')) {\n this.style.setProperty('--kyn-th-max-width', this.maxWidth);\n }\n\n if (this.width && changedProperties.has('width')) {\n this.style.setProperty('--kyn-th-width', this.width);\n }\n\n if (this.minWidth && changedProperties.has('minWidth')) {\n this.style.setProperty('--kyn-th-min-width', this.minWidth);\n }\n }\n\n getTextContent() {\n const nonWhitespaceNodes = this.listItems.filter((node) => {\n return (\n node?.nodeType !== Node.TEXT_NODE \|\| node?.textContent?.trim() !== ''\n );\n });\n\n this.headerLabel = nonWhitespaceNodes[0]?.textContent \|\| '';\n }\n\n override render() {\n const iconClasses = {\n 'sort-icon': true,\n 'sort-icon--sorting': this.sortDirection !== SORT_DIRECTION.DEFAULT,\n 'sort-icon--sorting-asc': this.sortDirection === SORT_DIRECTION.ASC,\n 'sort-icon--sorting-desc': this.sortDirection === SORT_DIRECTION.DESC,\n };\n\n const slotClasses = {\n 'slot-wrapper': true,\n 'sr-only': this.visiblyHidden,\n };\n\n /\n Accessibility Enhancements:\n * - role: Sets the appropriate role for interactive headers (e.g., when sortable).\n * - ariaSort: Indicates the sorting direction to assistive technologies.\n * - ariaLabel: Provides a descriptive label to assistive technologies for sortable headers.\n * - tabIndex: Enables keyboard interaction for sortable headers.\n * - onKeyDown: Handles keyboard events for sortable headers to allow sorting via the keyboard.\n */\n const role = this.sortable ? 'button' : undefined;\n // const arialSort = this.sortable ? this.sortDirection : undefined;\n const ariaLabel =\n this.sortable && this.headerLabel\n ? `Sort by ${this.headerLabel}`\n : undefined;\n const tabIndex = this.sortable ? 0 : undefined;\n const onKeyDown = this.sortable\n ? (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n this.toggleSortDirection();\n }\n }\n : undefined;\n\n return html`\n <div\n class=\"container\"\n role=${ifDefined(role)}\n @click=${this.sortable ? () => this.toggleSortDirection() : undefined}\n aria-label=${ifDefined(ariaLabel)}\n tabindex=${ifDefined(tabIndex)}\n @keydown=${onKeyDown}\n >\n <div class=${classMap(slotClasses)}>\n <slot></slot>\n </div>\n ${this.sortable\n ? html`<span class=${classMap(iconClasses)}\n >${unsafeSVG(arrowUpIcon)}</span\n >`\n : null}\n\n <div\n class=\"assistive-text\"\n role=\"status\"\n aria-live=\"polite\"\n aria-relevant=\"additions text\"\n >\n ${this.assistiveText}\n </div>\n </div>\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-th': TableHeader;\n }\n}\n"],"names":["TableHeader","LitElement","constructor","this","role","dense","_contextConsumer","ContextConsumer","tableContext","context","handleContextChange","align","TABLE_CELL_ALIGN","LEFT","sortable","sortDirection","SORT_DIRECTION","DEFAULT","headerLabel","sortKey","visiblyHidden","width","maxWidth","minWidth","assistiveText","resetSort","toggleSortDirection","DESC","ASC","assistiveText1","assistiveText2","dispatchEvent","CustomEvent","bubbles","composed","detail","console","error","updated","changedProperties","getTextContent","super","has","style","setProperty","nonWhitespaceNodes","listItems","filter","node","nodeType","Node","TEXT_NODE","_a","textContent","trim","render","iconClasses","slotClasses","undefined","ariaLabel","tabIndex","onKeyDown","e","key","html","ifDefined","classMap","unsafeSVG","arrowUpIcon","styles","__decorate","property","type","String","reflect","prototype","Boolean","state","queryAssignedNodes","flatten","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"table-header.js","sources":["../../../../src/components/reusable/table/table-header.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { html, LitElement, PropertyValues } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedNodes,\n state,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { ContextConsumer } from '@lit/context';\nimport { tableContext, TableContextType } from './table-context';\n\nimport arrowUpIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-up.svg';\nimport styles from './table-header.scss';\n\nimport { SORT_DIRECTION, TABLE_CELL_ALIGN } from './defs';\n\n/*\n `kyn-th` Web Component.\n \n Represents a custom table header cell (`<th>`) for Shidoka's design system tables.\n * Provides sorting functionality when enabled and allows alignment customization.\n \n @fires on-sort-changed - Dispatched when the sort direction is changed.\n * @slot unnamed - The content slot for adding header text or content.\n /\n@customElement('kyn-th')\nexport class TableHeader extends LitElement {\n static override styles = [styles];\n\n /* aria role.\n * @internal\n /\n @property({ type: String, reflect: true })\n override role = 'columnheader';\n\n /* Determines if the cell should have a denser layout. /\n @property({ type: Boolean, reflect: true })\n dense = false;\n\n /\n Context consumer for the table context.\n * Updates the cell's dense properties when the context changes.\n * @private\n * @ignore\n * @type {ContextConsumer<TableContextType, TableHeader>}\n /\n @state()\n // @ts-expect-error - This is a context consumer\n private _contextConsumer = new ContextConsumer(\n this,\n tableContext,\n (context) => {\n if (context) this.handleContextChange(context);\n },\n true\n );\n\n /\n Updates the cell's dense properties when the context changes.\n * @param {TableContextType} context - The updated context.\n /\n handleContextChange = ({ dense }: TableContextType) => {\n if (typeof dense == 'boolean') {\n this.dense = dense;\n }\n };\n\n /\n Specifies the alignment of the content within the table header.\n * Options: 'left', 'center', 'right'\n /\n @property({ type: String, reflect: true })\n align: TABLE_CELL_ALIGN = TABLE_CELL_ALIGN.LEFT;\n\n /\n Specifies if the column is sortable.\n * If set to true, an arrow icon will be displayed unpon hover,\n * allowing the user to toggle sort directions.\n /\n @property({ type: Boolean, reflect: true })\n sortable = false;\n\n /* Specifies the direction of sorting applied to the column. /\n @property({ type: String, reflect: true })\n sortDirection: SORT_DIRECTION = SORT_DIRECTION.DEFAULT;\n\n /\n The textual content associated with this component.\n * Represents the primary content or label that will be displayed.\n /\n @property({ type: String })\n headerLabel = '';\n\n /\n The unique identifier representing this column header.\n * Used to distinguish between different sortable columns and\n * to ensure that only one column is sorted at a time.\n /\n @property({ type: String })\n sortKey = '';\n\n /\n Determines whether the content should be hidden from visual view but remain accessible\n * to screen readers for accessibility purposes. When set to `true`, the content\n * will not be visibly shown, but its content can still be read by screen readers.\n * This is especially useful for providing additional context or information to\n * assistive technologies without cluttering the visual UI.\n /\n @property({ type: Boolean })\n visiblyHidden = false;\n\n /\n Sets a fixed width for the cell.\n * Accepts standard CSS width values (e.g., '150px', '50%').\n /\n @property({ type: String, reflect: true })\n width = '';\n\n /\n Sets a maximum width for the cell.\n * Accepts standard CSS width values (e.g., '150px', '50%').\n /\n @property({ type: String, reflect: true })\n maxWidth = '';\n\n /\n Sets a minimum width for the cell;\n * Accepts standard CSS width values (e.g., '150px', '50%').\n * @type {string}\n /\n @property({ type: String, reflect: true })\n minWidth = '';\n\n /\n @ignore\n /\n @queryAssignedNodes({ flatten: true })\n listItems!: Array<Node>;\n\n /\n Resets the sorting direction of the component to its default state.\n * Useful for initializing or clearing any applied sorting on the element.\n /\n resetSort() {\n this.sortDirection = SORT_DIRECTION.DEFAULT;\n }\n\n /\n Assistive text for screen readers.\n * @ignore\n /\n @state()\n assistiveText = '';\n\n /\n Toggles the sort direction between ascending, descending, and default states.\n * It also dispatches an event to notify parent components of the sorting change.\n /\n private toggleSortDirection() {\n if (!this.sortKey) {\n console.error('sortKey is missing for a sortable column.');\n return;\n }\n\n switch (this.sortDirection) {\n case SORT_DIRECTION.DEFAULT:\n case SORT_DIRECTION.DESC: {\n this.sortDirection = SORT_DIRECTION.ASC;\n const assistiveText1 = `Column header ${this.sortKey} sorted in ascending order`;\n this.assistiveText =\n this.assistiveText === '' \|\| this.assistiveText === assistiveText1\n ? `${assistiveText1}.`\n : assistiveText1;\n break;\n }\n case SORT_DIRECTION.ASC: {\n this.sortDirection = SORT_DIRECTION.DESC;\n const assistiveText2 = `Column header ${this.sortKey} sorted in descending order`;\n this.assistiveText =\n this.assistiveText === '' \|\| this.assistiveText === assistiveText2\n ? `${assistiveText2}.`\n : assistiveText2;\n break;\n }\n }\n\n // Dispatch event to notify parent components of the sorting change\n this.dispatchEvent(\n new CustomEvent('on-sort-changed', {\n bubbles: true,\n composed: true,\n detail: { sortDirection: this.sortDirection, sortKey: this.sortKey },\n })\n );\n }\n\n override updated(changedProperties: PropertyValues) {\n this.getTextContent();\n\n super.updated(changedProperties);\n if (this.maxWidth && changedProperties.has('maxWidth')) {\n this.style.setProperty('--kyn-th-max-width', this.maxWidth);\n }\n\n if (this.width && changedProperties.has('width')) {\n this.style.setProperty('--kyn-th-width', this.width);\n }\n\n if (this.minWidth && changedProperties.has('minWidth')) {\n this.style.setProperty('--kyn-th-min-width', this.minWidth);\n }\n }\n\n getTextContent() {\n const nonWhitespaceNodes = this.listItems.filter((node) => {\n return (\n node?.nodeType !== Node.TEXT_NODE \|\| node?.textContent?.trim() !== ''\n );\n });\n\n this.headerLabel = nonWhitespaceNodes[0]?.textContent \|\| '';\n }\n\n override render() {\n const iconClasses = {\n 'sort-icon': true,\n 'sort-icon--sorting': this.sortDirection !== SORT_DIRECTION.DEFAULT,\n 'sort-icon--sorting-asc': this.sortDirection === SORT_DIRECTION.ASC,\n 'sort-icon--sorting-desc': this.sortDirection === SORT_DIRECTION.DESC,\n };\n\n const slotClasses = {\n 'slot-wrapper': true,\n 'sr-only': this.visiblyHidden,\n };\n\n /\n Accessibility Enhancements:\n * - role: Sets the appropriate role for interactive headers (e.g., when sortable).\n * - ariaSort: Indicates the sorting direction to assistive technologies.\n * - ariaLabel: Provides a descriptive label to assistive technologies for sortable headers.\n * - tabIndex: Enables keyboard interaction for sortable headers.\n * - onKeyDown: Handles keyboard events for sortable headers to allow sorting via the keyboard.\n */\n const role = this.sortable ? 'button' : undefined;\n // const arialSort = this.sortable ? this.sortDirection : undefined;\n const ariaLabel =\n this.sortable && this.headerLabel\n ? `Sort by ${this.headerLabel}`\n : undefined;\n const tabIndex = this.sortable ? 0 : undefined;\n const onKeyDown = this.sortable\n ? (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n this.toggleSortDirection();\n }\n }\n : undefined;\n\n return html`\n <div\n class=\"container\"\n role=${ifDefined(role)}\n @click=${this.sortable ? () => this.toggleSortDirection() : undefined}\n aria-label=${ifDefined(ariaLabel)}\n tabindex=${ifDefined(tabIndex)}\n @keydown=${onKeyDown}\n >\n <div class=${classMap(slotClasses)}>\n <slot></slot>\n </div>\n ${this.sortable\n ? html`<span class=${classMap(iconClasses)}\n >${unsafeSVG(arrowUpIcon)}</span\n >`\n : null}\n\n <div\n class=\"assistive-text\"\n role=\"status\"\n aria-live=\"polite\"\n aria-relevant=\"additions text\"\n >\n ${this.assistiveText}\n </div>\n </div>\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-th': TableHeader;\n }\n}\n"],"names":["TableHeader","LitElement","constructor","this","role","dense","_contextConsumer","ContextConsumer","tableContext","context","handleContextChange","align","TABLE_CELL_ALIGN","LEFT","sortable","sortDirection","SORT_DIRECTION","DEFAULT","headerLabel","sortKey","visiblyHidden","width","maxWidth","minWidth","assistiveText","resetSort","toggleSortDirection","DESC","ASC","assistiveText1","assistiveText2","dispatchEvent","CustomEvent","bubbles","composed","detail","console","error","updated","changedProperties","getTextContent","super","has","style","setProperty","nonWhitespaceNodes","listItems","filter","node","nodeType","Node","TEXT_NODE","_a","textContent","trim","render","iconClasses","slotClasses","undefined","ariaLabel","tabIndex","onKeyDown","e","key","html","ifDefined","classMap","unsafeSVG","arrowUpIcon","styles","__decorate","property","type","String","reflect","prototype","Boolean","state","queryAssignedNodes","flatten","customElement"],"mappings":"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"}

package/package.json CHANGED Viewed

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