@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-carousel.mjs

@@ -0,0 +1,410 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, afterRenderEffect, booleanAttribute, computed, contentChild, inject, input, output, signal, untracked } from "@angular/core";
+import EmblaCarousel from "embla-carousel";
+var RaqmCarouselItemDirective = class RaqmCarouselItemDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCarouselItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmCarouselItemDirective,
+		isStandalone: true,
+		selector: "[raqm-carousel-item]",
+		host: {
+			attributes: {
+				"role": "group",
+				"aria-roledescription": "slide"
+			},
+			classAttribute: "raqm-carousel-item"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCarouselItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-carousel-item]",
+			host: {
+				class: "raqm-carousel-item",
+				role: "group",
+				"aria-roledescription": "slide"
+			}
+		}]
+	}]
+});
+var RaqmCarouselContentComponent = class RaqmCarouselContentComponent {
+	element = inject(ElementRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCarouselContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmCarouselContentComponent,
+		isStandalone: true,
+		selector: "[raqm-carousel-content]",
+		host: { classAttribute: "raqm-carousel-content" },
+		ngImport: i0,
+		template: "<div class=\"raqm-carousel-track\"><ng-content /></div>",
+		isInline: true,
+		styles: [":host{display:block;overflow:hidden}.raqm-carousel-track{display:flex;touch-action:pan-y pinch-zoom}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCarouselContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[raqm-carousel-content]",
+			template: "<div class=\"raqm-carousel-track\"><ng-content /></div>",
+			host: { class: "raqm-carousel-content" },
+			styles: [":host{display:block;overflow:hidden}.raqm-carousel-track{display:flex;touch-action:pan-y pinch-zoom}\n"]
+		}]
+	}]
+});
+var RaqmCarouselComponent = class RaqmCarouselComponent {
+	vertical = input(false, {
+		...ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	options = input({}, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	plugins = input([], ...ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []);
+	apiReady = output();
+	selectedIndexChange = output();
+	content = contentChild(RaqmCarouselContentComponent, {
+		...ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	api = signal(void 0, ...ngDevMode ? [{ debugName: "api" }] : /* istanbul ignore next */ []);
+	index = signal(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	previousAvailable = signal(false, ...ngDevMode ? [{ debugName: "previousAvailable" }] : /* istanbul ignore next */ []);
+	nextAvailable = signal(false, ...ngDevMode ? [{ debugName: "nextAvailable" }] : /* istanbul ignore next */ []);
+	viewport;
+	update = (api) => {
+		const index = api.selectedScrollSnap();
+		if (index !== this.index()) {
+			this.index.set(index);
+			this.selectedIndexChange.emit(index);
+		}
+		this.previousAvailable.set(api.canScrollPrev());
+		this.nextAvailable.set(api.canScrollNext());
+	};
+	constructor() {
+		afterRenderEffect(() => {
+			const content = this.content();
+			const options = this.options();
+			const plugins = this.plugins();
+			const vertical = this.vertical();
+			const element = content?.element.nativeElement;
+			if (!element) {
+				untracked(() => {
+					this.api()?.destroy();
+					this.api.set(void 0);
+					this.viewport = void 0;
+					this.previousAvailable.set(false);
+					this.nextAvailable.set(false);
+					this.index.set(0);
+				});
+				return;
+			}
+			const direction = options.direction ?? (getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr");
+			const effectiveOptions = {
+				...options,
+				axis: vertical ? "y" : "x",
+				direction
+			};
+			untracked(() => {
+				const existing = this.api();
+				if (existing && this.viewport === element) existing.reInit(effectiveOptions, plugins);
+				else {
+					existing?.destroy();
+					const api = EmblaCarousel(element, effectiveOptions, plugins);
+					this.viewport = element;
+					api.on("select", this.update).on("reInit", this.update);
+					this.api.set(api);
+					this.update(api);
+					this.apiReady.emit(api);
+				}
+			});
+		});
+	}
+	ngOnDestroy() {
+		this.api()?.destroy();
+	}
+	canPrevious() {
+		return this.previousAvailable();
+	}
+	canNext() {
+		return this.nextAvailable();
+	}
+	previous() {
+		this.api()?.scrollPrev();
+	}
+	next() {
+		this.api()?.scrollNext();
+	}
+	go(index) {
+		this.api()?.scrollTo(index);
+	}
+	selectedScrollSnap() {
+		return this.api()?.selectedScrollSnap() ?? 0;
+	}
+	scrollSnapList() {
+		return this.api()?.scrollSnapList() ?? [];
+	}
+	onKey(event) {
+		if (event.target instanceof HTMLElement && (/^(INPUT|TEXTAREA|SELECT)$/.test(event.target.tagName) || event.target.isContentEditable)) return;
+		const rtl = (this.api()?.internalEngine().options.direction ?? getComputedStyle(event.currentTarget).direction) === "rtl";
+		const previous = this.vertical() ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		const next = this.vertical() ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+		if (event.key === previous || event.key === next) {
+			event.preventDefault();
+			if (event.key === next) this.next();
+			else this.previous();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCarouselComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: RaqmCarouselComponent,
+		isStandalone: true,
+		selector: "raqm-carousel",
+		inputs: {
+			vertical: {
+				classPropertyName: "vertical",
+				publicName: "vertical",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			plugins: {
+				classPropertyName: "plugins",
+				publicName: "plugins",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			apiReady: "apiReady",
+			selectedIndexChange: "selectedIndexChange"
+		},
+		host: {
+			attributes: {
+				"role": "region",
+				"aria-roledescription": "carousel"
+			},
+			listeners: { "keydown": "onKey($event)" },
+			properties: { "attr.data-raqm-vertical": "vertical() ? \"\" : null" },
+			classAttribute: "raqm-carousel"
+		},
+		queries: [{
+			propertyName: "content",
+			first: true,
+			predicate: RaqmCarouselContentComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{position:relative;display:block;min-inline-size:0}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCarouselComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-carousel",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-carousel",
+				role: "region",
+				"aria-roledescription": "carousel",
+				"[attr.data-raqm-vertical]": "vertical() ? \"\" : null",
+				"(keydown)": "onKey($event)"
+			},
+			styles: [":host{position:relative;display:block;min-inline-size:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		vertical: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vertical",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		plugins: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "plugins",
+				required: false
+			}]
+		}],
+		apiReady: [{
+			type: i0.Output,
+			args: ["apiReady"]
+		}],
+		selectedIndexChange: [{
+			type: i0.Output,
+			args: ["selectedIndexChange"]
+		}],
+		content: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RaqmCarouselContentComponent), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var RaqmCarouselPreviousDirective = class RaqmCarouselPreviousDirective {
+	carousel = inject(RaqmCarouselComponent);
+	host = inject(ElementRef);
+	authoredDisabled = this.host.nativeElement.disabled;
+	unavailable = computed(() => this.authoredDisabled || !this.carousel.canPrevious(), ...ngDevMode ? [{ debugName: "unavailable" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCarouselPreviousDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmCarouselPreviousDirective,
+		isStandalone: true,
+		selector: "button[raqm-carousel-previous]",
+		host: {
+			attributes: { "type": "button" },
+			listeners: { "click": "carousel.previous()" },
+			properties: { "disabled": "unavailable()" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCarouselPreviousDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-carousel-previous]",
+			host: {
+				type: "button",
+				"[disabled]": "unavailable()",
+				"(click)": "carousel.previous()"
+			}
+		}]
+	}]
+});
+var RaqmCarouselNextDirective = class RaqmCarouselNextDirective {
+	carousel = inject(RaqmCarouselComponent);
+	host = inject(ElementRef);
+	authoredDisabled = this.host.nativeElement.disabled;
+	unavailable = computed(() => this.authoredDisabled || !this.carousel.canNext(), ...ngDevMode ? [{ debugName: "unavailable" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCarouselNextDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmCarouselNextDirective,
+		isStandalone: true,
+		selector: "button[raqm-carousel-next]",
+		host: {
+			attributes: { "type": "button" },
+			listeners: { "click": "carousel.next()" },
+			properties: { "disabled": "unavailable()" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCarouselNextDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-carousel-next]",
+			host: {
+				type: "button",
+				"[disabled]": "unavailable()",
+				"(click)": "carousel.next()"
+			}
+		}]
+	}]
+});
+const RaqmCarousel = [
+	RaqmCarouselComponent,
+	RaqmCarouselContentComponent,
+	RaqmCarouselItemDirective,
+	RaqmCarouselPreviousDirective,
+	RaqmCarouselNextDirective
+];
+export { RaqmCarousel, RaqmCarouselComponent, RaqmCarouselContentComponent, RaqmCarouselItemDirective, RaqmCarouselNextDirective, RaqmCarouselPreviousDirective };
+
+//# sourceMappingURL=raqm-ui-carousel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-carousel.mjs","names":[],"sources":["../../../projects/ui/carousel/carousel.ts","../../../projects/ui/carousel/public-api.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  Directive,\r\n  ElementRef,\r\n  afterRenderEffect,\r\n  booleanAttribute,\r\n  computed,\r\n  contentChild,\r\n  inject,\r\n  input,\r\n  InputSignal,\r\n  output,\r\n  signal,\r\n  untracked,\r\n  OnDestroy,\r\n} from '@angular/core';\r\nimport EmblaCarousel, {\r\n  type EmblaCarouselType,\r\n  type EmblaOptionsType,\r\n  type EmblaPluginType,\r\n} from 'embla-carousel';\r\n\r\nexport type RaqmCarouselOptions = EmblaOptionsType;\r\n\r\n/** Raqm carousel item — a slide carrying `role=\"group\"` and `aria-roledescription=\"slide\"`; the app authors its accessible name. */\r\n@Directive({\r\n  selector: '[raqm-carousel-item]',\r\n  host: { class: 'raqm-carousel-item', role: 'group', 'aria-roledescription': 'slide' },\r\n})\r\nexport class RaqmCarouselItemDirective {}\r\n\r\n/** Raqm carousel content — the viewport that clips the track; track rules ship from the relationship partial. */\r\n@Component({\r\n  selector: '[raqm-carousel-content]',\r\n  template: '<div class=\"raqm-carousel-track\"><ng-content /></div>',\r\n  styles: [\r\n    `\r\n      :host {\r\n        display: block;\r\n        overflow: hidden;\r\n      }\r\n\r\n      .raqm-carousel-track {\r\n        display: flex;\r\n        touch-action: pan-y pinch-zoom;\r\n      }\r\n    `,\r\n  ],\r\n  host: { class: 'raqm-carousel-content' },\r\n})\r\nexport class RaqmCarouselContentComponent {\r\n  readonly element = inject<ElementRef<HTMLElement>>(ElementRef);\r\n}\r\n\r\n/** Carousel root; `role=\"region\"` with an app-authored accessible name, and an authored `disabled` is never cleared. */\r\n@Component({\r\n  selector: 'raqm-carousel',\r\n  template: '<ng-content />',\r\n  styleUrl: './carousel.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-carousel',\r\n    role: 'region',\r\n    'aria-roledescription': 'carousel',\r\n    '[attr.data-raqm-vertical]': 'vertical() ? \"\" : null',\r\n    '(keydown)': 'onKey($event)',\r\n  },\r\n})\r\nexport class RaqmCarouselComponent implements OnDestroy {\r\n  /** A horizontal track by default; a bare `vertical` attribute selects the Y axis. */\r\n  readonly vertical = input(false, { transform: booleanAttribute });\r\n  readonly options: InputSignal<RaqmCarouselOptions> = input<RaqmCarouselOptions>({});\r\n  readonly plugins: InputSignal<EmblaPluginType[]> = input<EmblaPluginType[]>([]);\r\n  readonly apiReady = output<EmblaCarouselType>();\r\n  readonly selectedIndexChange = output<number>();\r\n  readonly content = contentChild(RaqmCarouselContentComponent, { descendants: true });\r\n  readonly api = signal<EmblaCarouselType | undefined>(undefined);\r\n  readonly index = signal(0);\r\n  private readonly previousAvailable = signal(false);\r\n  private readonly nextAvailable = signal(false);\r\n  private viewport: HTMLElement | undefined;\r\n  private readonly update = (api: EmblaCarouselType) => {\r\n    const index = api.selectedScrollSnap();\r\n    if (index !== this.index()) {\r\n      this.index.set(index);\r\n      this.selectedIndexChange.emit(index);\r\n    }\r\n    this.previousAvailable.set(api.canScrollPrev());\r\n    this.nextAvailable.set(api.canScrollNext());\r\n  };\r\n  constructor() {\r\n    afterRenderEffect(() => {\r\n      const content = this.content();\r\n      const options = this.options();\r\n      const plugins = this.plugins();\r\n      const vertical = this.vertical();\r\n      const element = content?.element.nativeElement;\r\n      if (!element) {\r\n        untracked(() => {\r\n          this.api()?.destroy();\r\n          this.api.set(undefined);\r\n          this.viewport = undefined;\r\n          this.previousAvailable.set(false);\r\n          this.nextAvailable.set(false);\r\n          this.index.set(0);\r\n        });\r\n        return;\r\n      }\r\n      const direction =\r\n        options.direction ?? (getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr');\r\n      const effectiveOptions: EmblaOptionsType = {\r\n        ...options,\r\n        axis: vertical ? 'y' : 'x',\r\n        direction,\r\n      };\r\n      untracked(() => {\r\n        const existing = this.api();\r\n        if (existing && this.viewport === element) {\r\n          existing.reInit(effectiveOptions, plugins);\r\n        } else {\r\n          existing?.destroy();\r\n          const api = EmblaCarousel(element, effectiveOptions, plugins);\r\n          this.viewport = element;\r\n          api.on('select', this.update).on('reInit', this.update);\r\n          this.api.set(api);\r\n          this.update(api);\r\n          this.apiReady.emit(api);\r\n        }\r\n      });\r\n    });\r\n  }\r\n  ngOnDestroy(): void {\r\n    this.api()?.destroy();\r\n  }\r\n  canPrevious(): boolean {\r\n    return this.previousAvailable();\r\n  }\r\n  canNext(): boolean {\r\n    return this.nextAvailable();\r\n  }\r\n  previous(): void {\r\n    this.api()?.scrollPrev();\r\n  }\r\n  next(): void {\r\n    this.api()?.scrollNext();\r\n  }\r\n  go(index: number): void {\r\n    this.api()?.scrollTo(index);\r\n  }\r\n  selectedScrollSnap(): number {\r\n    return this.api()?.selectedScrollSnap() ?? 0;\r\n  }\r\n  scrollSnapList(): number[] {\r\n    return this.api()?.scrollSnapList() ?? [];\r\n  }\r\n  protected onKey(event: KeyboardEvent): void {\r\n    if (\r\n      event.target instanceof HTMLElement &&\r\n      (/^(INPUT|TEXTAREA|SELECT)$/.test(event.target.tagName) || event.target.isContentEditable)\r\n    )\r\n      return;\r\n    const rtl =\r\n      (this.api()?.internalEngine().options.direction ??\r\n        getComputedStyle(event.currentTarget as HTMLElement).direction) === 'rtl';\r\n    const previous = this.vertical() ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';\r\n    const next = this.vertical() ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';\r\n    if (event.key === previous || event.key === next) {\r\n      event.preventDefault();\r\n      if (event.key === next) this.next();\r\n      else this.previous();\r\n    }\r\n  }\r\n}\r\n/** Raqm carousel previous — adds `type=\"button\"` and availability only; an authored `disabled` is never cleared and the accessible name stays app-owned. */\r\n@Directive({\r\n  selector: 'button[raqm-carousel-previous]',\r\n  host: {\r\n    type: 'button',\r\n    '[disabled]': 'unavailable()',\r\n    '(click)': 'carousel.previous()',\r\n  },\r\n})\r\nexport class RaqmCarouselPreviousDirective {\r\n  protected readonly carousel = inject(RaqmCarouselComponent);\r\n  private readonly host = inject<ElementRef<HTMLButtonElement>>(ElementRef);\r\n  // Read at creation: availability can add to it but never removes it.\r\n  private readonly authoredDisabled = this.host.nativeElement.disabled;\r\n  protected readonly unavailable = computed(\r\n    () => this.authoredDisabled || !this.carousel.canPrevious(),\r\n  );\r\n}\r\n\r\n@Directive({\r\n  selector: 'button[raqm-carousel-next]',\r\n  host: { type: 'button', '[disabled]': 'unavailable()', '(click)': 'carousel.next()' },\r\n})\r\nexport class RaqmCarouselNextDirective {\r\n  protected readonly carousel = inject(RaqmCarouselComponent);\r\n  private readonly host = inject<ElementRef<HTMLButtonElement>>(ElementRef);\r\n  private readonly authoredDisabled = this.host.nativeElement.disabled;\r\n  protected readonly unavailable = computed(\r\n    () => this.authoredDisabled || !this.carousel.canNext(),\r\n  );\r\n}\r\n","import {\r\n  RaqmCarouselComponent,\r\n  RaqmCarouselContentComponent,\r\n  RaqmCarouselItemDirective,\r\n  RaqmCarouselPreviousDirective,\r\n  RaqmCarouselNextDirective,\r\n} from './carousel';\r\n\r\nexport {\r\n  RaqmCarouselComponent,\r\n  RaqmCarouselContentComponent,\r\n  RaqmCarouselItemDirective,\r\n  RaqmCarouselPreviousDirective,\r\n  RaqmCarouselNextDirective,\r\n};\r\nexport type { RaqmCarouselOptions } from './carousel';\r\n\r\nexport const RaqmCarousel = [\r\n  RaqmCarouselComponent,\r\n  RaqmCarouselContentComponent,\r\n  RaqmCarouselItemDirective,\r\n  RaqmCarouselPreviousDirective,\r\n  RaqmCarouselNextDirective,\r\n] as const;\r\n"],"mappings":"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"}

package/fesm2022/raqm-ui-checkbox.mjs

@@ -0,0 +1,86 @@
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, forwardRef, inject } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+var RaqmCheckbox = class RaqmCheckbox {
+	host = inject(ElementRef);
+	onChange = () => {};
+	onTouched = () => {};
+	disabledStateFired = false;
+	constructor() {
+		const element = this.host.nativeElement;
+		if (!element.hasAttribute("type")) element.setAttribute("type", "checkbox");
+	}
+	writeValue(value) {
+		this.host.nativeElement.checked = !!value;
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		if (this.disabledStateFired || isDisabled) this.host.nativeElement.disabled = isDisabled;
+		this.disabledStateFired = true;
+	}
+	handleChange(event) {
+		this.onChange(event.target.checked);
+	}
+	handleBlur() {
+		this.onTouched();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCheckbox,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmCheckbox,
+		isStandalone: true,
+		selector: "input[raqm-checkbox]",
+		host: {
+			listeners: {
+				"change": "handleChange($event)",
+				"blur": "handleBlur()"
+			},
+			classAttribute: "raqm-checkbox"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => RaqmCheckbox),
+			multi: true
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCheckbox,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[raqm-checkbox]",
+			host: {
+				class: "raqm-checkbox",
+				"(change)": "handleChange($event)",
+				"(blur)": "handleBlur()"
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RaqmCheckbox),
+				multi: true
+			}]
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { RaqmCheckbox };
+
+//# sourceMappingURL=raqm-ui-checkbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-checkbox.mjs","names":[],"sources":["../../../projects/ui/checkbox/checkbox.ts"],"sourcesContent":["import { Directive, ElementRef, forwardRef, inject } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n/**\r\n * Attaches the `raqm-checkbox` class to a native `<input>` and sets `type=\"checkbox\"` when absent.\r\n *\r\n * @remarks\r\n * Because the static `type` attribute is absent, Angular's checkbox validator does not match: with\r\n * Forms, use `Validators.requiredTrue` for a required checkbox.\r\n */\r\n@Directive({\r\n  selector: 'input[raqm-checkbox]',\r\n  host: {\r\n    class: 'raqm-checkbox',\r\n    '(change)': 'handleChange($event)',\r\n    '(blur)': 'handleBlur()',\r\n  },\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => RaqmCheckbox),\r\n      multi: true,\r\n    },\r\n  ],\r\n})\r\nexport class RaqmCheckbox implements ControlValueAccessor {\r\n  private readonly host = inject<ElementRef<HTMLInputElement>>(ElementRef);\r\n  private onChange: (value: boolean) => void = () => {};\r\n  private onTouched: () => void = () => {};\r\n  private disabledStateFired = false;\r\n\r\n  constructor() {\r\n    const element = this.host.nativeElement;\r\n    if (!element.hasAttribute('type')) {\r\n      element.setAttribute('type', 'checkbox');\r\n    }\r\n  }\r\n\r\n  writeValue(value: boolean | null | undefined): void {\r\n    this.host.nativeElement.checked = !!value;\r\n  }\r\n\r\n  registerOnChange(fn: (value: boolean) => void): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(isDisabled: boolean): void {\r\n    // The first Forms pass always reports `false`; a static `disabled` attribute is only erased\r\n    // once the control actually becomes disabled.\r\n    if (this.disabledStateFired || isDisabled) {\r\n      this.host.nativeElement.disabled = isDisabled;\r\n    }\r\n    this.disabledStateFired = true;\r\n  }\r\n\r\n  protected handleChange(event: Event): void {\r\n    this.onChange((event.target as HTMLInputElement).checked);\r\n  }\r\n\r\n  protected handleBlur(): void {\r\n    this.onTouched();\r\n  }\r\n}\r\n"],"mappings":";;;AAyBA,IAAa,eAAb,MAAa,aAAY;CACN,OAAO,OAAqC,UAAU;CAC/D,iBAA0C,CAAE;CAC5C,kBAA6B,CAAE;CAC/B,qBAAqB;CAE7B,cAAA;EACE,MAAM,UAAU,KAAK,KAAK;EAC1B,IAAI,CAAC,QAAQ,aAAa,MAAM,GAC9B,QAAQ,aAAa,QAAQ,UAAU;CAE3C;CAEA,WAAW,OAAiC;EAC1C,KAAK,KAAK,cAAc,UAAU,CAAC,CAAC;CACtC;CAEA,iBAAiB,IAA4B;EAC3C,KAAK,WAAW;CAClB;CAEA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAEA,iBAAiB,YAAmB;EAGlC,IAAI,KAAK,sBAAsB,YAC7B,KAAK,KAAK,cAAc,WAAW;EAErC,KAAK,qBAAqB;CAC5B;CAEU,aAAa,OAAY;EACjC,KAAK,SAAU,MAAM,OAA4B,OAAO;CAC1D;CAEU,aAAU;EAClB,KAAK,UAAS;CAChB;CAxCW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,MAAA;GAAA,WAAA;IAAA,UAAA;IAAA,QAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,WARZ,CACT;GACE,SAAS;GACT,aAAa,iBAAiB,YAAY;GAC1C,OAAO;EACR,CACF;EAAA,UAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EAfxB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM;IACJ,OAAO;IACP,YAAY;IACZ,UAAU;GACX;GACD,WAAW,CACT;IACE,SAAS;IACT,aAAa,iBAAgB,YAAa;IAC1C,OAAO;GACR,CACF;EACF,CAAA"}