@c2n/spinner 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# @c2n/spinner
+
+Spinner built with Lit: a circular progress ring, indeterminate by default or showing a value, with optional text.
+
+```bash
+npm install @c2n/spinner
+```
+
+```html
+<script type="module">
+  import '@c2n/spinner'
+</script>
+
+<c2-spinner></c2-spinner>
+<c2-spinner>Loading…</c2-spinner>
+<c2-spinner value="65"></c2-spinner>
+<c2-spinner value="3" max="4">3 of 4 steps</c2-spinner>
+```
+
+- **Indeterminate**: the arc grows, shrinks and spins; `--c2-spinner--animation-duration` sets one cycle.
+- **Determinate**: `value` (out of `max`, default 100) fills the ring clockwise from the top and animates between values; clear it to spin again.
+- **Text**: slotted text sits beside the ring (`--c2-spinner--flex-direction: column` for below) and is the accessible name; without text, `label` (default "Loading") names it. The element is `role="progressbar"` with `aria-valuenow` when determinate.
+- **Reduced motion**: a slow steady rotation of a fixed arc replaces the pulsing.
+
+Theme it with `--c2-spinner--size`, `--c2-spinner--stroke-width` (in the ring's 48-unit box, so it scales with the size), `--c2-spinner--stroke-linecap`, `--c2-spinner--color`, `--c2-spinner__track--color` (`transparent` for an arc alone) and the `--c2-spinner__label--*` text variables. The full list is in `custom-elements.json` and on the docs site.

package/dist/spinner.js

@@ -0,0 +1,84 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/spinner.scss?inline
+var spinner_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-spinner {\n  display: inline-flex;\n  align-items: center;\n  flex-direction: var(--c2-spinner--flex-direction,row);\n  gap: var(--c2-spinner--gap,8px);\n}\n\n.c2-spinner-ring {\n  flex: none;\n  width: var(--c2-spinner--size,24px);\n  height: var(--c2-spinner--size,24px);\n  transform: rotate(-90deg);\n  animation: c2-spinner-rotate var(--c2-spinner--animation-duration,1.4s) linear infinite;\n}\n\n.c2-spinner-track,\n.c2-spinner-arc {\n  fill: none;\n  stroke-width: var(--c2-spinner--stroke-width,4px);\n}\n\n.c2-spinner-track {\n  stroke: var(--c2-spinner__track--color,#e4e4e7);\n}\n\n.c2-spinner-arc {\n  stroke: var(--c2-spinner--color,#0265dc);\n  stroke-linecap: var(--c2-spinner--stroke-linecap,round);\n  stroke-dasharray: 1 200;\n  stroke-dashoffset: 0;\n  animation: c2-spinner-dash calc(var(--c2-spinner--animation-duration,1.4s) * 1.1) ease-in-out infinite;\n}\n\n.is-determinate .c2-spinner-ring {\n  animation: none;\n}\n\n.is-determinate .c2-spinner-arc {\n  animation: none;\n  transition: stroke-dashoffset calc(var(--c2-spinner--animation-duration,1.4s) / 2) cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-spinner-label {\n  color: var(--c2-spinner__label--color,#71717a);\n  font-size: var(--c2-spinner__label--font-size,14px);\n  font-weight: var(--c2-spinner__label--font-weight);\n  line-height: 1.4;\n}\n.c2-spinner-label[hidden] {\n  display: none;\n}\n\n@keyframes c2-spinner-rotate {\n  from {\n    transform: rotate(-90deg);\n  }\n  to {\n    transform: rotate(270deg);\n  }\n}\n@keyframes c2-spinner-dash {\n  0% {\n    stroke-dasharray: 1 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90 200;\n    stroke-dashoffset: -30;\n  }\n  100% {\n    stroke-dasharray: 90 200;\n    stroke-dashoffset: -124;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .c2-spinner-ring {\n    animation-duration: 3s;\n  }\n  .c2-spinner-arc {\n    animation: none;\n    stroke-dasharray: 60 200;\n  }\n  .is-determinate .c2-spinner-arc {\n    transition: none;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+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;
+}
+//#endregion
+//#region src/spinner.ts
+/** Radius of the ring in the 48-unit view box; the circumference drives the dash lengths. */
+var RADIUS = 20;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+var Spinner = class Spinner extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = void 0;
+		this.max = 100;
+		this.label = "";
+		this.hasText = false;
+	}
+	static {
+		this.styles = unsafeCSS(spinner_default);
+	}
+	/** Completed fraction, `0` to `1`; `undefined` while indeterminate. */
+	get fraction() {
+		if (this.value === void 0 || Number.isNaN(this.value)) return void 0;
+		const max = this.max > 0 ? this.max : 100;
+		return Math.min(1, Math.max(0, this.value / max));
+	}
+	firstUpdated() {
+		const slot = this.renderRoot.querySelector("slot");
+		if (slot) this.updateText(slot);
+	}
+	handleSlotChange(event) {
+		this.updateText(event.target);
+	}
+	updateText(slot) {
+		this.hasText = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+	}
+	render() {
+		const fraction = this.fraction;
+		const determinate = fraction !== void 0;
+		const arcStyle = determinate ? styleMap({
+			strokeDasharray: `${CIRCUMFERENCE}`,
+			strokeDashoffset: `${CIRCUMFERENCE * (1 - fraction)}`
+		}) : nothing;
+		return html`
+      <div
+        class=${classMap({
+			"c2-spinner": true,
+			"is-determinate": determinate,
+			"has-text": this.hasText
+		})}
+        role="progressbar"
+        aria-label=${this.hasText ? nothing : ifDefined(this.label || "Loading")}
+        aria-labelledby=${this.hasText ? "label" : nothing}
+        aria-valuemin=${determinate ? "0" : nothing}
+        aria-valuemax=${determinate ? String(this.max) : nothing}
+        aria-valuenow=${determinate ? String(this.value) : nothing}
+      >
+        <svg class="c2-spinner-ring" part="ring" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
+          <circle class="c2-spinner-track" part="track" cx="24" cy="24" r=${RADIUS}></circle>
+          <circle class="c2-spinner-arc" part="arc" cx="24" cy="24" r=${RADIUS} style=${arcStyle}></circle>
+        </svg>
+        <span id="label" class="c2-spinner-label" part="label" ?hidden=${!this.hasText}><slot @slotchange=${this.handleSlotChange}></slot></span>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Number })], Spinner.prototype, "value", void 0);
+__decorate([property({ type: Number })], Spinner.prototype, "max", void 0);
+__decorate([property()], Spinner.prototype, "label", void 0);
+__decorate([state()], Spinner.prototype, "hasText", void 0);
+Spinner = __decorate([customElement("c2-spinner")], Spinner);
+//#endregion
+export { Spinner };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@c2n/spinner",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/spinner.js",
+  "exports": {
+    ".": {
+      "default": "./dist/spinner.js",
+      "types": "./types/src/spinner.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "spinner",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/spinner.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+/**
+ * Circular progress indicator. Without a `value` it spins indeterminately; with one it draws the completed arc of a
+ * ring and animates between values. Text in the default slot sits beside it (or below, via a variable) and names the
+ * indicator for assistive technology, as does the `label` attribute. Everything is one SVG ring, so size, thickness,
+ * colours and speed are variables.
+ *
+ * @tag c2-spinner
+ *
+ * @slot - Optional text shown next to the ring (e.g. "Loading…"). Also used as the accessible name.
+ *
+ * @cssproperty {pixel} [--c2-spinner--size=24px] - Diameter of the ring.
+ * @cssproperty {pixel} [--c2-spinner--stroke-width=4px] - Thickness of the ring, in the ring's 48-unit box; it scales with the size.
+ * @cssproperty {stroke-linecap} [--c2-spinner--stroke-linecap=round] - `butt` for square arc ends.
+ * @cssproperty {color} [--c2-spinner--color=#0265dc] - Colour of the moving arc.
+ * @cssproperty {color} [--c2-spinner__track--color=#e4e4e7] - Colour of the full ring behind the arc; `transparent` hides it.
+ * @cssproperty {time} [--c2-spinner--animation-duration=1.4s] - One indeterminate cycle; also the determinate transition length divided by two.
+ * @cssproperty {pixel} [--c2-spinner--gap=8px] - Space between the ring and the text.
+ * @cssproperty {flex-direction} [--c2-spinner--flex-direction=row] - `column` puts the text under the ring.
+ * @cssproperty {color} [--c2-spinner__label--color=#71717a]
+ * @cssproperty {font-size} [--c2-spinner__label--font-size=14px]
+ * @cssproperty {font-weight} --c2-spinner__label--font-weight
+ */
+export declare class Spinner extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Progress between `0` and `max`. Leave unset for an indeterminate spinner. */
+    value: number | undefined;
+    /** Value that fills the whole ring. */
+    max: number;
+    /** Accessible name when nothing is slotted. Defaults to "Loading". */
+    label: string;
+    private hasText;
+    /** Completed fraction, `0` to `1`; `undefined` while indeterminate. */
+    get fraction(): number | undefined;
+    firstUpdated(): void;
+    private handleSlotChange;
+    private updateText;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-spinner': Spinner;
+    }
+}
+//# sourceMappingURL=spinner.d.ts.map

package/types/src/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAW1D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAoB;IAE1C,gFAAgF;IACpD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAEjE,uCAAuC;IACX,GAAG,SAAM;IAErC,sEAAsE;IAC1D,KAAK,SAAK;IAEb,OAAO,CAAC,OAAO,CAAQ;IAEhC,uEAAuE;IACvE,IAAI,QAAQ,IAAI,MAAM,GAAG,SAAS,CAIjC;IAEQ,YAAY;IAKrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAIT,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAA;KACtB;CACF"}