@genesislcap/pbc-notify-ui 15.8.3 → 15.9.0

package/src/components/foundation-sounds/foundation-sounds-panel.styles.ts

@@ -0,0 +1,201 @@
+import { css } from '@genesislcap/web-core';
+import { scrollbarStyles } from '../../styles/scrollbar.styles';
+
+export const FoundationSoundsPanelStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    width: 100%;
+  }
+
+  .sounds-controls {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    gap: 12px;
+    padding: calc(var(--design-unit) * 3px);
+    box-sizing: border-box;
+  }
+
+  .sounds-help-disclosure {
+    flex: 0 0 auto;
+  }
+
+  .sounds-help-toggle {
+    margin-inline-start: calc(var(--design-unit) * 1px);
+  }
+
+  .sounds-help-toggle::before {
+    content: '+';
+  }
+
+  .sounds-help-disclosure[expanded] .sounds-help-toggle::before {
+    content: '−';
+  }
+
+  .sounds-help {
+    margin: 0;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-hint);
+    text-align: left;
+  }
+
+  .volume-row {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: calc(var(--design-unit) * 2px);
+    min-width: 0;
+  }
+
+  .volume-icon {
+    flex: 0 0 auto;
+  }
+
+  .volume-label {
+    flex: 0 0 auto;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-hint);
+  }
+
+  .volume-slider {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .volume-percent {
+    flex: 0 0 auto;
+    min-width: 3ch;
+    text-align: end;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-hint);
+  }
+
+  .mute-all {
+    flex: 0 0 auto;
+    margin: 0;
+  }
+
+  .sound-rules-panel {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .sound-rules {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .sound-rule {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+
+    /* Keep absolute listboxes from being clipped by the card itself. */
+    overflow: visible;
+  }
+
+  .sound-rule-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 700;
+    font-size: var(--type-ramp-minus-1-font-size);
+  }
+
+  .sound-rule-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .sound-rule-label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-hint);
+  }
+
+  .pattern-input,
+  .match-mode-select,
+  .rule-select,
+  .sound-file-input {
+    width: 100%;
+  }
+
+  /*
+   * Anchor the listbox to the select host and use position:fixed so it escapes
+   * .sound-rules-panel overflow:auto (and the rule card). Each select sets a
+   * unique --sounds-select-anchor / anchor-name via inline style.
+   * !important beats FAST's internal absolute top/bottom for [open] selects.
+   */
+  .match-mode-select[open]::part(listbox),
+  .rule-select[open]::part(listbox) {
+    position: fixed !important;
+    /* stylelint-disable-next-line property-no-unknown -- CSS anchor positioning */
+    position-anchor: var(--sounds-select-anchor);
+    inset: auto !important;
+    top: anchor(bottom) !important;
+    left: anchor(left) !important;
+    right: anchor(right) !important;
+    bottom: auto !important;
+    width: auto !important;
+    margin-top: calc(var(--design-unit) * 1px);
+    z-index: 10000;
+    max-height: min(240px, 40vh);
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 24%);
+  }
+
+  .match-mode-select[open][position='above']::part(listbox),
+  .rule-select[open][position='above']::part(listbox) {
+    top: auto !important;
+    bottom: anchor(top) !important;
+    margin-top: 0;
+    margin-bottom: calc(var(--design-unit) * 1px);
+  }
+
+  .sound-file-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .sound-file-row .sound-file-input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .choose-sound {
+    cursor: pointer;
+  }
+
+  .sound-rules-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 0 0 auto;
+    gap: 8px;
+  }
+
+  .rule-count {
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-hint);
+  }
+
+  .file-input {
+    display: none;
+  }
+
+  ${scrollbarStyles}
+`;

package/src/components/foundation-sounds/foundation-sounds-panel.template.ts

@@ -0,0 +1,188 @@
+import { html, ref, repeat } from '@genesislcap/web-core';
+import type { AlertSoundRuleView } from '../../utils/alert-sound';
+import type { FoundationSoundsPanel } from './foundation-sounds-panel';
+
+export const FoundationSoundsPanelTemplate = html<FoundationSoundsPanel>`
+  <div class="sounds-controls" part="controls">
+    <input
+      ${ref('fileInput')}
+      class="file-input"
+      type="file"
+      accept="audio/*"
+      @change=${(x, c) => x.onFileSelected(c.event)}
+    />
+    <rapid-disclosure class="sounds-help-disclosure" appearance="lightweight">
+      <span slot="title">
+        Sound Alerts Information
+        <span class="sounds-help-toggle" aria-hidden="true"></span>
+      </span>
+      <p class="sounds-help">
+        Add up to ${(x) => x.maxRules} sounds.
+        <br />
+        Match text in MESSAGE or HEADER (a word or phrase), or a notification rule (including rules
+        created when you subscribe to a template).
+        <br />
+        The first matching rule is played.
+      </p>
+    </rapid-disclosure>
+    <div class="volume-row">
+      <rapid-icon
+        class="volume-icon"
+        name=${(x) => (x.muted || x.volumePercent === 0 ? 'volume-xmark' : 'volume-high')}
+      ></rapid-icon>
+      <span class="volume-label">Volume</span>
+      <rapid-slider
+        class="volume-slider"
+        min="0"
+        max="100"
+        step="1"
+        :value=${(x) => String(x.volumePercent)}
+        @change=${(x, c) => x.onVolumeChange(c.event)}
+      ></rapid-slider>
+      <span class="volume-percent">${(x) => `${x.volumePercent}%`}</span>
+      <rapid-button
+        class="mute-all"
+        appearance="lightweight"
+        title=${(x) => (x.muted ? 'Unmute alert sounds' : 'Mute all alert sounds')}
+        @click=${(x) => x.toggleMute()}
+      >
+        ${(x) => (x.muted ? 'Unmute' : 'Mute all')}
+      </rapid-button>
+    </div>
+    <div class="sound-rules-panel">
+      <div class="sound-rules">
+        ${repeat(
+          (x) => x.rules,
+          html<AlertSoundRuleView, FoundationSoundsPanel>`
+            <div class="sound-rule" data-rule-index=${(x) => x.index}>
+              <div class="sound-rule-header">
+                <span>Rule ${(x) => x.index + 1}</span>
+                <div class="sound-rule-actions">
+                  <rapid-button
+                    class="mute-rule"
+                    appearance="stealth"
+                    title=${(x) => (x.muted ? 'Unmute this rule' : 'Mute this rule')}
+                    @click=${(x, c) => c.parent.toggleRuleMute(x.index)}
+                  >
+                    <rapid-icon
+                      name=${(x) => (x.muted ? 'volume-xmark' : 'volume-high')}
+                    ></rapid-icon>
+                  </rapid-button>
+                  <rapid-button
+                    class="remove-rule"
+                    appearance="stealth"
+                    title=${(_, c) => (c.parent.canRemoveRule ? 'Remove rule' : 'Reset rule')}
+                    @click=${(x, c) => c.parent.removeRule(x.index)}
+                  >
+                    <rapid-icon name="trash"></rapid-icon>
+                  </rapid-button>
+                </div>
+              </div>
+              <label class="sound-rule-label">
+                Match by
+                <rapid-select
+                  class="match-mode-select"
+                  style=${(x) =>
+                    `anchor-name: --sound-match-${x.index}; --sounds-select-anchor: --sound-match-${x.index}`}
+                  :value=${(x) => x.matchMode}
+                  @change=${(x, c) => c.parent.onMatchModeChange(x.index, c.event)}
+                >
+                  <rapid-option value="message">MESSAGE text</rapid-option>
+                  <rapid-option value="header">HEADER text</rapid-option>
+                  <rapid-option value="rule">Notification rule</rapid-option>
+                </rapid-select>
+              </label>
+              <label
+                class="sound-rule-label"
+                style=${(x) => (x.matchMode === 'rule' ? 'display: none;' : '')}
+              >
+                ${(x) => (x.matchMode === 'header' ? 'HEADER text' : 'MESSAGE text')}
+                <rapid-text-field
+                  class="pattern-input"
+                  placeholder=${(x) =>
+                    x.matchMode === 'header' ? 'e.g. Price alert' : 'e.g. limit breached'}
+                  :value=${(x) => x.pattern}
+                  @input=${(x, c) => c.parent.onPatternInput(x.index, c.event)}
+                ></rapid-text-field>
+              </label>
+              <label
+                class="sound-rule-label"
+                style=${(x) => (x.matchMode === 'rule' ? '' : 'display: none;')}
+              >
+                Notification rule
+                <rapid-select
+                  class="rule-select"
+                  style=${(x) =>
+                    `anchor-name: --sound-rule-${x.index}; --sounds-select-anchor: --sound-rule-${x.index}`}
+                  :value=${(x) => x.templateId ?? ''}
+                  @change=${(x, c) => c.parent.onRuleChange(x.index, c.event)}
+                >
+                  <options-datasource
+                    value-field="id"
+                    label-field="name"
+                    option-element="rapid-option"
+                    :data=${(_, c) => c.parent.ruleSelectOptions}
+                  ></options-datasource>
+                </rapid-select>
+              </label>
+              <label class="sound-rule-label">
+                Sound file
+                <div class="sound-file-row">
+                  <rapid-text-field
+                    class="sound-file-input"
+                    readonly
+                    placeholder="No sound selected"
+                    :value=${(x) => x.fileName ?? ''}
+                    title=${(x) => x.fileName ?? 'No sound selected'}
+                  >
+                    <rapid-icon
+                      slot="end"
+                      class="choose-sound"
+                      name="folder-open"
+                      title="Choose alert sound"
+                      @click=${(x, c) => {
+                        c.event.stopPropagation();
+                        return c.parent.openFilePicker(x.index);
+                      }}
+                    ></rapid-icon>
+                  </rapid-text-field>
+                  <rapid-button
+                    class="test-sound"
+                    appearance="stealth"
+                    title="Test play this sound"
+                    ?disabled=${(x) => !x.hasSound}
+                    @click=${(x, c) => c.parent.testSound(x.index)}
+                  >
+                    <rapid-icon name="play"></rapid-icon>
+                  </rapid-button>
+                  <rapid-button
+                    class="clear-sound"
+                    appearance="stealth"
+                    title="Clear sound file"
+                    ?disabled=${(x) => !x.hasSound}
+                    @click=${(x, c) => c.parent.clearSound(x.index)}
+                  >
+                    <rapid-icon name="times"></rapid-icon>
+                  </rapid-button>
+                </div>
+              </label>
+            </div>
+          `,
+        )}
+      </div>
+    </div>
+    <div class="sound-rules-footer">
+      <rapid-button
+        class="add-rule"
+        appearance="lightweight"
+        title="Add sound rule"
+        ?disabled=${(x) => !x.canAddRule}
+        @click=${(x) => x.addRule()}
+      >
+        <rapid-icon name="plus"></rapid-icon>
+        Add rule
+      </rapid-button>
+      <span class="rule-count">${(x) => `${x.rules.length} / ${x.maxRules}`}</span>
+    </div>
+  </div>
+`;

package/src/components/foundation-sounds/foundation-sounds-panel.ts

@@ -0,0 +1,280 @@
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import { RuleService } from '../../services/rule.service';
+import {
+  AlertSoundMatchMode,
+  AlertSoundPlayer,
+  AlertSoundRuleView,
+  AlertSoundSelectableRule,
+  MAX_SOUND_RULES,
+} from '../../utils/alert-sound';
+import { FoundationSoundsPanelStyles } from './foundation-sounds-panel.styles';
+import { FoundationSoundsPanelTemplate } from './foundation-sounds-panel.template';
+
+type NamedRuleRow = {
+  NAME?: string;
+  name?: string;
+  RULE_NAME?: string;
+  ID?: string;
+  id?: string;
+  DYNAMIC_RULE_ID?: string;
+};
+
+/**
+ * Configures alert sound rules in the inbox Sounds tab. Persists via the shared
+ * AlertSoundPlayer; playback is handled by layout-mounted
+ * {@link FoundationSounds}.
+ *
+ * @public
+ */
+@customElement({
+  name: 'foundation-sounds-panel',
+  template: FoundationSoundsPanelTemplate,
+  styles: FoundationSoundsPanelStyles,
+})
+export class FoundationSoundsPanel extends GenesisElement {
+  @RuleService ruleService: RuleService;
+
+  /** @internal */
+  @observable rules: AlertSoundRuleView[] = [];
+  /** @internal */
+  @observable canAddRule = true;
+  /** @internal */
+  @observable canRemoveRule = false;
+  /** Global playback volume 0–100. @internal */
+  @observable volumePercent = 100;
+  /** @internal */
+  @observable muted = false;
+  /** Notification rules from REQ_NOTIFICATION_RULE. @internal */
+  @observable selectableRules: AlertSoundSelectableRule[] = [];
+  /** @internal */
+  @observable ruleSelectOptions: Array<{ id: string; name: string }> = [
+    { id: '', name: 'Select a rule...' },
+  ];
+  /** @internal */
+  readonly maxRules = MAX_SOUND_RULES;
+
+  fileInput: HTMLInputElement;
+  private pendingRuleIndex: number | null = null;
+  private readonly player = AlertSoundPlayer.shared;
+  private unsubscribePlayer: (() => void) | undefined;
+  /** Suppresses select change events while options are rebuilt. */
+  private ignoreSelectChanges = false;
+
+  async connectedCallback() {
+    super.connectedCallback();
+
+    await this.player.restore();
+
+    // The await above can outlive this element (e.g. the inbox flyout closing
+    // before restore() settles). Without this guard, disconnectedCallback runs
+    // first with unsubscribePlayer still unset, so it clears nothing — and we
+    // then add a listener to the shared AlertSoundPlayer.shared that nothing
+    // ever removes, plus fire a redundant loadRules() request.
+    if (!this.isConnected) {
+      return;
+    }
+
+    this.syncSoundState();
+    this.unsubscribePlayer = this.player.subscribe(() => this.syncSoundState());
+    await this.loadRules();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unsubscribePlayer?.();
+    this.unsubscribePlayer = undefined;
+  }
+
+  onMatchModeChange(index: number, event: Event): boolean {
+    const value = (event.target as HTMLSelectElement).value;
+    const matchMode: AlertSoundMatchMode =
+      value === 'rule' ? 'rule' : value === 'header' ? 'header' : 'message';
+    if (matchMode === 'rule') {
+      void this.loadRules();
+    }
+    this.player.setMatchMode(index, matchMode);
+    // FAST preventDefaults when a binding returns void — always allow the event.
+    return true;
+  }
+
+  onPatternInput(index: number, event: Event): boolean {
+    const value = (event.target as HTMLInputElement).value;
+    this.player.setPattern(index, value);
+    return true;
+  }
+
+  onRuleChange(index: number, event: Event): boolean {
+    if (this.ignoreSelectChanges) {
+      return true;
+    }
+    const ruleId = (event.target as HTMLSelectElement).value;
+    if (!ruleId) {
+      this.player.setRule(index, null);
+      return true;
+    }
+    const rule = this.selectableRules.find((item) => item.id === ruleId);
+    if (!rule) {
+      return true;
+    }
+    this.player.setRule(index, rule);
+    return true;
+  }
+
+  openFilePicker(index: number): boolean {
+    this.pendingRuleIndex = index;
+    this.fileInput?.click();
+    return true;
+  }
+
+  onFileSelected(event: Event): boolean {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    const index = this.pendingRuleIndex;
+    this.pendingRuleIndex = null;
+    input.value = '';
+    if (!file || index == null) {
+      return true;
+    }
+    this.player.setSoundFromFile(index, file);
+    return true;
+  }
+
+  clearSound(index: number): boolean {
+    this.player.clearSound(index);
+    return true;
+  }
+
+  testSound(index: number): boolean {
+    this.player.playRule(index);
+    return true;
+  }
+
+  toggleRuleMute(index: number): boolean {
+    this.player.toggleRuleMute(index);
+    return true;
+  }
+
+  onVolumeChange(event: Event): boolean {
+    const value = Number((event.target as HTMLInputElement).value);
+    if (!Number.isFinite(value)) {
+      return true;
+    }
+    this.player.setVolumePercent(value);
+    return true;
+  }
+
+  toggleMute(): boolean {
+    this.player.toggleMute();
+    return true;
+  }
+
+  addRule(): boolean {
+    this.player.addRule();
+    return true;
+  }
+
+  removeRule(index: number): boolean {
+    this.player.removeRule(index);
+    return true;
+  }
+
+  /** Reloads the notification-rule picker (e.g. when the Sounds tab is opened). */
+  async reloadRules(): Promise<void> {
+    await this.loadRules();
+  }
+
+  private async loadRules(): Promise<void> {
+    try {
+      const rules = await this.ruleService.getRules();
+      const ruleList = (Array.isArray(rules) ? rules : []) as NamedRuleRow[];
+
+      this.selectableRules = this.mapRules(ruleList);
+      this.ruleSelectOptions = [
+        {
+          id: '',
+          name: this.selectableRules.length ? 'Select a rule...' : 'No rules available',
+        },
+        ...this.selectableRules.map((rule) => ({ id: rule.id, name: rule.name })),
+      ];
+
+      await this.settleRuleOptions();
+      this.syncSoundState();
+      // options-datasource clearData() wipes select.value whenever :data is
+      // reassigned, and :value won't re-apply if templateId didn't change — so
+      // push persisted rule ids back onto the selects after the rebuild.
+      this.applyRuleSelectValues();
+    } catch {
+      this.selectableRules = [];
+      this.ruleSelectOptions = [{ id: '', name: 'No rules available' }];
+      // Without this, a failed REQ_NOTIFICATION_RULE leaves a restored
+      // matchMode: 'rule' row showing the "Select a rule..." placeholder for
+      // good, even though the player still holds its templateId and plays fine.
+      this.syncSoundState();
+      this.applyRuleSelectValues();
+    }
+  }
+
+  /**
+   * Suppresses select `change` events only while options-datasource rebuilds
+   * the DOM — not for the `getRules()` round trip itself, so a user picking a
+   * rule while a request is in flight isn't silently dropped.
+   */
+  private async settleRuleOptions(): Promise<void> {
+    this.ignoreSelectChanges = true;
+    try {
+      await new Promise<void>((resolve) => {
+        requestAnimationFrame(() => {
+          resolve();
+        });
+      });
+    } finally {
+      this.ignoreSelectChanges = false;
+    }
+  }
+
+  /**
+   * Re-applies persisted template ids onto `.rule-select` hosts after
+   * options-datasource has rebuilt its options. We deliberately do *not* bind
+   * `:initialSelectedValue` to templateId: that path compares the option label
+   * against Select.value (the option id), always mismatches, clearData()'s the
+   * select, and leaves the next pick stuck on "Select a rule...".
+   */
+  private applyRuleSelectValues(): void {
+    this.shadowRoot?.querySelectorAll<HTMLElement>('.sound-rule').forEach((row) => {
+      const index = Number(row.getAttribute('data-rule-index'));
+      const rule = this.rules.find((item) => item.index === index);
+      const select = row.querySelector('.rule-select') as HTMLSelectElement | null;
+      if (!select || !rule || rule.matchMode !== 'rule') {
+        return;
+      }
+      select.value = rule.templateId ?? '';
+    });
+  }
+
+  private mapRules(ruleList: NamedRuleRow[]): AlertSoundSelectableRule[] {
+    const seenIds = new Set<string>();
+    return ruleList
+      .map((rule) => {
+        const name = rule?.NAME ?? rule?.RULE_NAME ?? rule?.name ?? '';
+        const id = this.ruleMatchId(rule);
+        if (!id || !name || seenIds.has(id)) {
+          return null;
+        }
+        seenIds.add(id);
+        return { id, name };
+      })
+      .filter((rule): rule is AlertSoundSelectableRule => Boolean(rule));
+  }
+
+  private ruleMatchId(rule: NamedRuleRow | undefined): string {
+    return String(rule?.DYNAMIC_RULE_ID ?? rule?.ID ?? rule?.id ?? '').trim();
+  }
+
+  private syncSoundState() {
+    this.rules = this.player.rules;
+    this.canAddRule = this.player.canAddRule;
+    this.canRemoveRule = this.player.canRemoveRule;
+    this.volumePercent = this.player.volumePercent;
+    this.muted = this.player.isMuted;
+  }
+}

package/src/components/foundation-sounds/foundation-sounds.styles.ts

@@ -0,0 +1,8 @@
+import { css } from '@genesislcap/web-core';
+
+/** Headless layout listener — take no space in the layout chrome. */
+export const FoundationSoundsStyles = css`
+  :host {
+    display: none;
+  }
+`;