scb-wc 0.1.2 → 0.1.4

package/scb-pagination/scb-pagination.js

@@ -0,0 +1,438 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-link/scb-link.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+//#region src/scb-test-components/scb-pagination/scb-pagination.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "icon-text", this.page = 1, this.totalPages = 0, this.pagingHref = "", this.baseUri = "", this.paginationAriaLabel = "Paginering", this.currentAriaLabel = "Nuvarande sida, ", this.pagingNumberAriaLabel = "Gå till sida ", this.isNarrow = window.innerWidth <= 768, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._onResize = () => {
+			this.isNarrow = window.innerWidth <= 768;
+		};
+	}
+	static {
+		this.styles = [n`
+      :host {
+        display: block;
+        width: 100%;
+
+        margin-block-start: var(--scb-pagination-spacing-block-start, 0);
+        margin-block-end: var(--scb-pagination-spacing-block-end, 0);
+        margin-inline-start: var(--scb-pagination-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-pagination-spacing-inline-end, 0);
+      }
+
+      :host .pagination {
+        --md-text-button-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-state-layer-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-focus-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-state-layer-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-label-text-weight: var(--weight-regular, 400);
+        --md-text-button-label-text-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+        --md-text-button-label-text-size: var(--md-sys-typescale-body-medium-size, 16px);
+        --md-text-button-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-focus-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --scb-link-decoration: none;
+        --scb-link-color: var(--md-sys-color-on-surface, #0F0865);
+
+        scb-link.page-number a {
+          cursor: pointer;
+          text-decoration: none;
+          display: inline-flex;
+        }
+      }
+
+      .pagination {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+      }
+      .pagination-row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4px;
+      }
+      .pagination-row .prev {
+        display: flex;
+        justify-content: flex-start;
+        width: auto;
+      }
+      .pagination-row ol {
+        width: auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: 4px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .pagination-row ol li {
+        min-width: 40px;
+        min-height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .pagination-row .next {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        width: auto;
+        margin-top: 0;
+      }
+      scb-link.page-number a {
+        cursor: pointer;
+        text-decoration: none;
+        display: inline-flex;
+      }
+      .pagination-row ol li scb-link.page-number {
+        --scb-link-focus-ring-gap: 0;
+        --scb-link-decoration: none;
+        --scb-link-hover-thickness: 1px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 999px;
+      }
+      .pagination-row ol li scb-link.page-number::part(anchor) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 999px;
+        color: var(--md-sys-color-on-surface, #0F0865);
+        cursor: pointer;
+        text-decoration: none;
+        transition: background-color 120ms linear;
+      }
+      .pagination-row ol li scb-link.page-number::part(anchor):hover {
+        background: color-mix(
+          in srgb,
+          var(--md-text-button-hover-state-layer-color, var(--md-sys-color-on-surface, #0F0865)) 8%,
+          transparent
+        );
+      }
+      .pagination-row ol li scb-link.page-number::part(anchor):focus-visible {
+        background: color-mix(
+          in srgb,
+          var(--md-sys-color-on-surface, #0F0865) 10%,
+          transparent
+        );
+      }
+      .page-number.active {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: var(--md-sys-color-primary, #1F44FF);
+        color: var(--md-sys-color-on-primary, #FFF);
+        text-align: center;
+        width: 40px;
+        height: 40px;
+      }
+      .page-number.active {
+        font-family: var(--brand-font, 'Inter', sans-serif);
+      }
+      .ellipsis {
+        margin: 0 4px;
+        color: #888;
+        user-select: none;
+        pointer-events: none;
+      }
+      scb-button[disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      .paging-action-link {
+        display: inline-flex;
+        text-decoration: none;
+      }
+      .paging-action-link[aria-disabled='true'] {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      @media (max-width: 768px) {
+        .pagination .prev {
+          display: flex;
+          justify-content: flex-start;
+        }
+        .pagination .next {
+          width: 100%;
+          margin-top: 8px;
+        }
+      }
+
+      @media (max-width: 390px) {
+        .pagination-row {
+          flex-direction: column;
+          gap: 0;
+        }
+        .pagination-row .prev {
+          width: 100%;
+          margin-bottom: 8px;
+          align-items: center;
+        }
+        .pagination-row ol {
+          width: 100%;
+          align-items: center;
+        }
+        .pagination-row .next {
+          width: 100%;
+          margin-top: 8px;
+        }
+      }
+    `];
+	}
+	_emitPageChange(e) {
+		let t = { page: e };
+		this.dispatchEvent(new CustomEvent("page-change", {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("pagechange", {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_getPagingHref(e) {
+		if (!this.pagingHref) return;
+		let t = (this.baseUri || "").trim(), n = t || window.location.href, r = new URL(n, window.location.href), i = this.pagingHref.trim().replace(/^[?&]/, "").split("=")[0];
+		if (i) return r.searchParams.delete(i), r.searchParams.set(i, String(e)), /^https?:\/\//i.test(t) ? r.toString() : `${r.pathname}${r.search}${r.hash}`;
+	}
+	_handlePageSelection(e, t) {
+		!this.pagingHref && t && t.preventDefault(), this.page = e, this._emitPageChange(e);
+	}
+	_prevPage(e) {
+		if (this.page <= 1) {
+			!this.pagingHref && e && e.preventDefault();
+			return;
+		}
+		this._handlePageSelection(this.page - 1, e);
+	}
+	_nextPage(e) {
+		if (this.page >= this.totalPages) {
+			!this.pagingHref && e && e.preventDefault();
+			return;
+		}
+		this._handlePageSelection(this.page + 1, e);
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("resize", this._onResize), this._onResize();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("resize", this._onResize);
+	}
+	mapSpacingToken(e) {
+		if (e == null) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	__applySpacing() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-pagination-spacing-block-start", t) : this.style.removeProperty("--scb-pagination-spacing-block-start"), n ? this.style.setProperty("--scb-pagination-spacing-block-end", n) : this.style.removeProperty("--scb-pagination-spacing-block-end"), r ? this.style.setProperty("--scb-pagination-spacing-inline-start", r) : this.style.removeProperty("--scb-pagination-spacing-inline-start"), i ? this.style.setProperty("--scb-pagination-spacing-inline-end", i) : this.style.removeProperty("--scb-pagination-spacing-inline-end");
+	}
+	firstUpdated() {
+		this.__applySpacing();
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.__applySpacing();
+	}
+	render() {
+		if (this.totalPages === 0) return null;
+		let e = this.variant ? `${this.variant.toLowerCase()}` : "", t = [], { page: n, totalPages: i } = this, a = window.innerWidth <= 768, o = a ? 1 : 2, s = this._getPagingHref(Math.max(1, this.page - 1)), c = this._getPagingHref(Math.min(this.totalPages, this.page + 1)), l = this.pagingHref ? this.variant === "icon" ? r`<a
+              class="paging-action-link"
+              href=${s}
+              @click=${this._prevPage}
+              aria-label="Föregående sida"
+              aria-disabled=${this.page === 1 ? "true" : "false"}
+            >
+              <scb-icon-button
+                icon="chevron_left"
+                ?disabled=${this.page === 1}
+                aria-label="Föregående sida"
+              ></scb-icon-button>
+            </a>` : r`<a
+              class="paging-action-link"
+              href=${s}
+              @click=${this._prevPage}
+              aria-label="Föregående sida"
+              aria-disabled=${this.page === 1 ? "true" : "false"}
+            >
+              <scb-button
+                variant="text"
+                label="Föregående"
+                icon="chevron_left"
+                ?disabled=${this.page === 1}
+                aria-label="Föregående sida"
+              ></scb-button>
+            </a>` : this.variant === "icon" ? r`<scb-icon-button
+              icon="chevron_left"
+              @click=${this._prevPage}
+              ?disabled=${this.page === 1}
+              aria-label="Föregående sida"
+            ></scb-icon-button>` : r`<scb-button
+              variant="text"
+              label="Föregående"
+              icon="chevron_left"
+              @click=${this._prevPage}
+              ?disabled=${this.page === 1}
+              aria-label="Föregående sida"
+            ></scb-button>`, u = this.pagingHref ? this.variant === "icon" ? r`<a
+              class="paging-action-link"
+              href=${c}
+              @click=${this._nextPage}
+              aria-label="Nästa sida"
+              aria-disabled=${this.page === this.totalPages ? "true" : "false"}
+            >
+              <scb-icon-button
+                icon="chevron_right"
+                ?disabled=${this.page === this.totalPages}
+                aria-label="Nästa sida"
+              ></scb-icon-button>
+            </a>` : r`<a
+              class="paging-action-link"
+              href=${c}
+              @click=${this._nextPage}
+              aria-label="Nästa sida"
+              aria-disabled=${this.page === this.totalPages ? "true" : "false"}
+            >
+              <scb-button
+                variant="text"
+                label="Nästa"
+                icon="chevron_right"
+                iconPosition="right"
+                ?disabled=${this.page === this.totalPages}
+                aria-label="Nästa sida"
+                trailing-icon
+              ></scb-button>
+            </a>` : this.variant === "icon" ? r`<scb-icon-button
+              icon="chevron_right"
+              @click=${this._nextPage}
+              ?disabled=${this.page === this.totalPages}
+              aria-label="Nästa sida"
+            ></scb-icon-button>` : r`<scb-button
+              variant="text"
+              label="Nästa"
+              icon="chevron_right"
+              iconPosition="right"
+              @click=${this._nextPage}
+              ?disabled=${this.page === this.totalPages}
+              aria-label="Nästa sida"
+              trailing-icon
+            ></scb-button>`, d = (e) => e === n ? r`
+            <li>
+              <span
+                class="page-number active"
+                aria-current="page"
+                aria-label="${this.currentAriaLabel} ${e}"
+                >${e}</span
+              >
+            </li>
+          ` : r`
+            <li>
+              <scb-link
+                class="page-number${e === n ? " active" : ""}"
+                @click=${(t) => this._handlePageSelection(e, t)}
+                aria-current=${e === n ? "page" : void 0}
+                aria-label="${this.pagingNumberAriaLabel} ${e}"
+                href=${this._getPagingHref(e)}
+                ?disabled=${e === n}
+                >${e}</scb-link
+              >
+            </li>
+          `;
+		if (i <= 8) for (let e = 1; e <= i; e++) t.push(d(e));
+		else if (t.push(d(1)), n <= 4 && !a) {
+			for (let e = 2; e <= 5; e++) t.push(d(e));
+			i > 6 ? (t.push(r`<li><span class="ellipsis" aria-hidden="true">…</span></li>`), t.push(d(i))) : i === 6 && t.push(d(i));
+		} else if (n <= 3 && a) {
+			for (let e = 2; e <= 3; e++) t.push(d(e));
+			i > 4 ? (t.push(r`<li><span class="ellipsis" aria-hidden="true">…</span></li>`), t.push(d(i))) : i === 4 && t.push(d(i));
+		} else if (n >= i - (o + 1)) {
+			t.push(r`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);
+			for (let e = i - o * 2; e <= i; e++) e > 1 && t.push(d(e));
+		} else {
+			t.push(r`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);
+			for (let e = n - o; e <= n + o; e++) e > 1 && e < i && t.push(d(e));
+			t.push(r`<li><span class="ellipsis" aria-hidden="true">…</span></li>`), t.push(d(i));
+		}
+		return a ? r`
+        <nav aria-label="${this.paginationAriaLabel}" class="pagination ${e}">
+          <div class="pagination-row">
+            <div class="prev">
+              ${l}
+            </div>
+            <ol>
+              ${t}
+            </ol>
+          </div>
+          <div class="next">
+            ${u}
+          </div>
+        </nav>
+      ` : r`
+      <nav aria-label="${this.paginationAriaLabel}" class="pagination ${e}">
+        <div class="pagination-row">
+          <div class="prev">
+            ${l}
+          </div>
+          <ol>
+            ${t}
+          </ol>
+          <div class="next">
+            ${u}
+          </div>
+        </div>
+      </nav>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "variant", void 0), e([a({ type: Number })], o.prototype, "page", void 0), e([a({
+	type: Number,
+	attribute: "total-pages"
+})], o.prototype, "totalPages", void 0), e([a({
+	type: String,
+	attribute: "paging-href"
+})], o.prototype, "pagingHref", void 0), e([a({
+	type: String,
+	attribute: "base-uri"
+})], o.prototype, "baseUri", void 0), e([a({
+	type: String,
+	attribute: "pagination-aria-label"
+})], o.prototype, "paginationAriaLabel", void 0), e([a({
+	type: String,
+	attribute: "current-aria-label"
+})], o.prototype, "currentAriaLabel", void 0), e([a({
+	type: String,
+	attribute: "paging-number-aria-label"
+})], o.prototype, "pagingNumberAriaLabel", void 0), e([a({ type: Boolean })], o.prototype, "isNarrow", void 0), e([a({ type: String })], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top"
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom"
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left"
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right"
+})], o.prototype, "spacingRight", void 0), o = e([i("scb-pagination")], o);
+//#endregion
+export { o as ScbPagination };

package/scb-progress-indicator/scb-progress-indicator.js

@@ -0,0 +1,199 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-progress-indicator/scb-progress-indicator.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.id = "", this.type = "circular", this.progress = 25, this.isStatic = !0, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._isSyncingAria = !1, this._defaultAriaLabelApplied = !1, this._defaultAriaValueTextApplied = !1;
+	}
+	static {
+		this.styles = [n`
+
+      .circular {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 46px;
+        height: 46px;
+        position: relative;
+      }
+      .circular-spin {
+        animation: spin 1s linear infinite;
+        width: 46px;
+        height: 46px ;
+        position: relative;
+        z-index: 1;
+      }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      .circular-bg {
+        stroke:  var(--md-sys-color-secondary-container);
+      }
+      .circular-fg {
+        transition: stroke-dashoffset 0.3s ease;
+      }
+      .linear {
+        width: 100%;
+        height: 6px;
+        background: var(--md-sys-color-secondary-container);
+        border-radius: 3px;
+        overflow: hidden;
+        position: relative;
+      }
+      :host {
+        display: inline-block;
+        margin-block-start: var(--scb-progress-indicator-spacing-block-start, 0);
+        margin-block-end: var(--scb-progress-indicator-spacing-block-end, 0);
+        margin-inline-start: var(--scb-progress-indicator-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-progress-indicator-spacing-inline-end, 0);
+        --progress-fill: var(--md-sys-color-primary);
+      }
+      :host([type='linear']) {
+        display: block;
+        width: 100%;
+      }
+      .linear-loader {
+        height: 100%;
+        width: 40%;
+        background: var(--progress-fill);
+        border-radius: 3px;
+        animation: linear-progress 1.2s cubic-bezier(.4,0,.2,1) infinite;
+      }
+      .linear-static {
+        height: 100%;
+        border-radius: 3px;
+        transition: width 0.3s ease;
+        background: var(--progress-fill);
+      }
+      @keyframes linear-progress {
+        0% { margin-left: -40%; width: 40%; }
+        50% { margin-left: 30%; width: 60%; }
+        100% { margin-left: 100%; width: 40%; }
+      }
+    `];
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"role",
+			"aria-label",
+			"aria-labelledby",
+			"aria-valuemin",
+			"aria-valuemax",
+			"aria-valuetext"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		super.attributeChangedCallback(e, t, n), t !== n && (e === "role" || e.startsWith("aria-")) && this.syncAria();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.syncAria();
+	}
+	clampProgress(e) {
+		return Number.isNaN(e) ? 0 : Math.max(0, Math.min(100, e));
+	}
+	applyDefaultAriaLabel(e) {
+		let t = this.getAttribute("aria-labelledby"), n = this.getAttribute("aria-label");
+		if (t) {
+			this._defaultAriaLabelApplied &&= (this.removeAttribute("aria-label"), !1);
+			return;
+		}
+		if (n !== null) {
+			this._defaultAriaLabelApplied && n !== e && (this._defaultAriaLabelApplied = !1);
+			return;
+		}
+		this.setAttribute("aria-label", e), this._defaultAriaLabelApplied = !0;
+	}
+	syncAria() {
+		if (!this._isSyncingAria) {
+			this._isSyncingAria = !0;
+			try {
+				if (this.hasAttribute("role") || this.setAttribute("role", "progressbar"), this.hasAttribute("aria-valuemin") || this.setAttribute("aria-valuemin", "0"), this.hasAttribute("aria-valuemax") || this.setAttribute("aria-valuemax", "100"), this.type === "linear" && !this.isStatic) {
+					this.removeAttribute("aria-valuenow");
+					let e = this.getAttribute("aria-valuetext");
+					e === null ? (this.setAttribute("aria-valuetext", "Laddar"), this._defaultAriaValueTextApplied = !0) : this._defaultAriaValueTextApplied && e !== "Laddar" && (this._defaultAriaValueTextApplied = !1), this.applyDefaultAriaLabel("Laddar");
+					return;
+				}
+				let e = this.clampProgress(this.progress);
+				this.setAttribute("aria-valuenow", String(e)), this._defaultAriaValueTextApplied &&= (this.getAttribute("aria-valuetext") === "Laddar" && this.removeAttribute("aria-valuetext"), !1), this.applyDefaultAriaLabel("Förlopp");
+			} finally {
+				this._isSyncingAria = !1;
+			}
+		}
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	applySpacing() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-progress-indicator-spacing-block-start", t) : this.style.removeProperty("--scb-progress-indicator-spacing-block-start"), n ? this.style.setProperty("--scb-progress-indicator-spacing-block-end", n) : this.style.removeProperty("--scb-progress-indicator-spacing-block-end"), r ? this.style.setProperty("--scb-progress-indicator-spacing-inline-start", r) : this.style.removeProperty("--scb-progress-indicator-spacing-inline-start"), i ? this.style.setProperty("--scb-progress-indicator-spacing-inline-end", i) : this.style.removeProperty("--scb-progress-indicator-spacing-inline-end");
+	}
+	applyTypeLayout() {
+		this.type === "linear" ? (this.style.display = "block", this.style.width = "100%") : (this.style.removeProperty("display"), this.style.removeProperty("width"));
+	}
+	firstUpdated(e) {
+		this.applyTypeLayout(), this.applySpacing(), this.syncAria();
+	}
+	updated(e) {
+		super.updated(e), e.has("type") && this.applyTypeLayout(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing(), (e.has("type") || e.has("progress") || e.has("isStatic")) && this.syncAria();
+	}
+	render() {
+		return r`
+      <div class="scb-progress-indicator">
+        ${this.type === "circular" ? r`
+          <div class="circular">
+            <svg class="circular-spin" viewBox="0 0 40 40" aria-hidden="true" focusable="false">
+              <circle class="circular-bg" cx="20" cy="20" r="16" fill="none" stroke-width="4" />
+              <circle
+                class="circular-fg"
+                cx="20" cy="20" r="16" fill="none" stroke-width="4"
+                stroke="var(--md-sys-color-primary)"
+                stroke-dasharray="${2 * Math.PI * 16}"
+                stroke-dashoffset="${(1 - this.progress / 100) * 2 * Math.PI * 16}"
+              />
+            </svg>
+          </div>
+        ` : r`
+      <div class="linear" style="--progress-fill: var(--md-sys-color-primary);">
+            ${this.isStatic ? r`<div class="linear-static" style="width: ${this.progress}%;"></div>` : r`<div class="linear-loader"></div>`}
+          </div>
+        `}
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "id", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "type", void 0), e([a({
+	type: Number,
+	reflect: !0
+})], o.prototype, "progress", void 0), e([a({
+	type: Boolean,
+	attribute: "is-static"
+})], o.prototype, "isStatic", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), o = e([i("scb-progress-indicator")], o);
+//#endregion
+export { o as ScbProgressIndicator };