@italia/progress 1.0.0-alpha.7

package/dist/src/it-progress.js

@@ -0,0 +1,1022 @@
+import { BaseComponent, setAttributes } from '@italia/globals';
+import { css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+class ProgressDonut {
+    constructor(bar) {
+        this._bar = bar;
+    }
+    static async create(container, config) {
+        const CircleConstructor = await this._loadCircleConstructor();
+        const bar = new CircleConstructor(container, {
+            color: config.color,
+            trailColor: config.trailColor,
+            strokeWidth: config.strokeWidth,
+            trailWidth: config.trailWidth,
+            easing: config.easing,
+            duration: config.duration,
+            text: {
+                autoStyleContainer: false,
+            },
+            step: (_state, circle) => {
+                const value = Math.round(circle.value() * 100);
+                circle.setText(`${value}%`);
+                config.onStep?.(value);
+            },
+        });
+        const instance = new ProgressDonut(bar);
+        instance.setValue(config.value, config.animate);
+        return instance;
+    }
+    setValue(value, animate = true) {
+        if (animate) {
+            this._bar.animate(value);
+            return;
+        }
+        this._bar.set(value);
+    }
+    destroy() {
+        this._bar.destroy();
+    }
+    static async _loadCircleConstructor() {
+        try {
+            const mod = await import('../circle-B1NDrCPo.js').then(function (n) { return n.c; });
+            return mod.default ?? mod;
+        }
+        catch {
+            const mod = await import('../progressbar-CWxngKQm.js').then(function (n) { return n.p; });
+            return (mod.default ?? mod).Circle;
+        }
+    }
+}
+
+var styles = css`/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 3 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 3 ****************************************/
+/***************************** NEUTRAL 1 ****************************************/
+/***************************** NEUTRAL 2 ****************************************/
+/***************************** NEUTRAL 2 / 3 ****************************************/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: hsla(0, 0%, 0%, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: 1px solid;
+  opacity: 0.25;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: var(--bsi-paragraph-spacing);
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: var(--bsi-spacing-s);
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: var(--bsi-spacing-l);
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: var(--bsi-spacing-s);
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: var(--bsi-font-weight-strong);
+}
+
+dd {
+  margin-bottom: var(--bsi-spacing-xxs);
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 var(--bsi-spacing-s);
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: var(--bsi-font-size-1);
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: var(--bsi-color-link);
+  text-decoration: underline;
+  text-decoration-skip-ink: auto;
+  text-underline-offset: 2px;
+}
+a:hover {
+  color: var(--bsi-color-link-hover);
+  cursor: pointer;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--bsi-paragraph-spacing);
+  overflow: auto;
+}
+pre code {
+  word-break: normal;
+}
+
+a > code {
+  color: inherit;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: hsl(210, 17%, 44%);
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.progress-spinner, .progress {
+  --bsi-progress-bg: var(--bsi-color-background-secondary-lighter);
+  --bsi-progress-border-radius: var(--bsi-radius-smooth);
+  --bsi-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bsi-progress-label-color: var(--bsi-color-text-secondary);
+  --bsi-progress-label-font-size: var(--bsi-label-font-size-xs);
+  --bsi-progress-bar-transition: width 0.5s ease;
+  --bsi-progress-bar-bg: var(--bsi-color-background-secondary);
+  --bsi-progress-height: 4px;
+}
+
+.progress-bar-striped {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: var(--bsi-progress-height) var(--bsi-progress-height);
+}
+
+.progress-bar-animated {
+  animation: 1s linear infinite progress-bar-stripes;
+}
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar-animated {
+    animation: none;
+  }
+}
+
+@keyframes progress-bar-stripes {
+  0% {
+    background-position-x: 16px;
+  }
+}
+@keyframes progressBarIndeterminate {
+  0% {
+    left: -5%;
+  }
+  50% {
+    width: 66%;
+  }
+  100% {
+    left: 100%;
+    width: 33%;
+  }
+}
+.progress {
+  display: flex;
+  overflow: hidden;
+  background-color: var(--bsi-progress-bg);
+  border-radius: var(--bsi-progress-border-radius);
+  height: var(--bsi-progress-height);
+  box-shadow: none;
+}
+.progress.progress-indeterminate {
+  position: relative;
+}
+.progress.progress-indeterminate .progress-bar {
+  width: 0;
+  animation: progressBarIndeterminate 1.4s cubic-bezier(0.77, 0, 0.175, 1) infinite forwards;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+  transition: var(--bsi-progress-bar-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar {
+    transition: none;
+  }
+}
+.progress-bar {
+  background-color: var(--bsi-progress-bar-bg);
+}
+
+.progress-bar-label {
+  text-align: right;
+  font-size: var(--bsi-progress-label-font-size);
+  color: var(--bsi-progress-label-color);
+  font-weight: 500;
+}
+
+.btn-progress .progress {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  border-radius: 0 0 var(--bsi-progress-border-radius) var(--bsi-progress-border-radius);
+}
+.btn-progress .progress-bar {
+  height: var(--bsi-progress-height);
+}
+
+.progress-donut-wrapper {
+  position: relative;
+  width: 128px;
+  height: 128px;
+}
+.progress-donut-wrapper .progressbar-text {
+  z-index: 3;
+  color: var(--bsi-progress-label-color);
+  font-weight: var(--bsi-font-weight-solid);
+}
+.progress-donut-wrapper svg {
+  position: relative;
+}
+.progress-donut-wrapper svg path:first-child {
+  display: none;
+}
+.progress-donut-wrapper:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  content: "";
+  width: 67px;
+  height: 67px;
+  border-radius: var(--bsi-radius-circle);
+  background: var(--bsi-color-background-inverse);
+  transform: translateX(-50%) translateY(-50%);
+}
+.progress-donut-wrapper:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 0;
+  content: "";
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  background: var(--bsi-color-background-secondary-lighter);
+  transform: translateX(-50%) translateY(-50%);
+}
+
+@media (min-width: 768px) {
+  .progress-donut-wrapper {
+    width: 180px;
+    height: 180px;
+  }
+  .progress-donut-wrapper:after {
+    width: 94px;
+    height: 94px;
+  }
+  .progress-donut-wrapper:before {
+    content: "";
+    width: 150px;
+    height: 150px;
+  }
+}
+.progress-spinner {
+  --bsi-progress-spinner-bg: var(--bsi-color-border-secondary);
+  --bsi-progress-spinner-size: 48px;
+  --bsi-progress-spinner-size-sm: 32px;
+  --bsi-progress-spinner-size-lg: 64px;
+  --bsi-progress-spinner-size-xl: 80px;
+  --bsi-progress-spinner-border-width: 4px;
+  --bsi-progress-spinner-animation-duration: 0.75s;
+}
+
+@keyframes spinnerAnim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinnerAnimInner1 {
+  0% {
+    transform: rotate(60deg);
+  }
+  100% {
+    transform: rotate(205deg);
+  }
+}
+@keyframes spinnerAnimInner2 {
+  0% {
+    transform: rotate(30deg);
+  }
+  100% {
+    transform: rotate(-105deg);
+  }
+}
+/* stylelint-disable-next-line no-duplicate-selectors */
+.progress-spinner {
+  display: block;
+  width: var(--bsi-progress-spinner-size);
+  height: var(--bsi-progress-spinner-size);
+  border-radius: 50%;
+  border: var(--bsi-progress-spinner-border-width) solid var(--bsi-progress-bg);
+}
+.progress-spinner.progress-spinner-active {
+  animation: spinnerAnim 0.75s linear infinite;
+}
+.progress-spinner.progress-spinner-active:not(.progress-spinner-double) {
+  border-color: hsl(210, 17%, 44%);
+  border-bottom-color: var(--bsi-progress-bg);
+}
+.progress-spinner.size-sm {
+  width: var(--bsi-progress-spinner-size-sm);
+  height: var(--bsi-progress-spinner-size-sm);
+}
+.progress-spinner.size-lg {
+  width: var(--bsi-progress-spinner-size-lg);
+  height: var(--bsi-progress-spinner-size-lg);
+}
+.progress-spinner.size-xl {
+  width: var(--bsi-progress-spinner-size-xl);
+  height: var(--bsi-progress-spinner-size-xl);
+}
+.progress-spinner.progress-spinner-double {
+  display: inline-block;
+}
+.progress-spinner.progress-spinner-double.size-sm {
+  width: var(--bsi-progress-spinner-size-sm);
+  height: var(--bsi-progress-spinner-size-sm);
+}
+.progress-spinner.progress-spinner-double.size-sm .progress-spinner-inner {
+  width: var(--bsi-progress-spinner-size-sm);
+  height: calc(var(--bsi-progress-spinner-size-sm) / 2);
+}
+.progress-spinner.progress-spinner-double.size-lg {
+  width: var(--bsi-progress-spinner-size-lg);
+  height: var(--bsi-progress-spinner-size-lg);
+}
+.progress-spinner.progress-spinner-double.size-lg .progress-spinner-inner {
+  width: var(--bsi-progress-spinner-size-lg);
+  height: calc(var(--bsi-progress-spinner-size-lg) / 2);
+}
+.progress-spinner.progress-spinner-double.size-xl {
+  width: var(--bsi-progress-spinner-size-xl);
+  height: var(--bsi-progress-spinner-size-xl);
+}
+.progress-spinner.progress-spinner-double.size-xl .progress-spinner-inner {
+  width: var(--bsi-progress-spinner-size-xl);
+  height: calc(var(--bsi-progress-spinner-size-xl) / 2);
+}
+.progress-spinner.progress-spinner-double.progress-spinner-active .progress-spinner-inner {
+  opacity: 1;
+}
+.progress-spinner.progress-spinner-double .progress-spinner-inner {
+  width: var(--bsi-progress-spinner-size);
+  height: calc(var(--bsi-progress-spinner-size) / 2);
+  overflow: hidden;
+  margin-left: calc(var(--bsi-progress-spinner-border-width) * -1);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.progress-spinner.progress-spinner-double .progress-spinner-inner:nth-child(1) {
+  margin-top: calc(var(--bsi-progress-spinner-border-width) * -1);
+}
+.progress-spinner.progress-spinner-double .progress-spinner-inner:nth-child(2) {
+  transform: rotate(180deg);
+}
+.progress-spinner.progress-spinner-double .progress-spinner-inner:nth-child(2):after {
+  animation-name: spinnerAnimInner2;
+}
+.progress-spinner.progress-spinner-double .progress-spinner-inner:after {
+  content: "";
+  display: inline-block;
+  transform: rotate(45deg);
+  border-radius: 50%;
+  border: 4px solid var(--bsi-color-border-secondary);
+  border-right: var(--bsi-progress-spinner-border-width) solid transparent;
+  border-bottom: var(--bsi-progress-spinner-border-width) solid transparent;
+  width: 100%;
+  height: 200%;
+  animation: spinnerAnimInner1 0.75s cubic-bezier(0.25, 0.1, 0.5, 1) infinite alternate;
+}
+
+.bg-primary {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-primary-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-secondary {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-secondary-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-success {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-success-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-info {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-info-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-warning {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-warning-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-danger {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-danger-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-light {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-light-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-dark {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-dark-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-black {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-black-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-white {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-white-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-100 {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-100-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-200 {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-200-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-300 {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-300-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-400 {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-400-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-500 {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-500-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-600 {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-600-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-700 {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-700-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-800 {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-800-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-900 {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-900-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-body {
+  --bsi-bg-opacity: 1;
+  background-color: rgba(var(--bsi-body-bg-rgb), var(--bsi-bg-opacity)) !important;
+}
+
+.bg-transparent {
+  --bsi-bg-opacity: 1;
+  background-color: transparent !important;
+}`;
+
+var ItProgress_1;
+let ItProgress = ItProgress_1 = class ItProgress extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.type = 'bar';
+        this.value = 0;
+        this.itAriaLabel = 'Caricamento';
+        this.showValue = false;
+        this.label = '';
+        this.indeterminate = false;
+        this.color = 'default';
+        this.trailColor = '#D4E9FF';
+        this.strokeWidth = 24;
+        this.trailWidth = 12;
+        this.easing = 'easeInOut';
+        this.duration = 1400;
+        this.animated = true;
+        this.active = false;
+        this.double = false;
+        this.size = 'md';
+        this._bar = null;
+        this._donutContainer = null;
+    }
+    firstUpdated() {
+        if (this.type === 'donut') {
+            this._initDonutBar();
+        }
+    }
+    updated(changedProperties) {
+        super.updated?.(changedProperties);
+        if (changedProperties.has('type')) {
+            if (this.type !== 'donut' && this._bar) {
+                this._bar.destroy();
+                this._bar = null;
+            }
+        }
+        if (this.type === 'donut') {
+            const configChanged = changedProperties.has('color') ||
+                changedProperties.has('trailColor') ||
+                changedProperties.has('strokeWidth') ||
+                changedProperties.has('trailWidth') ||
+                changedProperties.has('easing') ||
+                changedProperties.has('duration') ||
+                changedProperties.has('type');
+            if (configChanged && this._bar) {
+                this._bar.destroy();
+                this._bar = null;
+                this.updateComplete.then(() => this._initDonutBar());
+            }
+            else if (changedProperties.has('value') && this._bar) {
+                this._setDonutProgress(this.value);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback?.();
+        if (this._bar) {
+            this._bar.destroy();
+            this._bar = null;
+        }
+    }
+    set(progress) {
+        this.value = progress;
+    }
+    static _isBarColorVariant(color) {
+        return ['default', 'success', 'info', 'warning', 'danger'].includes(color);
+    }
+    get _barColorClass() {
+        if (!ItProgress_1._isBarColorVariant(this.color))
+            return '';
+        return this.color === 'default' ? '' : `bg-${this.color}`;
+    }
+    get _displayLabel() {
+        return this.label || html `<span aria-hidden="true">${this.value}%</span>`;
+    }
+    _setDonutProgress(progress) {
+        if (!this._bar)
+            return;
+        this._bar.setValue(progress / 100, this.animated);
+    }
+    async _initDonutBar() {
+        if (!this.shadowRoot || this.type !== 'donut')
+            return;
+        this._donutContainer = this.shadowRoot.querySelector('.progress-donut');
+        if (!this._donutContainer)
+            return;
+        this._donutContainer.setAttribute('aria-label', this.itAriaLabel);
+        this._donutContainer.setAttribute('aria-valuenow', this.value.toString());
+        this._donutContainer.setAttribute('aria-valuemin', '0');
+        this._donutContainer.setAttribute('aria-valuemax', '100');
+        this._donutContainer.setAttribute('role', 'progressbar');
+        this._bar = await ProgressDonut.create(this._donutContainer, {
+            color: ItProgress_1._isBarColorVariant(this.color) ? 'var(--bsi-secondary)' : this.color,
+            trailColor: this.trailColor,
+            strokeWidth: this.strokeWidth,
+            trailWidth: this.trailWidth,
+            easing: this.easing,
+            duration: this.duration,
+            animate: this.animated,
+            value: this.value / 100,
+            onStep: (value) => {
+                this._donutContainer?.setAttribute('aria-valuenow', String(value));
+                if (this.value === value) {
+                    this.dispatchEvent(new CustomEvent('it-donut-updated', {
+                        detail: { value, el: this._donutContainer },
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+            },
+        });
+    }
+    _renderBar() {
+        const progressClasses = this.composeClass('progress', this.indeterminate && 'progress-indeterminate');
+        const barClasses = this.composeClass('progress-bar', this._barColorClass);
+        const barStyle = this.indeterminate ? {} : { width: `${this.value}%` };
+        const bar = html `
+      <div class="${progressClasses}" part="progress">
+        <div
+          class="${barClasses}"
+          role="progressbar"
+          style="${styleMap(barStyle)}"
+          ${setAttributes(this._ariaAttributes)}
+          aria-label="${ifDefined(this.itAriaLabel || undefined)}"
+          aria-valuenow="${ifDefined(this.indeterminate ? undefined : this.value)}"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          part="progress-bar"
+          id="${this._id}"
+        ></div>
+      </div>
+    `;
+        return when(this.showValue || this.label, () => html `
+        <div class="progress-bar-wrapper">
+          <div class="progress-bar-label" aria-describedby="${this._id}" part="progress-bar-label">
+            ${this._displayLabel}
+          </div>
+          ${bar}
+        </div>
+      `, () => bar);
+    }
+    _renderDonut() {
+        return html `
+      <div class="progress-donut-wrapper" part="donut-wrapper">
+        <div
+          class="progress-donut"
+          ${setAttributes(this._ariaAttributes)}
+          aria-label="${ifDefined(this.itAriaLabel || undefined)}"
+          aria-valuenow="${this.value}"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          role="progressbar"
+          part="donut"
+        ></div>
+      </div>
+    `;
+    }
+    _renderSpinner() {
+        const classes = this.composeClass('progress-spinner', this.active && 'progress-spinner-active', this.double && 'progress-spinner-double', this.size === 'sm' && 'size-sm', this.size === 'lg' && 'size-lg', this.size === 'xl' && 'size-xl');
+        return html `
+      <div
+        class="${classes}"
+        part="spinner"
+        role="progressbar"
+        aria-label="${ifDefined(this.itAriaLabel || undefined)}"
+        aria-valuetext="${ifDefined(this.itAriaLabel || undefined)}"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      >
+        ${this.double
+            ? html `
+              <div class="progress-spinner-inner"></div>
+              <div class="progress-spinner-inner"></div>
+            `
+            : ''}
+      </div>
+    `;
+    }
+    render() {
+        if (this.type === 'donut') {
+            return this._renderDonut();
+        }
+        if (this.type === 'spinner') {
+            return this._renderSpinner();
+        }
+        return this._renderBar();
+    }
+};
+ItProgress.styles = styles;
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ItProgress.prototype, "type", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Object)
+], ItProgress.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'it-aria-label' }),
+    __metadata("design:type", Object)
+], ItProgress.prototype, "itAriaLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-value' }),
+    __metadata("design:type", Object)
+], ItProgress.prototype, "showValue", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'label' }),
+    __metadata("design:type", Object)
+], ItProgress.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], ItProgress.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ItProgress.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], ItProgress.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], ItProgress.prototype, "double", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ItProgress.prototype, "size", void 0);
+ItProgress = ItProgress_1 = __decorate([
+    customElement('it-progress')
+], ItProgress);
+
+export { ItProgress };
+//# sourceMappingURL=it-progress.js.map