@fuse_ui/card 0.0.1

package/fesm2022/fuse_ui-card.mjs

@@ -0,0 +1,47 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class FuseCardComponent {
+    // ─── Public @Input() API ────────────────────────────────────────────────────
+    variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
+    padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    // ─── Public @Output() API ───────────────────────────────────────────────────
+    cardClick = output();
+    // ─── Internal signal state ──────────────────────────────────────────────────
+    hovered = signal(false, ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    // ─── Host class computation ─────────────────────────────────────────────────
+    hostClasses = computed(() => [
+        'fuse-card',
+        `fuse-card--${this.variant()}`,
+        `fuse-card--padding-${this.padding()}`,
+        this.clickable() ? 'fuse-card--clickable' : '',
+        this.hovered() && this.clickable() ? 'fuse-card--hovered' : '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    // ─── Event handler ──────────────────────────────────────────────────────────
+    onCardClick(event) {
+        if (this.clickable()) {
+            this.cardClick.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuseCardComponent, isStandalone: true, selector: "fuse-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "click": "onCardClick($event)", "mouseenter": "hovered.set(true)", "mouseleave": "hovered.set(false)" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<!-- Slot-based layout \u2014 wrappers hidden via :empty CSS when slot is unused -->\n<div class=\"fuse-card__header\">\n  <ng-content select=\"[fuseCardHeader]\"></ng-content>\n</div>\n\n<div class=\"fuse-card__body\">\n  <ng-content select=\"[fuseCardBody]\"></ng-content>\n</div>\n\n<div class=\"fuse-card__footer\">\n  <ng-content select=\"[fuseCardFooter]\"></ng-content>\n</div>\n\n<!-- Default slot for unslotted content -->\n<ng-content></ng-content>\n", styles: [":host{--fuse-card-bg: var(--fuse-color-surface, #ffffff);--fuse-card-radius: var(--fuse-radius-lg, 12px);--fuse-card-border-color: var(--fuse-color-border, #e2e8f0);--fuse-card-border-width: 1px;--fuse-card-shadow-elevated: var(--fuse-shadow-md, 0 4px 16px rgba(0, 0, 0, .08));--fuse-card-shadow-hover: var(--fuse-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));--fuse-card-shadow-flat: none;--fuse-card-padding-none: 0;--fuse-card-padding-sm: var(--fuse-space-3, .75rem);--fuse-card-padding-md: var(--fuse-space-5, 1.25rem);--fuse-card-padding-lg: var(--fuse-space-7, 1.75rem);--fuse-card-header-border: var(--fuse-color-border, #e2e8f0);--fuse-card-footer-border: var(--fuse-color-border, #e2e8f0);--fuse-card-transition: box-shadow .2s ease, transform .2s ease;display:block}.fuse-card{background-color:var(--fuse-card-bg);border-radius:var(--fuse-card-radius);overflow:hidden;transition:var(--fuse-card-transition)}.fuse-card--elevated{box-shadow:var(--fuse-card-shadow-elevated);border:none}.fuse-card--flat{box-shadow:var(--fuse-card-shadow-flat);border:none;background-color:var(--fuse-color-surface-muted, #f8fafc)}.fuse-card--outlined{box-shadow:none;border:var(--fuse-card-border-width) solid var(--fuse-card-border-color)}.fuse-card--padding-none .fuse-card__header,.fuse-card--padding-none .fuse-card__body,.fuse-card--padding-none .fuse-card__footer{padding:var(--fuse-card-padding-none)}.fuse-card--padding-sm .fuse-card__header,.fuse-card--padding-sm .fuse-card__body,.fuse-card--padding-sm .fuse-card__footer{padding:var(--fuse-card-padding-sm)}.fuse-card--padding-md .fuse-card__header,.fuse-card--padding-md .fuse-card__body,.fuse-card--padding-md .fuse-card__footer{padding:var(--fuse-card-padding-md)}.fuse-card--padding-lg .fuse-card__header,.fuse-card--padding-lg .fuse-card__body,.fuse-card--padding-lg .fuse-card__footer{padding:var(--fuse-card-padding-lg)}.fuse-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.fuse-card--hovered.fuse-card--elevated{box-shadow:var(--fuse-card-shadow-hover);transform:translateY(-2px)}.fuse-card--hovered.fuse-card--outlined{border-color:var(--fuse-color-primary, #6366f1)}.fuse-card__header:empty{display:none}.fuse-card__body:empty{display:none}.fuse-card__footer{border-top:none}.fuse-card__footer:not(:empty){border-top:var(--fuse-card-border-width) solid var(--fuse-card-footer-border)}.fuse-card__footer:empty{display:none}.fuse-card__header:not(:empty)~.fuse-card__body:not(:empty){border-top:var(--fuse-card-border-width) solid var(--fuse-card-header-border)}:host-context(.ios){--fuse-card-radius: var(--fuse-radius-xl, 16px);--fuse-card-shadow-elevated: var(--fuse-shadow-sm, 0 2px 8px rgba(0, 0, 0, .06))}:host-context(.md){--fuse-card-radius: var(--fuse-radius-md, 8px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '(click)': 'onCardClick($event)',
+                        '(mouseenter)': 'hovered.set(true)',
+                        '(mouseleave)': 'hovered.set(false)',
+                    }, template: "<!-- Slot-based layout \u2014 wrappers hidden via :empty CSS when slot is unused -->\n<div class=\"fuse-card__header\">\n  <ng-content select=\"[fuseCardHeader]\"></ng-content>\n</div>\n\n<div class=\"fuse-card__body\">\n  <ng-content select=\"[fuseCardBody]\"></ng-content>\n</div>\n\n<div class=\"fuse-card__footer\">\n  <ng-content select=\"[fuseCardFooter]\"></ng-content>\n</div>\n\n<!-- Default slot for unslotted content -->\n<ng-content></ng-content>\n", styles: [":host{--fuse-card-bg: var(--fuse-color-surface, #ffffff);--fuse-card-radius: var(--fuse-radius-lg, 12px);--fuse-card-border-color: var(--fuse-color-border, #e2e8f0);--fuse-card-border-width: 1px;--fuse-card-shadow-elevated: var(--fuse-shadow-md, 0 4px 16px rgba(0, 0, 0, .08));--fuse-card-shadow-hover: var(--fuse-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));--fuse-card-shadow-flat: none;--fuse-card-padding-none: 0;--fuse-card-padding-sm: var(--fuse-space-3, .75rem);--fuse-card-padding-md: var(--fuse-space-5, 1.25rem);--fuse-card-padding-lg: var(--fuse-space-7, 1.75rem);--fuse-card-header-border: var(--fuse-color-border, #e2e8f0);--fuse-card-footer-border: var(--fuse-color-border, #e2e8f0);--fuse-card-transition: box-shadow .2s ease, transform .2s ease;display:block}.fuse-card{background-color:var(--fuse-card-bg);border-radius:var(--fuse-card-radius);overflow:hidden;transition:var(--fuse-card-transition)}.fuse-card--elevated{box-shadow:var(--fuse-card-shadow-elevated);border:none}.fuse-card--flat{box-shadow:var(--fuse-card-shadow-flat);border:none;background-color:var(--fuse-color-surface-muted, #f8fafc)}.fuse-card--outlined{box-shadow:none;border:var(--fuse-card-border-width) solid var(--fuse-card-border-color)}.fuse-card--padding-none .fuse-card__header,.fuse-card--padding-none .fuse-card__body,.fuse-card--padding-none .fuse-card__footer{padding:var(--fuse-card-padding-none)}.fuse-card--padding-sm .fuse-card__header,.fuse-card--padding-sm .fuse-card__body,.fuse-card--padding-sm .fuse-card__footer{padding:var(--fuse-card-padding-sm)}.fuse-card--padding-md .fuse-card__header,.fuse-card--padding-md .fuse-card__body,.fuse-card--padding-md .fuse-card__footer{padding:var(--fuse-card-padding-md)}.fuse-card--padding-lg .fuse-card__header,.fuse-card--padding-lg .fuse-card__body,.fuse-card--padding-lg .fuse-card__footer{padding:var(--fuse-card-padding-lg)}.fuse-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.fuse-card--hovered.fuse-card--elevated{box-shadow:var(--fuse-card-shadow-hover);transform:translateY(-2px)}.fuse-card--hovered.fuse-card--outlined{border-color:var(--fuse-color-primary, #6366f1)}.fuse-card__header:empty{display:none}.fuse-card__body:empty{display:none}.fuse-card__footer{border-top:none}.fuse-card__footer:not(:empty){border-top:var(--fuse-card-border-width) solid var(--fuse-card-footer-border)}.fuse-card__footer:empty{display:none}.fuse-card__header:not(:empty)~.fuse-card__body:not(:empty){border-top:var(--fuse-card-border-width) solid var(--fuse-card-header-border)}:host-context(.ios){--fuse-card-radius: var(--fuse-radius-xl, 16px);--fuse-card-shadow-elevated: var(--fuse-shadow-sm, 0 2px 8px rgba(0, 0, 0, .06))}:host-context(.md){--fuse-card-radius: var(--fuse-radius-md, 8px)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuseCardComponent };
+//# sourceMappingURL=fuse_ui-card.mjs.map

package/fesm2022/fuse_ui-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuse_ui-card.mjs","sources":["../../../../packages/card/src/lib/card/fuse-card.component.ts","../../../../packages/card/src/lib/card/fuse-card.component.html","../../../../packages/card/src/fuse_ui-card.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  output,\n  signal,\n  input,\n} from '@angular/core';\n\n@Component({\n  selector: 'fuse-card',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './fuse-card.component.html',\n  styleUrl: './fuse-card.component.scss',\n  host: {\n    '[class]': 'hostClasses()',\n    '(click)': 'onCardClick($event)',\n    '(mouseenter)': 'hovered.set(true)',\n    '(mouseleave)': 'hovered.set(false)',\n  },\n})\nexport class FuseCardComponent {\n  // ─── Public @Input() API ────────────────────────────────────────────────────\n\n  readonly variant = input<'flat' | 'elevated' | 'outlined'>('elevated');\n  readonly clickable = input(false);\n  readonly padding = input<'none' | 'sm' | 'md' | 'lg'>('md');\n\n  // ─── Public @Output() API ───────────────────────────────────────────────────\n\n  readonly cardClick = output<MouseEvent>();\n\n  // ─── Internal signal state ──────────────────────────────────────────────────\n\n  protected readonly hovered = signal(false);\n\n  // ─── Host class computation ─────────────────────────────────────────────────\n\n  protected readonly hostClasses = computed(() =>\n    [\n      'fuse-card',\n      `fuse-card--${this.variant()}`,\n      `fuse-card--padding-${this.padding()}`,\n      this.clickable() ? 'fuse-card--clickable' : '',\n      this.hovered() && this.clickable() ? 'fuse-card--hovered' : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  );\n\n  // ─── Event handler ──────────────────────────────────────────────────────────\n\n  onCardClick(event: MouseEvent): void {\n    if (this.clickable()) {\n      this.cardClick.emit(event);\n    }\n  }\n}\n","<!-- Slot-based layout — wrappers hidden via :empty CSS when slot is unused -->\n<div class=\"fuse-card__header\">\n  <ng-content select=\"[fuseCardHeader]\"></ng-content>\n</div>\n\n<div class=\"fuse-card__body\">\n  <ng-content select=\"[fuseCardBody]\"></ng-content>\n</div>\n\n<div class=\"fuse-card__footer\">\n  <ng-content select=\"[fuseCardFooter]\"></ng-content>\n</div>\n\n<!-- Default slot for unslotted content -->\n<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAsBa,iBAAiB,CAAA;;AAGnB,IAAA,OAAO,GAAG,KAAK,CAAmC,UAAU,8EAAC;AAC7D,IAAA,SAAS,GAAG,KAAK,CAAC,KAAK,gFAAC;AACxB,IAAA,OAAO,GAAG,KAAK,CAA8B,IAAI,8EAAC;;IAIlD,SAAS,GAAG,MAAM,EAAc;;AAItB,IAAA,OAAO,GAAG,MAAM,CAAC,KAAK,8EAAC;;AAIvB,IAAA,WAAW,GAAG,QAAQ,CAAC,MACxC;QACE,WAAW;AACX,QAAA,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE;AAC9B,QAAA,CAAA,mBAAA,EAAsB,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE;QACtC,IAAI,CAAC,SAAS,EAAE,GAAG,sBAAsB,GAAG,EAAE;AAC9C,QAAA,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE,GAAG,oBAAoB,GAAG,EAAE;AAC/D;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;;AAID,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B;IACF;uGAnCW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,gqBCtB9B,8cAeA,EAAA,MAAA,EAAA,CAAA,2sFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDOa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAb7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,cACT,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EAGzC;AACJ,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,SAAS,EAAE,qBAAqB;AAChC,wBAAA,cAAc,EAAE,mBAAmB;AACnC,wBAAA,cAAc,EAAE,oBAAoB;AACrC,qBAAA,EAAA,QAAA,EAAA,8cAAA,EAAA,MAAA,EAAA,CAAA,2sFAAA,CAAA,EAAA;;;AEpBH;;AAEG;;;;"}

package/package.json

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

package/types/fuse_ui-card.d.ts

@@ -0,0 +1,15 @@
+import * as _angular_core from '@angular/core';
+
+declare class FuseCardComponent {
+    readonly variant: _angular_core.InputSignal<"flat" | "elevated" | "outlined">;
+    readonly clickable: _angular_core.InputSignal<boolean>;
+    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | "lg">;
+    readonly cardClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    protected readonly hovered: _angular_core.WritableSignal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    onCardClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseCardComponent, "fuse-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[fuseCardHeader]", "[fuseCardBody]", "[fuseCardFooter]", "*"], true, never>;
+}
+
+export { FuseCardComponent };