@raqm/ui 0.0.0-stage → 0.1.1

package/fesm2022/raqm-ui-toggle.mjs

@@ -0,0 +1,158 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, computed, inject, input, model } from "@angular/core";
+var RaqmToggle = class RaqmToggle {
+	host = inject(ElementRef);
+	appearance = input("default", {
+		...ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {},
+		alias: "raqm-toggle",
+		transform: (value) => value === "outline" ? "outline" : "default"
+	});
+	small = input(false, {
+		...ngDevMode ? { debugName: "small" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	large = input(false, {
+		...ngDevMode ? { debugName: "large" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	activeSize = computed(() => {
+		const small = this.small();
+		const large = this.large();
+		if (small && large) throw new Error("raqm-toggle: use either small or large, not both.");
+		return large ? "large" : small ? "small" : "default";
+	}, ...ngDevMode ? [{ debugName: "activeSize" }] : /* istanbul ignore next */ []);
+	pressed = model(false, ...ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const element = this.host.nativeElement;
+		if (!element.hasAttribute("type")) element.setAttribute("type", "button");
+	}
+	onToggleClick() {
+		if (this.host.nativeElement.disabled) return;
+		this.pressed.update((value) => !value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToggle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmToggle,
+		isStandalone: true,
+		selector: "button[raqm-toggle]",
+		inputs: {
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "raqm-toggle",
+				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
+			},
+			pressed: {
+				classPropertyName: "pressed",
+				publicName: "pressed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { pressed: "pressedChange" },
+		host: {
+			listeners: { "click": "onToggleClick()" },
+			properties: {
+				"attr.data-raqm-variant": "appearance()",
+				"attr.data-raqm-small": "activeSize() === \"small\" ? \"\" : null",
+				"attr.data-raqm-large": "activeSize() === \"large\" ? \"\" : null",
+				"attr.aria-pressed": "pressed() ? \"true\" : \"false\""
+			},
+			classAttribute: "raqm-toggle"
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;gap:calc(var(--raqm-spacing) * 1);border-radius:var(--raqm-radius-lg);font-size:var(--raqm-font-size-sm);font-weight:var(--raqm-font-weight-medium);transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--raqm-duration-base);transition-timing-function:var(--raqm-ease-standard);outline:none;border:0;background-color:transparent;block-size:calc(var(--raqm-spacing) * 8);min-inline-size:calc(var(--raqm-spacing) * 8);padding-inline:calc(var(--raqm-spacing) * 2.5)}:host([data-raqm-small]){block-size:calc(var(--raqm-spacing) * 7);min-inline-size:calc(var(--raqm-spacing) * 7);border-radius:min(var(--raqm-radius-md),12px);padding-inline:calc(var(--raqm-spacing) * 2.5);font-size:.8rem}:host([data-raqm-large]){block-size:calc(var(--raqm-spacing) * 9);min-inline-size:calc(var(--raqm-spacing) * 9);padding-inline:calc(var(--raqm-spacing) * 2.5)}:host([data-raqm-variant=outline]){border:1px solid var(--raqm-input);background-color:transparent}:host(:hover){background-color:var(--raqm-muted);color:var(--raqm-foreground)}:host([aria-pressed=true]){background-color:var(--raqm-muted)}:host(:focus-visible){border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}:host([aria-invalid=true]){border-color:var(--raqm-invalid-border);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}:host(:disabled){pointer-events:none;opacity:var(--raqm-disabled-opacity)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToggle,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[raqm-toggle]",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-toggle",
+				"[attr.data-raqm-variant]": "appearance()",
+				"[attr.data-raqm-small]": "activeSize() === \"small\" ? \"\" : null",
+				"[attr.data-raqm-large]": "activeSize() === \"large\" ? \"\" : null",
+				"[attr.aria-pressed]": "pressed() ? \"true\" : \"false\"",
+				"(click)": "onToggleClick()"
+			},
+			styles: [":host{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;gap:calc(var(--raqm-spacing) * 1);border-radius:var(--raqm-radius-lg);font-size:var(--raqm-font-size-sm);font-weight:var(--raqm-font-weight-medium);transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--raqm-duration-base);transition-timing-function:var(--raqm-ease-standard);outline:none;border:0;background-color:transparent;block-size:calc(var(--raqm-spacing) * 8);min-inline-size:calc(var(--raqm-spacing) * 8);padding-inline:calc(var(--raqm-spacing) * 2.5)}:host([data-raqm-small]){block-size:calc(var(--raqm-spacing) * 7);min-inline-size:calc(var(--raqm-spacing) * 7);border-radius:min(var(--raqm-radius-md),12px);padding-inline:calc(var(--raqm-spacing) * 2.5);font-size:.8rem}:host([data-raqm-large]){block-size:calc(var(--raqm-spacing) * 9);min-inline-size:calc(var(--raqm-spacing) * 9);padding-inline:calc(var(--raqm-spacing) * 2.5)}:host([data-raqm-variant=outline]){border:1px solid var(--raqm-input);background-color:transparent}:host(:hover){background-color:var(--raqm-muted);color:var(--raqm-foreground)}:host([aria-pressed=true]){background-color:var(--raqm-muted)}:host(:focus-visible){border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}:host([aria-invalid=true]){border-color:var(--raqm-invalid-border);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}:host(:disabled){pointer-events:none;opacity:var(--raqm-disabled-opacity)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "raqm-toggle",
+				required: false
+			}]
+		}],
+		small: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "small",
+				required: false
+			}]
+		}],
+		large: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "large",
+				required: false
+			}]
+		}],
+		pressed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pressed",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["pressedChange"]
+		}]
+	}
+});
+export { RaqmToggle };
+
+//# sourceMappingURL=raqm-ui-toggle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-toggle.mjs","names":[],"sources":["../../../projects/ui/toggle/toggle.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  model,\r\n} from '@angular/core';\r\n\r\n/**\r\n * Native `<button>` toggle with a two-way `pressed` model and a derived `aria-pressed`.\r\n * `small`/`large` are mutually exclusive; the application owns the accessible name.\r\n */\r\n@Component({\r\n  selector: 'button[raqm-toggle]',\r\n  template: '<ng-content />',\r\n  styleUrl: './toggle.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-toggle',\r\n    '[attr.data-raqm-variant]': 'appearance()',\r\n    '[attr.data-raqm-small]': 'activeSize() === \"small\" ? \"\" : null',\r\n    '[attr.data-raqm-large]': 'activeSize() === \"large\" ? \"\" : null',\r\n    // Exposed as a real ARIA state, never a role override.\r\n    '[attr.aria-pressed]': 'pressed() ? \"true\" : \"false\"',\r\n    '(click)': 'onToggleClick()',\r\n  },\r\n})\r\nexport class RaqmToggle {\r\n  private readonly host = inject(ElementRef<HTMLButtonElement>);\r\n\r\n  // Public appearance marker; bare `raqm-toggle` means the default appearance.\r\n  readonly appearance = input<'default' | 'outline'>('default', {\r\n    alias: 'raqm-toggle',\r\n    transform: (value: unknown): 'default' | 'outline' =>\r\n      value === 'outline' ? 'outline' : 'default',\r\n  });\r\n\r\n  // Public size API: full-word booleans; neither means the default.\r\n  readonly small = input(false, { transform: booleanAttribute });\r\n  readonly large = input(false, { transform: booleanAttribute });\r\n\r\n  /** The resolved size; setting both attributes is rejected. */\r\n  protected readonly activeSize = computed<'default' | 'small' | 'large'>(() => {\r\n    const small = this.small();\r\n    const large = this.large();\r\n    if (small && large) {\r\n      throw new Error('raqm-toggle: use either small or large, not both.');\r\n    }\r\n    return large ? 'large' : small ? 'small' : 'default';\r\n  });\r\n\r\n  // Two-way pressed state; the application owns the value.\r\n  readonly pressed = model<boolean>(false);\r\n\r\n  constructor() {\r\n    // `button` is set only when no consumer `type` exists; an explicit native value is preserved.\r\n    const element = this.host.nativeElement;\r\n    if (!element.hasAttribute('type')) {\r\n      element.setAttribute('type', 'button');\r\n    }\r\n  }\r\n\r\n  /** Toggles once per native activation; the guard is defensive because disabled buttons already suppress click. */\r\n  protected onToggleClick(): void {\r\n    if (this.host.nativeElement.disabled) {\r\n      return;\r\n    }\r\n    this.pressed.update((value) => !value);\r\n  }\r\n}\r\n"],"mappings":";;AA8BA,IAAa,aAAb,MAAa,WAAU;CACJ,OAAO,OAAO,UAA6B;CAGnD,aAAa,MAA6B,WAAS;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAC1D,OAAO;EACP,YAAY,UACV,UAAU,YAAY,YAAY;CAAS,CAAA;CAItC,QAAQ,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,QAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAClD,QAAQ,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,QAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAGxC,aAAa,eAA6C;EAC3E,MAAM,QAAQ,KAAK,MAAK;EACxB,MAAM,QAAQ,KAAK,MAAK;EACxB,IAAI,SAAS,OACX,MAAM,IAAI,MAAM,mDAAmD;EAErE,OAAO,QAAQ,UAAU,QAAQ,UAAU;CAC7C,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAGO,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAExC,cAAA;EAEE,MAAM,UAAU,KAAK,KAAK;EAC1B,IAAI,CAAC,QAAQ,aAAa,MAAM,GAC9B,QAAQ,aAAa,QAAQ,QAAQ;CAEzC;CAGU,gBAAa;EACrB,IAAI,KAAK,KAAK,cAAc,UAC1B;EAEF,KAAK,QAAQ,QAAQ,UAAU,CAAC,KAAK;CACvC;CAzCW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,SAAA,gBAAA;EAAA,MAAA;GAAA,WAAA,EAAA,SAAA,kBAAA;GAAA,YAAA;IAAA,0BAAA;IAAA,wBAAA;IAAA,wBAAA;IAAA,qBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAbX;EAAgB,UAAA;EAAA,QAAA,CAAA,4kDAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAaf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAftB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAqB,UACrB;GAAgB,iBAET,wBAAwB;GAAM,MACzC;IACJ,OAAO;IACP,4BAA4B;IAC5B,0BAA0B;IAC1B,0BAA0B;IAE1B,uBAAuB;IACvB,WAAW;GACZ;GAAA,QAAA,CAAA,4kDAAA;EAAA,CAAA"}