@raqm/ui 0.0.0-stage → 0.1.1

package/fesm2022/raqm-ui-button.mjs

@@ -0,0 +1,295 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, booleanAttribute, computed, inject, input } from "@angular/core";
+var RaqmButton = class RaqmButton {
+	host = inject(ElementRef);
+	isAnchor = this.host.nativeElement.tagName === "A";
+	inInputGroup = this.host.nativeElement.hasAttribute("raqm-input-group-button");
+	appearance = input("", {
+		...ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {},
+		alias: "raqm-button"
+	});
+	extraSmall = input(false, {
+		...ngDevMode ? { debugName: "extraSmall" } : /* istanbul ignore next */ {},
+		alias: "extra-small",
+		transform: booleanAttribute
+	});
+	small = input(false, {
+		...ngDevMode ? { debugName: "small" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	large = input(false, {
+		...ngDevMode ? { debugName: "large" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	icon = input(false, {
+		...ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	iconExtraSmall = input(false, {
+		...ngDevMode ? { debugName: "iconExtraSmall" } : /* istanbul ignore next */ {},
+		alias: "icon-extra-small",
+		transform: booleanAttribute
+	});
+	iconSmall = input(false, {
+		...ngDevMode ? { debugName: "iconSmall" } : /* istanbul ignore next */ {},
+		alias: "icon-small",
+		transform: booleanAttribute
+	});
+	iconLarge = input(false, {
+		...ngDevMode ? { debugName: "iconLarge" } : /* istanbul ignore next */ {},
+		alias: "icon-large",
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	tabIndex = input(null, {
+		...ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {},
+		alias: "tabindex"
+	});
+	activeVariant = computed(() => this.appearance() || (this.inInputGroup ? "ghost" : "default"), ...ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []);
+	activeSize = computed(() => {
+		const sizes = [
+			[this.extraSmall(), "xs"],
+			[this.small(), "sm"],
+			[this.large(), "lg"],
+			[this.icon(), "icon"],
+			[this.iconExtraSmall(), "icon-xs"],
+			[this.iconSmall(), "icon-sm"],
+			[this.iconLarge(), "icon-lg"]
+		].filter(([enabled]) => enabled);
+		if (sizes.length > 1) throw new Error("RaqmButton: use only one size attribute per button.");
+		return sizes[0]?.[1] ?? (this.inInputGroup ? "xs" : "default");
+	}, ...ngDevMode ? [{ debugName: "activeSize" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const element = this.host.nativeElement;
+		if (!this.isAnchor && !element.hasAttribute("type")) element.setAttribute("type", "button");
+		if (this.isAnchor) {
+			const blockDisabled = (event) => {
+				if (this.disabled()) {
+					event.preventDefault();
+					event.stopImmediatePropagation();
+				}
+			};
+			const events = [
+				"click",
+				"auxclick",
+				"contextmenu"
+			];
+			for (const name of events) element.addEventListener(name, blockDisabled, true);
+			inject(DestroyRef).onDestroy(() => {
+				for (const name of events) element.removeEventListener(name, blockDisabled, true);
+			});
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmButton,
+		isStandalone: true,
+		selector: "button[raqm-button], a[raqm-button]",
+		inputs: {
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "raqm-button",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			extraSmall: {
+				classPropertyName: "extraSmall",
+				publicName: "extra-small",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			small: {
+				classPropertyName: "small",
+				publicName: "small",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			large: {
+				classPropertyName: "large",
+				publicName: "large",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconExtraSmall: {
+				classPropertyName: "iconExtraSmall",
+				publicName: "icon-extra-small",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconSmall: {
+				classPropertyName: "iconSmall",
+				publicName: "icon-small",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconLarge: {
+				classPropertyName: "iconLarge",
+				publicName: "icon-large",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tabIndex: {
+				classPropertyName: "tabIndex",
+				publicName: "tabindex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-raqm-variant": "activeVariant()",
+				"attr.data-raqm-size": "activeSize()",
+				"attr.disabled": "!isAnchor && disabled() ? \"\" : null",
+				"attr.aria-disabled": "isAnchor && disabled() ? \"true\" : null",
+				"attr.tabindex": "isAnchor && disabled() ? -1 : tabIndex()"
+			},
+			classAttribute: "raqm-button"
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmButton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[raqm-button], a[raqm-button]",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-button",
+				"[attr.data-raqm-variant]": "activeVariant()",
+				"[attr.data-raqm-size]": "activeSize()",
+				"[attr.disabled]": "!isAnchor && disabled() ? \"\" : null",
+				"[attr.aria-disabled]": "isAnchor && disabled() ? \"true\" : null",
+				"[attr.tabindex]": "isAnchor && disabled() ? -1 : tabIndex()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "raqm-button",
+				required: false
+			}]
+		}],
+		extraSmall: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "extra-small",
+				required: false
+			}]
+		}],
+		small: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "small",
+				required: false
+			}]
+		}],
+		large: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "large",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconExtraSmall: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon-extra-small",
+				required: false
+			}]
+		}],
+		iconSmall: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon-small",
+				required: false
+			}]
+		}],
+		iconLarge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon-large",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		tabIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabindex",
+				required: false
+			}]
+		}]
+	}
+});
+export { RaqmButton };
+
+//# sourceMappingURL=raqm-ui-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-button.mjs","names":[],"sources":["../../../projects/ui/button/button.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n} from '@angular/core';\r\n\r\ntype ButtonVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link';\r\ntype ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon-xs' | 'icon-sm' | 'icon' | 'icon-lg';\r\n\r\n/** Native button/anchor styling, with application-owned content and accessible names. */\r\n@Component({\r\n  selector: 'button[raqm-button], a[raqm-button]',\r\n  template: '<ng-content />',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-button',\r\n    '[attr.data-raqm-variant]': 'activeVariant()',\r\n    '[attr.data-raqm-size]': 'activeSize()',\r\n    '[attr.disabled]': '!isAnchor && disabled() ? \"\" : null',\r\n    '[attr.aria-disabled]': 'isAnchor && disabled() ? \"true\" : null',\r\n    '[attr.tabindex]': 'isAnchor && disabled() ? -1 : tabIndex()',\r\n  },\r\n})\r\nexport class RaqmButton {\r\n  private readonly host = inject<ElementRef<HTMLButtonElement | HTMLAnchorElement>>(ElementRef);\r\n  protected readonly isAnchor = this.host.nativeElement.tagName === 'A';\r\n  private readonly inInputGroup = this.host.nativeElement.hasAttribute('raqm-input-group-button');\r\n\r\n  /** Bare marker uses the default appearance (ghost inside an input group). */\r\n  readonly appearance = input<ButtonVariant | ''>('', { alias: 'raqm-button' });\r\n  readonly extraSmall = input(false, { alias: 'extra-small', transform: booleanAttribute });\r\n  readonly small = input(false, { transform: booleanAttribute });\r\n  readonly large = input(false, { transform: booleanAttribute });\r\n  readonly icon = input(false, { transform: booleanAttribute });\r\n  readonly iconExtraSmall = input(false, {\r\n    alias: 'icon-extra-small',\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly iconSmall = input(false, { alias: 'icon-small', transform: booleanAttribute });\r\n  readonly iconLarge = input(false, { alias: 'icon-large', transform: booleanAttribute });\r\n\r\n  /** Native disabled semantics for buttons; equivalent activation blocking for anchors. */\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  /** Restored when an anchor is re-enabled; accepts static and bound tabindex. */\r\n  readonly tabIndex = input<string | number | null>(null, { alias: 'tabindex' });\r\n\r\n  protected readonly activeVariant = computed(\r\n    () => this.appearance() || (this.inInputGroup ? 'ghost' : 'default'),\r\n  );\r\n\r\n  /** Size exposed to the shipped styles; input-group members default to xs. */\r\n  protected readonly activeSize = computed<ButtonSize>(() => {\r\n    const selected = [\r\n      [this.extraSmall(), 'xs'],\r\n      [this.small(), 'sm'],\r\n      [this.large(), 'lg'],\r\n      [this.icon(), 'icon'],\r\n      [this.iconExtraSmall(), 'icon-xs'],\r\n      [this.iconSmall(), 'icon-sm'],\r\n      [this.iconLarge(), 'icon-lg'],\r\n    ] as const;\r\n    const sizes = selected.filter(([enabled]) => enabled);\r\n    if (sizes.length > 1) {\r\n      throw new Error('RaqmButton: use only one size attribute per button.');\r\n    }\r\n\r\n    return sizes[0]?.[1] ?? (this.inInputGroup ? 'xs' : 'default');\r\n  });\r\n\r\n  constructor() {\r\n    const element = this.host.nativeElement;\r\n    if (!this.isAnchor && !element.hasAttribute('type')) {\r\n      element.setAttribute('type', 'button');\r\n    }\r\n\r\n    if (this.isAnchor) {\r\n      // Capture-phase block runs before RouterLink and app listeners; contextmenu is included so a disabled href cannot open.\r\n      const blockDisabled = (event: Event): void => {\r\n        if (this.disabled()) {\r\n          event.preventDefault();\r\n          event.stopImmediatePropagation();\r\n        }\r\n      };\r\n      const events = ['click', 'auxclick', 'contextmenu'];\r\n      for (const name of events) element.addEventListener(name, blockDisabled, true);\r\n      inject(DestroyRef).onDestroy(() => {\r\n        for (const name of events) element.removeEventListener(name, blockDisabled, true);\r\n      });\r\n    }\r\n  }\r\n}\r\n"],"mappings":"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"}