@fuse_ui/avatar 0.0.1

package/fesm2022/fuse_ui-avatar.mjs

@@ -0,0 +1,49 @@
+import * as i0 from '@angular/core';
+import { input, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class FuseAvatarComponent {
+    // ─── Public @Input() API ────────────────────────────────────────────────────
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    status = input(null, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    // ─── Internal signal state ──────────────────────────────────────────────────
+    hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    // ─── Host classes ────────────────────────────────────────────────────────────
+    hostClasses = computed(() => [
+        'fuse-avatar',
+        `fuse-avatar--${this.size()}`,
+        `fuse-avatar--${this.shape()}`,
+    ].join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    // ─── Derived values ─────────────────────────────────────────────────────────
+    initials = computed(() => {
+        const name = this.name();
+        if (!name)
+            return '';
+        return name
+            .trim()
+            .split(/\s+/)
+            .slice(0, 2)
+            .map(word => word[0]?.toUpperCase() ?? '')
+            .join('');
+    }, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    // ─── Event handlers ─────────────────────────────────────────────────────────
+    onImageError() {
+        this.hasError.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseAvatarComponent, isStandalone: true, selector: "fuse-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<!-- Image \u2014 shown only when src is set and no load error -->\n@if (src() && !hasError()) {\n  <img\n    class=\"fuse-avatar__img\"\n    [src]=\"src()\"\n    [alt]=\"alt()\"\n    (error)=\"onImageError()\"\n  />\n}\n\n<!-- Initials fallback \u2014 shown when no src, or on image error -->\n@if (!src() || hasError()) {\n  <span class=\"fuse-avatar__initials\" aria-hidden=\"true\">\n    {{ initials() }}\n  </span>\n}\n\n<!-- Status indicator dot -->\n@if (status()) {\n  <span\n    class=\"fuse-avatar__status\"\n    [class]=\"'fuse-avatar__status--' + status()\"\n    [attr.aria-label]=\"status()\"\n  ></span>\n}\n", styles: [":host{--fuse-avatar-size-xs: 24px;--fuse-avatar-size-sm: 32px;--fuse-avatar-size-md: 40px;--fuse-avatar-size-lg: 56px;--fuse-avatar-size-xl: 72px;--fuse-avatar-font-size-xs: .6rem;--fuse-avatar-font-size-sm: .75rem;--fuse-avatar-font-size-md: .9rem;--fuse-avatar-font-size-lg: 1.2rem;--fuse-avatar-font-size-xl: 1.6rem;--fuse-avatar-bg: var(--fuse-color-primary-subtle, #eef2ff);--fuse-avatar-text-color: var(--fuse-color-primary, #6366f1);--fuse-avatar-border-color: var(--fuse-color-border, #e2e8f0);--fuse-avatar-border-width: 2px;--fuse-avatar-radius-circle: 50%;--fuse-avatar-radius-square: var(--fuse-radius-md, 8px);--fuse-avatar-status-size: 10px;--fuse-avatar-status-border: 2px solid var(--fuse-color-surface, #ffffff);--fuse-avatar-status-online: var(--fuse-color-success, #22c55e);--fuse-avatar-status-offline: var(--fuse-color-border, #cbd5e1);--fuse-avatar-status-busy: var(--fuse-color-danger, #ef4444);--fuse-avatar-status-away: var(--fuse-color-warning, #f59e0b);display:inline-flex;position:relative;flex-shrink:0}.fuse-avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--fuse-avatar-bg);border:var(--fuse-avatar-border-width) solid transparent;font-weight:600;color:var(--fuse-avatar-text-color)}.fuse-avatar--xs{width:var(--fuse-avatar-size-xs);height:var(--fuse-avatar-size-xs);font-size:var(--fuse-avatar-font-size-xs);--fuse-avatar-status-size: 6px}.fuse-avatar--sm{width:var(--fuse-avatar-size-sm);height:var(--fuse-avatar-size-sm);font-size:var(--fuse-avatar-font-size-sm);--fuse-avatar-status-size: 8px}.fuse-avatar--md{width:var(--fuse-avatar-size-md);height:var(--fuse-avatar-size-md);font-size:var(--fuse-avatar-font-size-md)}.fuse-avatar--lg{width:var(--fuse-avatar-size-lg);height:var(--fuse-avatar-size-lg);font-size:var(--fuse-avatar-font-size-lg);--fuse-avatar-status-size: 13px}.fuse-avatar--xl{width:var(--fuse-avatar-size-xl);height:var(--fuse-avatar-size-xl);font-size:var(--fuse-avatar-font-size-xl);--fuse-avatar-status-size: 16px}.fuse-avatar--circle{border-radius:var(--fuse-avatar-radius-circle)}.fuse-avatar--square{border-radius:var(--fuse-avatar-radius-square)}.fuse-avatar__img{width:100%;height:100%;object-fit:cover;display:block}.fuse-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.fuse-avatar__status{position:absolute;bottom:0;right:0;width:var(--fuse-avatar-status-size);height:var(--fuse-avatar-status-size);border-radius:50%;border:var(--fuse-avatar-status-border)}.fuse-avatar__status--online{background-color:var(--fuse-avatar-status-online)}.fuse-avatar__status--offline{background-color:var(--fuse-avatar-status-offline)}.fuse-avatar__status--busy{background-color:var(--fuse-avatar-status-busy)}.fuse-avatar__status--away{background-color:var(--fuse-avatar-status-away)}:host-context(.ios){--fuse-avatar-radius-square: var(--fuse-radius-lg, 12px)}:host-context(.md){--fuse-avatar-radius-square: var(--fuse-radius-sm, 4px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-avatar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses()' }, template: "<!-- Image \u2014 shown only when src is set and no load error -->\n@if (src() && !hasError()) {\n  <img\n    class=\"fuse-avatar__img\"\n    [src]=\"src()\"\n    [alt]=\"alt()\"\n    (error)=\"onImageError()\"\n  />\n}\n\n<!-- Initials fallback \u2014 shown when no src, or on image error -->\n@if (!src() || hasError()) {\n  <span class=\"fuse-avatar__initials\" aria-hidden=\"true\">\n    {{ initials() }}\n  </span>\n}\n\n<!-- Status indicator dot -->\n@if (status()) {\n  <span\n    class=\"fuse-avatar__status\"\n    [class]=\"'fuse-avatar__status--' + status()\"\n    [attr.aria-label]=\"status()\"\n  ></span>\n}\n", styles: [":host{--fuse-avatar-size-xs: 24px;--fuse-avatar-size-sm: 32px;--fuse-avatar-size-md: 40px;--fuse-avatar-size-lg: 56px;--fuse-avatar-size-xl: 72px;--fuse-avatar-font-size-xs: .6rem;--fuse-avatar-font-size-sm: .75rem;--fuse-avatar-font-size-md: .9rem;--fuse-avatar-font-size-lg: 1.2rem;--fuse-avatar-font-size-xl: 1.6rem;--fuse-avatar-bg: var(--fuse-color-primary-subtle, #eef2ff);--fuse-avatar-text-color: var(--fuse-color-primary, #6366f1);--fuse-avatar-border-color: var(--fuse-color-border, #e2e8f0);--fuse-avatar-border-width: 2px;--fuse-avatar-radius-circle: 50%;--fuse-avatar-radius-square: var(--fuse-radius-md, 8px);--fuse-avatar-status-size: 10px;--fuse-avatar-status-border: 2px solid var(--fuse-color-surface, #ffffff);--fuse-avatar-status-online: var(--fuse-color-success, #22c55e);--fuse-avatar-status-offline: var(--fuse-color-border, #cbd5e1);--fuse-avatar-status-busy: var(--fuse-color-danger, #ef4444);--fuse-avatar-status-away: var(--fuse-color-warning, #f59e0b);display:inline-flex;position:relative;flex-shrink:0}.fuse-avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--fuse-avatar-bg);border:var(--fuse-avatar-border-width) solid transparent;font-weight:600;color:var(--fuse-avatar-text-color)}.fuse-avatar--xs{width:var(--fuse-avatar-size-xs);height:var(--fuse-avatar-size-xs);font-size:var(--fuse-avatar-font-size-xs);--fuse-avatar-status-size: 6px}.fuse-avatar--sm{width:var(--fuse-avatar-size-sm);height:var(--fuse-avatar-size-sm);font-size:var(--fuse-avatar-font-size-sm);--fuse-avatar-status-size: 8px}.fuse-avatar--md{width:var(--fuse-avatar-size-md);height:var(--fuse-avatar-size-md);font-size:var(--fuse-avatar-font-size-md)}.fuse-avatar--lg{width:var(--fuse-avatar-size-lg);height:var(--fuse-avatar-size-lg);font-size:var(--fuse-avatar-font-size-lg);--fuse-avatar-status-size: 13px}.fuse-avatar--xl{width:var(--fuse-avatar-size-xl);height:var(--fuse-avatar-size-xl);font-size:var(--fuse-avatar-font-size-xl);--fuse-avatar-status-size: 16px}.fuse-avatar--circle{border-radius:var(--fuse-avatar-radius-circle)}.fuse-avatar--square{border-radius:var(--fuse-avatar-radius-square)}.fuse-avatar__img{width:100%;height:100%;object-fit:cover;display:block}.fuse-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.fuse-avatar__status{position:absolute;bottom:0;right:0;width:var(--fuse-avatar-status-size);height:var(--fuse-avatar-status-size);border-radius:50%;border:var(--fuse-avatar-status-border)}.fuse-avatar__status--online{background-color:var(--fuse-avatar-status-online)}.fuse-avatar__status--offline{background-color:var(--fuse-avatar-status-offline)}.fuse-avatar__status--busy{background-color:var(--fuse-avatar-status-busy)}.fuse-avatar__status--away{background-color:var(--fuse-avatar-status-away)}:host-context(.ios){--fuse-avatar-radius-square: var(--fuse-radius-lg, 12px)}:host-context(.md){--fuse-avatar-radius-square: var(--fuse-radius-sm, 4px)}\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuseAvatarComponent };
+//# sourceMappingURL=fuse_ui-avatar.mjs.map

package/fesm2022/fuse_ui-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuse_ui-avatar.mjs","sources":["../../../../packages/avatar/src/lib/avatar/fuse-avatar.component.ts","../../../../packages/avatar/src/lib/avatar/fuse-avatar.component.html","../../../../packages/avatar/src/fuse_ui-avatar.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  signal,\n} from '@angular/core';\n\n@Component({\n  selector: 'fuse-avatar',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './fuse-avatar.component.html',\n  styleUrl: './fuse-avatar.component.scss',\n  host: { '[class]': 'hostClasses()' },\n})\nexport class FuseAvatarComponent {\n  // ─── Public @Input() API ────────────────────────────────────────────────────\n\n  readonly src = input('');\n  readonly alt = input('');\n  readonly name = input('');\n  readonly size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n  readonly shape = input<'circle' | 'square'>('circle');\n  readonly status = input<'online' | 'offline' | 'busy' | 'away' | null>(null);\n\n  // ─── Internal signal state ──────────────────────────────────────────────────\n\n  protected readonly hasError = signal(false);\n\n  // ─── Host classes ────────────────────────────────────────────────────────────\n\n  protected readonly hostClasses = computed(() =>\n    [\n      'fuse-avatar',\n      `fuse-avatar--${this.size()}`,\n      `fuse-avatar--${this.shape()}`,\n    ].join(' ')\n  );\n\n  // ─── Derived values ─────────────────────────────────────────────────────────\n\n  protected readonly initials = computed(() => {\n    const name = this.name();\n    if (!name) return '';\n    return name\n      .trim()\n      .split(/\\s+/)\n      .slice(0, 2)\n      .map(word => word[0]?.toUpperCase() ?? '')\n      .join('');\n  });\n\n  // ─── Event handlers ─────────────────────────────────────────────────────────\n\n  protected onImageError(): void {\n    this.hasError.set(true);\n  }\n}\n","<!-- Image — shown only when src is set and no load error -->\n@if (src() && !hasError()) {\n  <img\n    class=\"fuse-avatar__img\"\n    [src]=\"src()\"\n    [alt]=\"alt()\"\n    (error)=\"onImageError()\"\n  />\n}\n\n<!-- Initials fallback — shown when no src, or on image error -->\n@if (!src() || hasError()) {\n  <span class=\"fuse-avatar__initials\" aria-hidden=\"true\">\n    {{ initials() }}\n  </span>\n}\n\n<!-- Status indicator dot -->\n@if (status()) {\n  <span\n    class=\"fuse-avatar__status\"\n    [class]=\"'fuse-avatar__status--' + status()\"\n    [attr.aria-label]=\"status()\"\n  ></span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAiBa,mBAAmB,CAAA;;AAGrB,IAAA,GAAG,GAAG,KAAK,CAAC,EAAE,0EAAC;AACf,IAAA,GAAG,GAAG,KAAK,CAAC,EAAE,0EAAC;AACf,IAAA,IAAI,GAAG,KAAK,CAAC,EAAE,2EAAC;AAChB,IAAA,IAAI,GAAG,KAAK,CAAmC,IAAI,2EAAC;AACpD,IAAA,KAAK,GAAG,KAAK,CAAsB,QAAQ,4EAAC;AAC5C,IAAA,MAAM,GAAG,KAAK,CAAgD,IAAI,6EAAC;;AAIzD,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,+EAAC;;AAIxB,IAAA,WAAW,GAAG,QAAQ,CAAC,MACxC;QACE,aAAa;AACb,QAAA,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;AAC7B,QAAA,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE;AAC/B,KAAA,CAAC,IAAI,CAAC,GAAG,CAAC,kFACZ;;AAIkB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAC1C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE;AACpB,QAAA,OAAO;AACJ,aAAA,IAAI;aACJ,KAAK,CAAC,KAAK;AACX,aAAA,KAAK,CAAC,CAAC,EAAE,CAAC;AACV,aAAA,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE;aACxC,IAAI,CAAC,EAAE,CAAC;AACb,IAAA,CAAC,+EAAC;;IAIQ,YAAY,GAAA;AACpB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;IACzB;uGAzCW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,w0BCjBhC,gnBAyBA,EAAA,MAAA,EAAA,CAAA,u8FAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDRa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAT/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EAGzC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAA,QAAA,EAAA,gnBAAA,EAAA,MAAA,EAAA,CAAA,u8FAAA,CAAA,EAAA;;;AEftC;;AAEG;;;;"}

package/package.json

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

package/types/fuse_ui-avatar.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+declare class FuseAvatarComponent {
+    readonly src: _angular_core.InputSignal<string>;
+    readonly alt: _angular_core.InputSignal<string>;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+    readonly shape: _angular_core.InputSignal<"circle" | "square">;
+    readonly status: _angular_core.InputSignal<"online" | "offline" | "busy" | "away" | null>;
+    protected readonly hasError: _angular_core.WritableSignal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly initials: _angular_core.Signal<string>;
+    protected onImageError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseAvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseAvatarComponent, "fuse-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { FuseAvatarComponent };