@fuse_ui/button 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# button
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test button` to execute the unit tests.

package/fesm2022/fuse_ui-button.mjs

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class FuseButtonComponent {
+    /** Visual style of the button. */
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Colour theme mapped to --fuse-color-* tokens. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Size variant. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Renders the button in a disabled state. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Shows a spinner and suppresses click events. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Native button type attribute. */
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Emits when the button is clicked (blocked when disabled or loading). */
+    clicked = output();
+    hostClasses = computed(() => [
+        'fuse-btn',
+        `fuse-btn--${this.variant()}`,
+        `fuse-btn--${this.color()}`,
+        `fuse-btn--${this.size()}`,
+        this.disabled() ? 'fuse-btn--disabled' : '',
+        this.loading() ? 'fuse-btn--loading' : '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    handleClick(event) {
+        if (!this.disabled() && !this.loading()) {
+            this.clicked.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseButtonComponent, isStandalone: true, selector: "fuse-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class": "hostClasses()", "attr.data-variant": "variant()", "attr.data-color": "color()" } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span class=\"fuse-btn__spinner\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"fuse-btn__content\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", styles: [":host{--fuse-btn-bg: var(--fuse-color-primary);--fuse-btn-color: var(--fuse-color-on-primary);--fuse-btn-radius: var(--fuse-radius-md);--fuse-btn-px: var(--fuse-spacing-4);--fuse-btn-py: var(--fuse-spacing-2);--fuse-btn-font-size: var(--fuse-font-size-md);--fuse-btn-font-weight: var(--fuse-font-weight-medium);--fuse-btn-border: transparent;--fuse-btn-shadow: none;display:inline-flex}:host(.fuse-btn--primary){--fuse-btn-bg: var(--fuse-color-primary);--fuse-btn-color: var(--fuse-color-on-primary)}:host(.fuse-btn--secondary){--fuse-btn-bg: var(--fuse-color-secondary);--fuse-btn-color: var(--fuse-color-on-secondary)}:host(.fuse-btn--success){--fuse-btn-bg: var(--fuse-color-success);--fuse-btn-color: var(--fuse-color-on-success)}:host(.fuse-btn--danger){--fuse-btn-bg: var(--fuse-color-danger);--fuse-btn-color: var(--fuse-color-on-danger)}:host(.fuse-btn--outline) button{background:transparent;border:1.5px solid var(--fuse-btn-bg);color:var(--fuse-btn-bg)}:host(.fuse-btn--ghost) button{background:transparent;color:var(--fuse-btn-bg);border:none}:host(.fuse-btn--link) button{background:transparent;color:var(--fuse-btn-bg);border:none;text-decoration:underline;padding:0}:host(.fuse-btn--sm){--fuse-btn-px: var(--fuse-spacing-3);--fuse-btn-py: var(--fuse-spacing-1);--fuse-btn-font-size: var(--fuse-font-size-sm)}:host(.fuse-btn--lg){--fuse-btn-px: var(--fuse-spacing-6);--fuse-btn-py: var(--fuse-spacing-3);--fuse-btn-font-size: var(--fuse-font-size-lg)}:host-context(.ios){--fuse-btn-radius: var(--fuse-radius-lg)}:host-context(.md){--fuse-btn-radius: var(--fuse-radius-sm)}button{background:var(--fuse-btn-bg);color:var(--fuse-btn-color);border-radius:var(--fuse-btn-radius);padding:var(--fuse-btn-py) var(--fuse-btn-px);font-size:var(--fuse-btn-font-size);font-weight:var(--fuse-btn-font-weight);box-shadow:var(--fuse-btn-shadow);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--fuse-spacing-2);transition:opacity .15s,transform .1s;width:100%;justify-content:center;font-family:inherit;line-height:1;white-space:nowrap}button:hover:not(:disabled){opacity:.88}button:active:not(:disabled){transform:scale(.98)}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible{outline:2px solid var(--fuse-btn-bg);outline-offset:2px}.fuse-btn__spinner{width:1em;height:1em;border:2px solid transparent;border-top-color:currentColor;border-radius:var(--fuse-radius-full);animation:fuse-spin .65s linear infinite;flex-shrink:0}@keyframes fuse-spin{to{transform:rotate(360deg)}}.fuse-btn__content{display:inline-flex;align-items:center;gap:var(--fuse-spacing-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-color]': 'color()',
+                    }, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span class=\"fuse-btn__spinner\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"fuse-btn__content\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", styles: [":host{--fuse-btn-bg: var(--fuse-color-primary);--fuse-btn-color: var(--fuse-color-on-primary);--fuse-btn-radius: var(--fuse-radius-md);--fuse-btn-px: var(--fuse-spacing-4);--fuse-btn-py: var(--fuse-spacing-2);--fuse-btn-font-size: var(--fuse-font-size-md);--fuse-btn-font-weight: var(--fuse-font-weight-medium);--fuse-btn-border: transparent;--fuse-btn-shadow: none;display:inline-flex}:host(.fuse-btn--primary){--fuse-btn-bg: var(--fuse-color-primary);--fuse-btn-color: var(--fuse-color-on-primary)}:host(.fuse-btn--secondary){--fuse-btn-bg: var(--fuse-color-secondary);--fuse-btn-color: var(--fuse-color-on-secondary)}:host(.fuse-btn--success){--fuse-btn-bg: var(--fuse-color-success);--fuse-btn-color: var(--fuse-color-on-success)}:host(.fuse-btn--danger){--fuse-btn-bg: var(--fuse-color-danger);--fuse-btn-color: var(--fuse-color-on-danger)}:host(.fuse-btn--outline) button{background:transparent;border:1.5px solid var(--fuse-btn-bg);color:var(--fuse-btn-bg)}:host(.fuse-btn--ghost) button{background:transparent;color:var(--fuse-btn-bg);border:none}:host(.fuse-btn--link) button{background:transparent;color:var(--fuse-btn-bg);border:none;text-decoration:underline;padding:0}:host(.fuse-btn--sm){--fuse-btn-px: var(--fuse-spacing-3);--fuse-btn-py: var(--fuse-spacing-1);--fuse-btn-font-size: var(--fuse-font-size-sm)}:host(.fuse-btn--lg){--fuse-btn-px: var(--fuse-spacing-6);--fuse-btn-py: var(--fuse-spacing-3);--fuse-btn-font-size: var(--fuse-font-size-lg)}:host-context(.ios){--fuse-btn-radius: var(--fuse-radius-lg)}:host-context(.md){--fuse-btn-radius: var(--fuse-radius-sm)}button{background:var(--fuse-btn-bg);color:var(--fuse-btn-color);border-radius:var(--fuse-btn-radius);padding:var(--fuse-btn-py) var(--fuse-btn-px);font-size:var(--fuse-btn-font-size);font-weight:var(--fuse-btn-font-weight);box-shadow:var(--fuse-btn-shadow);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--fuse-spacing-2);transition:opacity .15s,transform .1s;width:100%;justify-content:center;font-family:inherit;line-height:1;white-space:nowrap}button:hover:not(:disabled){opacity:.88}button:active:not(:disabled){transform:scale(.98)}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible{outline:2px solid var(--fuse-btn-bg);outline-offset:2px}.fuse-btn__spinner{width:1em;height:1em;border:2px solid transparent;border-top-color:currentColor;border-radius:var(--fuse-radius-full);animation:fuse-spin .65s linear infinite;flex-shrink:0}@keyframes fuse-spin{to{transform:rotate(360deg)}}.fuse-btn__content{display:inline-flex;align-items:center;gap:var(--fuse-spacing-2)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuseButtonComponent };
+//# sourceMappingURL=fuse_ui-button.mjs.map

package/fesm2022/fuse_ui-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuse_ui-button.mjs","sources":["../../../../packages/button/src/lib/button/fuse-button.component.ts","../../../../packages/button/src/lib/button/fuse-button.component.html","../../../../packages/button/src/fuse_ui-button.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n} from '@angular/core';\n\n@Component({\n  selector: 'fuse-button',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-color]': 'color()',\n  },\n  templateUrl: './fuse-button.component.html',\n  styleUrl: './fuse-button.component.scss',\n})\nexport class FuseButtonComponent {\n  /** Visual style of the button. */\n  variant = input<'solid' | 'outline' | 'ghost' | 'link'>('solid');\n\n  /** Colour theme mapped to --fuse-color-* tokens. */\n  color = input<'primary' | 'secondary' | 'success' | 'danger'>('primary');\n\n  /** Size variant. */\n  size = input<'sm' | 'md' | 'lg'>('md');\n\n  /** Renders the button in a disabled state. */\n  disabled = input(false);\n\n  /** Shows a spinner and suppresses click events. */\n  loading = input(false);\n\n  /** Native button type attribute. */\n  type = input<'button' | 'submit' | 'reset'>('button');\n\n  /** Emits when the button is clicked (blocked when disabled or loading). */\n  clicked = output<MouseEvent>();\n\n  protected readonly hostClasses = computed(() =>\n    [\n      'fuse-btn',\n      `fuse-btn--${this.variant()}`,\n      `fuse-btn--${this.color()}`,\n      `fuse-btn--${this.size()}`,\n      this.disabled() ? 'fuse-btn--disabled' : '',\n      this.loading() ? 'fuse-btn--loading' : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  );\n\n  handleClick(event: MouseEvent): void {\n    if (!this.disabled() && !this.loading()) {\n      this.clicked.emit(event);\n    }\n  }\n}\n","<button\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span class=\"fuse-btn__spinner\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"fuse-btn__content\">\n    <ng-content></ng-content>\n  </span>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAqBa,mBAAmB,CAAA;;AAE9B,IAAA,OAAO,GAAG,KAAK,CAAyC,OAAO,8EAAC;;AAGhE,IAAA,KAAK,GAAG,KAAK,CAAiD,SAAS,4EAAC;;AAGxE,IAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;;AAGtC,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,+EAAC;;AAGvB,IAAA,OAAO,GAAG,KAAK,CAAC,KAAK,8EAAC;;AAGtB,IAAA,IAAI,GAAG,KAAK,CAAgC,QAAQ,2EAAC;;IAGrD,OAAO,GAAG,MAAM,EAAc;AAEX,IAAA,WAAW,GAAG,QAAQ,CAAC,MACxC;QACE,UAAU;AACV,QAAA,CAAA,UAAA,EAAa,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE;AAC7B,QAAA,CAAA,UAAA,EAAa,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE;AAC3B,QAAA,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;QAC1B,IAAI,CAAC,QAAQ,EAAE,GAAG,oBAAoB,GAAG,EAAE;QAC3C,IAAI,CAAC,OAAO,EAAE,GAAG,mBAAmB,GAAG,EAAE;AAC1C;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;AAED,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE;AACvC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC1B;IACF;uGAvCW,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,u8BCrBhC,uSAWA,EAAA,MAAA,EAAA,CAAA,4iFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDUa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAb/B,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACP,EAAE,mBACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,mBAAmB,EAAE,SAAS;AAC/B,qBAAA,EAAA,QAAA,EAAA,uSAAA,EAAA,MAAA,EAAA,CAAA,4iFAAA,CAAA,EAAA;;;AEjBH;;AAEG;;;;"}

package/package.json

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

package/types/fuse_ui-button.d.ts

@@ -0,0 +1,24 @@
+import * as _angular_core from '@angular/core';
+
+declare class FuseButtonComponent {
+    /** Visual style of the button. */
+    variant: _angular_core.InputSignal<"solid" | "outline" | "ghost" | "link">;
+    /** Colour theme mapped to --fuse-color-* tokens. */
+    color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "danger">;
+    /** Size variant. */
+    size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /** Renders the button in a disabled state. */
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Shows a spinner and suppresses click events. */
+    loading: _angular_core.InputSignal<boolean>;
+    /** Native button type attribute. */
+    type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    /** Emits when the button is clicked (blocked when disabled or loading). */
+    clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    handleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseButtonComponent, "fuse-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+export { FuseButtonComponent };