@things-factory/inquiry 10.1.251 → 10.1.253

package/client/components/inquiry-writer.ts

@@ -7,92 +7,55 @@ import '@material/web/icon/icon.js'
 import '@material/web/button/filled-button.js'
 import '@material/web/button/text-button.js'
 import '@operato/input/ox-input-file.js'
+import '@operato/input/ox-input-select-buttons.js'
+import '@operato/popup/ox-popup-actions.js'
 
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
-import { ButtonStyles, FormFieldStyles } from '@operato/styles'
+import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'
 
 import { inquiriesChanged, inquiryApi } from '../utils/inquiry-api.js'
-import { KIND_ICONS, KINDS, kindWord, reasonOf, t } from '../utils/inquiry-words.js'
+import { KINDS, kindWord, reasonOf, t } from '../utils/inquiry-words.js'
 
 const MAX_TITLE = 200
 
 /** Opens the window, carrying the screen it is opened on. */
 export function openInquiryWriter(kind = 'QUESTION') {
   const pageUrl = location.href
-  const handle: any = openPopup(html`<inquiry-writer .kind=${kind} .pageUrl=${pageUrl} @done=${() => handle.close()}></inquiry-writer>`, {
-    backdrop: true,
-    size: 'large',
-    title: t('inquiry.title.write')
-  })
+  const handle: any = openPopup(
+    html`<inquiry-writer .kind=${kind} .pageUrl=${pageUrl} @close=${() => handle.close()}></inquiry-writer>`,
+    {
+      backdrop: true,
+      size: 'large',
+      title: t('inquiry.title.write')
+    }
+  )
   return handle
 }
 
 @customElement('inquiry-writer')
 export class InquiryWriter extends localize(i18next)(LitElement) {
+  /* The house shape of a popup (page-standard sections 7, 8): only the body scrolls, fields are labels above native
+     inputs, the one button row is `ox-popup-actions`. */
   static styles = [
+    CommonPopupStyles,
+    PopupBodyStyles,
     FormFieldStyles,
-    ButtonStyles,
+    PopupFieldStyles,
     css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-medium, 8px);
-        padding: var(--spacing-large, 12px);
-        color: var(--md-sys-color-on-surface);
-        overflow: auto;
-      }
-      label {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-      label.check {
-        flex-direction: row;
-        align-items: center;
-        gap: var(--spacing-small, 4px);
-      }
-      .kinds {
-        display: inline-flex;
-        gap: 4px;
-        padding: 3px;
-        border-radius: 10px;
-        background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+      ox-input-select-buttons {
         align-self: flex-start;
       }
-      .kinds button {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 14px;
-        border: 0;
-        border-radius: 8px;
-        background: transparent;
-        box-shadow: none;
-        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
-        font: inherit;
-        font-weight: 600;
-        cursor: pointer;
-      }
-      .kinds button[aria-pressed='true'] {
-        background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
-        color: var(--ui-ink, var(--md-sys-color-on-surface));
-      }
-      .kinds md-icon {
-        --md-icon-size: 16px;
-      }
       textarea {
         min-height: 160px;
-        font-family: inherit;
-        box-sizing: border-box;
-        width: 100%;
+        resize: vertical;
       }
-      .hint {
-        font-size: var(--ui-t-small, 12px);
-        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      .note {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
         word-break: break-all;
       }
       .files {
@@ -100,15 +63,15 @@ export class InquiryWriter extends localize(i18next)(LitElement) {
         flex-wrap: wrap;
         gap: var(--spacing-small, 4px);
         align-items: center;
+        color: var(--ui-ink);
       }
       .file {
         display: inline-flex;
         align-items: center;
         gap: 2px;
-        padding: 0 var(--spacing-small, 4px);
-        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
-        border-radius: var(--border-radius, 4px);
-        font-size: var(--ui-t-small, 12px);
+      }
+      .file md-icon {
+        --md-icon-size: 14px;
       }
       .file button {
         border: 0;
@@ -116,15 +79,18 @@ export class InquiryWriter extends localize(i18next)(LitElement) {
         box-shadow: none;
         padding: 0;
         cursor: pointer;
-        color: inherit;
+        color: var(--ui-muted);
       }
-      .file md-icon {
-        --md-icon-size: 14px;
-      }
-      .buttons {
+      .check {
         display: flex;
-        justify-content: flex-end;
-        gap: var(--spacing-medium, 8px);
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        color: var(--ui-ink);
+      }
+      /* The field rule stretches its inputs to the row; a checkbox keeps its own size. */
+      .field .check input {
+        width: auto;
+        margin: 0;
       }
     `
   ]
@@ -142,39 +108,71 @@ export class InquiryWriter extends localize(i18next)(LitElement) {
   render() {
     const title = this.title.trim()
     return html`
-      <div class="kinds" role="group" aria-label=${t('inquiry.field.kind')}>
-        ${KINDS.map(
-          code => html`<button aria-pressed=${String(this.kind === code)} @click=${() => (this.kind = code)}><md-icon>${KIND_ICONS[code]}</md-icon>${kindWord(code)}</button>`
-        )}
-      </div>
-      <span class="hint">${t(`inquiry.text.kind-hint-${this.kind.toLowerCase()}`)}</span>
-      <label
-        >${t('inquiry.field.title')}
-        <input .value=${this.title} maxlength=${MAX_TITLE} @input=${(e: any) => (this.title = e.target.value)} />
-        <span class="hint">${t('inquiry.text.title-limit', { count: this.title.length, max: MAX_TITLE })}</span>
-      </label>
-      <label
-        >${t('inquiry.field.body')}
-        <textarea .value=${this.body} placeholder=${t(`inquiry.text.body-placeholder-${this.kind.toLowerCase()}`)} @input=${(e: any) => (this.body = e.target.value)}></textarea>
-      </label>
-      <div class="files">
-        ${this.files.map(
-          (file, index) =>
-            html`<span class="file"
-              ><md-icon>attach_file</md-icon>${file.name}<button aria-label=${t('inquiry.button.remove')} @click=${() => (this.files = this.files.filter((_, i) => i !== index))}>
-                <md-icon>close</md-icon>
-              </button></span
-            >`
-        )}
-        <ox-input-file quiet hide-filelist multiple icon="attach_file" .progress=${this.progress} @change=${(e: CustomEvent) => this.pick(e)}></ox-input-file>
-      </div>
-      <label class="check"><input type="checkbox" .checked=${this.privately} @change=${(e: any) => (this.privately = e.target.checked)} />${t('inquiry.text.private-label')}</label>
-      <span class="hint">${this.privately ? t('inquiry.text.private-hint') : t('inquiry.text.domain-hint')}</span>
-      ${this.pageUrl ? html`<span class="hint">${t('inquiry.text.page-hint', { page: this.pageUrl })}</span>` : nothing}
-      <div class="buttons">
-        <md-text-button @click=${() => this.dispatchEvent(new CustomEvent('done'))}>${t('inquiry.button.cancel')}</md-text-button>
-        <md-filled-button ?disabled=${!title || this.sending} @click=${() => this.send()}>${t('inquiry.button.submit')}</md-filled-button>
+      <div class="body">
+        <div class="field">
+          <ox-input-select-buttons
+            .value=${this.kind}
+            .options=${KINDS.map(code => ({ display: kindWord(code), value: code }))}
+            @change=${(e: CustomEvent) => e.detail && (this.kind = e.detail)}
+          ></ox-input-select-buttons>
+          <span>${t(`inquiry.text.kind-hint-${this.kind.toLowerCase()}`)}</span>
+        </div>
+        <label class="field">
+          <span
+            >${t('inquiry.field.title')} ·
+            ${t('inquiry.text.title-limit', { count: this.title.length, max: MAX_TITLE })}</span
+          >
+          <input .value=${this.title} maxlength=${MAX_TITLE} @input=${(e: any) => (this.title = e.target.value)} />
+        </label>
+        <label class="field">
+          <span>${t('inquiry.field.body')}</span>
+          <textarea
+            .value=${this.body}
+            placeholder=${t(`inquiry.text.body-placeholder-${this.kind.toLowerCase()}`)}
+            @input=${(e: any) => (this.body = e.target.value)}
+          ></textarea>
+        </label>
+        <div class="files">
+          ${this.files.map(
+            (file, index) =>
+              html`<span class="file"
+                ><md-icon>attach_file</md-icon>${file.name}<button
+                  aria-label=${t('inquiry.button.remove')}
+                  @click=${() => (this.files = this.files.filter((_, i) => i !== index))}
+                >
+                  <md-icon>close</md-icon>
+                </button></span
+              >`
+          )}
+          <ox-input-file
+            quiet
+            hide-filelist
+            multiple
+            icon="attach_file"
+            .progress=${this.progress}
+            @change=${(e: CustomEvent) => this.pick(e)}
+          ></ox-input-file>
+        </div>
+        <div class="field">
+          <label class="check"
+            ><input
+              type="checkbox"
+              .checked=${this.privately}
+              @change=${(e: any) => (this.privately = e.target.checked)}
+            />${t('inquiry.text.private-label')}</label
+          >
+          <span>${this.privately ? t('inquiry.text.private-hint') : t('inquiry.text.domain-hint')}</span>
+        </div>
+        ${this.pageUrl ? html`<div class="note">${t('inquiry.text.page-hint', { page: this.pageUrl })}</div>` : nothing}
       </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => this.dispatchEvent(new CustomEvent('close'))}
+          >${t('inquiry.button.cancel')}</md-text-button
+        >
+        <md-filled-button slot="confirm" ?disabled=${!title || this.sending} @click=${() => this.send()}
+          >${t('inquiry.button.submit')}</md-filled-button
+        >
+      </ox-popup-actions>
     `
   }
 
@@ -190,14 +188,20 @@ export class InquiryWriter extends localize(i18next)(LitElement) {
     this.sending = true
     try {
       await inquiryApi.create(
-        { kind: this.kind, title: this.title.trim(), body: this.body, visibility: this.privately ? 'PRIVATE' : 'DOMAIN', pageUrl: this.pageUrl },
+        {
+          kind: this.kind,
+          title: this.title.trim(),
+          body: this.body,
+          visibility: this.privately ? 'PRIVATE' : 'DOMAIN',
+          pageUrl: this.pageUrl
+        },
         this.files,
         fraction => (this.progress = fraction)
       )
       inquiriesChanged()
       notify({ message: t('inquiry.text.sent') })
       /* The writer stays on the screen they were on - the answer comes as a notice and on the menu's badge. */
-      this.dispatchEvent(new CustomEvent('done'))
+      this.dispatchEvent(new CustomEvent('close'))
     } catch (error) {
       notify({ level: 'error', message: reasonOf(error) })
     } finally {

package/dist-client/components/inquiry-writer.d.ts

@@ -2,6 +2,8 @@ import '@material/web/icon/icon.js';
 import '@material/web/button/filled-button.js';
 import '@material/web/button/text-button.js';
 import '@operato/input/ox-input-file.js';
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/popup/ox-popup-actions.js';
 import { LitElement } from 'lit';
 /** Opens the window, carrying the screen it is opened on. */
 export declare function openInquiryWriter(kind?: string): any;

package/dist-client/components/inquiry-writer.js

@@ -8,18 +8,20 @@ import '@material/web/icon/icon.js';
 import '@material/web/button/filled-button.js';
 import '@material/web/button/text-button.js';
 import '@operato/input/ox-input-file.js';
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/popup/ox-popup-actions.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
-import { ButtonStyles, FormFieldStyles } from '@operato/styles';
+import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles';
 import { inquiriesChanged, inquiryApi } from '../utils/inquiry-api.js';
-import { KIND_ICONS, KINDS, kindWord, reasonOf, t } from '../utils/inquiry-words.js';
+import { KINDS, kindWord, reasonOf, t } from '../utils/inquiry-words.js';
 const MAX_TITLE = 200;
 /** Opens the window, carrying the screen it is opened on. */
 export function openInquiryWriter(kind = 'QUESTION') {
     const pageUrl = location.href;
-    const handle = openPopup(html `<inquiry-writer .kind=${kind} .pageUrl=${pageUrl} @done=${() => handle.close()}></inquiry-writer>`, {
+    const handle = openPopup(html `<inquiry-writer .kind=${kind} .pageUrl=${pageUrl} @close=${() => handle.close()}></inquiry-writer>`, {
         backdrop: true,
         size: 'large',
         title: t('inquiry.title.write')
@@ -37,66 +39,24 @@ let InquiryWriter = class InquiryWriter extends localize(i18next)(LitElement) {
         this.files = [];
         this.sending = false;
     }
+    /* The house shape of a popup (page-standard sections 7, 8): only the body scrolls, fields are labels above native
+       inputs, the one button row is `ox-popup-actions`. */
     static { this.styles = [
+        CommonPopupStyles,
+        PopupBodyStyles,
         FormFieldStyles,
-        ButtonStyles,
+        PopupFieldStyles,
         css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-medium, 8px);
-        padding: var(--spacing-large, 12px);
-        color: var(--md-sys-color-on-surface);
-        overflow: auto;
-      }
-      label {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-      label.check {
-        flex-direction: row;
-        align-items: center;
-        gap: var(--spacing-small, 4px);
-      }
-      .kinds {
-        display: inline-flex;
-        gap: 4px;
-        padding: 3px;
-        border-radius: 10px;
-        background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+      ox-input-select-buttons {
         align-self: flex-start;
       }
-      .kinds button {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 14px;
-        border: 0;
-        border-radius: 8px;
-        background: transparent;
-        box-shadow: none;
-        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
-        font: inherit;
-        font-weight: 600;
-        cursor: pointer;
-      }
-      .kinds button[aria-pressed='true'] {
-        background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
-        color: var(--ui-ink, var(--md-sys-color-on-surface));
-      }
-      .kinds md-icon {
-        --md-icon-size: 16px;
-      }
       textarea {
         min-height: 160px;
-        font-family: inherit;
-        box-sizing: border-box;
-        width: 100%;
+        resize: vertical;
       }
-      .hint {
-        font-size: var(--ui-t-small, 12px);
-        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      .note {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
         word-break: break-all;
       }
       .files {
@@ -104,15 +64,15 @@ let InquiryWriter = class InquiryWriter extends localize(i18next)(LitElement) {
         flex-wrap: wrap;
         gap: var(--spacing-small, 4px);
         align-items: center;
+        color: var(--ui-ink);
       }
       .file {
         display: inline-flex;
         align-items: center;
         gap: 2px;
-        padding: 0 var(--spacing-small, 4px);
-        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
-        border-radius: var(--border-radius, 4px);
-        font-size: var(--ui-t-small, 12px);
+      }
+      .file md-icon {
+        --md-icon-size: 14px;
       }
       .file button {
         border: 0;
@@ -120,49 +80,86 @@ let InquiryWriter = class InquiryWriter extends localize(i18next)(LitElement) {
         box-shadow: none;
         padding: 0;
         cursor: pointer;
-        color: inherit;
-      }
-      .file md-icon {
-        --md-icon-size: 14px;
+        color: var(--ui-muted);
       }
-      .buttons {
+      .check {
         display: flex;
-        justify-content: flex-end;
-        gap: var(--spacing-medium, 8px);
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        color: var(--ui-ink);
+      }
+      /* The field rule stretches its inputs to the row; a checkbox keeps its own size. */
+      .field .check input {
+        width: auto;
+        margin: 0;
       }
     `
     ]; }
     render() {
         const title = this.title.trim();
         return html `
-      <div class="kinds" role="group" aria-label=${t('inquiry.field.kind')}>
-        ${KINDS.map(code => html `<button aria-pressed=${String(this.kind === code)} @click=${() => (this.kind = code)}><md-icon>${KIND_ICONS[code]}</md-icon>${kindWord(code)}</button>`)}
-      </div>
-      <span class="hint">${t(`inquiry.text.kind-hint-${this.kind.toLowerCase()}`)}</span>
-      <label
-        >${t('inquiry.field.title')}
-        <input .value=${this.title} maxlength=${MAX_TITLE} @input=${(e) => (this.title = e.target.value)} />
-        <span class="hint">${t('inquiry.text.title-limit', { count: this.title.length, max: MAX_TITLE })}</span>
-      </label>
-      <label
-        >${t('inquiry.field.body')}
-        <textarea .value=${this.body} placeholder=${t(`inquiry.text.body-placeholder-${this.kind.toLowerCase()}`)} @input=${(e) => (this.body = e.target.value)}></textarea>
-      </label>
-      <div class="files">
-        ${this.files.map((file, index) => html `<span class="file"
-              ><md-icon>attach_file</md-icon>${file.name}<button aria-label=${t('inquiry.button.remove')} @click=${() => (this.files = this.files.filter((_, i) => i !== index))}>
-                <md-icon>close</md-icon>
-              </button></span
-            >`)}
-        <ox-input-file quiet hide-filelist multiple icon="attach_file" .progress=${this.progress} @change=${(e) => this.pick(e)}></ox-input-file>
-      </div>
-      <label class="check"><input type="checkbox" .checked=${this.privately} @change=${(e) => (this.privately = e.target.checked)} />${t('inquiry.text.private-label')}</label>
-      <span class="hint">${this.privately ? t('inquiry.text.private-hint') : t('inquiry.text.domain-hint')}</span>
-      ${this.pageUrl ? html `<span class="hint">${t('inquiry.text.page-hint', { page: this.pageUrl })}</span>` : nothing}
-      <div class="buttons">
-        <md-text-button @click=${() => this.dispatchEvent(new CustomEvent('done'))}>${t('inquiry.button.cancel')}</md-text-button>
-        <md-filled-button ?disabled=${!title || this.sending} @click=${() => this.send()}>${t('inquiry.button.submit')}</md-filled-button>
+      <div class="body">
+        <div class="field">
+          <ox-input-select-buttons
+            .value=${this.kind}
+            .options=${KINDS.map(code => ({ display: kindWord(code), value: code }))}
+            @change=${(e) => e.detail && (this.kind = e.detail)}
+          ></ox-input-select-buttons>
+          <span>${t(`inquiry.text.kind-hint-${this.kind.toLowerCase()}`)}</span>
+        </div>
+        <label class="field">
+          <span
+            >${t('inquiry.field.title')} ·
+            ${t('inquiry.text.title-limit', { count: this.title.length, max: MAX_TITLE })}</span
+          >
+          <input .value=${this.title} maxlength=${MAX_TITLE} @input=${(e) => (this.title = e.target.value)} />
+        </label>
+        <label class="field">
+          <span>${t('inquiry.field.body')}</span>
+          <textarea
+            .value=${this.body}
+            placeholder=${t(`inquiry.text.body-placeholder-${this.kind.toLowerCase()}`)}
+            @input=${(e) => (this.body = e.target.value)}
+          ></textarea>
+        </label>
+        <div class="files">
+          ${this.files.map((file, index) => html `<span class="file"
+                ><md-icon>attach_file</md-icon>${file.name}<button
+                  aria-label=${t('inquiry.button.remove')}
+                  @click=${() => (this.files = this.files.filter((_, i) => i !== index))}
+                >
+                  <md-icon>close</md-icon>
+                </button></span
+              >`)}
+          <ox-input-file
+            quiet
+            hide-filelist
+            multiple
+            icon="attach_file"
+            .progress=${this.progress}
+            @change=${(e) => this.pick(e)}
+          ></ox-input-file>
+        </div>
+        <div class="field">
+          <label class="check"
+            ><input
+              type="checkbox"
+              .checked=${this.privately}
+              @change=${(e) => (this.privately = e.target.checked)}
+            />${t('inquiry.text.private-label')}</label
+          >
+          <span>${this.privately ? t('inquiry.text.private-hint') : t('inquiry.text.domain-hint')}</span>
+        </div>
+        ${this.pageUrl ? html `<div class="note">${t('inquiry.text.page-hint', { page: this.pageUrl })}</div>` : nothing}
       </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => this.dispatchEvent(new CustomEvent('close'))}
+          >${t('inquiry.button.cancel')}</md-text-button
+        >
+        <md-filled-button slot="confirm" ?disabled=${!title || this.sending} @click=${() => this.send()}
+          >${t('inquiry.button.submit')}</md-filled-button
+        >
+      </ox-popup-actions>
     `;
     }
     pick(e) {
@@ -176,11 +173,17 @@ let InquiryWriter = class InquiryWriter extends localize(i18next)(LitElement) {
     async send() {
         this.sending = true;
         try {
-            await inquiryApi.create({ kind: this.kind, title: this.title.trim(), body: this.body, visibility: this.privately ? 'PRIVATE' : 'DOMAIN', pageUrl: this.pageUrl }, this.files, fraction => (this.progress = fraction));
+            await inquiryApi.create({
+                kind: this.kind,
+                title: this.title.trim(),
+                body: this.body,
+                visibility: this.privately ? 'PRIVATE' : 'DOMAIN',
+                pageUrl: this.pageUrl
+            }, this.files, fraction => (this.progress = fraction));
             inquiriesChanged();
             notify({ message: t('inquiry.text.sent') });
             /* The writer stays on the screen they were on - the answer comes as a notice and on the menu's badge. */
-            this.dispatchEvent(new CustomEvent('done'));
+            this.dispatchEvent(new CustomEvent('close'));
         }
         catch (error) {
             notify({ level: 'error', message: reasonOf(error) });

package/dist-client/components/inquiry-writer.js.map

@@ -1 +1 @@
-{"version":3,"file":"inquiry-writer.js","sourceRoot":"","sources":["../../client/components/inquiry-writer.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * 문의 · 제안 보내기 (ADR-0184 decisions 1, 4, 5, 9) - the window the avatar menu opens on any screen: the kind, the title,\n * the words, files, and who reads it. The screen it was opened on goes with it; the application, its version, the\n * writer and the domain are the server's to take.\n */\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { ButtonStyles, FormFieldStyles } from '@operato/styles'\n\nimport { inquiriesChanged, inquiryApi } from '../utils/inquiry-api.js'\nimport { KIND_ICONS, KINDS, kindWord, reasonOf, t } from '../utils/inquiry-words.js'\n\nconst MAX_TITLE = 200\n\n/** Opens the window, carrying the screen it is opened on. */\nexport function openInquiryWriter(kind = 'QUESTION') {\n  const pageUrl = location.href\n  const handle: any = openPopup(html`<inquiry-writer .kind=${kind} .pageUrl=${pageUrl} @done=${() => handle.close()}></inquiry-writer>`, {\n    backdrop: true,\n    size: 'large',\n    title: t('inquiry.title.write')\n  })\n  return handle\n}\n\n@customElement('inquiry-writer')\nexport class InquiryWriter extends localize(i18next)(LitElement) {\n  static styles = [\n    FormFieldStyles,\n    ButtonStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-large, 12px);\n        color: var(--md-sys-color-on-surface);\n        overflow: auto;\n      }\n      label {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      label.check {\n        flex-direction: row;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n      }\n      .kinds {\n        display: inline-flex;\n        gap: 4px;\n        padding: 3px;\n        border-radius: 10px;\n        background: var(--ui-panel-2, var(--md-sys-color-surface-container));\n        align-self: flex-start;\n      }\n      .kinds button {\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        padding: 4px 14px;\n        border: 0;\n        border-radius: 8px;\n        background: transparent;\n        box-shadow: none;\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n        font: inherit;\n        font-weight: 600;\n        cursor: pointer;\n      }\n      .kinds button[aria-pressed='true'] {\n        background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));\n        color: var(--ui-ink, var(--md-sys-color-on-surface));\n      }\n      .kinds md-icon {\n        --md-icon-size: 16px;\n      }\n      textarea {\n        min-height: 160px;\n        font-family: inherit;\n        box-sizing: border-box;\n        width: 100%;\n      }\n      .hint {\n        font-size: var(--ui-t-small, 12px);\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n        word-break: break-all;\n      }\n      .files {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-small, 4px);\n        align-items: center;\n      }\n      .file {\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n        padding: 0 var(--spacing-small, 4px);\n        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n        border-radius: var(--border-radius, 4px);\n        font-size: var(--ui-t-small, 12px);\n      }\n      .file button {\n        border: 0;\n        background: transparent;\n        box-shadow: none;\n        padding: 0;\n        cursor: pointer;\n        color: inherit;\n      }\n      .file md-icon {\n        --md-icon-size: 14px;\n      }\n      .buttons {\n        display: flex;\n        justify-content: flex-end;\n        gap: var(--spacing-medium, 8px);\n      }\n    `\n  ]\n\n  @property() kind = 'QUESTION'\n  @property() pageUrl = ''\n  @state() title = ''\n  @state() body = ''\n  @state() privately = false\n  @state() files: File[] = []\n  @state() sending = false\n  /* Set only while files go up - the picker shows its bar then. */\n  @state() progress?: number\n\n  render() {\n    const title = this.title.trim()\n    return html`\n      <div class=\"kinds\" role=\"group\" aria-label=${t('inquiry.field.kind')}>\n        ${KINDS.map(\n          code => html`<button aria-pressed=${String(this.kind === code)} @click=${() => (this.kind = code)}><md-icon>${KIND_ICONS[code]}</md-icon>${kindWord(code)}</button>`\n        )}\n      </div>\n      <span class=\"hint\">${t(`inquiry.text.kind-hint-${this.kind.toLowerCase()}`)}</span>\n      <label\n        >${t('inquiry.field.title')}\n        <input .value=${this.title} maxlength=${MAX_TITLE} @input=${(e: any) => (this.title = e.target.value)} />\n        <span class=\"hint\">${t('inquiry.text.title-limit', { count: this.title.length, max: MAX_TITLE })}</span>\n      </label>\n      <label\n        >${t('inquiry.field.body')}\n        <textarea .value=${this.body} placeholder=${t(`inquiry.text.body-placeholder-${this.kind.toLowerCase()}`)} @input=${(e: any) => (this.body = e.target.value)}></textarea>\n      </label>\n      <div class=\"files\">\n        ${this.files.map(\n          (file, index) =>\n            html`<span class=\"file\"\n              ><md-icon>attach_file</md-icon>${file.name}<button aria-label=${t('inquiry.button.remove')} @click=${() => (this.files = this.files.filter((_, i) => i !== index))}>\n                <md-icon>close</md-icon>\n              </button></span\n            >`\n        )}\n        <ox-input-file quiet hide-filelist multiple icon=\"attach_file\" .progress=${this.progress} @change=${(e: CustomEvent) => this.pick(e)}></ox-input-file>\n      </div>\n      <label class=\"check\"><input type=\"checkbox\" .checked=${this.privately} @change=${(e: any) => (this.privately = e.target.checked)} />${t('inquiry.text.private-label')}</label>\n      <span class=\"hint\">${this.privately ? t('inquiry.text.private-hint') : t('inquiry.text.domain-hint')}</span>\n      ${this.pageUrl ? html`<span class=\"hint\">${t('inquiry.text.page-hint', { page: this.pageUrl })}</span>` : nothing}\n      <div class=\"buttons\">\n        <md-text-button @click=${() => this.dispatchEvent(new CustomEvent('done'))}>${t('inquiry.button.cancel')}</md-text-button>\n        <md-filled-button ?disabled=${!title || this.sending} @click=${() => this.send()}>${t('inquiry.button.submit')}</md-filled-button>\n      </div>\n    `\n  }\n\n  private pick(e: CustomEvent) {\n    const picked = [...((e.detail as File[]) ?? [])]\n    /* The picker's own reset says `change` again, with nothing - that one is let go. */\n    if (!picked.length) return\n    ;(e.target as any).reset?.()\n    this.files = [...this.files, ...picked]\n  }\n\n  private async send() {\n    this.sending = true\n    try {\n      await inquiryApi.create(\n        { kind: this.kind, title: this.title.trim(), body: this.body, visibility: this.privately ? 'PRIVATE' : 'DOMAIN', pageUrl: this.pageUrl },\n        this.files,\n        fraction => (this.progress = fraction)\n      )\n      inquiriesChanged()\n      notify({ message: t('inquiry.text.sent') })\n      /* The writer stays on the screen they were on - the answer comes as a notice and on the menu's badge. */\n      this.dispatchEvent(new CustomEvent('done'))\n    } catch (error) {\n      notify({ level: 'error', message: reasonOf(error) })\n    } finally {\n      this.sending = false\n      this.progress = undefined\n    }\n  }\n}\n"]}
+{"version":3,"file":"inquiry-writer.js","sourceRoot":"","sources":["../../client/components/inquiry-writer.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * 문의 · 제안 보내기 (ADR-0184 decisions 1, 4, 5, 9) - the window the avatar menu opens on any screen: the kind, the title,\n * the words, files, and who reads it. The screen it was opened on goes with it; the application, its version, the\n * writer and the domain are the server's to take.\n */\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/input/ox-input-file.js'\nimport '@operato/input/ox-input-select-buttons.js'\nimport '@operato/popup/ox-popup-actions.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'\n\nimport { inquiriesChanged, inquiryApi } from '../utils/inquiry-api.js'\nimport { KINDS, kindWord, reasonOf, t } from '../utils/inquiry-words.js'\n\nconst MAX_TITLE = 200\n\n/** Opens the window, carrying the screen it is opened on. */\nexport function openInquiryWriter(kind = 'QUESTION') {\n  const pageUrl = location.href\n  const handle: any = openPopup(\n    html`<inquiry-writer .kind=${kind} .pageUrl=${pageUrl} @close=${() => handle.close()}></inquiry-writer>`,\n    {\n      backdrop: true,\n      size: 'large',\n      title: t('inquiry.title.write')\n    }\n  )\n  return handle\n}\n\n@customElement('inquiry-writer')\nexport class InquiryWriter extends localize(i18next)(LitElement) {\n  /* The house shape of a popup (page-standard sections 7, 8): only the body scrolls, fields are labels above native\n     inputs, the one button row is `ox-popup-actions`. */\n  static styles = [\n    CommonPopupStyles,\n    PopupBodyStyles,\n    FormFieldStyles,\n    PopupFieldStyles,\n    css`\n      ox-input-select-buttons {\n        align-self: flex-start;\n      }\n      textarea {\n        min-height: 160px;\n        resize: vertical;\n      }\n      .note {\n        color: var(--ui-muted);\n        font-size: var(--ui-t-small, 11.5px);\n        word-break: break-all;\n      }\n      .files {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-small, 4px);\n        align-items: center;\n        color: var(--ui-ink);\n      }\n      .file {\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n      }\n      .file md-icon {\n        --md-icon-size: 14px;\n      }\n      .file button {\n        border: 0;\n        background: transparent;\n        box-shadow: none;\n        padding: 0;\n        cursor: pointer;\n        color: var(--ui-muted);\n      }\n      .check {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n        color: var(--ui-ink);\n      }\n      /* The field rule stretches its inputs to the row; a checkbox keeps its own size. */\n      .field .check input {\n        width: auto;\n        margin: 0;\n      }\n    `\n  ]\n\n  @property() kind = 'QUESTION'\n  @property() pageUrl = ''\n  @state() title = ''\n  @state() body = ''\n  @state() privately = false\n  @state() files: File[] = []\n  @state() sending = false\n  /* Set only while files go up - the picker shows its bar then. */\n  @state() progress?: number\n\n  render() {\n    const title = this.title.trim()\n    return html`\n      <div class=\"body\">\n        <div class=\"field\">\n          <ox-input-select-buttons\n            .value=${this.kind}\n            .options=${KINDS.map(code => ({ display: kindWord(code), value: code }))}\n            @change=${(e: CustomEvent) => e.detail && (this.kind = e.detail)}\n          ></ox-input-select-buttons>\n          <span>${t(`inquiry.text.kind-hint-${this.kind.toLowerCase()}`)}</span>\n        </div>\n        <label class=\"field\">\n          <span\n            >${t('inquiry.field.title')} ·\n            ${t('inquiry.text.title-limit', { count: this.title.length, max: MAX_TITLE })}</span\n          >\n          <input .value=${this.title} maxlength=${MAX_TITLE} @input=${(e: any) => (this.title = e.target.value)} />\n        </label>\n        <label class=\"field\">\n          <span>${t('inquiry.field.body')}</span>\n          <textarea\n            .value=${this.body}\n            placeholder=${t(`inquiry.text.body-placeholder-${this.kind.toLowerCase()}`)}\n            @input=${(e: any) => (this.body = e.target.value)}\n          ></textarea>\n        </label>\n        <div class=\"files\">\n          ${this.files.map(\n            (file, index) =>\n              html`<span class=\"file\"\n                ><md-icon>attach_file</md-icon>${file.name}<button\n                  aria-label=${t('inquiry.button.remove')}\n                  @click=${() => (this.files = this.files.filter((_, i) => i !== index))}\n                >\n                  <md-icon>close</md-icon>\n                </button></span\n              >`\n          )}\n          <ox-input-file\n            quiet\n            hide-filelist\n            multiple\n            icon=\"attach_file\"\n            .progress=${this.progress}\n            @change=${(e: CustomEvent) => this.pick(e)}\n          ></ox-input-file>\n        </div>\n        <div class=\"field\">\n          <label class=\"check\"\n            ><input\n              type=\"checkbox\"\n              .checked=${this.privately}\n              @change=${(e: any) => (this.privately = e.target.checked)}\n            />${t('inquiry.text.private-label')}</label\n          >\n          <span>${this.privately ? t('inquiry.text.private-hint') : t('inquiry.text.domain-hint')}</span>\n        </div>\n        ${this.pageUrl ? html`<div class=\"note\">${t('inquiry.text.page-hint', { page: this.pageUrl })}</div>` : nothing}\n      </div>\n      <ox-popup-actions>\n        <md-text-button slot=\"cancel\" @click=${() => this.dispatchEvent(new CustomEvent('close'))}\n          >${t('inquiry.button.cancel')}</md-text-button\n        >\n        <md-filled-button slot=\"confirm\" ?disabled=${!title || this.sending} @click=${() => this.send()}\n          >${t('inquiry.button.submit')}</md-filled-button\n        >\n      </ox-popup-actions>\n    `\n  }\n\n  private pick(e: CustomEvent) {\n    const picked = [...((e.detail as File[]) ?? [])]\n    /* The picker's own reset says `change` again, with nothing - that one is let go. */\n    if (!picked.length) return\n    ;(e.target as any).reset?.()\n    this.files = [...this.files, ...picked]\n  }\n\n  private async send() {\n    this.sending = true\n    try {\n      await inquiryApi.create(\n        {\n          kind: this.kind,\n          title: this.title.trim(),\n          body: this.body,\n          visibility: this.privately ? 'PRIVATE' : 'DOMAIN',\n          pageUrl: this.pageUrl\n        },\n        this.files,\n        fraction => (this.progress = fraction)\n      )\n      inquiriesChanged()\n      notify({ message: t('inquiry.text.sent') })\n      /* The writer stays on the screen they were on - the answer comes as a notice and on the menu's badge. */\n      this.dispatchEvent(new CustomEvent('close'))\n    } catch (error) {\n      notify({ level: 'error', message: reasonOf(error) })\n    } finally {\n      this.sending = false\n      this.progress = undefined\n    }\n  }\n}\n"]}