@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-avatar.mjs

@@ -0,0 +1,337 @@
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, InjectionToken, booleanAttribute, computed, effect, forwardRef, inject, input, signal } from "@angular/core";
+const RAQM_AVATAR = new InjectionToken("raqm-avatar");
+var RaqmAvatarDirective = class RaqmAvatarDirective {
+	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-avatar: use either small or large, not both.");
+		return large ? "large" : small ? "small" : "default";
+	}, ...ngDevMode ? [{ debugName: "activeSize" }] : /* istanbul ignore next */ []);
+	statusState = signal("idle", ...ngDevMode ? [{ debugName: "statusState" }] : /* istanbul ignore next */ []);
+	status = this.statusState.asReadonly();
+	setStatus(status) {
+		this.statusState.set(status);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmAvatarDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmAvatarDirective,
+		isStandalone: true,
+		selector: "span[raqm-avatar]",
+		inputs: {
+			small: {
+				classPropertyName: "small",
+				publicName: "small",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			large: {
+				classPropertyName: "large",
+				publicName: "large",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-raqm-small": "activeSize() === \"small\" ? \"\" : null",
+				"attr.data-raqm-large": "activeSize() === \"large\" ? \"\" : null"
+			},
+			classAttribute: "raqm-avatar"
+		},
+		providers: [{
+			provide: RAQM_AVATAR,
+			useExisting: forwardRef(() => RaqmAvatarDirective)
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmAvatarDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "span[raqm-avatar]",
+			host: {
+				class: "raqm-avatar",
+				"[attr.data-raqm-small]": "activeSize() === \"small\" ? \"\" : null",
+				"[attr.data-raqm-large]": "activeSize() === \"large\" ? \"\" : null"
+			},
+			providers: [{
+				provide: RAQM_AVATAR,
+				useExisting: forwardRef(() => RaqmAvatarDirective)
+			}]
+		}]
+	}],
+	propDecorators: {
+		small: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "small",
+				required: false
+			}]
+		}],
+		large: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "large",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmAvatarImageDirective = class RaqmAvatarImageDirective {
+	host = inject(ElementRef);
+	avatar = inject(RAQM_AVATAR);
+	src = input("", ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	generation = 0;
+	isHidden = computed(() => this.avatar.status() !== "loaded", ...ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			const img = this.host.nativeElement;
+			const src = this.src();
+			const hasSource = src.length > 0 || img.hasAttribute("srcset");
+			const generation = ++this.generation;
+			this.avatar.setStatus(hasSource ? "loading" : "error");
+			const onLoad = () => this.resolve(generation);
+			const onError = () => this.resolve(generation);
+			img.addEventListener("load", onLoad);
+			img.addEventListener("error", onError);
+			onCleanup(() => {
+				img.removeEventListener("load", onLoad);
+				img.removeEventListener("error", onError);
+			});
+			if (src.length > 0) img.src = src;
+			else img.removeAttribute("src");
+			if (hasSource && img.complete) this.resolve(generation);
+		});
+	}
+	resolve(generation) {
+		if (generation !== this.generation) return;
+		const img = this.host.nativeElement;
+		if (img.complete) this.avatar.setStatus(img.naturalWidth > 0 ? "loaded" : "error");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmAvatarImageDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmAvatarImageDirective,
+		isStandalone: true,
+		selector: "img[raqm-avatar-image]",
+		inputs: { src: {
+			classPropertyName: "src",
+			publicName: "src",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "attr.hidden": "isHidden() ? \"\" : null" },
+			classAttribute: "raqm-avatar-image"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmAvatarImageDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "img[raqm-avatar-image]",
+			host: {
+				class: "raqm-avatar-image",
+				"[attr.hidden]": "isHidden() ? \"\" : null"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { src: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "src",
+			required: false
+		}]
+	}] }
+});
+var RaqmAvatarFallbackDirective = class RaqmAvatarFallbackDirective {
+	avatar = inject(RAQM_AVATAR);
+	isHidden = computed(() => this.avatar.status() === "loaded", ...ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmAvatarFallbackDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmAvatarFallbackDirective,
+		isStandalone: true,
+		selector: "span[raqm-avatar-fallback]",
+		host: {
+			properties: { "attr.hidden": "isHidden() ? \"\" : null" },
+			classAttribute: "raqm-avatar-fallback"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmAvatarFallbackDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "span[raqm-avatar-fallback]",
+			host: {
+				class: "raqm-avatar-fallback",
+				"[attr.hidden]": "isHidden() ? \"\" : null"
+			}
+		}]
+	}]
+});
+var RaqmAvatarBadgeDirective = class RaqmAvatarBadgeDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmAvatarBadgeDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmAvatarBadgeDirective,
+		isStandalone: true,
+		selector: "span[raqm-avatar-badge]",
+		host: { classAttribute: "raqm-avatar-badge" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmAvatarBadgeDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "span[raqm-avatar-badge]",
+			host: { class: "raqm-avatar-badge" }
+		}]
+	}]
+});
+var RaqmAvatarGroupDirective = class RaqmAvatarGroupDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmAvatarGroupDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmAvatarGroupDirective,
+		isStandalone: true,
+		selector: "span[raqm-avatar-group]",
+		host: { classAttribute: "raqm-avatar-group" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmAvatarGroupDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "span[raqm-avatar-group]",
+			host: { class: "raqm-avatar-group" }
+		}]
+	}]
+});
+var RaqmAvatarGroupCountDirective = class RaqmAvatarGroupCountDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmAvatarGroupCountDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmAvatarGroupCountDirective,
+		isStandalone: true,
+		selector: "span[raqm-avatar-group-count]",
+		host: { classAttribute: "raqm-avatar-group-count" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmAvatarGroupCountDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "span[raqm-avatar-group-count]",
+			host: { class: "raqm-avatar-group-count" }
+		}]
+	}]
+});
+const RaqmAvatar = [
+	RaqmAvatarDirective,
+	RaqmAvatarImageDirective,
+	RaqmAvatarFallbackDirective,
+	RaqmAvatarBadgeDirective,
+	RaqmAvatarGroupDirective,
+	RaqmAvatarGroupCountDirective
+];
+export { RaqmAvatar, RaqmAvatarBadgeDirective, RaqmAvatarDirective, RaqmAvatarFallbackDirective, RaqmAvatarGroupCountDirective, RaqmAvatarGroupDirective, RaqmAvatarImageDirective };
+
+//# sourceMappingURL=raqm-ui-avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-avatar.mjs","names":[],"sources":["../../../projects/ui/avatar/avatar.ts","../../../projects/ui/avatar/public-api.ts"],"sourcesContent":["import {\r\n  Directive,\r\n  ElementRef,\r\n  InjectionToken,\r\n  booleanAttribute,\r\n  computed,\r\n  effect,\r\n  forwardRef,\r\n  inject,\r\n  input,\r\n  signal,\r\n  type Signal,\r\n} from '@angular/core';\r\n\r\ntype RaqmAvatarStatus = 'idle' | 'loading' | 'loaded' | 'error';\r\n\r\ninterface RaqmAvatarContext {\r\n  readonly status: Signal<RaqmAvatarStatus>;\r\n  setStatus(status: RaqmAvatarStatus): void;\r\n}\r\n\r\n// Declared before its consumer: decorator metadata reads the token at class-definition time.\r\nconst RAQM_AVATAR = new InjectionToken<RaqmAvatarContext>('raqm-avatar');\r\n\r\n/** Attaches `raqm-avatar` and owns the load state; `small` and `large` together throw. */\r\n@Directive({\r\n  selector: 'span[raqm-avatar]',\r\n  host: {\r\n    class: 'raqm-avatar',\r\n    '[attr.data-raqm-small]': 'activeSize() === \"small\" ? \"\" : null',\r\n    '[attr.data-raqm-large]': 'activeSize() === \"large\" ? \"\" : null',\r\n  },\r\n  providers: [\r\n    // `forwardRef` breaks the class/selector cycle.\r\n    { provide: RAQM_AVATAR, useExisting: forwardRef(() => RaqmAvatarDirective) },\r\n  ],\r\n})\r\nexport class RaqmAvatarDirective implements RaqmAvatarContext {\r\n  readonly small = input(false, { transform: booleanAttribute });\r\n  readonly large = input(false, { transform: booleanAttribute });\r\n\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-avatar: use either small or large, not both.');\r\n    }\r\n    return large ? 'large' : small ? 'small' : 'default';\r\n  });\r\n\r\n  // Owned here, so no child can create a competing state authority.\r\n  private readonly statusState = signal<RaqmAvatarStatus>('idle');\r\n\r\n  readonly status = this.statusState.asReadonly();\r\n\r\n  // Called only by the image directive.\r\n  setStatus(status: RaqmAvatarStatus): void {\r\n    this.statusState.set(status);\r\n  }\r\n}\r\n\r\n/** Resolves the current source; other image attributes stay application-authored. */\r\n@Directive({\r\n  selector: 'img[raqm-avatar-image]',\r\n  host: {\r\n    class: 'raqm-avatar-image',\r\n    // Removed from the a11y tree and layout until the current source loads.\r\n    '[attr.hidden]': 'isHidden() ? \"\" : null',\r\n  },\r\n})\r\nexport class RaqmAvatarImageDirective {\r\n  private readonly host = inject<ElementRef<HTMLImageElement>>(ElementRef);\r\n\r\n  // The image is the only status writer.\r\n  private readonly avatar = inject(RAQM_AVATAR);\r\n\r\n  // An empty value with no authored `srcset` means \"no source\", which shows the fallback.\r\n  readonly src = input<string>('');\r\n\r\n  // A result from an earlier source is recognisably obsolete.\r\n  private generation = 0;\r\n\r\n  protected readonly isHidden = computed(() => this.avatar.status() !== 'loaded');\r\n\r\n  constructor() {\r\n    effect((onCleanup) => {\r\n      const img = this.host.nativeElement;\r\n      const src = this.src();\r\n      // A source exists when the input is non-empty or the app authored `srcset`.\r\n      const hasSource = src.length > 0 || img.hasAttribute('srcset');\r\n      const generation = ++this.generation;\r\n\r\n      // Reset the old success before the new source can paint: no stale image, no jump.\r\n      this.avatar.setStatus(hasSource ? 'loading' : 'error');\r\n\r\n      // Each result re-reads the element's current resolution, so a stale event is harmless.\r\n      const onLoad = () => this.resolve(generation);\r\n      const onError = () => this.resolve(generation);\r\n      img.addEventListener('load', onLoad);\r\n      img.addEventListener('error', onError);\r\n      onCleanup(() => {\r\n        img.removeEventListener('load', onLoad);\r\n        img.removeEventListener('error', onError);\r\n      });\r\n\r\n      if (src.length > 0) {\r\n        img.src = src;\r\n      } else {\r\n        img.removeAttribute('src');\r\n      }\r\n\r\n      // Cached or already-decoded sources resolve synchronously, without an event.\r\n      if (hasSource && img.complete) {\r\n        this.resolve(generation);\r\n      }\r\n    });\r\n  }\r\n\r\n  private resolve(generation: number): void {\r\n    if (generation !== this.generation) {\r\n      return;\r\n    }\r\n    const img = this.host.nativeElement;\r\n    // Complete with intrinsic size means loaded; complete without size means error.\r\n    if (img.complete) {\r\n      this.avatar.setStatus(img.naturalWidth > 0 ? 'loaded' : 'error');\r\n    }\r\n  }\r\n}\r\n\r\n@Directive({\r\n  selector: 'span[raqm-avatar-fallback]',\r\n  host: {\r\n    class: 'raqm-avatar-fallback',\r\n    '[attr.hidden]': 'isHidden() ? \"\" : null',\r\n  },\r\n})\r\nexport class RaqmAvatarFallbackDirective {\r\n  private readonly avatar = inject(RAQM_AVATAR);\r\n\r\n  protected readonly isHidden = computed(() => this.avatar.status() === 'loaded');\r\n}\r\n\r\n@Directive({\r\n  selector: 'span[raqm-avatar-badge]',\r\n  host: {\r\n    class: 'raqm-avatar-badge',\r\n  },\r\n})\r\nexport class RaqmAvatarBadgeDirective {}\r\n\r\n@Directive({\r\n  selector: 'span[raqm-avatar-group]',\r\n  host: {\r\n    class: 'raqm-avatar-group',\r\n  },\r\n})\r\nexport class RaqmAvatarGroupDirective {}\r\n\r\n@Directive({\r\n  selector: 'span[raqm-avatar-group-count]',\r\n  host: {\r\n    class: 'raqm-avatar-group-count',\r\n  },\r\n})\r\nexport class RaqmAvatarGroupCountDirective {}\r\n","// Public API for the `@raqm/ui/avatar` secondary entry point.\r\nimport {\r\n  RaqmAvatarBadgeDirective,\r\n  RaqmAvatarDirective,\r\n  RaqmAvatarFallbackDirective,\r\n  RaqmAvatarGroupCountDirective,\r\n  RaqmAvatarGroupDirective,\r\n  RaqmAvatarImageDirective,\r\n} from './avatar';\r\n\r\nexport {\r\n  RaqmAvatarBadgeDirective,\r\n  RaqmAvatarDirective,\r\n  RaqmAvatarFallbackDirective,\r\n  RaqmAvatarGroupCountDirective,\r\n  RaqmAvatarGroupDirective,\r\n  RaqmAvatarImageDirective,\r\n};\r\n\r\n// A nested readonly array lets Angular imports accept `RaqmAvatar` directly.\r\nexport const RaqmAvatar = [\r\n  RaqmAvatarDirective,\r\n  RaqmAvatarImageDirective,\r\n  RaqmAvatarFallbackDirective,\r\n  RaqmAvatarBadgeDirective,\r\n  RaqmAvatarGroupDirective,\r\n  RaqmAvatarGroupCountDirective,\r\n] as const;\r\n"],"mappings":"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"}

package/fesm2022/raqm-ui-badge.mjs

@@ -0,0 +1,68 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var RaqmBadge = class RaqmBadge {
+	appearance = input("", {
+		...ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {},
+		alias: "raqm-badge"
+	});
+	activeVariant = computed(() => this.appearance() || "default", ...ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmBadge,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmBadge,
+		isStandalone: true,
+		selector: "span[raqm-badge], a[raqm-badge]",
+		inputs: { appearance: {
+			classPropertyName: "appearance",
+			publicName: "raqm-badge",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "attr.data-raqm-variant": "activeVariant()" },
+			classAttribute: "raqm-badge"
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmBadge,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "span[raqm-badge], a[raqm-badge]",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-badge",
+				"[attr.data-raqm-variant]": "activeVariant()"
+			}
+		}]
+	}],
+	propDecorators: { appearance: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "raqm-badge",
+			required: false
+		}]
+	}] }
+});
+export { RaqmBadge };
+
+//# sourceMappingURL=raqm-ui-badge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-badge.mjs","names":[],"sources":["../../../projects/ui/badge/badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\r\n\r\ntype BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost';\r\n\r\n/**\r\n * Status pill on a native `<span>` or `<a>`; a real anchor keeps native navigation and focus.\r\n * `raqm-badge` selects the appearance; `--raqm-badge-background`/`-foreground`/`-border` override colours.\r\n */\r\n@Component({\r\n  selector: 'span[raqm-badge], a[raqm-badge]',\r\n  template: '<ng-content />',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-badge',\r\n    '[attr.data-raqm-variant]': 'activeVariant()',\r\n  },\r\n})\r\nexport class RaqmBadge {\r\n  /** Bare marker uses the default appearance. */\r\n  readonly appearance = input<BadgeVariant | ''>('', { alias: 'raqm-badge' });\r\n\r\n  protected readonly activeVariant = computed(() => this.appearance() || 'default');\r\n}\r\n"],"mappings":";;AAiBA,IAAa,YAAb,MAAa,UAAS;CAEX,aAAa,MAAyB,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,OAAO;CAAY,CAAA;CAErD,gBAAgB,eAAe,KAAK,WAAU,KAAM,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAJtE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,YAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,0BAAA,kBAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAPV;EAAgB,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAOf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EATrB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;GACV,iBAAiB,wBAAwB;GACzC,MAAM;IACJ,OAAO;IACP,4BAA4B;GAC7B;EACF,CAAA"}