@kyndryl-design-system/shidoka-applications 2.9.3 → 2.9.4
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.
|
@@ -488,17 +488,10 @@ textarea:not([disabled])[invalid] {
|
|
|
488
488
|
animation: active-slide 400ms linear infinite;
|
|
489
489
|
}
|
|
490
490
|
.progress-bar__container {
|
|
491
|
-
width: 100%;
|
|
492
491
|
margin: 8px 0;
|
|
493
|
-
height: 4px;
|
|
494
|
-
background-color: var(--kd-color-background-loader-bar-secondary);
|
|
495
|
-
border-radius: 4px;
|
|
496
|
-
position: relative;
|
|
497
|
-
overflow: hidden;
|
|
498
492
|
}
|
|
499
493
|
.progress-bar__background {
|
|
500
|
-
|
|
501
|
-
height: 100%;
|
|
494
|
+
height: 4px;
|
|
502
495
|
background-color: var(--kd-color-background-loader-bar-secondary);
|
|
503
496
|
border-radius: 4px;
|
|
504
497
|
overflow: hidden;
|
|
@@ -509,7 +502,6 @@ textarea:not([disabled])[invalid] {
|
|
|
509
502
|
background-color: var(--kd-color-background-loader-bar-primary);
|
|
510
503
|
border-radius: 0 4px 4px 0;
|
|
511
504
|
transition: width 0.3s ease-in-out;
|
|
512
|
-
background-color: var(--kd-color-background-loader-bar-primary);
|
|
513
505
|
}
|
|
514
506
|
.progress-bar__main.is-indeterminate {
|
|
515
507
|
width: 55px;
|
|
@@ -535,7 +527,7 @@ textarea:not([disabled])[invalid] {
|
|
|
535
527
|
}
|
|
536
528
|
|
|
537
529
|
.error {
|
|
538
|
-
color: var(--kd-color-
|
|
530
|
+
color: var(--kd-color-text-variant-destructive);
|
|
539
531
|
}
|
|
540
532
|
|
|
541
533
|
@keyframes indeterminate {
|
|
@@ -1 +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":"6jBAaKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAL,SAAKA,GACHA,EAAA,OAAA,SACAA,EAAA,QAAA,UACAA,EAAA,MAAA,OACD,CAJD,CAAKA,IAAAA,EAIJ,CAAA,IAOM,IAAMC,EAAN,cAA0BC,EAA1B,WAAAC,uBAKLC,KAAoBC,sBAAG,EAIvBD,KAAoBE,sBAAG,EAIvBF,KAAaG,cAAG,GAIhBH,KAAMI,OAAmC,SAIzCJ,KAAKK,MAAkB,KAIvBL,KAAGM,IAAG,IAINN,KAAKO,MAAG,GAIRP,KAAUQ,WAAG,GAIbR,KAAIS,KAAG,GAIPT,KAASU,WAAG,EAMJV,KAAWW,YAAG,EAMdX,KAASY,UAAG,EAMZZ,KAAgBa,kBAAG,EAKnBb,KAAiBc,kBAAkB,IAyM5C,CAvMU,MAAAC,GACP,MAAMC,EACJhB,KAAKI,SAAWR,EAAeqB,OAASjB,KAAKY,UAAYZ,KAAKK,MAC1Da,EAAgBlB,KAAKmB,iBAAiBH,GACtCR,EAAaR,KAAKoB,gBAYxB,OAVApB,KAAKa,iBACHG,SAEa,OAAbhB,KAAKM,UACQe,IAAbrB,KAAKM,IAEPN,KAAKW,YAAcX,KAAKM,IACpBgB,KAAKC,MAAOvB,KAAKY,UAAYZ,KAAKM,IAAO,KACzC,EAEGkB,CAAI;QACPxB,KAAKyB,uBAAuBP,EAAeF;QAC3ChB,KAAK0B,kBAAkBR,EAAeF;QACtCR,EACEgB,CAAI;oBACM,0CAA0CN;;cAEhDV;kBAEJ;KAEP,CAEO,iBAAAkB,CACNR,EACAF,WAEA,MAAMW,EACJT,IAAkBtB,EAAeqB,OAASD,EAAehB,KAAKM,IAE1DsB,EAAa5B,KAAKa,iBACpB,eACAK,IAAkBtB,EAAeiC,OAAyB,MAAhBb,EAC1C,UAAUA,KACV,UAAUhB,KAAKW,eAEnB,OAAOa,CAAI;;aAEFxB,KAAKG;;;wBAGM2B,EAAoB,QAAVC,EAAA/B,KAAKK,aAAK,IAAA0B,EAAAA,EAAI;wBACxBD,EAAkB,QAARE,EAAAhC,KAAKM,WAAG,IAAA0B,EAAAA,EAAI;wBACtBF,EAAUG,OAAON;yBAChB,GAAGA;qBACP3B,KAAKO;;;;oBAIN2B,EAASlC,KAAKmC,sBAAsBjB;oBACpCU;;;;KAKjB,CAEO,sBAAAH,CACNP,EACAF,GAEA,OAAOQ,CAAI;;8CAE+BxB,KAAKU,UAAY,WAAa;;4DAEhBV,KAAKG;kBAC/CH,KAAKO;;;UAGZP,KAAKa,iBAIJ,KAHAW,CAAI;gBACAxB,KAAKoC,yBAAyBlB,EAAeF;;;KAK1D,CAEO,wBAAAoB,CACNlB,EACAF,GAEA,GAAIE,IAAkBtB,EAAeqB,OACnC,OAAOO,CAAI,gBAAgBN;WACtBA,IAAkBtB,EAAeyC,QAChCC,EAAUC,GACVD,EAAUE;SAIlB,MAAMC,EACY,MAAhBzB,GAAsC,MAAdhB,KAAKK,OAAiBW,GAAgBhB,KAAKK,MAErE,OAAIL,KAAKC,uBAAyBwC,EACzBjB,CAAI;gBACDxB,KAAKW;;YAKV,IACR,CAEQ,YAAA+B,GACH1C,KAAKI,SAAWR,EAAeqB,QACjCjB,KAAK2C,eAER,CAEQ,OAAAC,CAAQC,IACXA,EAAkBC,IAAI,WAAaD,EAAkBC,IAAI,YAC3D9C,KAAK+C,kBAED/C,KAAKI,SAAWR,EAAeqB,QACjCjB,KAAK2C,gBAGV,CAEO,qBAAAR,CAAsB/B,GAC5B,MAAO,CACL,sBAAsB,EACtB,mBAAoBJ,KAAKa,iBACzB,CAAC,iBAAiBT,MAAW,EAEhC,CAEO,aAAAgB,WACN,GAAIpB,KAAKQ,WACP,OAAOR,KAAKQ,WAGd,GAAIR,KAAKa,iBACP,MAAO,GAGT,GAAIb,KAAKE,qBAAsB,CAC7B,MAAM8C,EAA8B,QAAdjB,EAAA/B,KAAKY,iBAAS,IAAAmB,EAAAA,EAAI,EAClCkB,EAAmB,QAARjB,EAAAhC,KAAKM,WAAG,IAAA0B,EAAAA,EAAI,EACvBvB,EAAOT,KAAKS,MAAQ,GAE1B,MAAO,GAAGuC,IAAgBvC,QAAWwC,IAAWxC,GACjD,CAED,MAAO,EACR,CAEO,gBAAAU,CAAiBH,GACvB,OAAIhB,KAAKI,SAAWR,EAAeiC,MAC1BjC,EAAeiC,MAGpB7B,KAAKI,SAAWR,EAAeyC,SAAWrB,IAAiBhB,KAAKM,IAC3DV,EAAeyC,QAGjBzC,EAAeqB,MACvB,CAEO,aAAA0B,SACN3C,KAAK+C,kBAEL,MAAMG,EAA4B,QAAdnB,EAAA/B,KAAKK,aAAS,IAAA0B,EAAAA,EAAA/B,KAAKM,IAGjC6C,EAAO,KACX,MAAMC,EAAaF,EAAclD,KAAKY,UAChCyC,EACJ/B,KAAKgC,KAAKF,GAAc9B,KAAKiC,IAAIjC,KAAKkC,IAAIJ,GAL1B,GAOd9B,KAAKkC,IAAIJ,GAAc,IACzBpD,KAAKY,WAAayC,EAClBrD,KAAKc,kBAAoB2C,sBAAsBN,KAE/CnD,KAAKY,UAAYsC,EACjBlD,KAAK+C,kBACN,EAGHI,GACD,CAEO,eAAAJ,GACyB,OAA3B/C,KAAKc,oBACP4C,qBAAqB1D,KAAKc,mBAC1Bd,KAAKc,kBAAoB,KAE5B,CAEQ,oBAAA6C,GACPC,MAAMD,uBACN3D,KAAK+C,iBACN,GAvQelD,EAAMgE,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACWrE,EAAAsE,UAAA,4BAAA,GAI7BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACWrE,EAAAsE,UAAA,4BAAA,GAI7BJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACCvE,EAAAsE,UAAA,qBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACgCvE,EAAAsE,UAAA,cAAA,GAIlDJ,EAAA,CADCC,EAAS,CAAEC,KAAMhC,UACUpC,EAAAsE,UAAA,aAAA,GAI5BJ,EAAA,CADCC,EAAS,CAAEC,KAAMhC,UACRpC,EAAAsE,UAAA,WAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACPvE,EAAAsE,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACFvE,EAAAsE,UAAA,kBAAA,GAIhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACRvE,EAAAsE,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACArE,EAAAsE,UAAA,iBAAA,GAMlBJ,EAAA,CADCM,KACuBxE,EAAAsE,UAAA,mBAAA,GAMxBJ,EAAA,CADCM,KACqBxE,EAAAsE,UAAA,iBAAA,GAMtBJ,EAAA,CADCM,KACgCxE,EAAAsE,UAAA,wBAAA,GA3DtBtE,EAAWkE,EAAA,CADvBO,EAAc,qBACFzE"}
|
|
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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-applications",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.4",
|
|
4
4
|
"description": "Shidoka Web Components for Applications",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"prepare": "npx husky install"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@kyndryl-design-system/shidoka-foundation": "^2.
|
|
30
|
+
"@kyndryl-design-system/shidoka-foundation": "^2.3.1",
|
|
31
31
|
"@kyndryl-design-system/shidoka-icons": "^2.0.0",
|
|
32
32
|
"@lit/context": "^1.1.0",
|
|
33
33
|
"deepmerge-ts": "^7.1.0",
|