ngwr 15.4.0 → 15.5.0

package/comment/styles/_index.scss

@@ -0,0 +1,270 @@
+@use '../../theme/styles' as theme;
+
+// Styles for the entry points this component's own markup renders.
+//
+// v15 removed the `@use 'ngwr'` umbrella: a consumer writes one `@use` per
+// component they place, and never learns about the ones a component places
+// INSIDE itself. Sass deduplicates `@use` within a compilation, so an app that
+// also loads one of these by hand still emits it once.
+@use '../../button/styles' as button-styles; // WrButton
+@use '../../textarea/styles' as textarea-styles; // WrTextarea
+
+.wr-comment {
+  --wr-comment-gap: var(--wr-space-md);
+  --wr-comment-head-gap: var(--wr-space-sm);
+  --wr-comment-body-gap: var(--wr-space-xs);
+  --wr-comment-actions-gap: var(--wr-space-sm);
+  --wr-comment-font-family: var(--wr-font-family-base);
+  --wr-comment-font-size: var(--wr-text-sm);
+  --wr-comment-line-height: var(--wr-text-sm-leading);
+  --wr-comment-author-color: var(--wr-color-on-surface);
+  --wr-comment-author-font-weight: var(--wr-font-weight-semibold);
+  --wr-comment-time-color: var(--wr-color-on-surface-muted);
+  --wr-comment-time-font-size: var(--wr-text-xs);
+  --wr-comment-body-color: var(--wr-color-on-surface);
+  // Replies: how far one level steps in, and the room between them.
+  --wr-comment-indent: var(--wr-space-xl);
+  --wr-comment-replies-gap: var(--wr-space-lg);
+  --wr-comment-replies-margin-top: var(--wr-space-lg);
+  // Bubble variant. The reader's own side is a filled intent with its
+  // `-contrast` label; the other side is a neutral fill with surface text.
+  --wr-comment-bubble-bg: var(--wr-color-fill);
+  --wr-comment-bubble-color: var(--wr-color-on-surface);
+  --wr-comment-bubble-time-color: var(--wr-color-on-surface-muted);
+  --wr-comment-bubble-radius: var(--wr-border-radius-lg);
+  --wr-comment-bubble-padding-y: var(--wr-space-sm);
+  --wr-comment-bubble-padding-x: var(--wr-space-md);
+  --wr-comment-bubble-max-width: 80%;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--wr-comment-gap);
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  font-family: var(--wr-comment-font-family);
+  font-size: var(--wr-comment-font-size);
+  line-height: var(--wr-comment-line-height);
+  color: var(--wr-comment-body-color);
+
+  &__avatar {
+    flex: 0 0 auto;
+    display: flex;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__main {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--wr-comment-body-gap);
+    min-width: 0;
+  }
+
+  &__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--wr-comment-head-gap);
+    min-width: 0;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__author {
+    color: var(--wr-comment-author-color);
+    font-weight: var(--wr-comment-author-font-weight);
+    overflow-wrap: anywhere;
+  }
+
+  &__time {
+    color: var(--wr-comment-time-color);
+    font-size: var(--wr-comment-time-font-size);
+  }
+
+  &__body {
+    min-width: 0;
+    // A pasted URL or a token with no break opportunity would otherwise push
+    // the row past its column.
+    overflow-wrap: anywhere;
+    // Text from the composer holds the lines Shift+Enter made.
+    white-space: pre-line;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--wr-comment-actions-gap);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__replies {
+    flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--wr-comment-replies-gap);
+    margin-top: var(--wr-comment-replies-margin-top);
+    padding-inline-start: var(--wr-comment-indent);
+    min-width: 0;
+
+    &:empty {
+      display: none;
+    }
+
+    // The third level and deeper sit flush with their parent: each step takes
+    // the indent plus an avatar column, and a phone has no body width left to
+    // give after two.
+    .wr-comment__replies .wr-comment__replies {
+      padding-inline-start: 0;
+    }
+  }
+
+  // One step on a phone: the second level is flush too.
+  @media (max-width: 480px) {
+    &__replies .wr-comment__replies {
+      padding-inline-start: 0;
+    }
+  }
+
+  // Bubble variant: the body is a chat bubble, the head sits inside it, and the
+  // whole row leans to one inline side. Logical properties and `row-reverse`
+  // only, so `dir="rtl"` mirrors the log on its own.
+  &--bubble {
+    flex-wrap: nowrap;
+
+    .wr-comment__main {
+      flex: 0 1 auto;
+      max-width: var(--wr-comment-bubble-max-width);
+      gap: 0;
+      padding: var(--wr-comment-bubble-padding-y) var(--wr-comment-bubble-padding-x);
+      background: var(--wr-comment-bubble-bg);
+      color: var(--wr-comment-bubble-color);
+      @include theme.smooth-br(var(--wr-comment-bubble-radius));
+    }
+
+    .wr-comment__head {
+      gap: var(--wr-comment-head-gap);
+    }
+
+    .wr-comment__author {
+      color: inherit;
+    }
+
+    .wr-comment__time {
+      color: var(--wr-comment-bubble-time-color);
+    }
+
+    .wr-comment__actions {
+      margin-top: var(--wr-comment-body-gap);
+    }
+  }
+
+  &--end {
+    --wr-comment-bubble-bg: var(--wr-color-primary);
+    --wr-comment-bubble-color: var(--wr-color-primary-contrast);
+    --wr-comment-bubble-time-color: var(--wr-color-primary-contrast);
+
+    flex-direction: row-reverse;
+  }
+}
+
+.wr-comment-composer {
+  --wr-comment-composer-bg: var(--wr-color-surface);
+  --wr-comment-composer-border: var(--wr-border-base);
+  --wr-comment-composer-ring: transparent;
+  --wr-comment-composer-radius: var(--wr-control-radius-md);
+  --wr-comment-composer-gap: var(--wr-space-xs);
+  --wr-comment-composer-padding: var(--wr-space-xs);
+  // 36px: one row of the md field (20px line, 8px padding a side) less its
+  // border, so the button sits inside the row it sends.
+  --wr-comment-composer-send-size: 2.25rem;
+
+  display: flex;
+  align-items: flex-end;
+  gap: var(--wr-comment-composer-gap);
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  padding: var(--wr-comment-composer-padding);
+  background: var(--wr-comment-composer-bg);
+  border: 1px solid var(--wr-comment-composer-border);
+  @include theme.smooth-br(var(--wr-comment-composer-radius));
+  box-shadow: 0 0 0 3px var(--wr-comment-composer-ring);
+  transition:
+    border-color var(--wr-transition-base),
+    box-shadow var(--wr-transition-base);
+
+  // The frame carries the focus state, so the field inside draws none of its
+  // own: no border, no ring, no fill, in every state.
+  &:focus-within {
+    --wr-comment-composer-border: var(--wr-color-primary);
+    --wr-comment-composer-ring: color-mix(in srgb, var(--wr-color-primary) 15%, transparent);
+  }
+
+  &--disabled {
+    --wr-comment-composer-bg: var(--wr-color-fill);
+
+    cursor: not-allowed;
+  }
+
+  &--readonly {
+    --wr-comment-composer-bg: var(--wr-color-fill);
+  }
+
+  &__field {
+    flex: 1 1 auto;
+    min-width: 0;
+
+    &.wr-textarea,
+    &.wr-textarea--focused,
+    &.wr-textarea--disabled,
+    &.wr-textarea--readonly {
+      --wr-textarea-bg: transparent;
+      --wr-textarea-border: transparent;
+      --wr-textarea-ring: transparent;
+    }
+  }
+
+  &__actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--wr-comment-composer-gap);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__send {
+    flex: 0 0 auto;
+    width: var(--wr-comment-composer-send-size);
+    height: var(--wr-comment-composer-send-size);
+    padding: 0;
+
+    @include theme.touch-target;
+
+    .wr-icon__svg {
+      display: block;
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+
+    // The glyph points toward the inline end, so it turns with the direction.
+    [dir='rtl'] & .wr-icon__svg {
+      transform: scaleX(-1);
+    }
+  }
+}

package/dialog/styles/_index.scss

@@ -1,5 +1,11 @@
 @use '../../theme/styles' as theme;
 
+// Styles for the entry point this component's own markup renders: `confirm()`
+// mounts two `wr-btn`, and a consumer who writes `@use 'ngwr/dialog'` never
+// learns about them. Sass deduplicates `@use`, so an app that also loads the
+// button by hand still emits it once.
+@use '../../button/styles' as button-styles; // WrButton
+
 // CDK Overlay base styles are usually loaded once by the consumer.
 // We re-emit the minimal `cdk-overlay-*` rules so a standalone `@use
 // 'ngwr/dialog'` works without manually pulling CDK's prebuilt CSS.

package/fesm2022/ngwr-comment-testing.mjs

@@ -0,0 +1,60 @@
+import { ComponentHarness, HarnessPredicate, TestKey } from "@angular/cdk/testing";
+import { WrTextareaHarness } from "ngwr/textarea/testing";
+/**
+* @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 WrCommentComposerHarness = class WrCommentComposerHarness extends ComponentHarness {
+	static hostSelector = "wr-comment-composer";
+	static with(options = {}) {
+		return new HarnessPredicate(WrCommentComposerHarness, options).addOption("value", options.value, (harness, value) => HarnessPredicate.stringMatches(harness.getValue(), value)).addOption("placeholder", options.placeholder, (harness, placeholder) => HarnessPredicate.stringMatches(harness.getPlaceholder(), placeholder)).addOption("disabled", options.disabled, async (harness, disabled) => await harness.isDisabled() === disabled);
+	}
+	field = this.locatorFor(WrTextareaHarness);
+	native = this.locatorFor("textarea.wr-textarea__native");
+	sendButton = this.locatorFor("button.wr-comment-composer__send");
+	async getField() {
+		return this.field();
+	}
+	async getValue() {
+		return (await this.field()).getValue();
+	}
+	async setValue(value) {
+		return (await this.field()).setValue(value);
+	}
+	async getPlaceholder() {
+		return (await this.field()).getPlaceholder();
+	}
+	async getSendLabel() {
+		return (await this.sendButton()).getAttribute("aria-label");
+	}
+	async isDisabled() {
+		return (await this.field()).isDisabled();
+	}
+	async isReadonly() {
+		return (await this.field()).isReadonly();
+	}
+	async isSending() {
+		return await (await this.host()).getAttribute("aria-busy") === "true";
+	}
+	async canSend() {
+		return !await (await this.sendButton()).getProperty("disabled");
+	}
+	async send() {
+		if (!await this.canSend()) throw new Error("WrCommentComposerHarness.send(): the send button is disabled - the draft is empty, or the composer is disabled, read-only or sending. Type something first, or assert canSend().");
+		return (await this.sendButton()).click();
+	}
+	async pressEnter() {
+		return (await this.native()).sendKeys(TestKey.ENTER);
+	}
+	async focus() {
+		return (await this.field()).focus();
+	}
+	async isFocused() {
+		return (await this.field()).isFocused();
+	}
+};
+export { WrCommentComposerHarness };
+
+//# sourceMappingURL=ngwr-comment-testing.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-comment-testing.mjs","names":[],"sources":["../../../projects/lib/comment/testing/wr-comment-composer-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 { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';\n\nimport { WrTextareaHarness } from 'ngwr/textarea/testing';\n\nimport type { WrCommentComposerHarnessFilters } from './types';\n\n/**\n * Test harness for `<wr-comment-composer>`: a chat composer, which is a\n * `<wr-textarea>` with a send button beside it.\n *\n * The field is driven through {@link WrTextareaHarness}, handed out by\n * {@link getField}, rather than re-queried here: one harness per element, so\n * the two cannot drift. What this one adds is the sending half - whether a\n * send would go through, and the two ways a user triggers one.\n *\n * Nothing here answers \"did it send\". The composer emits the text through an\n * output and keeps no record, so the spec listens to `(send)` on its own host.\n * What IS readable afterwards is the draft: with `clearOnSend` the field is\n * empty once the text is out, and {@link getValue} says so.\n *\n * There is no IME method. jsdom fires no composition events, and a harness\n * that set `isComposing` by hand would be testing its own flag; a spec that\n * needs that path dispatches the keydown itself.\n *\n * @example\n * ```ts\n * const composer = await loader.getHarness(WrCommentComposerHarness.with({ placeholder: 'Message' }));\n *\n * await composer.setValue('On my way');\n * await composer.pressEnter();\n * expect(await composer.getValue()).toBe('');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrCommentComposerHarness extends ComponentHarness {\n  static hostSelector = 'wr-comment-composer';\n\n  /** Build a predicate that narrows the query - pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrCommentComposerHarnessFilters = {}): HarnessPredicate<WrCommentComposerHarness> {\n    return new HarnessPredicate(WrCommentComposerHarness, options)\n      .addOption('value', options.value, (harness, value) => HarnessPredicate.stringMatches(harness.getValue(), value))\n      .addOption('placeholder', options.placeholder, (harness, placeholder) =>\n        HarnessPredicate.stringMatches(harness.getPlaceholder(), placeholder)\n      )\n      .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);\n  }\n\n  private readonly field = this.locatorFor(WrTextareaHarness);\n  // The one thing read past the field's harness: a keystroke has to land on\n  // the native element, and `WrTextareaHarness` types values, not keys.\n  private readonly native = this.locatorFor('textarea.wr-textarea__native');\n  private readonly sendButton = this.locatorFor('button.wr-comment-composer__send');\n\n  /** The field itself, for everything `WrTextareaHarness` already answers. */\n  async getField(): Promise<WrTextareaHarness> {\n    return this.field();\n  }\n\n  /** The draft currently in the field. */\n  async getValue(): Promise<string> {\n    return (await this.field()).getValue();\n  }\n\n  /**\n   * Type a draft in, through the field's own harness, so a disabled or\n   * read-only composer throws the same way the field would.\n   */\n  async setValue(value: string): Promise<void> {\n    return (await this.field()).setValue(value);\n  }\n\n  /** The field's placeholder. */\n  async getPlaceholder(): Promise<string> {\n    return (await this.field()).getPlaceholder();\n  }\n\n  /** The send button's accessible name - `sendLabel`, or the catalog's `comment.send`. */\n  async getSendLabel(): Promise<string | null> {\n    return (await this.sendButton()).getAttribute('aria-label');\n  }\n\n  /** Whether the field refuses input - the native element's own `disabled`. */\n  async isDisabled(): Promise<boolean> {\n    return (await this.field()).isDisabled();\n  }\n\n  /** Whether the field shows its draft but refuses edits. */\n  async isReadonly(): Promise<boolean> {\n    return (await this.field()).isReadonly();\n  }\n\n  /** Whether a send is in flight, from the host's `aria-busy`. */\n  async isSending(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-busy')) === 'true';\n  }\n\n  /**\n   * Whether a send would go through right now, from the send button's own\n   * `disabled`: it is off for whitespace-only text and under `disabled`,\n   * `readonly` and `sending` alike, which is the same gate Enter checks.\n   */\n  async canSend(): Promise<boolean> {\n    return !(await (await this.sendButton()).getProperty<boolean>('disabled'));\n  }\n\n  /**\n   * Click the send button. Throws when a send could not go through, rather than\n   * clicking a disabled button and reporting nothing: assert {@link canSend}\n   * instead where that is the point.\n   */\n  async send(): Promise<void> {\n    if (!(await this.canSend())) {\n      throw new Error(\n        'WrCommentComposerHarness.send(): the send button is disabled - the draft is empty, or the composer is ' +\n          'disabled, read-only or sending. Type something first, or assert canSend().'\n      );\n    }\n    return (await this.sendButton()).click();\n  }\n\n  /**\n   * Press Enter in the field, exactly as a user would: with `enterSends` it\n   * sends, and a Shift+Enter is not this method. Nothing is thrown when the\n   * send is refused, because that refusal is behaviour worth asserting.\n   */\n  async pressEnter(): Promise<void> {\n    return (await this.native()).sendKeys(TestKey.ENTER);\n  }\n\n  /** Move keyboard focus into the field. */\n  async focus(): Promise<void> {\n    return (await this.field()).focus();\n  }\n\n  /** Whether the field holds focus. */\n  async isFocused(): Promise<boolean> {\n    return (await this.field()).isFocused();\n  }\n}\n"],"mappings":";;;;;;;;AA0CA,IAAa,2BAAb,MAAa,iCAAiC,iBAAgB;CAC5D,OAAO,eAAe;CAGtB,OAAO,KAAK,UAA2C,CAAA,GAAE;EACvD,OAAO,IAAI,iBAAiB,0BAA0B,OAAO,CAAC,CAC3D,UAAU,SAAS,QAAQ,QAAQ,SAAS,UAAU,iBAAiB,cAAc,QAAQ,SAAQ,GAAI,KAAK,CAAC,CAAC,CAChH,UAAU,eAAe,QAAQ,cAAc,SAAS,gBACvD,iBAAiB,cAAc,QAAQ,eAAc,GAAI,WAAW,CAAC,CACtE,CACA,UAAU,YAAY,QAAQ,UAAU,OAAO,SAAS,aAAc,MAAM,QAAQ,WAAU,MAAQ,QAAQ;CACnH;CAEiB,QAAQ,KAAK,WAAW,iBAAiB;CAGzC,SAAS,KAAK,WAAW,8BAA8B;CACvD,aAAa,KAAK,WAAW,kCAAkC;CAGhF,MAAM,WAAQ;EACZ,OAAO,KAAK,MAAK;CACnB;CAGA,MAAM,WAAQ;EACZ,QAAQ,MAAM,KAAK,MAAK,EAAA,CAAI,SAAQ;CACtC;CAMA,MAAM,SAAS,OAAa;EAC1B,QAAQ,MAAM,KAAK,MAAK,EAAA,CAAI,SAAS,KAAK;CAC5C;CAGA,MAAM,iBAAc;EAClB,QAAQ,MAAM,KAAK,MAAK,EAAA,CAAI,eAAc;CAC5C;CAGA,MAAM,eAAY;EAChB,QAAQ,MAAM,KAAK,WAAU,EAAA,CAAI,aAAa,YAAY;CAC5D;CAGA,MAAM,aAAU;EACd,QAAQ,MAAM,KAAK,MAAK,EAAA,CAAI,WAAU;CACxC;CAGA,MAAM,aAAU;EACd,QAAQ,MAAM,KAAK,MAAK,EAAA,CAAI,WAAU;CACxC;CAGA,MAAM,YAAS;EACb,OAAQ,OAAO,MAAM,KAAK,KAAI,EAAA,CAAI,aAAa,WAAW,MAAO;CACnE;CAOA,MAAM,UAAO;EACX,OAAO,CAAE,OAAO,MAAM,KAAK,WAAU,EAAA,CAAI,YAAqB,UAAU;CAC1E;CAOA,MAAM,OAAI;EACR,IAAI,CAAE,MAAM,KAAK,QAAO,GACtB,MAAM,IAAI,MACR,kLAC8E;EAGlF,QAAQ,MAAM,KAAK,WAAU,EAAA,CAAI,MAAK;CACxC;CAOA,MAAM,aAAU;EACd,QAAQ,MAAM,KAAK,OAAM,EAAA,CAAI,SAAS,QAAQ,KAAK;CACrD;CAGA,MAAM,QAAK;EACT,QAAQ,MAAM,KAAK,MAAK,EAAA,CAAI,MAAK;CACnC;CAGA,MAAM,YAAS;EACb,QAAQ,MAAM,KAAK,MAAK,EAAA,CAAI,UAAS;CACvC"}