diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts index 4960b82fba..fc033f5d6b 100644 --- a/packages/angular-test-app/src/app/app-routing.module.ts +++ b/packages/angular-test-app/src/app/app-routing.module.ts @@ -94,6 +94,8 @@ import Pagination from 'src/preview-examples/pagination'; import Pill from 'src/preview-examples/pill'; import PillVariants from 'src/preview-examples/pill-variants'; import PopoverNews from 'src/preview-examples/popover-news'; +import ProgressBar from 'src/preview-examples/progress-bar'; +import ProgressBarVariants from 'src/preview-examples/progress-bar-variants'; import PushCard from 'src/preview-examples/push-card'; import Radiobutton from 'src/preview-examples/radio-button'; import Select from 'src/preview-examples/select'; @@ -353,6 +355,8 @@ const routes: Routes = [ { path: 'pill', component: Pill }, { path: 'pill-variants', component: PillVariants }, { path: 'popover-news', component: PopoverNews }, + { path: 'progress-bar', component: ProgressBar }, + { path: 'progress-bar-variants', component: ProgressBarVariants }, { path: 'radio-button', component: Radiobutton }, { path: 'select-editable', component: SelectEditable }, { path: 'select-multiple', component: SelectMultiple }, diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts index b27de3689d..73ca7db1ff 100644 --- a/packages/angular-test-app/src/app/app.module.ts +++ b/packages/angular-test-app/src/app/app.module.ts @@ -152,6 +152,8 @@ import Pane from '../preview-examples/pane'; import PaneLayout from '../preview-examples/pane-layout'; import { NavigationTestComponent } from './components/navigation-test.component'; import Echarts from 'src/preview-examples/echarts'; +import ProgressBar from 'src/preview-examples/progress-bar'; +import ProgressBarVariants from 'src/preview-examples/progress-bar-variants'; @NgModule({ declarations: [ @@ -222,6 +224,8 @@ import Echarts from 'src/preview-examples/echarts'; Pill, PillVariants, PopoverNews, + ProgressBar, + ProgressBarVariants, Radiobutton, SelectEditable, SelectMultiple, diff --git a/packages/angular-test-app/src/preview-examples/progress-bar-variants.ts b/packages/angular-test-app/src/preview-examples/progress-bar-variants.ts new file mode 100644 index 0000000000..28f9874257 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/progress-bar-variants.ts @@ -0,0 +1,24 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` + + + + + + + + `, +}) +export default class ProgressBarVariants {} diff --git a/packages/angular-test-app/src/preview-examples/progress-bar.ts b/packages/angular-test-app/src/preview-examples/progress-bar.ts new file mode 100644 index 0000000000..18987b2ac7 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/progress-bar.ts @@ -0,0 +1,20 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` + + + + `, +}) +export default class ProgressBar {} diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 70a328ccda..fd82b07a7f 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -1856,6 +1856,28 @@ export class IxPill { export declare interface IxPill extends Components.IxPill {} +@ProxyCmp({ + inputs: ['disableAnimation', 'value', 'variant'] +}) +@Component({ + selector: 'ix-progress-bar', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['disableAnimation', 'value', 'variant'], +}) +export class IxProgressBar { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxProgressBar extends Components.IxProgressBar {} + + @ProxyCmp({ inputs: ['collapse', 'heading', 'icon', 'notification', 'subheading', 'variant'] }) diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts index 7717051c6d..d5a70915c2 100644 --- a/packages/angular/src/declare-components.ts +++ b/packages/angular/src/declare-components.ts @@ -72,6 +72,7 @@ export const DIRECTIVES = [ d.IxPane, d.IxPaneLayout, d.IxPill, + d.IxProgressBar, d.IxPushCard, d.IxRow, d.IxSelect, diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 7829b7f199..7b97291d2e 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -12604,6 +12604,124 @@ "parts": [], "listeners": [] }, + { + "dirPath": "src/components/progress-bar", + "filePath": "src/components/progress-bar/progress-bar.tsx", + "fileName": "progress-bar.tsx", + "readmePath": "src/components/progress-bar/readme.md", + "usagesDir": "src/components/progress-bar/usage", + "tag": "ix-progress-bar", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [], + "dependencyGraph": {}, + "props": [ + { + "name": "disableAnimation", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disable-animation", + "reflectToAttr": true, + "docs": "Disable progress value change animation", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "value", + "type": "number | string", + "complexType": { + "original": "string | number", + "resolved": "number | string", + "references": {} + }, + "mutable": false, + "attr": "value", + "reflectToAttr": true, + "docs": "Progress value in percentage (0-100)", + "docsTags": [], + "default": "0", + "values": [ + { + "type": "number" + }, + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "variant", + "type": "\"alarm\" | \"critical\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", + "complexType": { + "original": "| 'primary'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'", + "resolved": "\"alarm\" | \"critical\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"", + "references": {} + }, + "mutable": false, + "attr": "variant", + "reflectToAttr": true, + "docs": "Progress bar variant", + "docsTags": [], + "default": "'primary'", + "values": [ + { + "value": "alarm", + "type": "string" + }, + { + "value": "critical", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "neutral", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, { "dirPath": "src/components/push-card", "filePath": "src/components/push-card/push-card.tsx", diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index d52c7458fa..e8b38e0d2b 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1813,6 +1813,26 @@ export namespace Components { } interface IxPlaygroundInternal { } + interface IxProgressBar { + /** + * Disable progress value change animation + */ + "disableAnimation": boolean; + /** + * Progress value in percentage (0-100) + */ + "value": string | number; + /** + * Progress bar variant + */ + "variant": | 'primary' + | 'alarm' + | 'critical' + | 'warning' + | 'info' + | 'neutral' + | 'success'; + } /** * @since 1.6.0 */ @@ -3652,6 +3672,12 @@ declare global { prototype: HTMLIxPlaygroundInternalElement; new (): HTMLIxPlaygroundInternalElement; }; + interface HTMLIxProgressBarElement extends Components.IxProgressBar, HTMLStencilElement { + } + var HTMLIxProgressBarElement: { + prototype: HTMLIxProgressBarElement; + new (): HTMLIxProgressBarElement; + }; /** * @since 1.6.0 */ @@ -4081,6 +4107,7 @@ declare global { "ix-pane-layout": HTMLIxPaneLayoutElement; "ix-pill": HTMLIxPillElement; "ix-playground-internal": HTMLIxPlaygroundInternalElement; + "ix-progress-bar": HTMLIxProgressBarElement; "ix-push-card": HTMLIxPushCardElement; "ix-row": HTMLIxRowElement; "ix-select": HTMLIxSelectElement; @@ -5994,6 +6021,26 @@ declare namespace LocalJSX { } interface IxPlaygroundInternal { } + interface IxProgressBar { + /** + * Disable progress value change animation + */ + "disableAnimation"?: boolean; + /** + * Progress value in percentage (0-100) + */ + "value"?: string | number; + /** + * Progress bar variant + */ + "variant"?: | 'primary' + | 'alarm' + | 'critical' + | 'warning' + | 'info' + | 'neutral' + | 'success'; + } /** * @since 1.6.0 */ @@ -6792,6 +6839,7 @@ declare namespace LocalJSX { "ix-pane-layout": IxPaneLayout; "ix-pill": IxPill; "ix-playground-internal": IxPlaygroundInternal; + "ix-progress-bar": IxProgressBar; "ix-push-card": IxPushCard; "ix-row": IxRow; "ix-select": IxSelect; @@ -6984,6 +7032,7 @@ declare module "@stencil/core" { "ix-pane-layout": LocalJSX.IxPaneLayout & JSXBase.HTMLAttributes; "ix-pill": LocalJSX.IxPill & JSXBase.HTMLAttributes; "ix-playground-internal": LocalJSX.IxPlaygroundInternal & JSXBase.HTMLAttributes; + "ix-progress-bar": LocalJSX.IxProgressBar & JSXBase.HTMLAttributes; /** * @since 1.6.0 */ diff --git a/packages/core/src/components/progress-bar/progress-bar.scss b/packages/core/src/components/progress-bar/progress-bar.scss new file mode 100644 index 0000000000..957dc50b24 --- /dev/null +++ b/packages/core/src/components/progress-bar/progress-bar.scss @@ -0,0 +1,32 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +@import 'mixins/shadow-dom/component'; +@import 'common-variables'; +@import 'mixins/text-truncation'; + +:host { + @include ix-component; + display: block; + min-width: 20px; + height: 1.25rem; + max-height: 1.25rem; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.progress-bar { + width: 100%; + min-height: 1.25rem; + background-color: var(--theme-color-component-2); + border: 1px solid var(--theme-color-component-1); +} + +.progress { + min-height: 1.25rem; +} diff --git a/packages/core/src/components/progress-bar/progress-bar.tsx b/packages/core/src/components/progress-bar/progress-bar.tsx new file mode 100644 index 0000000000..24f8e07cf0 --- /dev/null +++ b/packages/core/src/components/progress-bar/progress-bar.tsx @@ -0,0 +1,87 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component, Element, h, Host, Prop } from '@stencil/core'; + +@Component({ + tag: 'ix-progress-bar', + styleUrl: 'progress-bar.scss', + shadow: true, +}) +export class ProgressBar { + @Element() el: HTMLIxProgressBarElement; + + /** + * Progress bar variant + */ + @Prop({ reflect: true }) variant: + | 'primary' + | 'alarm' + | 'critical' + | 'warning' + | 'info' + | 'neutral' + | 'success' = 'primary'; + + /** + * Progress value in percentage (0-100) + */ + @Prop({ reflect: true }) value: string | number = 0; + + /** + * Disable progress value change animation + */ + @Prop({ reflect: true }) disableAnimation = false; + + private ceilProgressValue() { + if (isNaN(+this.value)) { + console.warn("Invalid value passed as 'value'"); + return 0; + } + + const progress = +this.value; + + if (progress < 0) { + return 0; + } + + if (progress > 100) { + return 100; + } + + return progress; + } + + render() { + const ceiledValue = this.ceilProgressValue(); + const customProgressStyle = { + 'background-color': `var(--theme-color-${this.variant}${ + ceiledValue === 100 ? '--active' : '' + })`, + width: `${ceiledValue}%`, + transition: `width ${ + this.disableAnimation ? '0' : '1' + }s, background-color ${this.disableAnimation ? '0' : '1'}s`, + }; + + return ( + +
+
+
+ + ); + } +} diff --git a/packages/core/src/components/progress-bar/test/progress-bar.spec.tsx b/packages/core/src/components/progress-bar/test/progress-bar.spec.tsx new file mode 100644 index 0000000000..a0aebae2ca --- /dev/null +++ b/packages/core/src/components/progress-bar/test/progress-bar.spec.tsx @@ -0,0 +1,61 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { newSpecPage } from '@stencil/core/testing'; +import { ProgressBar } from '../progress-bar'; + +describe('ix-progress-bar', () => { + it('has correct default values', async () => { + await newSpecPage({ + components: [ProgressBar], + html: '', + }); + + const progressBar = document.querySelector('ix-progress-bar'); + const progressBarDiv = progressBar.shadowRoot.querySelector( + '.progress' + ) as HTMLElement; + expect(progressBarDiv.style.width).toBe('0%'); + expect(progressBarDiv.style.backgroundColor).toBe( + 'var(--theme-color-primary)' + ); + }); + + it('has correct values with lower bound inputs', async () => { + await newSpecPage({ + components: [ProgressBar], + html: '', + }); + + const progressBar = document.querySelector('ix-progress-bar'); + const progressBarDiv = progressBar.shadowRoot.querySelector( + '.progress' + ) as HTMLElement; + expect(progressBarDiv.style.width).toBe('0%'); + expect(progressBarDiv.style.backgroundColor).toBe( + 'var(--theme-color-primary)' + ); + }); + + it('has correct values with upper bound inputs', async () => { + await newSpecPage({ + components: [ProgressBar], + html: '', + }); + + const progressBar = document.querySelector('ix-progress-bar'); + const progressBarDiv = progressBar.shadowRoot.querySelector( + '.progress' + ) as HTMLElement; + expect(progressBarDiv.style.width).toBe('100%'); + expect(progressBarDiv.style.backgroundColor).toBe( + 'var(--theme-color-critical--active)' + ); + }); +}); diff --git a/packages/core/src/tests/progress-bar/basic/index.html b/packages/core/src/tests/progress-bar/basic/index.html new file mode 100644 index 0000000000..34d16ae81e --- /dev/null +++ b/packages/core/src/tests/progress-bar/basic/index.html @@ -0,0 +1,34 @@ + + + + + + + Stencil Component Starter + + + +
+ + + + + + + + + + + +
+ + + + diff --git a/packages/core/src/tests/progress-bar/progress-bar.e2e.ts b/packages/core/src/tests/progress-bar/progress-bar.e2e.ts new file mode 100644 index 0000000000..cbc672cae9 --- /dev/null +++ b/packages/core/src/tests/progress-bar/progress-bar.e2e.ts @@ -0,0 +1,18 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { expect } from '@playwright/test'; +import { regressionTest } from '@utils/test'; + +regressionTest.describe('progress-bar', () => { + regressionTest('basic', async ({ page }) => { + await page.goto('progress-bar/basic'); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); +}); diff --git a/packages/core/src/tests/progress-bar/progress-bar.e2e.ts-snapshots/progress-bar-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/progress-bar/progress-bar.e2e.ts-snapshots/progress-bar-basic-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000..41141910cb Binary files /dev/null and b/packages/core/src/tests/progress-bar/progress-bar.e2e.ts-snapshots/progress-bar-basic-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/progress-bar/progress-bar.e2e.ts-snapshots/progress-bar-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/progress-bar/progress-bar.e2e.ts-snapshots/progress-bar-basic-1-chromium---theme-classic-light-linux.png new file mode 100644 index 0000000000..d9f2c2a4fa Binary files /dev/null and b/packages/core/src/tests/progress-bar/progress-bar.e2e.ts-snapshots/progress-bar-basic-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/documentation/docs/controls/progress-bar.md b/packages/documentation/docs/controls/progress-bar.md new file mode 100644 index 0000000000..5aaf3f8da9 --- /dev/null +++ b/packages/documentation/docs/controls/progress-bar.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/PlaygroundV2'; + +import Props from './../auto-generated/ix-progress-bar/props.md'; +import Tags from './../auto-generated/ix-progress-bar/tags.md'; +import Events from './../auto-generated/ix-progress-bar/events.md'; + +# Progress Bar + + + +## Usage + + + + +## Variants + + + + +## Properties + +### Props + + + +### Events + + diff --git a/packages/html-test-app/src/preview-examples/progress-bar-variants.html b/packages/html-test-app/src/preview-examples/progress-bar-variants.html new file mode 100644 index 0000000000..7ebb5cacee --- /dev/null +++ b/packages/html-test-app/src/preview-examples/progress-bar-variants.html @@ -0,0 +1,25 @@ + + + + + + Progress Bar example + + + + + + + + + + + + + + + diff --git a/packages/html-test-app/src/preview-examples/progress-bar.html b/packages/html-test-app/src/preview-examples/progress-bar.html new file mode 100644 index 0000000000..2e78f17fea --- /dev/null +++ b/packages/html-test-app/src/preview-examples/progress-bar.html @@ -0,0 +1,21 @@ + + + + + + Progress Bar example + + + + + + + + + + + diff --git a/packages/react-test-app/src/preview-examples/progress-bar-variants.tsx b/packages/react-test-app/src/preview-examples/progress-bar-variants.tsx new file mode 100644 index 0000000000..3aa9e192d0 --- /dev/null +++ b/packages/react-test-app/src/preview-examples/progress-bar-variants.tsx @@ -0,0 +1,31 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { IxProgressBar } from '@siemens/ix-react'; +import React from 'react'; + +export default () => { + return ( + <> + + + + + + + + + + + + + + + ); +}; diff --git a/packages/react-test-app/src/preview-examples/progress-bar.tsx b/packages/react-test-app/src/preview-examples/progress-bar.tsx new file mode 100644 index 0000000000..db1e3bfd7e --- /dev/null +++ b/packages/react-test-app/src/preview-examples/progress-bar.tsx @@ -0,0 +1,23 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { IxProgressBar } from '@siemens/ix-react'; +import React from 'react'; + +export default () => { + return ( + <> + + + + + + + ); +}; diff --git a/packages/react/src/components.ts b/packages/react/src/components.ts index fe59a3c55e..d1c07c8ffe 100644 --- a/packages/react/src/components.ts +++ b/packages/react/src/components.ts @@ -75,6 +75,7 @@ import { defineCustomElement as defineIxPagination } from '@siemens/ix/component import { defineCustomElement as defineIxPane } from '@siemens/ix/components/ix-pane.js'; import { defineCustomElement as defineIxPaneLayout } from '@siemens/ix/components/ix-pane-layout.js'; import { defineCustomElement as defineIxPill } from '@siemens/ix/components/ix-pill.js'; +import { defineCustomElement as defineIxProgressBar } from '@siemens/ix/components/ix-progress-bar.js'; import { defineCustomElement as defineIxPushCard } from '@siemens/ix/components/ix-push-card.js'; import { defineCustomElement as defineIxRow } from '@siemens/ix/components/ix-row.js'; import { defineCustomElement as defineIxSelect } from '@siemens/ix/components/ix-select.js'; @@ -168,6 +169,7 @@ export const IxPagination = /*@__PURE__*/createReactComponent('ix-pane', undefined, undefined, defineIxPane); export const IxPaneLayout = /*@__PURE__*/createReactComponent('ix-pane-layout', undefined, undefined, defineIxPaneLayout); export const IxPill = /*@__PURE__*/createReactComponent('ix-pill', undefined, undefined, defineIxPill); +export const IxProgressBar = /*@__PURE__*/createReactComponent('ix-progress-bar', undefined, undefined, defineIxProgressBar); export const IxPushCard = /*@__PURE__*/createReactComponent('ix-push-card', undefined, undefined, defineIxPushCard); export const IxRow = /*@__PURE__*/createReactComponent('ix-row', undefined, undefined, defineIxRow); export const IxSelect = /*@__PURE__*/createReactComponent('ix-select', undefined, undefined, defineIxSelect); diff --git a/packages/vue-test-app/src/preview-examples/progress-bar-variants.vue b/packages/vue-test-app/src/preview-examples/progress-bar-variants.vue new file mode 100644 index 0000000000..3139e207f1 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/progress-bar-variants.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/progress-bar.vue b/packages/vue-test-app/src/preview-examples/progress-bar.vue new file mode 100644 index 0000000000..b8bc7d7e19 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/progress-bar.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index 07da5c332b..1fd01c651b 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -75,6 +75,7 @@ import { defineCustomElement as defineIxPagination } from '@siemens/ix/component import { defineCustomElement as defineIxPane } from '@siemens/ix/components/ix-pane.js'; import { defineCustomElement as defineIxPaneLayout } from '@siemens/ix/components/ix-pane-layout.js'; import { defineCustomElement as defineIxPill } from '@siemens/ix/components/ix-pill.js'; +import { defineCustomElement as defineIxProgressBar } from '@siemens/ix/components/ix-progress-bar.js'; import { defineCustomElement as defineIxPushCard } from '@siemens/ix/components/ix-push-card.js'; import { defineCustomElement as defineIxRow } from '@siemens/ix/components/ix-row.js'; import { defineCustomElement as defineIxSelect } from '@siemens/ix/components/ix-select.js'; @@ -771,6 +772,13 @@ export const IxPill = /*@__PURE__*/ defineContainer('ix-pill', defin ]); +export const IxProgressBar = /*@__PURE__*/ defineContainer('ix-progress-bar', defineIxProgressBar, [ + 'variant', + 'value', + 'disableAnimation' +]); + + export const IxPushCard = /*@__PURE__*/ defineContainer('ix-push-card', defineIxPushCard, [ 'icon', 'notification',