@fuse_ui/spinner 0.0.1

package/fesm2022/fuse_ui-spinner.mjs

@@ -0,0 +1,34 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class FuseSpinnerComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Override the spinner colour with any CSS colour value. */
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Wrap the spinner in an absolute-positioned overlay over its container. */
+    overlay = input(false, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => [
+        'fuse-spinner-host',
+        `fuse-spinner-host--${this.size()}`,
+        this.overlay() ? 'fuse-spinner-host--overlay' : '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseSpinnerComponent, isStandalone: true, selector: "fuse-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Loading" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (overlay()) {\n  <div class=\"fuse-spinner__overlay\">\n    <span\n      class=\"fuse-spinner fuse-spinner--{{ size() }}\"\n      [style.border-top-color]=\"color() || null\"\n    ></span>\n  </div>\n} @else {\n  <span\n    class=\"fuse-spinner fuse-spinner--{{ size() }}\"\n    [style.border-top-color]=\"color() || null\"\n  ></span>\n}\n", styles: [":host{--fuse-spinner-color: var(--fuse-color-primary, #4f46e5);--fuse-spinner-track-color: var(--fuse-color-neutral-200, #e5e7eb);--fuse-spinner-overlay-bg: rgba(255, 255, 255, .65);display:inline-flex;align-items:center;justify-content:center}:host.fuse-spinner-host--overlay{display:block;position:relative}.fuse-spinner__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--fuse-spinner-overlay-bg);border-radius:inherit;z-index:10}.fuse-spinner{display:inline-block;flex-shrink:0;border-style:solid;border-color:var(--fuse-spinner-track-color);border-top-color:var(--fuse-spinner-color);border-radius:var(--fuse-radius-full, 9999px);animation:fuse-spin .65s linear infinite}.fuse-spinner--sm{width:16px;height:16px;border-width:2px}.fuse-spinner--md{width:24px;height:24px;border-width:3px}.fuse-spinner--lg{width:40px;height:40px;border-width:4px}@keyframes fuse-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-spinner', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        'role': 'status',
+                        'aria-label': 'Loading',
+                    }, template: "@if (overlay()) {\n  <div class=\"fuse-spinner__overlay\">\n    <span\n      class=\"fuse-spinner fuse-spinner--{{ size() }}\"\n      [style.border-top-color]=\"color() || null\"\n    ></span>\n  </div>\n} @else {\n  <span\n    class=\"fuse-spinner fuse-spinner--{{ size() }}\"\n    [style.border-top-color]=\"color() || null\"\n  ></span>\n}\n", styles: [":host{--fuse-spinner-color: var(--fuse-color-primary, #4f46e5);--fuse-spinner-track-color: var(--fuse-color-neutral-200, #e5e7eb);--fuse-spinner-overlay-bg: rgba(255, 255, 255, .65);display:inline-flex;align-items:center;justify-content:center}:host.fuse-spinner-host--overlay{display:block;position:relative}.fuse-spinner__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--fuse-spinner-overlay-bg);border-radius:inherit;z-index:10}.fuse-spinner{display:inline-block;flex-shrink:0;border-style:solid;border-color:var(--fuse-spinner-track-color);border-top-color:var(--fuse-spinner-color);border-radius:var(--fuse-radius-full, 9999px);animation:fuse-spin .65s linear infinite}.fuse-spinner--sm{width:16px;height:16px;border-width:2px}.fuse-spinner--md{width:24px;height:24px;border-width:3px}.fuse-spinner--lg{width:40px;height:40px;border-width:4px}@keyframes fuse-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuseSpinnerComponent };
+//# sourceMappingURL=fuse_ui-spinner.mjs.map

package/fesm2022/fuse_ui-spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuse_ui-spinner.mjs","sources":["../../../../packages/spinner/src/lib/spinner/fuse-spinner.component.ts","../../../../packages/spinner/src/lib/spinner/fuse-spinner.component.html","../../../../packages/spinner/src/fuse_ui-spinner.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nexport type FuseSpinnerSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'fuse-spinner',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './fuse-spinner.component.html',\n  styleUrl: './fuse-spinner.component.scss',\n  host: {\n    '[class]': 'hostClasses()',\n    'role': 'status',\n    'aria-label': 'Loading',\n  },\n})\nexport class FuseSpinnerComponent {\n  readonly size = input<FuseSpinnerSize>('md');\n  /** Override the spinner colour with any CSS colour value. */\n  readonly color = input('');\n  /** Wrap the spinner in an absolute-positioned overlay over its container. */\n  readonly overlay = input(false);\n\n  protected readonly hostClasses = computed(() =>\n    [\n      'fuse-spinner-host',\n      `fuse-spinner-host--${this.size()}`,\n      this.overlay() ? 'fuse-spinner-host--overlay' : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  );\n}\n","@if (overlay()) {\n  <div class=\"fuse-spinner__overlay\">\n    <span\n      class=\"fuse-spinner fuse-spinner--{{ size() }}\"\n      [style.border-top-color]=\"color() || null\"\n    ></span>\n  </div>\n} @else {\n  <span\n    class=\"fuse-spinner fuse-spinner--{{ size() }}\"\n    [style.border-top-color]=\"color() || null\"\n  ></span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAiBa,oBAAoB,CAAA;AACtB,IAAA,IAAI,GAAG,KAAK,CAAkB,IAAI,2EAAC;;AAEnC,IAAA,KAAK,GAAG,KAAK,CAAC,EAAE,4EAAC;;AAEjB,IAAA,OAAO,GAAG,KAAK,CAAC,KAAK,8EAAC;AAEZ,IAAA,WAAW,GAAG,QAAQ,CAAC,MACxC;QACE,mBAAmB;AACnB,QAAA,CAAA,mBAAA,EAAsB,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;QACnC,IAAI,CAAC,OAAO,EAAE,GAAG,4BAA4B,GAAG,EAAE;AACnD;SACE,MAAM,CAAC,OAAO;AACd,SAAA,IAAI,CAAC,GAAG,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACb;uGAfU,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,8iBCjBjC,0VAaA,EAAA,MAAA,EAAA,CAAA,q8BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDIa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAbhC,SAAS;+BACE,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,EAAE,mBACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EAGzC;AACJ,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,MAAM,EAAE,QAAQ;AAChB,wBAAA,YAAY,EAAE,SAAS;AACxB,qBAAA,EAAA,QAAA,EAAA,0VAAA,EAAA,MAAA,EAAA,CAAA,q8BAAA,CAAA,EAAA;;;AEfH;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@fuse_ui/spinner",
+  "version": "0.0.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "fuse-ui",
+    "angular",
+    "ionic",
+    "ionic8",
+    "angular18",
+    "angular19",
+    "angular20",
+    "angular21",
+    "ui-components",
+    "design-system",
+    "css-variables",
+    "signals",
+    "standalone",
+    "multi-theme",
+    "dark-mode",
+    "fluid-typography",
+    "animated"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=18.0.0",
+    "@angular/common": ">=18.0.0",
+    "rxjs": ">=7.4.0"
+  },
+  "peerDependenciesMeta": {
+    "@ionic/angular": {
+      "optional": true
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "**/*.scss"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "module": "fesm2022/fuse_ui-spinner.mjs",
+  "typings": "types/fuse_ui-spinner.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/fuse_ui-spinner.d.ts",
+      "default": "./fesm2022/fuse_ui-spinner.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/fuse_ui-spinner.d.ts

@@ -0,0 +1,16 @@
+import * as _angular_core from '@angular/core';
+
+type FuseSpinnerSize = 'sm' | 'md' | 'lg';
+declare class FuseSpinnerComponent {
+    readonly size: _angular_core.InputSignal<FuseSpinnerSize>;
+    /** Override the spinner colour with any CSS colour value. */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Wrap the spinner in an absolute-positioned overlay over its container. */
+    readonly overlay: _angular_core.InputSignal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseSpinnerComponent, "fuse-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "overlay": { "alias": "overlay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { FuseSpinnerComponent };
+export type { FuseSpinnerSize };