+ * 40% of 100%
+ *
+ * ```
+ *
+ * @slot default - A place for helper text like e.g. `20% of 100%`.
+ */
+@localized()
+export class ProgressBar extends ScopedElementsMixin(LitElement) {
+ /** @internal */
+ static get scopedElements(): ScopedElementsMap {
+ return {
+ 'sl-icon': Icon
+ };
+ }
+
+ /** @internal */
+ static override styles: CSSResultGroup = styles;
+
+ /** Whether the progress bar has the indeterminate state. */
+ @property({ type: Boolean, reflect: true }) indeterminate = false;
+
+ /** Label describing the value of the progress bar. */
+ @property() label?: string;
+
+ /** The variant of the progress bar. */
+ @property({ reflect: true }) variant?: ProgressVariant;
+
+ /** Progress value (from 0...100). */
+ @property({ type: Number }) value = 0;
+
+ /** @internal The name of the icon, depending on the variant. */
+ get iconName(): string {
+ switch (this.variant) {
+ case 'success':
+ return 'circle-check-solid';
+ case 'warning':
+ return 'octagon-exclamation-solid';
+ case 'error':
+ return 'triangle-exclamation-solid';
+ default:
+ return 'circle-check-solid';
+ }
+ }
+
+ override render(): TemplateResult {
+ return html` ${this.label
+ ? html`
+ ${this.label} ${this.variant ? html`` : nothing}
+
`
+ : nothing}
+
+
+
+
+ ${msg('state')} ${msg(this.variant ? this.variant : msg('active'))}
+
+ ${this.value}%
+
+ ${this.variant && !this.label ? html`` : nothing}
+
`;
+ }
+}
diff --git a/packages/components/progress-bar/tsconfig.json b/packages/components/progress-bar/tsconfig.json
new file mode 100644
index 0000000000..386c2cfcb7
--- /dev/null
+++ b/packages/components/progress-bar/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "../../../tsconfig.base.json",
+ "compilerOptions": {
+ "composite": true,
+ "rootDir": "./"
+ },
+ "include": ["index.ts", "register.ts", "src/**/*.ts"]
+}
\ No newline at end of file
diff --git a/packages/locales/src/nl.ts b/packages/locales/src/nl.ts
index 03bd54fcfc..8a080bdf03 100644
--- a/packages/locales/src/nl.ts
+++ b/packages/locales/src/nl.ts
@@ -5,7 +5,9 @@ import { str } from '@lit/localize';
export const templates = {
s091d3d07b5b3076f: 'Ok',
+ s129fac0ae1df7c8f: 'waarschuwing',
s13fdff160ffad275: 'Wis tekst',
+ s19fe06e3408e53d0: 'succes',
s2ceb11be2290bb1b: 'Annuleren',
s39bba60b440fcf00: 'verplicht',
s4215e0aa2fa8f5b4: 'Type hier om te filteren',
@@ -16,9 +18,12 @@ export const templates = {
s5e8250fb85d64c23: 'Sluiten',
s629576c6b305d539: 'optioneel',
s62aa2ba3fe47ece4: 'Vink tenminste één optie aan.',
+ s6580790b036f0c6f: 'actief',
s6abb1cd87fe0114e: 'Home',
+ s7ce4fd9430e80cea: 'waarde',
s8079b71872346425: 'Voer een waarde in.',
s864c948d4629240f: 'Toon alles',
+ s9f7452dd75d54d31: 'fout',
sa447e2f801a7eb2d: 'Kies een optie.',
sa996297f6a208e98: 'Kruimelpad',
sb85774dc5d18ff0f: 'Bevestig',
@@ -31,6 +36,7 @@ export const templates = {
sd244b51f6d7de8e2: 'Voer een waarde in volgens het gevraagde patroon.',
sd711c88b851db6c9: 'De volgende velden zijn incorrect:',
sde6884478b7cc818: str`Voer tenminste ${0} karakters in (je hebt op dit momoment ${1} karakter${2}).`,
+ see63aaad45b1b116: 'status',
sf1ec4acb8d744ed9: 'Mededeling',
sf677da98fa27f9b6: 'Meer links'
};
diff --git a/packages/locales/src/nl.xlf b/packages/locales/src/nl.xlf
index 7b73f4f945..20c6686b23 100644
--- a/packages/locales/src/nl.xlf
+++ b/packages/locales/src/nl.xlf
@@ -118,6 +118,30 @@
Frequently Used
Vaak gebruikt
+
+ state
+ status
+
+
+ active
+ actief
+
+
+ success
+ succes
+
+
+ warning
+ waarschuwing
+
+
+ error
+ fout
+
+
+ value
+ waarde
+