@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-button.mjs

@@ -0,0 +1,374 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, booleanAttribute, computed, effect, inject, input, output } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+function nullableBoolean(value) {
+	return value === null || value === void 0 ? null : booleanAttribute(value);
+}
+var Button = class Button {
+	elementRef = inject(ElementRef);
+	isAnchor = this.elementRef.nativeElement.tagName === "A";
+	variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("medium", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	text = input("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	iconName = input(null, ...ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	loadingLabel = input("Loading", ...ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	pressed = input(null, {
+		...ngDevMode ? { debugName: "pressed" } : /* istanbul ignore next */ {},
+		transform: nullableBoolean
+	});
+	ariaExpanded = input(null, {
+		...ngDevMode ? { debugName: "ariaExpanded" } : /* istanbul ignore next */ {},
+		transform: nullableBoolean
+	});
+	ariaControls = input(null, ...ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []);
+	ariaHaspopup = input(null, ...ngDevMode ? [{ debugName: "ariaHaspopup" }] : /* istanbul ignore next */ []);
+	block = input(false, {
+		...ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	iconOnly = input(false, {
+		...ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	clicked = output();
+	anchorHostClass = computed(() => {
+		if (!this.isAnchor) return "";
+		const classes = [
+			"gbt-button",
+			`gbt-button--${this.variant()}`,
+			`gbt-button--${this.size()}`
+		];
+		if (this.iconOnly()) classes.push("gbt-button--icon-only");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "anchorHostClass" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (!this.isAnchor) return;
+		const anchor = this.elementRef.nativeElement;
+		const swallowWhenDisabled = (event) => {
+			if (this.disabled()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		};
+		anchor.addEventListener("click", swallowWhenDisabled, true);
+		anchor.addEventListener("auxclick", swallowWhenDisabled, true);
+		let consumerTabindex;
+		effect(() => {
+			if (this.disabled()) {
+				if (consumerTabindex === void 0) consumerTabindex = anchor.getAttribute("tabindex");
+				anchor.setAttribute("tabindex", "-1");
+			} else if (consumerTabindex !== void 0) {
+				if (consumerTabindex === null) anchor.removeAttribute("tabindex");
+				else anchor.setAttribute("tabindex", consumerTabindex);
+				consumerTabindex = void 0;
+			}
+		});
+		inject(DestroyRef).onDestroy(() => {
+			anchor.removeEventListener("click", swallowWhenDisabled, true);
+			anchor.removeEventListener("auxclick", swallowWhenDisabled, true);
+		});
+	}
+	handleClick() {
+		if (!this.disabled() && !this.loading()) this.clicked.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Button,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Button,
+		isStandalone: true,
+		selector: "gbt-button, a[gbtButton]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			text: {
+				classPropertyName: "text",
+				publicName: "text",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconName: {
+				classPropertyName: "iconName",
+				publicName: "iconName",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadingLabel: {
+				classPropertyName: "loadingLabel",
+				publicName: "loadingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pressed: {
+				classPropertyName: "pressed",
+				publicName: "pressed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaExpanded: {
+				classPropertyName: "ariaExpanded",
+				publicName: "ariaExpanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaControls: {
+				classPropertyName: "ariaControls",
+				publicName: "ariaControls",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaHaspopup: {
+				classPropertyName: "ariaHaspopup",
+				publicName: "ariaHaspopup",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			block: {
+				classPropertyName: "block",
+				publicName: "block",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconOnly: {
+				classPropertyName: "iconOnly",
+				publicName: "iconOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { clicked: "clicked" },
+		host: { properties: {
+			"class.gbt-button-host--block": "block()",
+			"class": "anchorHostClass()",
+			"attr.aria-disabled": "isAnchor && disabled() ? \"true\" : null"
+		} },
+		ngImport: i0,
+		template: "@if (isAnchor) {\n  @if (iconName()) {\n    <gbt-icon [name]=\"iconName()!\" aria-hidden=\"true\" />\n  }\n  <ng-content />\n} @else {\n  <button\n    [type]=\"type()\"\n    class=\"gbt-button gbt-button--{{ variant() }} gbt-button--{{ size() }}\"\n    [class.gbt-button--icon-only]=\"iconOnly()\"\n    [disabled]=\"disabled() || loading()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-pressed]=\"pressed()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.aria-haspopup]=\"ariaHaspopup()\"\n    (click)=\"handleClick()\"\n  >\n    @if (iconName()) {\n      <gbt-icon [name]=\"iconName()!\" aria-hidden=\"true\" />\n    }\n    @if (loading()) {\n      <span class=\"gbt-button__spinner\" aria-hidden=\"true\"></span>\n      <span class=\"sr-only\">{{ loadingLabel() }}</span>\n    }\n    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n  </button>\n}\n",
+		styles: [":host{display:inline-block;width:fit-content}:host(a){line-height:normal;text-decoration:none}:host(a.gbt-button){text-decoration:none}:host(.gbt-button-host--block){width:100%}:host(:not(a).gbt-button-host--block){display:block}:host(a.gbt-button-host--block){display:flex}:host(.gbt-button-host--block) .gbt-button{width:100%}.gbt-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;text-align:center;border:none;border-radius:var(--site-border-radius-sm);font-family:var(--font-family);font-weight:600;cursor:pointer;transition:background-color var(--site-transition-fast),color var(--site-transition-fast),box-shadow var(--site-transition-fast),opacity var(--site-transition-fast)}.gbt-button:disabled{cursor:not-allowed;opacity:.5}.gbt-button--small{padding:.375rem .75rem;font-size:.8125rem;min-height:var(--gbt-control-height-sm)}.gbt-button--medium{padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}.gbt-button--large{padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}.gbt-button--icon-only{gap:0}.gbt-button--icon-only.gbt-button--small{padding:.375rem;min-width:var(--gbt-control-height-sm)}.gbt-button--icon-only.gbt-button--medium{padding:.5rem;min-width:var(--gbt-control-height-md)}.gbt-button--icon-only.gbt-button--large{padding:.75rem;min-width:var(--gbt-control-height-lg)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--small{padding:calc(.375rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium{padding:calc(.5rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--large{padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}.gbt-button--primary{background:var(--primary);color:var(--text-on-primary)}.gbt-button--primary:not(:disabled):hover{background:var(--primary-hover)}.gbt-button--secondary{background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color)}.gbt-button--secondary:not(:disabled):hover{background:var(--bg-hover)}.gbt-button--danger{background:var(--color-error-fill);color:var(--text-on-error)}.gbt-button--danger:not(:disabled):hover{background:var(--color-error-hover)}.gbt-button--ghost{background:transparent;color:var(--text-secondary)}.gbt-button--ghost:not(:disabled):hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-button--ghost-danger{background:transparent;color:var(--text-secondary)}.gbt-button--ghost-danger:not(:disabled):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--ghost-danger:not(:disabled):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--link{min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}.gbt-button--link:not(:disabled):hover{color:var(--primary-hover);text-decoration-thickness:2px}.gbt-button[aria-pressed=true]{background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}.gbt-button--primary[aria-pressed=true]{background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}.gbt-button--danger[aria-pressed=true]{background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}.gbt-button--link[aria-pressed=true]{background:none;box-shadow:none;text-decoration-thickness:2px}:host{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;text-align:center;border:none;border-radius:var(--site-border-radius-sm);font-family:var(--font-family);font-weight:600;cursor:pointer;transition:background-color var(--site-transition-fast),color var(--site-transition-fast),box-shadow var(--site-transition-fast),opacity var(--site-transition-fast)}:host([aria-disabled=true]){cursor:not-allowed;opacity:.5}:host(.gbt-button--small){padding:.375rem .75rem;font-size:.8125rem;min-height:var(--gbt-control-height-sm)}:host(.gbt-button--medium){padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}:host(.gbt-button--large){padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only){gap:0}:host(.gbt-button--icon-only.gbt-button--small){padding:.375rem;min-width:var(--gbt-control-height-sm)}:host(.gbt-button--icon-only.gbt-button--medium){padding:.5rem;min-width:var(--gbt-control-height-md)}:host(.gbt-button--icon-only.gbt-button--large){padding:.75rem;min-width:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--small){padding:calc(.375rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium){padding:calc(.5rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--large){padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}:host(.gbt-button--primary){background:var(--primary);color:var(--text-on-primary)}:host(.gbt-button--primary:not([aria-disabled=true])):hover{background:var(--primary-hover)}:host(.gbt-button--secondary){background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color)}:host(.gbt-button--secondary:not([aria-disabled=true])):hover{background:var(--bg-hover)}:host(.gbt-button--danger){background:var(--color-error-fill);color:var(--text-on-error)}:host(.gbt-button--danger:not([aria-disabled=true])):hover{background:var(--color-error-hover)}:host(.gbt-button--ghost){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost:not([aria-disabled=true])):hover{background:var(--bg-hover);color:var(--text-primary)}:host(.gbt-button--ghost-danger){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--link){min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}:host(.gbt-button--link:not([aria-disabled=true])):hover{color:var(--primary-hover);text-decoration-thickness:2px}:host([aria-pressed=true]){background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}:host(.gbt-button--primary[aria-pressed=true]){background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}:host(.gbt-button--danger[aria-pressed=true]){background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}:host(.gbt-button--link[aria-pressed=true]){background:none;box-shadow:none;text-decoration-thickness:2px}.gbt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gbt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.gbt-button__spinner{animation:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@keyframes gbt-button-spin{to{transform:rotate(360deg)}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Button,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-button, a[gbtButton]",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class.gbt-button-host--block]": "block()",
+				"[class]": "anchorHostClass()",
+				"[attr.aria-disabled]": "isAnchor && disabled() ? \"true\" : null"
+			},
+			template: "@if (isAnchor) {\n  @if (iconName()) {\n    <gbt-icon [name]=\"iconName()!\" aria-hidden=\"true\" />\n  }\n  <ng-content />\n} @else {\n  <button\n    [type]=\"type()\"\n    class=\"gbt-button gbt-button--{{ variant() }} gbt-button--{{ size() }}\"\n    [class.gbt-button--icon-only]=\"iconOnly()\"\n    [disabled]=\"disabled() || loading()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-pressed]=\"pressed()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.aria-haspopup]=\"ariaHaspopup()\"\n    (click)=\"handleClick()\"\n  >\n    @if (iconName()) {\n      <gbt-icon [name]=\"iconName()!\" aria-hidden=\"true\" />\n    }\n    @if (loading()) {\n      <span class=\"gbt-button__spinner\" aria-hidden=\"true\"></span>\n      <span class=\"sr-only\">{{ loadingLabel() }}</span>\n    }\n    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n  </button>\n}\n",
+			styles: [":host{display:inline-block;width:fit-content}:host(a){line-height:normal;text-decoration:none}:host(a.gbt-button){text-decoration:none}:host(.gbt-button-host--block){width:100%}:host(:not(a).gbt-button-host--block){display:block}:host(a.gbt-button-host--block){display:flex}:host(.gbt-button-host--block) .gbt-button{width:100%}.gbt-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;text-align:center;border:none;border-radius:var(--site-border-radius-sm);font-family:var(--font-family);font-weight:600;cursor:pointer;transition:background-color var(--site-transition-fast),color var(--site-transition-fast),box-shadow var(--site-transition-fast),opacity var(--site-transition-fast)}.gbt-button:disabled{cursor:not-allowed;opacity:.5}.gbt-button--small{padding:.375rem .75rem;font-size:.8125rem;min-height:var(--gbt-control-height-sm)}.gbt-button--medium{padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}.gbt-button--large{padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}.gbt-button--icon-only{gap:0}.gbt-button--icon-only.gbt-button--small{padding:.375rem;min-width:var(--gbt-control-height-sm)}.gbt-button--icon-only.gbt-button--medium{padding:.5rem;min-width:var(--gbt-control-height-md)}.gbt-button--icon-only.gbt-button--large{padding:.75rem;min-width:var(--gbt-control-height-lg)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--small{padding:calc(.375rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium{padding:calc(.5rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--large{padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}.gbt-button--primary{background:var(--primary);color:var(--text-on-primary)}.gbt-button--primary:not(:disabled):hover{background:var(--primary-hover)}.gbt-button--secondary{background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color)}.gbt-button--secondary:not(:disabled):hover{background:var(--bg-hover)}.gbt-button--danger{background:var(--color-error-fill);color:var(--text-on-error)}.gbt-button--danger:not(:disabled):hover{background:var(--color-error-hover)}.gbt-button--ghost{background:transparent;color:var(--text-secondary)}.gbt-button--ghost:not(:disabled):hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-button--ghost-danger{background:transparent;color:var(--text-secondary)}.gbt-button--ghost-danger:not(:disabled):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--ghost-danger:not(:disabled):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--link{min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}.gbt-button--link:not(:disabled):hover{color:var(--primary-hover);text-decoration-thickness:2px}.gbt-button[aria-pressed=true]{background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}.gbt-button--primary[aria-pressed=true]{background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}.gbt-button--danger[aria-pressed=true]{background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}.gbt-button--link[aria-pressed=true]{background:none;box-shadow:none;text-decoration-thickness:2px}:host{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;text-align:center;border:none;border-radius:var(--site-border-radius-sm);font-family:var(--font-family);font-weight:600;cursor:pointer;transition:background-color var(--site-transition-fast),color var(--site-transition-fast),box-shadow var(--site-transition-fast),opacity var(--site-transition-fast)}:host([aria-disabled=true]){cursor:not-allowed;opacity:.5}:host(.gbt-button--small){padding:.375rem .75rem;font-size:.8125rem;min-height:var(--gbt-control-height-sm)}:host(.gbt-button--medium){padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}:host(.gbt-button--large){padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only){gap:0}:host(.gbt-button--icon-only.gbt-button--small){padding:.375rem;min-width:var(--gbt-control-height-sm)}:host(.gbt-button--icon-only.gbt-button--medium){padding:.5rem;min-width:var(--gbt-control-height-md)}:host(.gbt-button--icon-only.gbt-button--large){padding:.75rem;min-width:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--small){padding:calc(.375rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium){padding:calc(.5rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--large){padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}:host(.gbt-button--primary){background:var(--primary);color:var(--text-on-primary)}:host(.gbt-button--primary:not([aria-disabled=true])):hover{background:var(--primary-hover)}:host(.gbt-button--secondary){background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color)}:host(.gbt-button--secondary:not([aria-disabled=true])):hover{background:var(--bg-hover)}:host(.gbt-button--danger){background:var(--color-error-fill);color:var(--text-on-error)}:host(.gbt-button--danger:not([aria-disabled=true])):hover{background:var(--color-error-hover)}:host(.gbt-button--ghost){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost:not([aria-disabled=true])):hover{background:var(--bg-hover);color:var(--text-primary)}:host(.gbt-button--ghost-danger){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--link){min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}:host(.gbt-button--link:not([aria-disabled=true])):hover{color:var(--primary-hover);text-decoration-thickness:2px}:host([aria-pressed=true]){background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}:host(.gbt-button--primary[aria-pressed=true]){background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}:host(.gbt-button--danger[aria-pressed=true]){background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}:host(.gbt-button--link[aria-pressed=true]){background:none;box-shadow:none;text-decoration-thickness:2px}.gbt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gbt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.gbt-button__spinner{animation:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@keyframes gbt-button-spin{to{transform:rotate(360deg)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		text: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "text",
+				required: false
+			}]
+		}],
+		iconName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconName",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		pressed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pressed",
+				required: false
+			}]
+		}],
+		ariaExpanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaExpanded",
+				required: false
+			}]
+		}],
+		ariaControls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaControls",
+				required: false
+			}]
+		}],
+		ariaHaspopup: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaHaspopup",
+				required: false
+			}]
+		}],
+		block: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "block",
+				required: false
+			}]
+		}],
+		iconOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconOnly",
+				required: false
+			}]
+		}],
+		clicked: [{
+			type: i0.Output,
+			args: ["clicked"]
+		}]
+	}
+});
+export { Button };
+
+//# sourceMappingURL=masmarino-gabarit-button.mjs.map

package/fesm2022/masmarino-gabarit-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-button.mjs","names":[],"sources":["../../../projects/gabarit/button/button.ts","../../../projects/gabarit/button/button.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'ghost-danger' | 'link'\nexport type ButtonSize = 'small' | 'medium' | 'large'\nexport type ButtonHaspopup = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'\n\nfunction nullableBoolean(value: boolean | string | null | undefined): boolean | null {\n  return value === null || value === undefined ? null : booleanAttribute(value)\n}\n\n@Component({\n  selector: 'gbt-button, a[gbtButton]',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './button.html',\n  styleUrl: './button.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.gbt-button-host--block]': 'block()',\n    '[class]': 'anchorHostClass()',\n    '[attr.aria-disabled]': 'isAnchor && disabled() ? \"true\" : null',\n  },\n})\nexport class Button {\n  private readonly elementRef = inject(ElementRef<HTMLElement>)\n  protected readonly isAnchor = this.elementRef.nativeElement.tagName === 'A'\n\n  variant = input<ButtonVariant>('primary')\n  size = input<ButtonSize>('medium')\n  type = input<'button' | 'submit'>('button')\n  text = input<string>('')\n  iconName = input<string | null>(null)\n  ariaLabel = input<string | null>(null)\n  loading = input(false, { transform: booleanAttribute })\n  loadingLabel = input<string>('Loading')\n  disabled = input(false, { transform: booleanAttribute })\n\n  pressed = input<boolean | null, boolean | string | null | undefined>(null, {\n    transform: nullableBoolean,\n  })\n  ariaExpanded = input<boolean | null, boolean | string | null | undefined>(null, {\n    transform: nullableBoolean,\n  })\n  ariaControls = input<string | null>(null)\n  ariaHaspopup = input<ButtonHaspopup | boolean | null>(null)\n  block = input(false, { transform: booleanAttribute })\n  iconOnly = input(false, { transform: booleanAttribute })\n\n  clicked = output<void>()\n\n  protected readonly anchorHostClass = computed(() => {\n    if (!this.isAnchor) {\n      return ''\n    }\n    const classes = ['gbt-button', `gbt-button--${this.variant()}`, `gbt-button--${this.size()}`]\n    if (this.iconOnly()) {\n      classes.push('gbt-button--icon-only')\n    }\n    return classes.join(' ')\n  })\n\n  constructor() {\n    if (!this.isAnchor) {\n      return\n    }\n    const anchor = this.elementRef.nativeElement\n    const swallowWhenDisabled = (event: Event): void => {\n      if (this.disabled()) {\n        event.preventDefault()\n        event.stopImmediatePropagation()\n      }\n    }\n    anchor.addEventListener('click', swallowWhenDisabled, true)\n    anchor.addEventListener('auxclick', swallowWhenDisabled, true)\n\n    let consumerTabindex: string | null | undefined\n    effect(() => {\n      if (this.disabled()) {\n        if (consumerTabindex === undefined) {\n          consumerTabindex = anchor.getAttribute('tabindex')\n        }\n        anchor.setAttribute('tabindex', '-1')\n      } else if (consumerTabindex !== undefined) {\n        if (consumerTabindex === null) {\n          anchor.removeAttribute('tabindex')\n        } else {\n          anchor.setAttribute('tabindex', consumerTabindex)\n        }\n        consumerTabindex = undefined\n      }\n    })\n\n    inject(DestroyRef).onDestroy(() => {\n      anchor.removeEventListener('click', swallowWhenDisabled, true)\n      anchor.removeEventListener('auxclick', swallowWhenDisabled, true)\n    })\n  }\n\n  protected handleClick(): void {\n    if (!this.disabled() && !this.loading()) {\n      this.clicked.emit()\n    }\n  }\n}\n","@if (isAnchor) {\n  @if (iconName()) {\n    <gbt-icon [name]=\"iconName()!\" aria-hidden=\"true\" />\n  }\n  <ng-content />\n} @else {\n  <button\n    [type]=\"type()\"\n    class=\"gbt-button gbt-button--{{ variant() }} gbt-button--{{ size() }}\"\n    [class.gbt-button--icon-only]=\"iconOnly()\"\n    [disabled]=\"disabled() || loading()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-pressed]=\"pressed()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.aria-haspopup]=\"ariaHaspopup()\"\n    (click)=\"handleClick()\"\n  >\n    @if (iconName()) {\n      <gbt-icon [name]=\"iconName()!\" aria-hidden=\"true\" />\n    }\n    @if (loading()) {\n      <span class=\"gbt-button__spinner\" aria-hidden=\"true\"></span>\n      <span class=\"sr-only\">{{ loadingLabel() }}</span>\n    }\n    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n  </button>\n}\n"],"mappings":"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"}