@nyaruka/temba-components 0.108.2 → 0.108.3
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/progress/ProgressBar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/progress/ProgressBar.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\n\nexport class ProgressBar extends RapidElement {\n static styles = css`\n .wrapper {\n display: flex;\n box-sizing: content-box;\n background: #f1f1f1;\n border-radius: var(--curvature);\n box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n min-height: 1.5rem;\n }\n\n .message {\n padding: 0 0.5rem;\n color: rgba(0, 0, 0, 0.4);\n white-space: nowrap;\n }\n\n .meter {\n flex-grow: 1;\n display: flex;\n box-sizing: content-box;\n position: relative;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n padding: 4px;\n min-height: 6px;\n }\n .meter > span {\n display: block;\n height: 100%;\n border-radius: calc(var(--curvature) * 0.8);\n background-color: var(--color-primary-dark);\n background-image: linear-gradient(\n center bottom,\n rgb(43, 194, 83) 37%,\n rgb(84, 240, 83) 69%\n );\n\n position: relative;\n overflow: hidden;\n }\n\n .meter > span:after,\n .animate > span > span {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n z-index: 1;\n background-size: 50px 50px;\n animation: move 8s linear infinite;\n border-top-right-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n border-top-left-radius: var(--curvature);\n border-bottom-left-radius: var(--curvature);\n overflow: hidden;\n }\n\n .animate > span:after {\n display: none;\n }\n\n @keyframes move {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n }\n\n .meter .complete {\n transition: flex-basis 2s;\n }\n\n .meter .incomplete {\n flex-grow: 1;\n }\n\n .etc {\n display: flex;\n flex-direction: row;\n background: rgba(0, 0, 0, 0.07);\n font-weight: bold;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.5);\n align-self: center;\n padding: 0px 6px;\n align-self: stretch;\n align-items: center;\n }\n\n .etc > div {\n font-size: 0.7em;\n }\n\n .wrapper *::last-child {\n border-top-right-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n overflow: hidden;\n }\n\n .meter.done > span:after,\n .done .animate > span > span {\n display: none;\n }\n\n .meter.done > span {\n background: rgb(var(--success-rgb));\n }\n `;\n\n @property({ type: Number })\n total = 100;\n\n @property({ type: Number })\n current = 0;\n\n @property({ type: Number })\n pct = 0;\n\n @property({ type: Boolean })\n done = false;\n\n @property({ type: String })\n eta: string;\n\n @property({ type: String, attribute: false })\n estimatedCompletionDate: Date;\n\n @property({ type: Boolean })\n showEstimatedCompletion = false;\n\n @property({ type: Boolean })\n showPercentage = false;\n\n @property({ type: String })\n message: string;\n\n public updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n if (changes.has('eta') && this.eta) {\n this.estimatedCompletionDate = new Date(this.eta);\n this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();\n }\n\n if (changes.has('current')) {\n const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));\n if (Number.isNaN(pct)) {\n this.showPercentage = false;\n } else {\n this.pct = pct;\n this.showPercentage = true;\n }\n\n this.done = this.pct >= 100;\n }\n }\n\n public render(): TemplateResult {\n return html`<div class=\"wrapper ${this.done ? 'complete' : ''}\">\n <div class=\"meter ${this.done ? 'done' : ''}\">\n ${this.message\n ? html`<div class=\"message\">${this.message}</div>`\n : null}\n <span class=\"complete\" style=\"flex-basis: ${this.pct}%\"></span>\n <div class=\"incomplete\"></div>\n </div>\n\n ${this.showPercentage || this.showEstimatedCompletion\n ? html`<div class=\"etc\">\n <div>\n ${this.estimatedCompletionDate &&\n this.showEstimatedCompletion &&\n !this.done\n ? html`<temba-date\n value=\"${this.estimatedCompletionDate.toISOString()}\"\n display=\"countdown\"\n ></temba-date>`\n : html`${this.pct}%`}\n </div>\n </div>`\n : null}\n\n <slot></slot>\n </div>`;\n }\n}\n"]}
|
package/package.json
CHANGED