@fuse_ui/skeleton 0.0.1

package/fesm2022/fuse_ui-skeleton.mjs

@@ -0,0 +1,34 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class FuseSkeletonComponent {
+    // ─── Public @Input() API ────────────────────────────────────────────────────
+    variant = input('rect', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input('1rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    // ─── Host classes ────────────────────────────────────────────────────────────
+    get hostClasses() {
+        return 'fuse-skeleton-host';
+    }
+    // ─── Derived values ─────────────────────────────────────────────────────────
+    lineArray = computed(() => Array.from({ length: this.lines() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "lineArray" }] : /* istanbul ignore next */ []));
+    /** Width of the last line in a multi-line text block (shorter = more natural). */
+    lineWidth(index) {
+        const isLast = index === this.lineArray().length - 1;
+        return isLast ? '70%' : '100%';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseSkeletonComponent, isStandalone: true, selector: "fuse-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: "<!-- Multi-line text skeleton -->\n@if (variant() === 'text' && lines() > 1) {\n  @for (i of lineArray(); track i) {\n    <span\n      class=\"fuse-skeleton fuse-skeleton--text\"\n      [style.width]=\"lineWidth(i)\"\n      [style.height]=\"height()\"\n    ></span>\n  }\n} @else {\n  <!-- Single element (text line, circle, or rect) -->\n  <span\n    class=\"fuse-skeleton\"\n    [class.fuse-skeleton--text]=\"variant() === 'text'\"\n    [class.fuse-skeleton--circle]=\"variant() === 'circle'\"\n    [class.fuse-skeleton--rect]=\"variant() === 'rect'\"\n    [style.width]=\"variant() === 'circle' ? height() : width()\"\n    [style.height]=\"height()\"\n  ></span>\n}\n", styles: ["@keyframes fuse-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}:host{--fuse-skeleton-bg-base: var(--fuse-color-bg-elevated, #f1f5f9);--fuse-skeleton-bg-highlight: var(--fuse-color-border-default, #e2e8f0);--fuse-skeleton-radius-text: var(--fuse-radius-sm, 4px);--fuse-skeleton-radius-rect: var(--fuse-radius-md, 8px);--fuse-skeleton-line-gap: var(--fuse-space-2, .5rem);--fuse-skeleton-duration: 1.6s;display:flex;flex-direction:column;gap:var(--fuse-skeleton-line-gap);width:100%}.fuse-skeleton{display:block;background:linear-gradient(90deg,var(--fuse-skeleton-bg-base) 25%,var(--fuse-skeleton-bg-highlight) 50%,var(--fuse-skeleton-bg-base) 75%);background-size:200% 100%;animation:fuse-shimmer var(--fuse-skeleton-duration) linear infinite}.fuse-skeleton--text{border-radius:var(--fuse-skeleton-radius-text)}.fuse-skeleton--rect{border-radius:var(--fuse-skeleton-radius-rect)}.fuse-skeleton--circle{border-radius:50%;aspect-ratio:1}:host-context(.ios){--fuse-skeleton-radius-rect: var(--fuse-radius-lg, 12px)}:host-context(.md){--fuse-skeleton-radius-rect: var(--fuse-radius-xs, 2px);--fuse-skeleton-radius-text: 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-skeleton', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: "<!-- Multi-line text skeleton -->\n@if (variant() === 'text' && lines() > 1) {\n  @for (i of lineArray(); track i) {\n    <span\n      class=\"fuse-skeleton fuse-skeleton--text\"\n      [style.width]=\"lineWidth(i)\"\n      [style.height]=\"height()\"\n    ></span>\n  }\n} @else {\n  <!-- Single element (text line, circle, or rect) -->\n  <span\n    class=\"fuse-skeleton\"\n    [class.fuse-skeleton--text]=\"variant() === 'text'\"\n    [class.fuse-skeleton--circle]=\"variant() === 'circle'\"\n    [class.fuse-skeleton--rect]=\"variant() === 'rect'\"\n    [style.width]=\"variant() === 'circle' ? height() : width()\"\n    [style.height]=\"height()\"\n  ></span>\n}\n", styles: ["@keyframes fuse-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}:host{--fuse-skeleton-bg-base: var(--fuse-color-bg-elevated, #f1f5f9);--fuse-skeleton-bg-highlight: var(--fuse-color-border-default, #e2e8f0);--fuse-skeleton-radius-text: var(--fuse-radius-sm, 4px);--fuse-skeleton-radius-rect: var(--fuse-radius-md, 8px);--fuse-skeleton-line-gap: var(--fuse-space-2, .5rem);--fuse-skeleton-duration: 1.6s;display:flex;flex-direction:column;gap:var(--fuse-skeleton-line-gap);width:100%}.fuse-skeleton{display:block;background:linear-gradient(90deg,var(--fuse-skeleton-bg-base) 25%,var(--fuse-skeleton-bg-highlight) 50%,var(--fuse-skeleton-bg-base) 75%);background-size:200% 100%;animation:fuse-shimmer var(--fuse-skeleton-duration) linear infinite}.fuse-skeleton--text{border-radius:var(--fuse-skeleton-radius-text)}.fuse-skeleton--rect{border-radius:var(--fuse-skeleton-radius-rect)}.fuse-skeleton--circle{border-radius:50%;aspect-ratio:1}:host-context(.ios){--fuse-skeleton-radius-rect: var(--fuse-radius-lg, 12px)}:host-context(.md){--fuse-skeleton-radius-rect: var(--fuse-radius-xs, 2px);--fuse-skeleton-radius-text: 0}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuseSkeletonComponent };
+//# sourceMappingURL=fuse_ui-skeleton.mjs.map

package/fesm2022/fuse_ui-skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuse_ui-skeleton.mjs","sources":["../../../../packages/skeleton/src/lib/skeleton/fuse-skeleton.component.ts","../../../../packages/skeleton/src/lib/skeleton/fuse-skeleton.component.html","../../../../packages/skeleton/src/fuse_ui-skeleton.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n} from '@angular/core';\n\n@Component({\n  selector: 'fuse-skeleton',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './fuse-skeleton.component.html',\n  styleUrl: './fuse-skeleton.component.scss',\n  host: { '[class]': 'hostClasses' },\n})\nexport class FuseSkeletonComponent {\n  // ─── Public @Input() API ────────────────────────────────────────────────────\n\n  readonly variant = input<'text' | 'circle' | 'rect'>('rect');\n  readonly width = input('100%');\n  readonly height = input('1rem');\n  readonly lines = input(1);\n\n  // ─── Host classes ────────────────────────────────────────────────────────────\n\n  get hostClasses(): string {\n    return 'fuse-skeleton-host';\n  }\n\n  // ─── Derived values ─────────────────────────────────────────────────────────\n\n  protected readonly lineArray = computed(() =>\n    Array.from({ length: this.lines() }, (_, i) => i)\n  );\n\n  /** Width of the last line in a multi-line text block (shorter = more natural). */\n  lineWidth(index: number): string {\n    const isLast = index === this.lineArray().length - 1;\n    return isLast ? '70%' : '100%';\n  }\n}\n","<!-- Multi-line text skeleton -->\n@if (variant() === 'text' && lines() > 1) {\n  @for (i of lineArray(); track i) {\n    <span\n      class=\"fuse-skeleton fuse-skeleton--text\"\n      [style.width]=\"lineWidth(i)\"\n      [style.height]=\"height()\"\n    ></span>\n  }\n} @else {\n  <!-- Single element (text line, circle, or rect) -->\n  <span\n    class=\"fuse-skeleton\"\n    [class.fuse-skeleton--text]=\"variant() === 'text'\"\n    [class.fuse-skeleton--circle]=\"variant() === 'circle'\"\n    [class.fuse-skeleton--rect]=\"variant() === 'rect'\"\n    [style.width]=\"variant() === 'circle' ? height() : width()\"\n    [style.height]=\"height()\"\n  ></span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAgBa,qBAAqB,CAAA;;AAGvB,IAAA,OAAO,GAAG,KAAK,CAA6B,MAAM,8EAAC;AACnD,IAAA,KAAK,GAAG,KAAK,CAAC,MAAM,4EAAC;AACrB,IAAA,MAAM,GAAG,KAAK,CAAC,MAAM,6EAAC;AACtB,IAAA,KAAK,GAAG,KAAK,CAAC,CAAC,4EAAC;;AAIzB,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,oBAAoB;IAC7B;;AAImB,IAAA,SAAS,GAAG,QAAQ,CAAC,MACtC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,gFAClD;;AAGD,IAAA,SAAS,CAAC,KAAa,EAAA;AACrB,QAAA,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,GAAG,CAAC;QACpD,OAAO,MAAM,GAAG,KAAK,GAAG,MAAM;IAChC;uGAxBW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,gnBChBlC,gqBAoBA,EAAA,MAAA,EAAA,CAAA,ynCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDJa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBATjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EAGzC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAA,QAAA,EAAA,gqBAAA,EAAA,MAAA,EAAA,CAAA,ynCAAA,CAAA,EAAA;;;AEdpC;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@fuse_ui/skeleton",
+  "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-skeleton.mjs",
+  "typings": "types/fuse_ui-skeleton.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/fuse_ui-skeleton.d.ts",
+      "default": "./fesm2022/fuse_ui-skeleton.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/fuse_ui-skeleton.d.ts

@@ -0,0 +1,16 @@
+import * as _angular_core from '@angular/core';
+
+declare class FuseSkeletonComponent {
+    readonly variant: _angular_core.InputSignal<"text" | "circle" | "rect">;
+    readonly width: _angular_core.InputSignal<string>;
+    readonly height: _angular_core.InputSignal<string>;
+    readonly lines: _angular_core.InputSignal<number>;
+    get hostClasses(): string;
+    protected readonly lineArray: _angular_core.Signal<number[]>;
+    /** Width of the last line in a multi-line text block (shorter = more natural). */
+    lineWidth(index: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseSkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseSkeletonComponent, "fuse-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "lines": { "alias": "lines"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { FuseSkeletonComponent };