@eui/eds 22.0.0-alpha.28 → 22.0.0-alpha.29
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.
- package/docs/changelog.html +11 -0
- package/docs/js/search/search_index.js +2 -2
- package/docs/json/documentation.json +1 -1
- package/docs/llms.txt +1 -1
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-eds-progress-bar.mjs +2 -2
- package/fesm2022/eui-eds-eds-progress-bar.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -56410,7 +56410,7 @@
|
|
|
56410
56410
|
"assetsDirs": [],
|
|
56411
56411
|
"styleUrlsData": [
|
|
56412
56412
|
{
|
|
56413
|
-
"data": "@use '../base' as base;\n\n:host {\n --_eds-progress-bar-track-height: var(--eds-sp-2xs);\n --_eds-progress-bar-fill: var(--eds-c-surface-primary);\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n position: relative;\n width: 100%;\n\n .eds-progress-bar__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--eds-sp-xs);\n\n &-label {\n font: var(--eds-f-label-s
|
|
56413
|
+
"data": "@use '../base' as base;\n\n:host {\n --_eds-progress-bar-track-height: var(--eds-sp-2xs);\n --_eds-progress-bar-fill: var(--eds-c-surface-primary);\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n position: relative;\n width: 100%;\n\n .eds-progress-bar__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--eds-sp-xs);\n\n &-label {\n font: var(--eds-f-label-s);\n color: var(--eds-c-foreground);\n }\n\n &-status {\n display: flex;\n align-items: center;\n }\n }\n\n .eds-progress-bar__track {\n background-color: var(--eds-c-surface-elevation-sunken);\n border-radius: var(--eds-br-xs);\n height: var(--_eds-progress-bar-track-height);\n position: relative;\n overflow: hidden;\n width: 100%;\n }\n\n .eds-progress-bar__indicator {\n background-color: var(--_eds-progress-bar-fill);\n border-radius: var(--eds-br-xs);\n height: 100%;\n transition: width 0.25s ease;\n }\n}\n\n// SIZE VARIANTS\n:host([size=\"xs\"]) { --_eds-progress-bar-track-height: var(--eds-sp-3xs); }\n:host([size=\"s\"]) { --_eds-progress-bar-track-height: var(--eds-sp-2xs); }\n:host([size=\"m\"]) { --_eds-progress-bar-track-height: var(--eds-sp-xs); }\n:host([size=\"l\"]) { --_eds-progress-bar-track-height: var(--eds-sp-s); }\n\n// COLOR VARIANTS\n:host([color=\"info\"]) { --_eds-progress-bar-fill: var(--eds-c-surface-info); }\n:host([color=\"success\"]) { --_eds-progress-bar-fill: var(--eds-c-surface-success); }\n:host([color=\"warning\"]) { --_eds-progress-bar-fill: var(--eds-c-surface-warning); }\n:host([color=\"critical\"]) { --_eds-progress-bar-fill: var(--eds-c-surface-critical); }\n\n// INDETERMINATE ANIMATION\n:host([indeterminate]) {\n .eds-progress-bar__indicator {\n width: 100% !important;\n background-color: transparent;\n background-image: linear-gradient(\n to right,\n transparent 0%,\n var(--_eds-progress-bar-fill) 30%,\n var(--_eds-progress-bar-fill) 60%,\n transparent 100%\n );\n background-size: 40% 100%;\n background-repeat: no-repeat;\n animation: eds-progress-indeterminate 1.5s infinite ease-in-out;\n }\n}\n\n@keyframes eds-progress-indeterminate {\n 0% { background-position: -40% 0; }\n 100% { background-position: 140% 0; }\n}\n",
|
|
56414
56414
|
"styleUrl": "./eds-progress-bar.scss"
|
|
56415
56415
|
}
|
|
56416
56416
|
],
|
package/docs/llms.txt
CHANGED
package/docs/properties.html
CHANGED
|
@@ -79,7 +79,7 @@ class EdsProgressBar {
|
|
|
79
79
|
...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
80
80
|
}
|
|
81
81
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
82
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsProgressBar, isStandalone: true, selector: "eds-progress-bar", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isIndeterminate: { classPropertyName: "isIndeterminate", publicName: "isIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, hasStatusIcon: { classPropertyName: "hasStatusIcon", publicName: "hasStatusIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.color": "color() || null", "attr.size": "size()", "attr.indeterminate": "isIndeterminate() || null", "attr.has-status-icon": "hasStatusIcon() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-valuenow": "!isIndeterminate() ? progress() : null", "attr.aria-valuemin": "\"0\"", "attr.aria-valuemax": "\"100\"", "attr.aria-label": "resolvedAriaLabel()", "attr.aria-valuetext": "valueText() || null" }, classAttribute: "eds-progress-bar" }, ngImport: i0, template: "@if (label() || hasStatusIcon()) {\n <div class=\"eds-progress-bar__header\">\n @if (label()) {\n <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n }\n @if (hasStatusIcon()) {\n <span class=\"eds-progress-bar__header-status\">\n <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n </span>\n }\n </div>\n}\n<div class=\"eds-progress-bar__track\">\n <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n", styles: [":host{--_eds-progress-bar-track-height: var(--eds-sp-2xs);--_eds-progress-bar-fill: var(--eds-c-surface-primary);display:flex;flex-direction:column;align-items:stretch;position:relative;width:100%}:host .eds-progress-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}:host .eds-progress-bar__header-label{font:var(--eds-f-label-s
|
|
82
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsProgressBar, isStandalone: true, selector: "eds-progress-bar", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isIndeterminate: { classPropertyName: "isIndeterminate", publicName: "isIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, hasStatusIcon: { classPropertyName: "hasStatusIcon", publicName: "hasStatusIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.color": "color() || null", "attr.size": "size()", "attr.indeterminate": "isIndeterminate() || null", "attr.has-status-icon": "hasStatusIcon() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-valuenow": "!isIndeterminate() ? progress() : null", "attr.aria-valuemin": "\"0\"", "attr.aria-valuemax": "\"100\"", "attr.aria-label": "resolvedAriaLabel()", "attr.aria-valuetext": "valueText() || null" }, classAttribute: "eds-progress-bar" }, ngImport: i0, template: "@if (label() || hasStatusIcon()) {\n <div class=\"eds-progress-bar__header\">\n @if (label()) {\n <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n }\n @if (hasStatusIcon()) {\n <span class=\"eds-progress-bar__header-status\">\n <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n </span>\n }\n </div>\n}\n<div class=\"eds-progress-bar__track\">\n <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n", styles: [":host{--_eds-progress-bar-track-height: var(--eds-sp-2xs);--_eds-progress-bar-fill: var(--eds-c-surface-primary);display:flex;flex-direction:column;align-items:stretch;position:relative;width:100%}:host .eds-progress-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}:host .eds-progress-bar__header-label{font:var(--eds-f-label-s);color:var(--eds-c-foreground)}:host .eds-progress-bar__header-status{display:flex;align-items:center}:host .eds-progress-bar__track{background-color:var(--eds-c-surface-elevation-sunken);border-radius:var(--eds-br-xs);height:var(--_eds-progress-bar-track-height);position:relative;overflow:hidden;width:100%}:host .eds-progress-bar__indicator{background-color:var(--_eds-progress-bar-fill);border-radius:var(--eds-br-xs);height:100%;transition:width .25s ease}:host([size=xs]){--_eds-progress-bar-track-height: var(--eds-sp-3xs)}:host([size=s]){--_eds-progress-bar-track-height: var(--eds-sp-2xs)}:host([size=m]){--_eds-progress-bar-track-height: var(--eds-sp-xs)}:host([size=l]){--_eds-progress-bar-track-height: var(--eds-sp-s)}:host([color=info]){--_eds-progress-bar-fill: var(--eds-c-surface-info)}:host([color=success]){--_eds-progress-bar-fill: var(--eds-c-surface-success)}:host([color=warning]){--_eds-progress-bar-fill: var(--eds-c-surface-warning)}:host([color=critical]){--_eds-progress-bar-fill: var(--eds-c-surface-critical)}:host([indeterminate]) .eds-progress-bar__indicator{width:100%!important;background-color:transparent;background-image:linear-gradient(to right,transparent 0%,var(--_eds-progress-bar-fill) 30%,var(--_eds-progress-bar-fill) 60%,transparent 100%);background-size:40% 100%;background-repeat:no-repeat;animation:eds-progress-indeterminate 1.5s infinite ease-in-out}@keyframes eds-progress-indeterminate{0%{background-position:-40% 0}to{background-position:140% 0}}\n"], dependencies: [{ kind: "component", type: i1.EdsIconState, selector: "eds-icon-state", inputs: ["color", "size", "ariaLabel", "e2eAttr"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
83
83
|
}
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsProgressBar, decorators: [{
|
|
85
85
|
type: Component,
|
|
@@ -96,7 +96,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
96
96
|
'[attr.aria-valuemax]': '"100"',
|
|
97
97
|
'[attr.aria-label]': 'resolvedAriaLabel()',
|
|
98
98
|
'[attr.aria-valuetext]': 'valueText() || null',
|
|
99
|
-
}, template: "@if (label() || hasStatusIcon()) {\n <div class=\"eds-progress-bar__header\">\n @if (label()) {\n <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n }\n @if (hasStatusIcon()) {\n <span class=\"eds-progress-bar__header-status\">\n <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n </span>\n }\n </div>\n}\n<div class=\"eds-progress-bar__track\">\n <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n", styles: [":host{--_eds-progress-bar-track-height: var(--eds-sp-2xs);--_eds-progress-bar-fill: var(--eds-c-surface-primary);display:flex;flex-direction:column;align-items:stretch;position:relative;width:100%}:host .eds-progress-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}:host .eds-progress-bar__header-label{font:var(--eds-f-label-s
|
|
99
|
+
}, template: "@if (label() || hasStatusIcon()) {\n <div class=\"eds-progress-bar__header\">\n @if (label()) {\n <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n }\n @if (hasStatusIcon()) {\n <span class=\"eds-progress-bar__header-status\">\n <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n </span>\n }\n </div>\n}\n<div class=\"eds-progress-bar__track\">\n <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n", styles: [":host{--_eds-progress-bar-track-height: var(--eds-sp-2xs);--_eds-progress-bar-fill: var(--eds-c-surface-primary);display:flex;flex-direction:column;align-items:stretch;position:relative;width:100%}:host .eds-progress-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}:host .eds-progress-bar__header-label{font:var(--eds-f-label-s);color:var(--eds-c-foreground)}:host .eds-progress-bar__header-status{display:flex;align-items:center}:host .eds-progress-bar__track{background-color:var(--eds-c-surface-elevation-sunken);border-radius:var(--eds-br-xs);height:var(--_eds-progress-bar-track-height);position:relative;overflow:hidden;width:100%}:host .eds-progress-bar__indicator{background-color:var(--_eds-progress-bar-fill);border-radius:var(--eds-br-xs);height:100%;transition:width .25s ease}:host([size=xs]){--_eds-progress-bar-track-height: var(--eds-sp-3xs)}:host([size=s]){--_eds-progress-bar-track-height: var(--eds-sp-2xs)}:host([size=m]){--_eds-progress-bar-track-height: var(--eds-sp-xs)}:host([size=l]){--_eds-progress-bar-track-height: var(--eds-sp-s)}:host([color=info]){--_eds-progress-bar-fill: var(--eds-c-surface-info)}:host([color=success]){--_eds-progress-bar-fill: var(--eds-c-surface-success)}:host([color=warning]){--_eds-progress-bar-fill: var(--eds-c-surface-warning)}:host([color=critical]){--_eds-progress-bar-fill: var(--eds-c-surface-critical)}:host([indeterminate]) .eds-progress-bar__indicator{width:100%!important;background-color:transparent;background-image:linear-gradient(to right,transparent 0%,var(--_eds-progress-bar-fill) 30%,var(--_eds-progress-bar-fill) 60%,transparent 100%);background-size:40% 100%;background-repeat:no-repeat;animation:eds-progress-indeterminate 1.5s infinite ease-in-out}@keyframes eds-progress-indeterminate{0%{background-position:-40% 0}to{background-position:140% 0}}\n"] }]
|
|
100
100
|
}], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIndeterminate", required: false }] }], hasStatusIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasStatusIcon", required: false }] }] } });
|
|
101
101
|
|
|
102
102
|
/** Convenience array for importing all eds-progress-bar components. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-progress-bar.mjs","sources":["../../eds-progress-bar/eds-progress-bar.ts","../../eds-progress-bar/eds-progress-bar.html","../../eds-progress-bar/index.ts","../../eds-progress-bar/eui-eds-eds-progress-bar.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n computed,\n input,\n booleanAttribute,\n numberAttribute,\n} from '@angular/core';\nimport { EDS_ICON_STATE } from '@eui/eds/eds-icon-state';\n\n/** Transform that clamps progress to 0–100 range. */\nconst progressTransform = (value: unknown): number => Math.max(0, Math.min(numberAttribute(value, 0), 100));\n\n/** Local narrowed color union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarColor = 'info' | 'success' | 'warning' | 'critical';\n\n/** Local narrowed size union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarSize = 'xs' | 's' | 'm' | 'l';\n\n/**\n * Horizontal progress indicator component that visualizes task completion or loading states.\n * Supports determinate progress with percentage values and indeterminate loading animations.\n * Provides optional labeling and status icons for contextual feedback.\n *\n * Semantic color variants (`info`, `success`, `warning`, `critical`) are set via the `color`\n * string input and size variants (`xs`, `s`, `m`, `l`) via the `size` string input, both\n * reflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`.\n */\n@Component({\n selector: 'eds-progress-bar',\n templateUrl: './eds-progress-bar.html',\n styleUrl: './eds-progress-bar.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [...EDS_ICON_STATE],\n host: {\n class: 'eds-progress-bar',\n role: 'progressbar',\n '[attr.color]': 'color() || null',\n '[attr.size]': 'size()',\n '[attr.indeterminate]': 'isIndeterminate() || null',\n '[attr.has-status-icon]': 'hasStatusIcon() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n '[attr.aria-valuenow]': '!isIndeterminate() ? progress() : null',\n '[attr.aria-valuemin]': '\"0\"',\n '[attr.aria-valuemax]': '\"100\"',\n '[attr.aria-label]': 'resolvedAriaLabel()',\n '[attr.aria-valuetext]': 'valueText() || null',\n },\n})\nexport class EdsProgressBar {\n /**\n * Data attribute value for end-to-end testing identification.\n * @default 'eds-progress-bar'\n */\n e2eAttr = input('eds-progress-bar');\n\n /** Optional label displayed above the progress bar. Also used as the accessible name. */\n label = input('');\n\n /**\n * Explicit accessible name for the progress bar. Use when there is no visible `label`\n * (e.g. the bar sits in a table cell or under a custom header). Defaults to the visible\n * `label` when set, otherwise a generic `'Progress'` so the progressbar always has a name\n * (WCAG 1.1.1). Provide a specific value for context.\n */\n ariaLabel = input<string>('');\n\n /**\n * Human-readable text alternative for the current value.\n * Use when the numeric percentage alone isn't meaningful\n * (e.g. \"Step 3 of 5\", \"Uploading file 2 of 10\").\n * Maps to aria-valuetext.\n */\n valueText = input('');\n\n /**\n * Current progress value (0–100).\n * Values outside the range are clamped automatically.\n * @default 0\n */\n progress = input(0, { transform: progressTransform });\n\n /**\n * Semantic color variant, reflected as the `color` host attribute.\n * When unset, the default primary fill is used.\n */\n color = input<EdsProgressBarColor | null>(null);\n\n /**\n * Size variant, reflected as the `size` host attribute.\n * @default 's'\n */\n size = input<EdsProgressBarSize>('s');\n\n /**\n * When true, shows an indeterminate progress animation\n * instead of a specific progress value.\n * @default false\n */\n isIndeterminate = input(false, { transform: booleanAttribute });\n\n /**\n * When true, displays a status icon based on the current color variant\n * (success, warning, critical, info).\n * @default false\n */\n hasStatusIcon = input(false, { transform: booleanAttribute });\n\n /**\n * Resolved accessible name for the host: an explicit `ariaLabel`, otherwise the visible\n * `label`, otherwise a generic `'Progress'` fallback so the progressbar always has a name.\n */\n protected readonly resolvedAriaLabel = computed(() => this.ariaLabel() || this.label() || 'Progress');\n}\n","@if (label() || hasStatusIcon()) {\n <div class=\"eds-progress-bar__header\">\n @if (label()) {\n <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n }\n @if (hasStatusIcon()) {\n <span class=\"eds-progress-bar__header-status\">\n <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n </span>\n }\n </div>\n}\n<div class=\"eds-progress-bar__track\">\n <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n","import { EdsProgressBar } from './eds-progress-bar';\n\nexport { EdsProgressBar };\n\n/** Convenience array for importing all eds-progress-bar components. */\nexport const EDS_PROGRESS_BAR = [\n EdsProgressBar,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAUA;AACA,MAAM,iBAAiB,GAAG,CAAC,KAAc,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AAQ3G;;;;;;;;AAQG;MAsBU,cAAc,CAAA;AArB3B,IAAA,WAAA,GAAA;AAsBI;;;AAGG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,kBAAkB;oFAAC;;QAGnC,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,EAAE;kFAAC;AAEjB;;;;;AAKG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK,CAAS,EAAE;sFAAC;AAE7B;;;;;AAKG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,EAAE;sFAAC;AAErB;;;;AAIG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,CAAC,gFAAI,SAAS,EAAE,iBAAiB,EAAA,CAAG;AAErD;;;AAGG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAA6B,IAAI;kFAAC;AAE/C;;;AAGG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAqB,GAAG;iFAAC;AAErC;;;;AAIG;QACH,IAAA,CAAA,eAAe,GAAG,KAAK,CAAC,KAAK,uFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE/D;;;;AAIG;QACH,IAAA,CAAA,aAAa,GAAG,KAAK,CAAC,KAAK,qFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE7D;;;AAGG;AACgB,QAAA,IAAA,CAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,UAAU;8FAAC;AACxG,IAAA;8GAhEY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,muDCjD3B,0kBAeA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-progress-bar.mjs","sources":["../../eds-progress-bar/eds-progress-bar.ts","../../eds-progress-bar/eds-progress-bar.html","../../eds-progress-bar/index.ts","../../eds-progress-bar/eui-eds-eds-progress-bar.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n computed,\n input,\n booleanAttribute,\n numberAttribute,\n} from '@angular/core';\nimport { EDS_ICON_STATE } from '@eui/eds/eds-icon-state';\n\n/** Transform that clamps progress to 0–100 range. */\nconst progressTransform = (value: unknown): number => Math.max(0, Math.min(numberAttribute(value, 0), 100));\n\n/** Local narrowed color union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarColor = 'info' | 'success' | 'warning' | 'critical';\n\n/** Local narrowed size union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarSize = 'xs' | 's' | 'm' | 'l';\n\n/**\n * Horizontal progress indicator component that visualizes task completion or loading states.\n * Supports determinate progress with percentage values and indeterminate loading animations.\n * Provides optional labeling and status icons for contextual feedback.\n *\n * Semantic color variants (`info`, `success`, `warning`, `critical`) are set via the `color`\n * string input and size variants (`xs`, `s`, `m`, `l`) via the `size` string input, both\n * reflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`.\n */\n@Component({\n selector: 'eds-progress-bar',\n templateUrl: './eds-progress-bar.html',\n styleUrl: './eds-progress-bar.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [...EDS_ICON_STATE],\n host: {\n class: 'eds-progress-bar',\n role: 'progressbar',\n '[attr.color]': 'color() || null',\n '[attr.size]': 'size()',\n '[attr.indeterminate]': 'isIndeterminate() || null',\n '[attr.has-status-icon]': 'hasStatusIcon() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n '[attr.aria-valuenow]': '!isIndeterminate() ? progress() : null',\n '[attr.aria-valuemin]': '\"0\"',\n '[attr.aria-valuemax]': '\"100\"',\n '[attr.aria-label]': 'resolvedAriaLabel()',\n '[attr.aria-valuetext]': 'valueText() || null',\n },\n})\nexport class EdsProgressBar {\n /**\n * Data attribute value for end-to-end testing identification.\n * @default 'eds-progress-bar'\n */\n e2eAttr = input('eds-progress-bar');\n\n /** Optional label displayed above the progress bar. Also used as the accessible name. */\n label = input('');\n\n /**\n * Explicit accessible name for the progress bar. Use when there is no visible `label`\n * (e.g. the bar sits in a table cell or under a custom header). Defaults to the visible\n * `label` when set, otherwise a generic `'Progress'` so the progressbar always has a name\n * (WCAG 1.1.1). Provide a specific value for context.\n */\n ariaLabel = input<string>('');\n\n /**\n * Human-readable text alternative for the current value.\n * Use when the numeric percentage alone isn't meaningful\n * (e.g. \"Step 3 of 5\", \"Uploading file 2 of 10\").\n * Maps to aria-valuetext.\n */\n valueText = input('');\n\n /**\n * Current progress value (0–100).\n * Values outside the range are clamped automatically.\n * @default 0\n */\n progress = input(0, { transform: progressTransform });\n\n /**\n * Semantic color variant, reflected as the `color` host attribute.\n * When unset, the default primary fill is used.\n */\n color = input<EdsProgressBarColor | null>(null);\n\n /**\n * Size variant, reflected as the `size` host attribute.\n * @default 's'\n */\n size = input<EdsProgressBarSize>('s');\n\n /**\n * When true, shows an indeterminate progress animation\n * instead of a specific progress value.\n * @default false\n */\n isIndeterminate = input(false, { transform: booleanAttribute });\n\n /**\n * When true, displays a status icon based on the current color variant\n * (success, warning, critical, info).\n * @default false\n */\n hasStatusIcon = input(false, { transform: booleanAttribute });\n\n /**\n * Resolved accessible name for the host: an explicit `ariaLabel`, otherwise the visible\n * `label`, otherwise a generic `'Progress'` fallback so the progressbar always has a name.\n */\n protected readonly resolvedAriaLabel = computed(() => this.ariaLabel() || this.label() || 'Progress');\n}\n","@if (label() || hasStatusIcon()) {\n <div class=\"eds-progress-bar__header\">\n @if (label()) {\n <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n }\n @if (hasStatusIcon()) {\n <span class=\"eds-progress-bar__header-status\">\n <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n </span>\n }\n </div>\n}\n<div class=\"eds-progress-bar__track\">\n <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n","import { EdsProgressBar } from './eds-progress-bar';\n\nexport { EdsProgressBar };\n\n/** Convenience array for importing all eds-progress-bar components. */\nexport const EDS_PROGRESS_BAR = [\n EdsProgressBar,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|