@kyndryl-design-system/shidoka-applications 2.9.3 → 2.10.0

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

@@ -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 AI theme. */
+    aiConnected: boolean;
     /** Set this to `true` for highlight */
     highlight: boolean;
     render(): import("lit").TemplateResult<1>;

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

@@ -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;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"}
+{"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,WAAW,UAAS;IACpB,uCAAuC;IAEvC,SAAS,UAAS;IAET,MAAM;IAmCf,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

@@ -1,4 +1,4 @@
-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`*,
+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 as a,s as i,x as l}from"../../../vendor/lit-element-3185f710.js";var d=a`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -37,10 +37,19 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
   position: relative;
   padding: 16px;
   background-color: var(--kd-color-background-container-default);
-  outline: 1px solid var(--kd-color-border-level-secondary);
+  outline: 1px solid var(--kd-color-border-card-default);
   border-radius: 8px;
   height: 100%;
 }
+.card-wrapper.ai-Connected {
+  background-color: var(--kd-color-background-ui-hollow-default);
+  outline: 1px solid var(--kd-color-border-variants-light);
+}
+.card-wrapper.ai-highlight {
+  outline: 1px solid var(--kd-color-border-button-ai-state-default);
+  background: var(--kd-color-background-container-ai-default);
+  color: var(--kd-color-text-level-primary);
+}
 .card-wrapper-clickable {
   position: relative;
   display: inline-block;
@@ -61,15 +70,40 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
   outline-color: var(--kd-color-border-ui-hover);
   box-shadow: var(--kd-elevation-level-2);
 }
+.card-wrapper-clickable.ai-Connected {
+  background-color: var(--kd-color-background-ui-hollow-default);
+}
+.card-wrapper-clickable.ai-Connected:hover {
+  outline-color: var(--kd-color-border-button-ai-state-hover);
+  box-shadow: var(--kd-elevation-level-2-ai);
+}
+.card-wrapper-clickable.ai-Connected:focus {
+  outline-color: var(--kd-color-border-button-ai-state-hover);
+  box-shadow: var(--kd-elevation-level-2-ai);
+}
+.card-wrapper-clickable.ai-highlight {
+  background: var(--kd-color-background-container-ai-default);
+}
+.card-wrapper-clickable.ai-highlight:hover {
+  outline-color: var(--kd-color-border-button-ai-state-hover);
+  box-shadow: var(--kd-elevation-level-2-ai);
+}
+.card-wrapper-clickable.ai-highlight:focus {
+  outline-color: var(--kd-color-border-button-ai-state-hover);
+  box-shadow: var(--kd-elevation-level-2-ai);
+}
 .card-border {
-  outline: 1px solid var(--kd-color-border-level-secondary);
+  outline: 1px solid var(--kd-color-border-card-clickable);
   box-shadow: var(--kd-elevation-level-1);
 }
+.card-border.ai-Connected {
+  outline: 1px solid var(--kd-color-border-button-ai-state-default);
+}
 .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
+}`;let c=class extends i{constructor(){super(...arguments),this.type="normal",this.href="",this.rel="",this.target="_self",this.hideBorder=!1,this.aiConnected=!1,this.highlight=!1}render(){const r={"card-wrapper-clickable":!0,"card-border":!1===this.hideBorder,"ai-Connected":this.aiConnected,"card-highlight":this.highlight,"ai-highlight":this.aiConnected&&this.highlight},o={"card-wrapper":!0,"ai-Connected":this.aiConnected,"card-highlight":this.highlight,"ai-highlight":this.aiConnected&&this.highlight};return l`${"clickable"===this.type?l`<a
           part="card-wrapper"
           class="${e(r)}"
           href=${this.href}
@@ -78,10 +112,10 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
           @click=${r=>this.handleClick(r)}
         >
           <slot></slot>
-        </a>`:d`<div
+        </a>`:l`<div
           part="card-wrapper"
           class="${e(o)}"
         >
           <slot></slot>
-        </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};
+        </div>`} `}handleClick(r){const o=new CustomEvent("on-card-click",{detail:{origEvent:r}});this.dispatchEvent(o)}};c.styles=d,r([o({type:String})],c.prototype,"type",void 0),r([o({type:String})],c.prototype,"href",void 0),r([o({type:String})],c.prototype,"rel",void 0),r([o({type:String})],c.prototype,"target",void 0),r([o({type:Boolean})],c.prototype,"hideBorder",void 0),r([o({type:Boolean})],c.prototype,"aiConnected",void 0),r([o({type:Boolean})],c.prototype,"highlight",void 0),c=r([t("kyn-card")],c);export{c as Card};
 //# sourceMappingURL=card.js.map

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

@@ -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  /** 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"}
+{"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 AI theme. */\n  @property({ type: Boolean })\n  aiConnected = false;\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      'ai-Connected': this.aiConnected,\n      'card-highlight': this.highlight,\n      'ai-highlight': this.aiConnected && this.highlight,\n    };\n\n    const cardWrapperDefaultClasses = {\n      'card-wrapper': true,\n      'ai-Connected': this.aiConnected,\n      'card-highlight': this.highlight,\n      'ai-highlight': this.aiConnected && 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","aiConnected","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,KAAWM,aAAG,EAGdN,KAASO,WAAG,CA2Cb,CAzCU,MAAAC,GACP,MAAMC,EAAqB,CACzB,0BAA0B,EAC1B,eAAmC,IAApBT,KAAKK,WACpB,eAAgBL,KAAKM,YACrB,iBAAkBN,KAAKO,UACvB,eAAgBP,KAAKM,aAAeN,KAAKO,WAGrCG,EAA4B,CAChC,gBAAgB,EAChB,eAAgBV,KAAKM,YACrB,iBAAkBN,KAAKO,UACvB,eAAgBP,KAAKM,aAAeN,KAAKO,WAG3C,OAAOI,CAAI,GAAiB,cAAdX,KAAKC,KACfU,CAAI;;mBAEOC,EAASH;iBACXT,KAAKE;mBACHF,KAAKI;gBACRJ,KAAKG;mBACDU,GAAab,KAAKc,YAAYD;;;cAI1CF,CAAI;;mBAEOC,EAASF;;;kBAIzB,CAEO,WAAAI,CAAYD,GAClB,MAAME,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,OAAQ,CAAEC,UAAWL,KAEvBb,KAAKmB,cAAcJ,EACpB,GArEelB,EAAMuB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACF3B,EAAA4B,UAAA,YAAA,GAIhBH,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACR3B,EAAA4B,UAAA,YAAA,GAIVH,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACT3B,EAAA4B,UAAA,WAAA,GAITH,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACI3B,EAAA4B,UAAA,cAAA,GAItBH,EAAA,CADCC,EAAS,CAAEtB,KAAMyB,WACC7B,EAAA4B,UAAA,kBAAA,GAInBH,EAAA,CADCC,EAAS,CAAEtB,KAAMyB,WACE7B,EAAA4B,UAAA,mBAAA,GAGpBH,EAAA,CADCC,EAAS,CAAEtB,KAAMyB,WACA7B,EAAA4B,UAAA,iBAAA,GA5BP5B,EAAIyB,EAAA,CADhBK,EAAc,aACF9B"}

package/components/reusable/progressBar/progressBar.js

@@ -488,17 +488,10 @@ textarea:not([disabled])[invalid] {
   animation: active-slide 400ms linear infinite;
 }
 .progress-bar__container {
-  width: 100%;
   margin: 8px 0;
-  height: 4px;
-  background-color: var(--kd-color-background-loader-bar-secondary);
-  border-radius: 4px;
-  position: relative;
-  overflow: hidden;
 }
 .progress-bar__background {
-  width: 100%;
-  height: 100%;
+  height: 4px;
   background-color: var(--kd-color-background-loader-bar-secondary);
   border-radius: 4px;
   overflow: hidden;
@@ -509,7 +502,6 @@ textarea:not([disabled])[invalid] {
   background-color: var(--kd-color-background-loader-bar-primary);
   border-radius: 0 4px 4px 0;
   transition: width 0.3s ease-in-out;
-  background-color: var(--kd-color-background-loader-bar-primary);
 }
 .progress-bar__main.is-indeterminate {
   width: 55px;
@@ -535,7 +527,7 @@ textarea:not([disabled])[invalid] {
 }
 
 .error {
-  color: var(--kd-color-status-error-dark);
+  color: var(--kd-color-text-variant-destructive);
 }
 
 @keyframes indeterminate {

package/components/reusable/progressBar/progressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressBar.js","sources":["../../../../src/components/reusable/progressBar/progressBar.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { html, LitElement } 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 '../loaders';\nimport '../tooltip';\nimport checkmarkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\n\nimport ProgressBarStyles from './progressBar.scss';\n\nenum ProgressStatus {\n  ACTIVE = 'active',\n  SUCCESS = 'success',\n  ERROR = 'error',\n}\n\n/**\n * `<kyn-progress-bar>` -- progress bar status indicator component.\n * @slot unnamed - Slot for tooltip text content.\n */\n@customElement('kyn-progress-bar')\nexport class ProgressBar extends LitElement {\n  static override styles = ProgressBarStyles;\n\n  /** Sets visibility of optional inline load status spinner. */\n  @property({ type: Boolean })\n  showInlineLoadStatus = false;\n\n  /** Controls whether to show default helper text for active state. */\n  @property({ type: Boolean })\n  showActiveHelperText = false;\n\n  /** Sets progress bar html id property for accessibility (ex: `example-progress-bar`). */\n  @property({ type: String })\n  progressBarId = '';\n\n  /** Sets progress bar status mode. */\n  @property({ type: String })\n  status: 'active' | 'success' | 'error' = 'active';\n\n  /** Sets initial progress bar value (optionally hard-coded). */\n  @property({ type: Number })\n  value: number | null = null;\n\n  /** Sets manual max value (default = 100). */\n  @property({ type: Number })\n  max = 100;\n\n  /** Sets optional progress bar label. */\n  @property({ type: String })\n  label = '';\n\n  /** Sets optional helper text that appears underneath progress bar element. */\n  @property({ type: String })\n  helperText = '';\n\n  /** Sets the unit for progress measurement (ex: 'MB', 'GB', '%') */\n  @property({ type: String })\n  unit = '';\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /** Incrementing percentage count value.\n   * @internal\n   */\n  @state()\n  private _percentage = 0;\n\n  /** Increments animated movement in progress bar.\n   * @internal\n   */\n  @state()\n  private _progress = 0;\n\n  /** Value set to indicate absence of value and max to identify indeterminate state.\n   * @internal\n   */\n  @state()\n  private _isIndeterminate = false;\n\n  /** Controls timeout interval for incremented bar animation.\n   * @internal\n   */\n  private _animationFrameId: number | null = null;\n\n  override render() {\n    const currentValue =\n      this.status === ProgressStatus.ACTIVE ? this._progress : this.value;\n    const currentStatus = this.getCurrentStatus(currentValue);\n    const helperText = this.getHelperText();\n\n    this._isIndeterminate =\n      currentValue === null ||\n      currentValue === undefined ||\n      this.max === null ||\n      this.max === undefined;\n\n    this._percentage = this.max\n      ? Math.round((this._progress / this.max) * 100)\n      : 0;\n\n    return html`\n      ${this.renderProgressBarLabel(currentStatus, currentValue)}\n      ${this.renderProgressBar(currentStatus, currentValue)}\n      ${helperText\n        ? html`<div\n            class=${`progress-bar__helper-text options-text ${currentStatus}`}\n          >\n            ${helperText}\n          </div>`\n        : null}\n    `;\n  }\n\n  private renderProgressBar(\n    currentStatus: ProgressStatus,\n    currentValue: number | null\n  ) {\n    const resolvedValue =\n      currentStatus === ProgressStatus.ACTIVE ? currentValue : this.max;\n\n    const widthStyle = this._isIndeterminate\n      ? 'width: 55px;'\n      : currentStatus === ProgressStatus.ERROR && currentValue != null\n      ? `width: ${currentValue}%`\n      : `width: ${this._percentage}%`;\n\n    return html`\n      <div\n        id=${this.progressBarId}\n        class=\"progress-bar__container\"\n        role=\"progressbar\"\n        aria-valuemin=${ifDefined(this.value ?? 0)}\n        aria-valuemax=${ifDefined(this.max ?? 100)}\n        aria-valuenow=${ifDefined(Number(resolvedValue))}\n        aria-valuetext=${`${resolvedValue}% complete`}\n        aria-label=${this.label}\n      >\n        <div class=\"progress-bar__background\">\n          <div\n            class=${classMap(this.getProgressBarClasses(currentStatus))}\n            style=${widthStyle}\n          ></div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderProgressBarLabel(\n    currentStatus: ProgressStatus,\n    currentValue: number | null\n  ) {\n    return html`\n      <div\n        class=\"progress-bar__upper-container${this.hideLabel ? ' sr-only' : ''}\"\n      >\n        <label class=\"progress-bar__label label-text\" for=${this.progressBarId}>\n          <span>${this.label}</span>\n          <slot name=\"unnamed\"></slot>\n        </label>\n        ${!this._isIndeterminate\n          ? html`<div class=\"progress-bar__status-icon\">\n              ${this.renderStatusIconOrLoader(currentStatus, currentValue)}\n            </div>`\n          : null}\n      </div>\n    `;\n  }\n\n  private renderStatusIconOrLoader(\n    currentStatus: ProgressStatus,\n    currentValue: number | null\n  ) {\n    if (currentStatus !== ProgressStatus.ACTIVE) {\n      return html`<span class=\"${currentStatus}-icon\"\n        >${currentStatus === ProgressStatus.SUCCESS\n          ? unsafeSVG(checkmarkIcon)\n          : unsafeSVG(errorIcon)}</span\n      >`;\n    }\n\n    const hardcodedProgressReached =\n      currentValue != null && this.value != null && currentValue >= this.value;\n\n    if (this.showInlineLoadStatus && !hardcodedProgressReached) {\n      return html`<p>\n        <span>${this._percentage}%</span>\n        <kyn-loader-inline status=\"active\"></kyn-loader-inline>\n      </p>`;\n    }\n\n    return null;\n  }\n\n  override firstUpdated() {\n    if (this.status === ProgressStatus.ACTIVE) {\n      this.startProgress();\n    }\n  }\n\n  override updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('status') || changedProperties.has('value')) {\n      this.cancelAnimation();\n\n      if (this.status === ProgressStatus.ACTIVE) {\n        this.startProgress();\n      }\n    }\n  }\n\n  private getProgressBarClasses(status: ProgressStatus) {\n    return {\n      'progress-bar__main': true,\n      'is-indeterminate': this._isIndeterminate,\n      [`progress-bar__${status}`]: true,\n    };\n  }\n\n  private getHelperText() {\n    if (this.helperText) {\n      return this.helperText;\n    }\n\n    if (this._isIndeterminate) {\n      return '';\n    }\n\n    if (this.showActiveHelperText) {\n      const progressValue = this._progress ?? 0;\n      const maxValue = this.max ?? 0;\n      const unit = this.unit || '';\n\n      return `${progressValue}${unit} of ${maxValue}${unit}`;\n    }\n\n    return '';\n  }\n\n  private getCurrentStatus(currentValue: number | null): ProgressStatus {\n    if (this.status === ProgressStatus.ERROR) {\n      return ProgressStatus.ERROR;\n    }\n\n    if (this.status === ProgressStatus.SUCCESS || currentValue === this.max) {\n      return ProgressStatus.SUCCESS;\n    }\n\n    return ProgressStatus.ACTIVE;\n  }\n\n  private startProgress() {\n    this.cancelAnimation();\n\n    const targetValue = this.value ?? this.max;\n    const advancement = 1;\n\n    const step = () => {\n      const difference = targetValue - this._progress;\n      const progressStep =\n        Math.sign(difference) * Math.min(Math.abs(difference), advancement);\n\n      if (Math.abs(difference) > 0.1) {\n        this._progress += progressStep;\n        this._animationFrameId = requestAnimationFrame(step);\n      } else {\n        this._progress = targetValue;\n        this.cancelAnimation();\n      }\n    };\n\n    step();\n  }\n\n  private cancelAnimation() {\n    if (this._animationFrameId !== null) {\n      cancelAnimationFrame(this._animationFrameId);\n      this._animationFrameId = null;\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cancelAnimation();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-progress-bar': ProgressBar;\n  }\n}\n"],"names":["ProgressStatus","ProgressBar","LitElement","constructor","this","showInlineLoadStatus","showActiveHelperText","progressBarId","status","value","max","label","helperText","unit","hideLabel","_percentage","_progress","_isIndeterminate","_animationFrameId","render","currentValue","ACTIVE","currentStatus","getCurrentStatus","getHelperText","undefined","Math","round","html","renderProgressBarLabel","renderProgressBar","resolvedValue","widthStyle","ERROR","ifDefined","_a","_b","Number","classMap","getProgressBarClasses","renderStatusIconOrLoader","SUCCESS","unsafeSVG","checkmarkIcon","errorIcon","hardcodedProgressReached","firstUpdated","startProgress","updated","changedProperties","has","cancelAnimation","progressValue","maxValue","targetValue","step","difference","progressStep","sign","min","abs","requestAnimationFrame","cancelAnimationFrame","disconnectedCallback","super","styles","ProgressBarStyles","__decorate","property","type","Boolean","prototype","String","state","customElement"],"mappings":"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"}
+{"version":3,"file":"progressBar.js","sources":["../../../../src/components/reusable/progressBar/progressBar.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { html, LitElement } 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 '../loaders';\nimport '../tooltip';\nimport checkmarkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\n\nimport ProgressBarStyles from './progressBar.scss';\n\nenum ProgressStatus {\n  ACTIVE = 'active',\n  SUCCESS = 'success',\n  ERROR = 'error',\n}\n\n/**\n * `<kyn-progress-bar>` -- progress bar status indicator component.\n * @slot unnamed - Slot for tooltip text content.\n */\n@customElement('kyn-progress-bar')\nexport class ProgressBar extends LitElement {\n  static override styles = ProgressBarStyles;\n\n  /** Sets visibility of optional inline load status spinner. */\n  @property({ type: Boolean })\n  showInlineLoadStatus = false;\n\n  /** Controls whether to show default helper text for active state. */\n  @property({ type: Boolean })\n  showActiveHelperText = false;\n\n  /** Sets progress bar html id property for accessibility (ex: `example-progress-bar`). */\n  @property({ type: String })\n  progressBarId = '';\n\n  /** Sets progress bar status mode. */\n  @property({ type: String })\n  status: 'active' | 'success' | 'error' = 'active';\n\n  /** Sets initial progress bar value (optionally hard-coded). */\n  @property({ type: Number })\n  value: number | null = null;\n\n  /** Sets manual max value (default = 100). */\n  @property({ type: Number })\n  max = 100;\n\n  /** Sets optional progress bar label. */\n  @property({ type: String })\n  label = '';\n\n  /** Sets optional helper text that appears underneath progress bar element. */\n  @property({ type: String })\n  helperText = '';\n\n  /** Sets the unit for progress measurement (ex: 'MB', 'GB', '%') */\n  @property({ type: String })\n  unit = '';\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /** Incrementing percentage count value.\n   * @internal\n   */\n  @state()\n  private _percentage = 0;\n\n  /** Increments animated movement in progress bar.\n   * @internal\n   */\n  @state()\n  private _progress = 0;\n\n  /** Value set to indicate absence of value and max to identify indeterminate state.\n   * @internal\n   */\n  @state()\n  private _isIndeterminate = false;\n\n  /** Controls timeout interval for incremented bar animation.\n   * @internal\n   */\n  private _animationFrameId: number | null = null;\n\n  override render() {\n    const currentValue =\n      this.status === ProgressStatus.ACTIVE ? this._progress : this.value;\n    const currentStatus = this.getCurrentStatus(currentValue);\n    const helperText = this.getHelperText();\n\n    this._isIndeterminate =\n      currentValue === null ||\n      currentValue === undefined ||\n      this.max === null ||\n      this.max === undefined;\n\n    this._percentage = this.max\n      ? Math.round((this._progress / this.max) * 100)\n      : 0;\n\n    return html`\n      ${this.renderProgressBarLabel(currentStatus, currentValue)}\n      ${this.renderProgressBar(currentStatus, currentValue)}\n      ${helperText\n        ? html`<div\n            class=${`progress-bar__helper-text options-text ${currentStatus}`}\n          >\n            ${helperText}\n          </div>`\n        : null}\n    `;\n  }\n\n  private renderProgressBar(\n    currentStatus: ProgressStatus,\n    currentValue: number | null\n  ) {\n    const resolvedValue =\n      currentStatus === ProgressStatus.ACTIVE ? currentValue : this.max;\n\n    const widthStyle = this._isIndeterminate\n      ? 'width: 55px;'\n      : currentStatus === ProgressStatus.ERROR && currentValue != null\n      ? `width: ${currentValue}%`\n      : `width: ${this._percentage}%`;\n\n    return html`\n      <div\n        id=${this.progressBarId}\n        class=\"progress-bar__container\"\n        role=\"progressbar\"\n        aria-valuemin=${ifDefined(this.value ?? 0)}\n        aria-valuemax=${ifDefined(this.max ?? 100)}\n        aria-valuenow=${ifDefined(Number(resolvedValue))}\n        aria-valuetext=${`${resolvedValue}% complete`}\n        aria-label=${this.label}\n      >\n        <div class=\"progress-bar__background\">\n          <div\n            class=${classMap(this.getProgressBarClasses(currentStatus))}\n            style=${widthStyle}\n          ></div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderProgressBarLabel(\n    currentStatus: ProgressStatus,\n    currentValue: number | null\n  ) {\n    return html`\n      <div\n        class=\"progress-bar__upper-container${this.hideLabel ? ' sr-only' : ''}\"\n      >\n        <label class=\"progress-bar__label label-text\" for=${this.progressBarId}>\n          <span>${this.label}</span>\n          <slot name=\"unnamed\"></slot>\n        </label>\n        ${!this._isIndeterminate\n          ? html`<div class=\"progress-bar__status-icon\">\n              ${this.renderStatusIconOrLoader(currentStatus, currentValue)}\n            </div>`\n          : null}\n      </div>\n    `;\n  }\n\n  private renderStatusIconOrLoader(\n    currentStatus: ProgressStatus,\n    currentValue: number | null\n  ) {\n    if (currentStatus !== ProgressStatus.ACTIVE) {\n      return html`<span class=\"${currentStatus}-icon\"\n        >${currentStatus === ProgressStatus.SUCCESS\n          ? unsafeSVG(checkmarkIcon)\n          : unsafeSVG(errorIcon)}</span\n      >`;\n    }\n\n    const hardcodedProgressReached =\n      currentValue != null && this.value != null && currentValue >= this.value;\n\n    if (this.showInlineLoadStatus && !hardcodedProgressReached) {\n      return html`<p>\n        <span>${this._percentage}%</span>\n        <kyn-loader-inline status=\"active\"></kyn-loader-inline>\n      </p>`;\n    }\n\n    return null;\n  }\n\n  override firstUpdated() {\n    if (this.status === ProgressStatus.ACTIVE) {\n      this.startProgress();\n    }\n  }\n\n  override updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('status') || changedProperties.has('value')) {\n      this.cancelAnimation();\n\n      if (this.status === ProgressStatus.ACTIVE) {\n        this.startProgress();\n      }\n    }\n  }\n\n  private getProgressBarClasses(status: ProgressStatus) {\n    return {\n      'progress-bar__main': true,\n      'is-indeterminate': this._isIndeterminate,\n      [`progress-bar__${status}`]: true,\n    };\n  }\n\n  private getHelperText() {\n    if (this.helperText) {\n      return this.helperText;\n    }\n\n    if (this._isIndeterminate) {\n      return '';\n    }\n\n    if (this.showActiveHelperText) {\n      const progressValue = this._progress ?? 0;\n      const maxValue = this.max ?? 0;\n      const unit = this.unit || '';\n\n      return `${progressValue}${unit} of ${maxValue}${unit}`;\n    }\n\n    return '';\n  }\n\n  private getCurrentStatus(currentValue: number | null): ProgressStatus {\n    if (this.status === ProgressStatus.ERROR) {\n      return ProgressStatus.ERROR;\n    }\n\n    if (this.status === ProgressStatus.SUCCESS || currentValue === this.max) {\n      return ProgressStatus.SUCCESS;\n    }\n\n    return ProgressStatus.ACTIVE;\n  }\n\n  private startProgress() {\n    this.cancelAnimation();\n\n    const targetValue = this.value ?? this.max;\n    const advancement = 1;\n\n    const step = () => {\n      const difference = targetValue - this._progress;\n      const progressStep =\n        Math.sign(difference) * Math.min(Math.abs(difference), advancement);\n\n      if (Math.abs(difference) > 0.1) {\n        this._progress += progressStep;\n        this._animationFrameId = requestAnimationFrame(step);\n      } else {\n        this._progress = targetValue;\n        this.cancelAnimation();\n      }\n    };\n\n    step();\n  }\n\n  private cancelAnimation() {\n    if (this._animationFrameId !== null) {\n      cancelAnimationFrame(this._animationFrameId);\n      this._animationFrameId = null;\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cancelAnimation();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-progress-bar': ProgressBar;\n  }\n}\n"],"names":["ProgressStatus","ProgressBar","LitElement","constructor","this","showInlineLoadStatus","showActiveHelperText","progressBarId","status","value","max","label","helperText","unit","hideLabel","_percentage","_progress","_isIndeterminate","_animationFrameId","render","currentValue","ACTIVE","currentStatus","getCurrentStatus","getHelperText","undefined","Math","round","html","renderProgressBarLabel","renderProgressBar","resolvedValue","widthStyle","ERROR","ifDefined","_a","_b","Number","classMap","getProgressBarClasses","renderStatusIconOrLoader","SUCCESS","unsafeSVG","checkmarkIcon","errorIcon","hardcodedProgressReached","firstUpdated","startProgress","updated","changedProperties","has","cancelAnimation","progressValue","maxValue","targetValue","step","difference","progressStep","sign","min","abs","requestAnimationFrame","cancelAnimationFrame","disconnectedCallback","super","styles","ProgressBarStyles","__decorate","property","type","Boolean","prototype","String","state","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.9.3",
+  "version": "2.10.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.2.1",
+    "@kyndryl-design-system/shidoka-foundation": "^2.3.1",
     "@kyndryl-design-system/shidoka-icons": "^2.0.0",
     "@lit/context": "^1.1.0",
     "deepmerge-ts": "^7.1.0",