@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-button.mjs

@@ -0,0 +1,220 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, ViewEncapsulation, afterNextRender, booleanAttribute, inject, input, isDevMode } from "@angular/core";
+import { VdIcon } from "@vadem/ui/icon";
+var VdButton = class VdButton {
+	variant = input("secondary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	iconOnly = input(false, {
+		...ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	el = inject(ElementRef).nativeElement;
+	isButton = this.el.tagName === "BUTTON";
+	constructor() {
+		const block = (event) => {
+			if (this.loading() || !this.isButton && this.disabled()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		};
+		this.el.addEventListener("click", block, { capture: true });
+		inject(DestroyRef).onDestroy(() => this.el.removeEventListener("click", block, { capture: true }));
+		if (isDevMode()) afterNextRender(() => setTimeout(() => {
+			const named = [
+				"aria-label",
+				"aria-labelledby",
+				"title"
+			].some((a) => this.el.hasAttribute(a));
+			if (this.iconOnly() && !named) console.warn("[vdButton] iconOnly buttons need an accessible name (aria-label).", this.el);
+		}));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdButton,
+		isStandalone: true,
+		selector: "button[vdButton], a[vdButton]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				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
+			},
+			iconOnly: {
+				classPropertyName: "iconOnly",
+				publicName: "iconOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-variant": "variant()",
+				"attr.data-size": "size()",
+				"attr.data-loading": "loading() ? \"\" : null",
+				"attr.data-icon-only": "iconOnly() ? \"\" : null",
+				"attr.type": "isButton ? type() : null",
+				"attr.disabled": "isButton && disabled() ? \"\" : null",
+				"attr.aria-disabled": "loading() || (!isButton && disabled()) ? \"true\" : null",
+				"attr.aria-busy": "loading() ? \"true\" : null",
+				"attr.tabindex": "!isButton && disabled() ? \"-1\" : null"
+			},
+			classAttribute: "vd-button"
+		},
+		ngImport: i0,
+		template: `
+    <ng-content select="[slot=start]" />
+    <span class="vd-button__label"><ng-content /></span>
+    <ng-content select="[slot=end]" />
+    @if (loading()) {
+      <span class="vd-button__spinner" aria-hidden="true"><vd-icon name="loader" /></span>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdButton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[vdButton], a[vdButton]",
+			imports: [VdIcon],
+			template: `
+    <ng-content select="[slot=start]" />
+    <span class="vd-button__label"><ng-content /></span>
+    <ng-content select="[slot=end]" />
+    @if (loading()) {
+      <span class="vd-button__spinner" aria-hidden="true"><vd-icon name="loader" /></span>
+    }
+  `,
+			host: {
+				class: "vd-button",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-size]": "size()",
+				"[attr.data-loading]": "loading() ? \"\" : null",
+				"[attr.data-icon-only]": "iconOnly() ? \"\" : null",
+				"[attr.type]": "isButton ? type() : null",
+				"[attr.disabled]": "isButton && disabled() ? \"\" : null",
+				"[attr.aria-disabled]": "loading() || (!isButton && disabled()) ? \"true\" : null",
+				"[attr.aria-busy]": "loading() ? \"true\" : null",
+				"[attr.tabindex]": "!isButton && disabled() ? \"-1\" : null"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				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
+			}]
+		}],
+		iconOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconOnly",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}]
+	}
+});
+export { VdButton };
+
+//# sourceMappingURL=vadem-ui-button.mjs.map

package/fesm2022/vadem-ui-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-button.mjs","names":[],"sources":["../../../projects/ui/button/src/button.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  booleanAttribute,\n  inject,\n  input,\n  isDevMode,\n} from '@angular/core';\nimport { VdIcon } from '@vadem/ui/icon';\n\nexport type VdButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type VdButtonSize = 'sm' | 'md' | 'lg';\n\n/**\n * Styles a native `<button>` or `<a>` and adds loading and consistent disabled behavior.\n * Spec: specs/button.md\n */\n@Component({\n  // Attribute selector keeps the native element and its semantics.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[vdButton], a[vdButton]',\n  imports: [VdIcon],\n  template: `\n    <ng-content select=\"[slot=start]\" />\n    <span class=\"vd-button__label\"><ng-content /></span>\n    <ng-content select=\"[slot=end]\" />\n    @if (loading()) {\n      <span class=\"vd-button__spinner\" aria-hidden=\"true\"><vd-icon name=\"loader\" /></span>\n    }\n  `,\n  host: {\n    class: 'vd-button',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-size]': 'size()',\n    '[attr.data-loading]': 'loading() ? \"\" : null',\n    '[attr.data-icon-only]': 'iconOnly() ? \"\" : null',\n    '[attr.type]': 'isButton ? type() : null',\n    '[attr.disabled]': 'isButton && disabled() ? \"\" : null',\n    '[attr.aria-disabled]': 'loading() || (!isButton && disabled()) ? \"true\" : null',\n    '[attr.aria-busy]': 'loading() ? \"true\" : null',\n    '[attr.tabindex]': '!isButton && disabled() ? \"-1\" : null',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdButton {\n  readonly variant = input<VdButtonVariant>('secondary');\n  readonly size = input<VdButtonSize>('md');\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly loading = input(false, { transform: booleanAttribute });\n  readonly iconOnly = input(false, { transform: booleanAttribute });\n  readonly type = input<'button' | 'submit' | 'reset'>('button');\n\n  private readonly el: HTMLElement = inject(ElementRef).nativeElement;\n  protected readonly isButton = this.el.tagName === 'BUTTON';\n\n  constructor() {\n    // Capture listeners on the target run before bubble listeners (incl. framework ones),\n    // so blocked clicks never reach consumer handlers, links, or form submission.\n    const block = (event: Event) => {\n      if (this.loading() || (!this.isButton && this.disabled())) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n      }\n    };\n    this.el.addEventListener('click', block, { capture: true });\n    inject(DestroyRef).onDestroy(() =>\n      this.el.removeEventListener('click', block, { capture: true }),\n    );\n\n    if (isDevMode()) {\n      // Checked after the render pass settles: sibling directives (e.g. vdTooltip) may add the\n      // name in their own afterNextRender.\n      afterNextRender(() =>\n        setTimeout(() => {\n          const named = ['aria-label', 'aria-labelledby', 'title'].some((a) =>\n            this.el.hasAttribute(a),\n          );\n          if (this.iconOnly() && !named) {\n            console.warn(\n              '[vdButton] iconOnly buttons need an accessible name (aria-label).',\n              this.el,\n            );\n          }\n        }),\n      );\n    }\n  }\n}\n"],"mappings":"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"}