ngwr 15.4.0 → 15.5.0

package/fesm2022/ngwr-comment.mjs

@@ -0,0 +1,516 @@
+import * as i0 from "@angular/core";
+import { Component, ElementRef, ViewEncapsulation, computed, inject, input, model, output, viewChild } from "@angular/core";
+import { coerceBooleanProperty, coerceNumberProperty } from "@angular/cdk/coercion";
+import { useI18nText } from "ngwr/i18n";
+import { KEYS, isComposing } from "ngwr/utils";
+import { WrButton } from "ngwr/button";
+import { WrTextarea } from "ngwr/textarea";
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+var WrComment = class WrComment {
+	author = input("", ...ngDevMode ? [{ debugName: "author" }] : /* istanbul ignore next */ []);
+	time = input("", ...ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []);
+	datetime = input(null, ...ngDevMode ? [{ debugName: "datetime" }] : /* istanbul ignore next */ []);
+	variant = input("row", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	side = input("start", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	repliesLabel = input(null, ...ngDevMode ? [{ debugName: "repliesLabel" }] : /* istanbul ignore next */ []);
+	resolvedRepliesLabel = useI18nText(this.repliesLabel, "comment.replies", "Replies");
+	isoDatetime = computed(() => {
+		const value = this.datetime();
+		if (value === null) return null;
+		if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value.toISOString();
+		return value || null;
+	}, ...ngDevMode ? [{ debugName: "isoDatetime" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const parts = ["wr-comment"];
+		if (this.variant() === "bubble") parts.push("wr-comment--bubble", `wr-comment--${this.side()}`);
+		return parts.join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WrComment,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: WrComment,
+		isStandalone: true,
+		selector: "wr-comment",
+		inputs: {
+			author: {
+				classPropertyName: "author",
+				publicName: "author",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			time: {
+				classPropertyName: "time",
+				publicName: "time",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			datetime: {
+				classPropertyName: "datetime",
+				publicName: "datetime",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			repliesLabel: {
+				classPropertyName: "repliesLabel",
+				publicName: "repliesLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "article" },
+			properties: {
+				"class": "classes()",
+				"attr.aria-label": "author() || null"
+			}
+		},
+		ngImport: i0,
+		template: "<div class=\"wr-comment__avatar\">\n  <ng-content select=\"wr-avatar, [wrCommentAvatar]\" />\n</div>\n\n<div class=\"wr-comment__main\">\n  <div class=\"wr-comment__head\">\n    @if (author(); as name) {\n      <span class=\"wr-comment__author\">{{ name }}</span>\n    }\n    <ng-content select=\"[wrCommentAuthor]\" />\n    @if (time(); as printed) {\n      @if (isoDatetime(); as iso) {\n        <time class=\"wr-comment__time\" [attr.datetime]=\"iso\">{{ printed }}</time>\n      } @else {\n        <span class=\"wr-comment__time\">{{ printed }}</span>\n      }\n    }\n  </div>\n\n  <div class=\"wr-comment__body\"><ng-content /></div>\n\n  <div class=\"wr-comment__actions\">\n    <ng-content select=\"[wrCommentActions]\" />\n  </div>\n</div>\n\n<div class=\"wr-comment__replies\" role=\"group\" [attr.aria-label]=\"resolvedRepliesLabel()\">\n  <ng-content select=\"wr-comment, [wrCommentReplies]\" />\n</div>\n",
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WrComment,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wr-comment",
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "classes()",
+				role: "article",
+				"[attr.aria-label]": "author() || null"
+			},
+			template: "<div class=\"wr-comment__avatar\">\n  <ng-content select=\"wr-avatar, [wrCommentAvatar]\" />\n</div>\n\n<div class=\"wr-comment__main\">\n  <div class=\"wr-comment__head\">\n    @if (author(); as name) {\n      <span class=\"wr-comment__author\">{{ name }}</span>\n    }\n    <ng-content select=\"[wrCommentAuthor]\" />\n    @if (time(); as printed) {\n      @if (isoDatetime(); as iso) {\n        <time class=\"wr-comment__time\" [attr.datetime]=\"iso\">{{ printed }}</time>\n      } @else {\n        <span class=\"wr-comment__time\">{{ printed }}</span>\n      }\n    }\n  </div>\n\n  <div class=\"wr-comment__body\"><ng-content /></div>\n\n  <div class=\"wr-comment__actions\">\n    <ng-content select=\"[wrCommentActions]\" />\n  </div>\n</div>\n\n<div class=\"wr-comment__replies\" role=\"group\" [attr.aria-label]=\"resolvedRepliesLabel()\">\n  <ng-content select=\"wr-comment, [wrCommentReplies]\" />\n</div>\n"
+		}]
+	}],
+	propDecorators: {
+		author: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "author",
+				required: false
+			}]
+		}],
+		time: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "time",
+				required: false
+			}]
+		}],
+		datetime: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "datetime",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		repliesLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "repliesLabel",
+				required: false
+			}]
+		}]
+	}
+});
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+var WrCommentComposer = class WrCommentComposer {
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	sendLabel = input(null, ...ngDevMode ? [{ debugName: "sendLabel" }] : /* istanbul ignore next */ []);
+	rows = input(1, {
+		...ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {},
+		transform: (v) => coerceNumberProperty(v, 1)
+	});
+	maxRows = input(6, {
+		...ngDevMode ? { debugName: "maxRows" } : /* istanbul ignore next */ {},
+		transform: (v) => coerceNumberProperty(v, 6)
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	sending = input(false, {
+		...ngDevMode ? { debugName: "sending" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	enterSends = input(true, {
+		...ngDevMode ? { debugName: "enterSends" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	clearOnSend = input(true, {
+		...ngDevMode ? { debugName: "clearOnSend" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	touch = output();
+	send = output();
+	resolvedSendLabel = useI18nText(this.sendLabel, "comment.send", "Send");
+	canSend = computed(() => this.value().trim() !== "" && !this.disabled() && !this.readonly() && !this.sending(), ...ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const parts = ["wr-comment-composer"];
+		if (this.disabled()) parts.push("wr-comment-composer--disabled");
+		if (this.readonly()) parts.push("wr-comment-composer--readonly");
+		if (this.sending()) parts.push("wr-comment-composer--sending");
+		return parts.join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	field = viewChild.required(WrTextarea, ...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef);
+	focus(options) {
+		this.field().focus(options);
+	}
+	submit() {
+		if (!this.canSend()) return;
+		const text = this.value().trim();
+		const hadFocus = this.host.nativeElement.contains(this.host.nativeElement.ownerDocument.activeElement);
+		if (this.clearOnSend()) this.value.set("");
+		this.send.emit(text);
+		if (hadFocus && this.host.nativeElement.contains(this.host.nativeElement.ownerDocument.activeElement)) this.focus();
+	}
+	onKeydown(event) {
+		if (event.key !== KEYS.ENTER || isComposing(event)) return;
+		if (!(event.ctrlKey || event.metaKey) && (event.shiftKey || event.altKey || !this.enterSends())) return;
+		event.preventDefault();
+		this.submit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WrCommentComposer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.4",
+		type: WrCommentComposer,
+		isStandalone: true,
+		selector: "wr-comment-composer",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sendLabel: {
+				classPropertyName: "sendLabel",
+				publicName: "sendLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rows: {
+				classPropertyName: "rows",
+				publicName: "rows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxRows: {
+				classPropertyName: "maxRows",
+				publicName: "maxRows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sending: {
+				classPropertyName: "sending",
+				publicName: "sending",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			enterSends: {
+				classPropertyName: "enterSends",
+				publicName: "enterSends",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearOnSend: {
+				classPropertyName: "clearOnSend",
+				publicName: "clearOnSend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch",
+			send: "send"
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.aria-busy": "sending() ? \"true\" : null"
+		} },
+		viewQueries: [{
+			propertyName: "field",
+			first: true,
+			predicate: WrTextarea,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<wr-textarea\n  class=\"wr-comment-composer__field\"\n  autosize\n  [rows]=\"rows()\"\n  [maxRows]=\"maxRows()\"\n  [resizable]=\"false\"\n  [placeholder]=\"placeholder()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [(value)]=\"value\"\n  (touch)=\"touch.emit()\"\n  (keydown)=\"onKeydown($event)\"\n/>\n\n<div class=\"wr-comment-composer__actions\">\n  <ng-content select=\"[wrComposerActions]\" />\n</div>\n\n<button\n  wr-btn\n  type=\"button\"\n  color=\"primary\"\n  shape=\"pill\"\n  class=\"wr-comment-composer__send\"\n  [attr.aria-label]=\"resolvedSendLabel()\"\n  [disabled]=\"!canSend()\"\n  (mousedown)=\"$event.preventDefault()\"\n  (click)=\"submit()\"\n>\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z\"\n    />\n    <path d=\"M6 12h16\" />\n  </svg>\n</button>\n",
+		dependencies: [{
+			kind: "component",
+			type: WrButton,
+			selector: "wr-btn, button[wr-btn], a[wr-btn]",
+			inputs: [
+				"color",
+				"size",
+				"shape",
+				"icon",
+				"iconPosition",
+				"disabled",
+				"outlined",
+				"block",
+				"loading",
+				"disabledWhenLoading"
+			]
+		}, {
+			kind: "component",
+			type: WrTextarea,
+			selector: "wr-textarea",
+			inputs: [
+				"placeholder",
+				"ariaLabel",
+				"size",
+				"rows",
+				"resizable",
+				"resize",
+				"readonly",
+				"autosize",
+				"maxRows",
+				"disabled",
+				"value"
+			],
+			outputs: ["valueChange", "touch"]
+		}],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WrCommentComposer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wr-comment-composer",
+			imports: [WrButton, WrTextarea],
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "classes()",
+				"[attr.aria-busy]": "sending() ? \"true\" : null"
+			},
+			template: "<wr-textarea\n  class=\"wr-comment-composer__field\"\n  autosize\n  [rows]=\"rows()\"\n  [maxRows]=\"maxRows()\"\n  [resizable]=\"false\"\n  [placeholder]=\"placeholder()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [(value)]=\"value\"\n  (touch)=\"touch.emit()\"\n  (keydown)=\"onKeydown($event)\"\n/>\n\n<div class=\"wr-comment-composer__actions\">\n  <ng-content select=\"[wrComposerActions]\" />\n</div>\n\n<button\n  wr-btn\n  type=\"button\"\n  color=\"primary\"\n  shape=\"pill\"\n  class=\"wr-comment-composer__send\"\n  [attr.aria-label]=\"resolvedSendLabel()\"\n  [disabled]=\"!canSend()\"\n  (mousedown)=\"$event.preventDefault()\"\n  (click)=\"submit()\"\n>\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z\"\n    />\n    <path d=\"M6 12h16\" />\n  </svg>\n</button>\n"
+		}]
+	}],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		sendLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sendLabel",
+				required: false
+			}]
+		}],
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: false
+			}]
+		}],
+		maxRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxRows",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		sending: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sending",
+				required: false
+			}]
+		}],
+		enterSends: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "enterSends",
+				required: false
+			}]
+		}],
+		clearOnSend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearOnSend",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		send: [{
+			type: i0.Output,
+			args: ["send"]
+		}],
+		field: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => WrTextarea), { isSignal: true }]
+		}]
+	}
+});
+export { WrComment, WrCommentComposer };
+
+//# sourceMappingURL=ngwr-comment.mjs.map

package/fesm2022/ngwr-comment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-comment.mjs","names":[],"sources":["../../../projects/lib/comment/comment.ts","../../../projects/lib/comment/comment.html","../../../projects/lib/comment/comment-composer.ts","../../../projects/lib/comment/comment-composer.html"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\n\nimport type { WrCommentSide, WrCommentVariant } from './types';\n\n/**\n * One entry in a discussion or a chat: avatar, author, time, body, actions and\n * nested replies. The data stays with the app: the component takes no array,\n * fetches nothing and sorts nothing. Everything is projected or passed as a\n * string, and the app formats the time itself (`wrDate` is the usual route).\n *\n * Slots, each optional:\n *\n * - `<wr-avatar>` or `[wrCommentAvatar]` for the avatar column\n * - `[wrCommentAuthor]` for an author drawn by the app (a profile link) in\n *   place of the `author` input\n * - default content for the body\n * - `[wrCommentActions]` for the action row under the body\n * - nested `<wr-comment>` elements, or a `[wrCommentReplies]` wrapper, for\n *   replies; they indent twice, and deeper levels sit flush with their parent\n *   so a phone keeps room for the body\n *\n * The host is an `article` named after the author, replies sit in a `group`\n * named by `repliesLabel`, and no heading level is assumed: the page owns the\n * outline. Wrap a thread in a list and a chat in `role=\"log\"`.\n *\n * `variant=\"bubble\"` draws the body as a chat bubble; `side=\"end\"` puts it on\n * the reader's own side of the log.\n *\n * @example\n * ```html\n * <wr-comment author=\"Ann\" time=\"2 hours ago\" [datetime]=\"posted\">\n *   <wr-avatar size=\"2.5rem\" alt=\"\">AN</wr-avatar>\n *   Looks good to me.\n *   <div wrCommentActions><button wr-btn size=\"sm\">Reply</button></div>\n *   <wr-comment author=\"Bob\" time=\"an hour ago\">Thanks!</wr-comment>\n * </wr-comment>\n *\n * <wr-comment variant=\"bubble\" side=\"end\" time=\"09:41\">On my way.</wr-comment>\n * ```\n *\n * @see https://ngwr.dev/reference/components/comment\n */\n@Component({\n  selector: 'wr-comment',\n  templateUrl: './comment.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    role: 'article',\n    '[attr.aria-label]': 'author() || null',\n  },\n})\nexport class WrComment {\n  /**\n   * Who wrote it. Also the article's accessible name. Leave it empty when a\n   * `[wrCommentAuthor]` element draws the name instead.\n   *\n   * @default ''\n   */\n  readonly author = input<string>('');\n\n  /**\n   * When it was written, already formatted: the component does no date\n   * formatting. Run a `Date` through the `wrDate` pipe on the way in.\n   *\n   * @default ''\n   */\n  readonly time = input<string>('');\n\n  /**\n   * The same moment, machine-readable. With it the time renders as a\n   * `<time datetime>`: a `Date` is written as ISO 8601, a string as given.\n   *\n   * @default null\n   */\n  readonly datetime = input<Date | string | null>(null);\n\n  /**\n   * `row` is a discussion entry; `bubble` is a chat message, which takes no replies.\n   *\n   * @default 'row'\n   */\n  readonly variant = input<WrCommentVariant>('row');\n\n  /**\n   * Which inline side a bubble sits on. `end` is the reader's own message.\n   * Ignored by the `row` variant.\n   *\n   * @default 'start'\n   */\n  readonly side = input<WrCommentSide>('start');\n\n  /** Accessible name of the replies group. Falls back to `comment.replies`, then `'Replies'`. */\n  readonly repliesLabel = input<string | null>(null);\n\n  protected readonly resolvedRepliesLabel = useI18nText(this.repliesLabel, 'comment.replies', 'Replies');\n\n  protected readonly isoDatetime = computed(() => {\n    const value = this.datetime();\n    if (value === null) return null;\n    if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value.toISOString();\n    return value || null;\n  });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-comment'];\n    if (this.variant() === 'bubble') parts.push('wr-comment--bubble', `wr-comment--${this.side()}`);\n    return parts.join(' ');\n  });\n}\n","<div class=\"wr-comment__avatar\">\n  <ng-content select=\"wr-avatar, [wrCommentAvatar]\" />\n</div>\n\n<div class=\"wr-comment__main\">\n  <div class=\"wr-comment__head\">\n    @if (author(); as name) {\n      <span class=\"wr-comment__author\">{{ name }}</span>\n    }\n    <ng-content select=\"[wrCommentAuthor]\" />\n    @if (time(); as printed) {\n      @if (isoDatetime(); as iso) {\n        <time class=\"wr-comment__time\" [attr.datetime]=\"iso\">{{ printed }}</time>\n      } @else {\n        <span class=\"wr-comment__time\">{{ printed }}</span>\n      }\n    }\n  </div>\n\n  <div class=\"wr-comment__body\"><ng-content /></div>\n\n  <div class=\"wr-comment__actions\">\n    <ng-content select=\"[wrCommentActions]\" />\n  </div>\n</div>\n\n<div class=\"wr-comment__replies\" role=\"group\" [attr.aria-label]=\"resolvedRepliesLabel()\">\n  <ng-content select=\"wr-comment, [wrCommentReplies]\" />\n</div>\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  viewChild,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { WrButton } from 'ngwr/button';\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrTextarea } from 'ngwr/textarea';\nimport { KEYS, isComposing } from 'ngwr/utils';\n\n/**\n * A chat composer: an autosizing field with a send button. Enter sends,\n * Shift+Enter adds a line, Ctrl+Enter and Cmd+Enter always send. The text is\n * emitted through `send` and the composer decides nothing about where it goes.\n *\n * A signal-forms native control: it implements `FormValueControl<string>`, so\n * `[formField]` binds straight to its `value` model. `[(value)]` works\n * standalone.\n *\n * What sends and what does not:\n *\n * - Whitespace-only text never sends; the button is disabled until there is\n *   something to send, and Enter does nothing.\n * - `disabled`, `readonly` and `sending` all block sending and keep the text.\n *   `sending` also marks the composer `aria-busy`; the field stays editable so\n *   the next message can be typed.\n * - An Enter that confirms an IME composition never sends. Both signals are\n *   read, `isComposing` and `keyCode === 229`, because Safari fires\n *   `compositionend` before the keydown, so `isComposing` is already `false`\n *   on the committing keystroke.\n *\n * The text is trimmed and, with `clearOnSend` (the default), the field is\n * cleared BEFORE `send` emits: an app whose request fails puts the text back\n * through the composer's own model, `composer.value.set(text)`, at any time,\n * and nothing overwrites it. A model bound with `[(value)]` takes that write\n * only once change detection has run in between: written back synchronously\n * from the handler, the bound expression still holds the value Angular last\n * bound, so the input is skipped. An app that would rather keep the text until\n * the request succeeds sets `[clearOnSend]=\"false\"` and clears the model\n * itself. Focus stays in the field after sending, unless the `send` handler\n * moved it.\n *\n * @example\n * ```html\n * <wr-comment-composer placeholder=\"Message\" [(value)]=\"draft\" (send)=\"post($event)\" />\n *\n * <wr-comment-composer [sending]=\"posting()\" [clearOnSend]=\"false\" (send)=\"post($event)\">\n *   <button wrComposerActions wr-btn size=\"sm\">Attach</button>\n * </wr-comment-composer>\n * ```\n *\n * @see https://ngwr.dev/reference/components/comment\n */\n@Component({\n  selector: 'wr-comment-composer',\n  templateUrl: './comment-composer.html',\n  imports: [WrButton, WrTextarea],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-busy]': 'sending() ? \"true\" : null',\n  },\n})\nexport class WrCommentComposer implements FormValueControl<string> {\n  /** Native placeholder text. @default '' */\n  readonly placeholder = input<string>('');\n\n  /**\n   * Accessible name for the field. Falls back to the placeholder: the native\n   * `<textarea>` lives inside the component, so a `<label for>` outside cannot\n   * reach it.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  /** Accessible name of the send button. Falls back to `comment.send`, then `'Send'`. */\n  readonly sendLabel = input<string | null>(null);\n\n  /** Visible row count while the field is empty. @default 1 */\n  readonly rows = input(1, { transform: (v: unknown): number => coerceNumberProperty(v, 1) });\n\n  /** Rows the field grows to before it scrolls on its own. @default 6 */\n  readonly maxRows = input(6, { transform: (v: unknown): number => coerceNumberProperty(v, 6) });\n\n  /**\n   * Disable the field and the button. Bound automatically from the field's\n   * disabled state when used with `[formField]`. The text is kept.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Read-only state: the text is shown and announced, keeps its tab stop and\n   * cannot be edited or sent.\n   *\n   * @default false\n   */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * A send is in flight: the button is disabled, the host is `aria-busy` and\n   * Enter does nothing. The field stays editable and the text is kept.\n   *\n   * @default false\n   */\n  readonly sending = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * `true`: Enter sends and Shift+Enter adds a line. `false`: Enter adds a line\n   * and only Ctrl+Enter or Cmd+Enter sends.\n   *\n   * @default true\n   */\n  readonly enterSends = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Clear the field before `send` emits. With `false` the text stays until the\n   * app clears the model itself.\n   *\n   * @default true\n   */\n  readonly clearOnSend = input(true, { transform: coerceBooleanProperty });\n\n  /** The draft. Bound by `[formField]`, or two-way via `[(value)]`. */\n  readonly value = model<string>('');\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  /** The trimmed text, once per send. Where it goes is the app's business. */\n  readonly send = output<string>();\n\n  protected readonly resolvedSendLabel = useI18nText(this.sendLabel, 'comment.send', 'Send');\n\n  /** Whether a send would go through right now. */\n  protected readonly canSend = computed(\n    () => this.value().trim() !== '' && !this.disabled() && !this.readonly() && !this.sending()\n  );\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-comment-composer'];\n    if (this.disabled()) parts.push('wr-comment-composer--disabled');\n    if (this.readonly()) parts.push('wr-comment-composer--readonly');\n    if (this.sending()) parts.push('wr-comment-composer--sending');\n    return parts.join(' ');\n  });\n\n  private readonly field = viewChild.required(WrTextarea);\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /** Focus the field, which is what Signal Forms calls to focus this control. */\n  focus(options?: FocusOptions): void {\n    this.field().focus(options);\n  }\n\n  /**\n   * Send the current text, exactly as the button and Enter do: nothing happens\n   * for whitespace-only text or while `disabled`, `readonly` or `sending`.\n   */\n  submit(): void {\n    if (!this.canSend()) return;\n    const text = this.value().trim();\n    const hadFocus = this.host.nativeElement.contains(this.host.nativeElement.ownerDocument.activeElement);\n    if (this.clearOnSend()) this.value.set('');\n    this.send.emit(text);\n    // A keyboard user is on the button, which sending just disabled: hand focus\n    // back unless the handler moved it. A pointer never took it (see the template).\n    if (hadFocus && this.host.nativeElement.contains(this.host.nativeElement.ownerDocument.activeElement)) {\n      this.focus();\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key !== KEYS.ENTER || isComposing(event)) return;\n    const modifier = event.ctrlKey || event.metaKey;\n    if (!modifier && (event.shiftKey || event.altKey || !this.enterSends())) return;\n    // A sending Enter never reaches the field: on empty text it would only add\n    // blank lines that the next send trims away.\n    event.preventDefault();\n    this.submit();\n  }\n}\n","<wr-textarea\n  class=\"wr-comment-composer__field\"\n  autosize\n  [rows]=\"rows()\"\n  [maxRows]=\"maxRows()\"\n  [resizable]=\"false\"\n  [placeholder]=\"placeholder()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [(value)]=\"value\"\n  (touch)=\"touch.emit()\"\n  (keydown)=\"onKeydown($event)\"\n/>\n\n<div class=\"wr-comment-composer__actions\">\n  <ng-content select=\"[wrComposerActions]\" />\n</div>\n\n<button\n  wr-btn\n  type=\"button\"\n  color=\"primary\"\n  shape=\"pill\"\n  class=\"wr-comment-composer__send\"\n  [attr.aria-label]=\"resolvedSendLabel()\"\n  [disabled]=\"!canSend()\"\n  (mousedown)=\"$event.preventDefault()\"\n  (click)=\"submit()\"\n>\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z\"\n    />\n    <path d=\"M6 12h16\" />\n  </svg>\n</button>\n"],"mappings":"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"}

package/fesm2022/ngwr-dialog-testing.mjs

@@ -37,6 +37,20 @@ var WrDialogHarness = class WrDialogHarness extends ContentContainerComponentHar
 	async sendEscape() {
 		await (await this.host()).sendKeys(TestKey.ESCAPE);
 	}
+	async isConfirm() {
+		return await this.locatorForOptional(".wr-dialog-confirm")() !== null;
+	}
+	async confirm() {
+		await (await this.answer("confirm")).click();
+	}
+	async cancel() {
+		await (await this.answer("cancel")).click();
+	}
+	async answer(which) {
+		const button = await this.locatorForOptional(`.wr-dialog-confirm__action--${which}`)();
+		if (!button) throw new Error(`WrDialogHarness: ${which}() answers a WrDialog.confirm() dialog; this one was opened with open()`);
+		return button;
+	}
 	async isFocusTrapped() {
 		return (await this.host()).matchesSelector(":focus-within");
 	}

package/fesm2022/ngwr-dialog-testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-dialog-testing.mjs","names":[],"sources":["../../../projects/lib/dialog/testing/wr-dialog-harness.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ContentContainerComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';\n\nimport type { WrDialogHarnessFilters } from './types';\n\n/**\n * Test harness for a dialog opened with `WrDialog.open()`.\n *\n * A dialog is never inside the fixture — `WrDialog` attaches it to the overlay\n * container — so load this from `TestbedHarnessEnvironment.documentRootLoader()`\n * rather than from `loader()`. The harness is a CONTENT CONTAINER, which is what\n * makes the interesting assertions possible: the buttons and fields it holds are\n * the consumer's own components, so `dialog.getHarness(WrButtonHarness…)` reads\n * them without the spec ever touching the overlay.\n *\n * @example\n * ```ts\n * const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n * const dialog = await rootLoader.getHarness(WrDialogHarness);\n *\n * expect(await dialog.getTitleText()).toBe('Delete this item?');\n * await (await dialog.getHarness(WrButtonHarness.with({ text: 'Delete' }))).click();\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrDialogHarness extends ContentContainerComponentHarness {\n  /** The overlay panel `WrDialog` creates. */\n  static hostSelector = '.wr-dialog-panel';\n\n  /** Build a predicate that narrows the query — useful when two dialogs are stacked. */\n  static with(options: WrDialogHarnessFilters = {}): HarnessPredicate<WrDialogHarness> {\n    return new HarnessPredicate(WrDialogHarness, options).addOption('title', options.title, (harness, title) =>\n      HarnessPredicate.stringMatches(harness.getTitleText(), title)\n    );\n  }\n\n  /** The `[wrDialogTitle]` text, or `null` when the dialog has no title. */\n  async getTitleText(): Promise<string | null> {\n    const title = await this.locatorForOptional('.wr-dialog__title')();\n    return title ? title.text() : null;\n  }\n\n  /** The `[wrDialogContent]` text, or `null` when the dialog projects no content region. */\n  async getContentText(): Promise<string | null> {\n    const content = await this.locatorForOptional('.wr-dialog__content')();\n    return content ? content.text() : null;\n  }\n\n  /**\n   * The role and modality the dialog announces.\n   *\n   * Worth asserting rather than assuming: `WrDialog` sets these on the OVERLAY\n   * element, not on the component it renders, so a consumer looking for them on\n   * their own host would not find them.\n   */\n  async getRole(): Promise<string | null> {\n    return (await this.host()).getAttribute('role');\n  }\n\n  /** Whether the dialog is marked `aria-modal`. */\n  async isModal(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-modal')) === 'true';\n  }\n\n  /** Whether the built-in dismiss button is present (`closable`, the default). */\n  async isClosable(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-dialog__close')()) !== null;\n  }\n\n  /** The dismiss button's accessible name — the string a screen reader reads out. */\n  async getCloseLabel(): Promise<string | null> {\n    const close = await this.locatorForOptional('.wr-dialog__close')();\n    return close ? close.getAttribute('aria-label') : null;\n  }\n\n  /** Click the built-in dismiss button. Throws when the dialog was opened `closable: false`. */\n  async close(): Promise<void> {\n    await (await this.locatorFor('.wr-dialog__close')()).click();\n  }\n\n  /** Press Escape. A dialog opened `closeOnEscape: false` ignores it — assert, do not assume. */\n  async sendEscape(): Promise<void> {\n    await (await this.host()).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** Whether focus is currently somewhere inside the dialog, where the trap should keep it. */\n  async isFocusTrapped(): Promise<boolean> {\n    return (await this.host()).matchesSelector(':focus-within');\n  }\n}\n"],"mappings":";;;;;;;AAgCA,IAAa,kBAAb,MAAa,wBAAwB,iCAAgC;CAEnE,OAAO,eAAe;CAGtB,OAAO,KAAK,UAAkC,CAAA,GAAE;EAC9C,OAAO,IAAI,iBAAiB,iBAAiB,OAAO,CAAC,CAAC,UAAU,SAAS,QAAQ,QAAQ,SAAS,UAChG,iBAAiB,cAAc,QAAQ,aAAY,GAAI,KAAK,CAAC;CAEjE;CAGA,MAAM,eAAY;EAChB,MAAM,QAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA;EAChE,OAAO,QAAQ,MAAM,KAAI,IAAK;CAChC;CAGA,MAAM,iBAAc;EAClB,MAAM,UAAU,MAAM,KAAK,mBAAmB,qBAAqB,CAAC,CAAA;EACpE,OAAO,UAAU,QAAQ,KAAI,IAAK;CACpC;CASA,MAAM,UAAO;EACX,QAAQ,MAAM,KAAK,KAAI,EAAA,CAAI,aAAa,MAAM;CAChD;CAGA,MAAM,UAAO;EACX,OAAQ,OAAO,MAAM,KAAK,KAAI,EAAA,CAAI,aAAa,YAAY,MAAO;CACpE;CAGA,MAAM,aAAU;EACd,OAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA,MAAQ;CACpE;CAGA,MAAM,gBAAa;EACjB,MAAM,QAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA;EAChE,OAAO,QAAQ,MAAM,aAAa,YAAY,IAAI;CACpD;CAGA,MAAM,QAAK;EACT,OAAO,MAAM,KAAK,WAAW,mBAAmB,CAAC,CAAA,EAAA,CAAI,MAAK;CAC5D;CAGA,MAAM,aAAU;EACd,OAAO,MAAM,KAAK,KAAI,EAAA,CAAI,SAAS,QAAQ,MAAM;CACnD;CAGA,MAAM,iBAAc;EAClB,QAAQ,MAAM,KAAK,KAAI,EAAA,CAAI,gBAAgB,eAAe;CAC5D"}
+{"version":3,"file":"ngwr-dialog-testing.mjs","names":[],"sources":["../../../projects/lib/dialog/testing/wr-dialog-harness.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ContentContainerComponentHarness, HarnessPredicate, type TestElement, TestKey } from '@angular/cdk/testing';\n\nimport type { WrDialogHarnessFilters } from './types';\n\n/**\n * Test harness for a dialog opened with `WrDialog.open()`.\n *\n * A dialog is never inside the fixture — `WrDialog` attaches it to the overlay\n * container — so load this from `TestbedHarnessEnvironment.documentRootLoader()`\n * rather than from `loader()`. The harness is a CONTENT CONTAINER, which is what\n * makes the interesting assertions possible: the buttons and fields it holds are\n * the consumer's own components, so `dialog.getHarness(WrButtonHarness…)` reads\n * them without the spec ever touching the overlay.\n *\n * @example\n * ```ts\n * const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n * const dialog = await rootLoader.getHarness(WrDialogHarness);\n *\n * expect(await dialog.getTitleText()).toBe('Delete this item?');\n * await (await dialog.getHarness(WrButtonHarness.with({ text: 'Delete' }))).click();\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrDialogHarness extends ContentContainerComponentHarness {\n  /** The overlay panel `WrDialog` creates. */\n  static hostSelector = '.wr-dialog-panel';\n\n  /** Build a predicate that narrows the query — useful when two dialogs are stacked. */\n  static with(options: WrDialogHarnessFilters = {}): HarnessPredicate<WrDialogHarness> {\n    return new HarnessPredicate(WrDialogHarness, options).addOption('title', options.title, (harness, title) =>\n      HarnessPredicate.stringMatches(harness.getTitleText(), title)\n    );\n  }\n\n  /** The `[wrDialogTitle]` text, or `null` when the dialog has no title. */\n  async getTitleText(): Promise<string | null> {\n    const title = await this.locatorForOptional('.wr-dialog__title')();\n    return title ? title.text() : null;\n  }\n\n  /** The `[wrDialogContent]` text, or `null` when the dialog projects no content region. */\n  async getContentText(): Promise<string | null> {\n    const content = await this.locatorForOptional('.wr-dialog__content')();\n    return content ? content.text() : null;\n  }\n\n  /**\n   * The role and modality the dialog announces.\n   *\n   * Worth asserting rather than assuming: `WrDialog` sets these on the OVERLAY\n   * element, not on the component it renders, so a consumer looking for them on\n   * their own host would not find them.\n   */\n  async getRole(): Promise<string | null> {\n    return (await this.host()).getAttribute('role');\n  }\n\n  /** Whether the dialog is marked `aria-modal`. */\n  async isModal(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-modal')) === 'true';\n  }\n\n  /** Whether the built-in dismiss button is present (`closable`, the default). */\n  async isClosable(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-dialog__close')()) !== null;\n  }\n\n  /** The dismiss button's accessible name — the string a screen reader reads out. */\n  async getCloseLabel(): Promise<string | null> {\n    const close = await this.locatorForOptional('.wr-dialog__close')();\n    return close ? close.getAttribute('aria-label') : null;\n  }\n\n  /** Click the built-in dismiss button. Throws when the dialog was opened `closable: false`. */\n  async close(): Promise<void> {\n    await (await this.locatorFor('.wr-dialog__close')()).click();\n  }\n\n  /** Press Escape. A dialog opened `closeOnEscape: false` ignores it — assert, do not assume. */\n  async sendEscape(): Promise<void> {\n    await (await this.host()).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** Whether this is a `WrDialog.confirm()` dialog, the one `confirm()` and `cancel()` answer. */\n  async isConfirm(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-dialog-confirm')()) !== null;\n  }\n\n  /** Press the confirm button of a `WrDialog.confirm()` dialog. Throws on any other dialog. */\n  async confirm(): Promise<void> {\n    await (await this.answer('confirm')).click();\n  }\n\n  /** Press the cancel button of a `WrDialog.confirm()` dialog. Throws on any other dialog. */\n  async cancel(): Promise<void> {\n    await (await this.answer('cancel')).click();\n  }\n\n  private async answer(which: 'confirm' | 'cancel'): Promise<TestElement> {\n    const button = await this.locatorForOptional(`.wr-dialog-confirm__action--${which}`)();\n    if (!button) {\n      throw new Error(\n        `WrDialogHarness: ${which}() answers a WrDialog.confirm() dialog; this one was opened with open()`\n      );\n    }\n    return button;\n  }\n\n  /** Whether focus is currently somewhere inside the dialog, where the trap should keep it. */\n  async isFocusTrapped(): Promise<boolean> {\n    return (await this.host()).matchesSelector(':focus-within');\n  }\n}\n"],"mappings":";;;;;;;AAgCA,IAAa,kBAAb,MAAa,wBAAwB,iCAAgC;CAEnE,OAAO,eAAe;CAGtB,OAAO,KAAK,UAAkC,CAAA,GAAE;EAC9C,OAAO,IAAI,iBAAiB,iBAAiB,OAAO,CAAC,CAAC,UAAU,SAAS,QAAQ,QAAQ,SAAS,UAChG,iBAAiB,cAAc,QAAQ,aAAY,GAAI,KAAK,CAAC;CAEjE;CAGA,MAAM,eAAY;EAChB,MAAM,QAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA;EAChE,OAAO,QAAQ,MAAM,KAAI,IAAK;CAChC;CAGA,MAAM,iBAAc;EAClB,MAAM,UAAU,MAAM,KAAK,mBAAmB,qBAAqB,CAAC,CAAA;EACpE,OAAO,UAAU,QAAQ,KAAI,IAAK;CACpC;CASA,MAAM,UAAO;EACX,QAAQ,MAAM,KAAK,KAAI,EAAA,CAAI,aAAa,MAAM;CAChD;CAGA,MAAM,UAAO;EACX,OAAQ,OAAO,MAAM,KAAK,KAAI,EAAA,CAAI,aAAa,YAAY,MAAO;CACpE;CAGA,MAAM,aAAU;EACd,OAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA,MAAQ;CACpE;CAGA,MAAM,gBAAa;EACjB,MAAM,QAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA;EAChE,OAAO,QAAQ,MAAM,aAAa,YAAY,IAAI;CACpD;CAGA,MAAM,QAAK;EACT,OAAO,MAAM,KAAK,WAAW,mBAAmB,CAAC,CAAA,EAAA,CAAI,MAAK;CAC5D;CAGA,MAAM,aAAU;EACd,OAAO,MAAM,KAAK,KAAI,EAAA,CAAI,SAAS,QAAQ,MAAM;CACnD;CAGA,MAAM,YAAS;EACb,OAAQ,MAAM,KAAK,mBAAmB,oBAAoB,CAAC,CAAA,MAAQ;CACrE;CAGA,MAAM,UAAO;EACX,OAAO,MAAM,KAAK,OAAO,SAAS,EAAA,CAAG,MAAK;CAC5C;CAGA,MAAM,SAAM;EACV,OAAO,MAAM,KAAK,OAAO,QAAQ,EAAA,CAAG,MAAK;CAC3C;CAEQ,MAAM,OAAO,OAA2B;EAC9C,MAAM,SAAS,MAAM,KAAK,mBAAmB,+BAA+B,OAAO,CAAC,CAAA;EACpF,IAAI,CAAC,QACH,MAAM,IAAI,MACR,oBAAoB,MAAK,wEAAyE;EAGtG,OAAO;CACT;CAGA,MAAM,iBAAc;EAClB,QAAQ,MAAM,KAAK,KAAI,EAAA,CAAI,gBAAgB,eAAe;CAC5D"}