@things-factory/invoice 10.1.226 → 10.1.227

package/dist-client/document/document-lines.js

@@ -1,8 +1,16 @@
 import { i18next } from '@operato/i18n';
-import { documentAmount } from './document-amount';
+import { defaultTaxRate, documentAmounts } from '@things-factory/invoice/dist-shared/document-amounts.js';
+import { documentAmount, documentNumber } from './document-amount';
 /** The grid of a document's lines — typed or pasted like a spreadsheet while the document is a draft. */
 export function documentLinesConfig({ editable, received, currency }) {
-    const number = (name, header, width = 110) => ({ type: 'float', name, header, width, record: { editable, align: 'right' } });
+    /* Prices and discounts read with thousands marks; the widths keep the supply in view at about 900px, the unit's column too. */
+    const number = (name, header, width = 100) => ({
+        type: 'float',
+        name,
+        header,
+        width,
+        record: { editable, align: 'right', renderer: (value) => documentNumber(value, currency) }
+    });
     return {
         rows: { appendable: editable, selectable: { multiple: true }, accumulator: true },
         pagination: { infinite: true },
@@ -10,15 +18,16 @@ export function documentLinesConfig({ editable, received, currency }) {
         columns: [
             { type: 'gutter', gutterName: 'sequence' },
             ...(editable ? [{ type: 'gutter', gutterName: 'row-selector', multiple: true }] : []),
-            { type: 'string', name: 'description', header: i18next.t('field.invoice-line-description'), width: 280, record: { editable } },
-            number('quantity', i18next.t('field.invoice-quantity'), 90),
-            number('unitPrice', i18next.t('field.invoice-unit-price'), 120),
-            number('discount', i18next.t('field.invoice-discount')),
+            { type: 'string', name: 'description', header: i18next.t('field.invoice-line-description'), width: 220, record: { editable } },
+            number('quantity', i18next.t('field.invoice-quantity'), 60),
+            { type: 'string', name: 'unit', header: i18next.t('field.invoice-unit'), width: 60, record: { editable, align: 'center' } },
+            number('unitPrice', i18next.t('field.invoice-unit-price'), 110),
+            number('discount', i18next.t('field.invoice-discount'), 80),
             {
                 type: 'select',
                 name: 'taxKind',
                 header: i18next.t('field.invoice-tax-kind'),
-                width: 100,
+                width: 70,
                 record: {
                     editable,
                     options: [
@@ -28,13 +37,13 @@ export function documentLinesConfig({ editable, received, currency }) {
                     ]
                 }
             },
-            number('taxRate', i18next.t('field.invoice-tax-rate-percent'), 90),
+            number('taxRate', i18next.t('field.invoice-tax-rate-percent'), 56),
             ...(received ? [number('receivedTaxAmount', i18next.t('field.invoice-received-tax-amount'), 120)] : []),
             {
                 type: 'float',
                 name: 'supplyAmount',
                 header: i18next.t('field.invoice-supply-amount'),
-                width: 140,
+                width: 130,
                 record: { editable: false, align: 'right', renderer: (value) => documentAmount(value, currency) },
                 accumulator: 'sum'
             }
@@ -49,6 +58,7 @@ export function linesOf(grist) {
         .map(record => ({
         description: String(record.description).trim(),
         quantity: Number(record.quantity ?? 1),
+        unit: String(record.unit ?? '').trim() || null,
         unitPrice: Number(record.unitPrice ?? 0),
         discount: Number(record.discount ?? 0),
         taxKind: record.taxKind || 'TAXABLE',
@@ -58,4 +68,43 @@ export function linesOf(grist) {
             : { receivedTaxAmount: Number(record.receivedTaxAmount) })
     }));
 }
+const blank = (value) => value === undefined || value === null || value === '';
+/**
+ * What a line typed into is missing, filled - a quantity of one, no discount, taxable at the standard rate - and its
+ * rate following its tax kind when the kind is what changed (taxable 10 %, zero-rated and exempt none). A select shows
+ * its first option for an empty value, so 「과세」 looked chosen and choosing it changed nothing; the line now holds it.
+ */
+export function settleLine(record, changed) {
+    if (!record || record.__dirty__ === '-')
+        return;
+    if (blank(record.quantity))
+        record.quantity = 1;
+    if (blank(record.discount))
+        record.discount = 0;
+    if (!record.taxKind)
+        record.taxKind = 'TAXABLE';
+    if (changed === 'taxKind' || blank(record.taxRate))
+        record.taxRate = defaultTaxRate(record.taxKind);
+}
+/**
+ * The lines on the grid reckoned as the document will keep them (shared/document-amounts.ts): each row's supply is
+ * written onto it for the grid to show, and the document's tax groups and totals - after `discountAmount`, the
+ * discount of the whole document - are returned for the totals table.
+ */
+export function reckonLines(grist, currency, received = false, discountAmount = 0) {
+    const records = (grist?.dirtyData?.records ?? []).filter(record => record.__dirty__ !== '-' && String(record.description ?? '').trim());
+    const amounts = documentAmounts(records, currency || 'KRW', received, discountAmount);
+    records.forEach((record, index) => (record.supplyAmount = amounts.lines[index].supplyAmount ?? null));
+    return amounts;
+}
+/**
+ * A change on the grid as an editor takes it: the changed line settled, every line reckoned, the grid redrawn with
+ * the supplies. Returns the totals to show.
+ */
+export function onLineChange(grist, event, currency, received = false, discountAmount = 0) {
+    settleLine(event.detail?.after, event.detail?.column?.name);
+    const amounts = reckonLines(grist, currency, received, discountAmount);
+    grist?.refresh();
+    return amounts;
+}
 //# sourceMappingURL=document-lines.js.map

package/dist-client/document/document-lines.js.map

@@ -1 +1 @@
-{"version":3,"file":"document-lines.js","sourceRoot":"","sources":["../../client/document/document-lines.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGrist } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\n\nimport { documentAmount } from './document-amount'\n\n/** The grid of a document's lines — typed or pasted like a spreadsheet while the document is a draft. */\nexport function documentLinesConfig({ editable, received, currency }: { editable: boolean; received?: boolean; currency: string }) {\n  const number = (name: string, header: string, width = 110) => ({ type: 'float', name, header, width, record: { editable, align: 'right' } })\n  return {\n    rows: { appendable: editable, selectable: { multiple: true }, accumulator: true },\n    pagination: { infinite: true },\n    emptyNote: { title: i18next.t('text.invoice-lines-empty') },\n    columns: [\n      { type: 'gutter', gutterName: 'sequence' },\n      ...(editable ? [{ type: 'gutter', gutterName: 'row-selector', multiple: true }] : []),\n      { type: 'string', name: 'description', header: i18next.t('field.invoice-line-description'), width: 280, record: { editable } },\n      number('quantity', i18next.t('field.invoice-quantity'), 90),\n      number('unitPrice', i18next.t('field.invoice-unit-price'), 120),\n      number('discount', i18next.t('field.invoice-discount')),\n      {\n        type: 'select',\n        name: 'taxKind',\n        header: i18next.t('field.invoice-tax-kind'),\n        width: 100,\n        record: {\n          editable,\n          options: [\n            { value: 'TAXABLE', display: i18next.t('text.invoice-tax-kind-taxable') },\n            { value: 'ZERO_RATED', display: i18next.t('text.invoice-tax-kind-zero-rated') },\n            { value: 'EXEMPT', display: i18next.t('text.invoice-tax-kind-exempt') }\n          ]\n        }\n      },\n      number('taxRate', i18next.t('field.invoice-tax-rate-percent'), 90),\n      ...(received ? [number('receivedTaxAmount', i18next.t('field.invoice-received-tax-amount'), 120)] : []),\n      {\n        type: 'float',\n        name: 'supplyAmount',\n        header: i18next.t('field.invoice-supply-amount'),\n        width: 140,\n        record: { editable: false, align: 'right', renderer: (value: number) => documentAmount(value, currency) },\n        accumulator: 'sum'\n      }\n    ]\n  }\n}\n\n/** The lines on the grid, as the save mutation takes them; blank rows are left out. */\nexport function linesOf(grist: DataGrist | null | undefined) {\n  const records = (grist?.dirtyData?.records ?? []) as any[]\n  return records\n    .filter(record => record.__dirty__ !== '-' && String(record.description ?? '').trim())\n    .map(record => ({\n      description: String(record.description).trim(),\n      quantity: Number(record.quantity ?? 1),\n      unitPrice: Number(record.unitPrice ?? 0),\n      discount: Number(record.discount ?? 0),\n      taxKind: record.taxKind || 'TAXABLE',\n      taxRate: Number(record.taxRate ?? 0),\n      ...(record.receivedTaxAmount === undefined || record.receivedTaxAmount === null || record.receivedTaxAmount === ''\n        ? {}\n        : { receivedTaxAmount: Number(record.receivedTaxAmount) })\n    }))\n}\n"]}
+{"version":3,"file":"document-lines.js","sourceRoot":"","sources":["../../client/document/document-lines.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGrist } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\n\nimport { defaultTaxRate, documentAmounts, type DocumentAmounts } from '@things-factory/invoice/dist-shared/document-amounts.js'\n\nimport { documentAmount, documentNumber } from './document-amount'\n\n/** The grid of a document's lines — typed or pasted like a spreadsheet while the document is a draft. */\nexport function documentLinesConfig({ editable, received, currency }: { editable: boolean; received?: boolean; currency: string }) {\n  /* Prices and discounts read with thousands marks; the widths keep the supply in view at about 900px, the unit's column too. */\n  const number = (name: string, header: string, width = 100) => ({\n    type: 'float',\n    name,\n    header,\n    width,\n    record: { editable, align: 'right', renderer: (value: number) => documentNumber(value, currency) }\n  })\n  return {\n    rows: { appendable: editable, selectable: { multiple: true }, accumulator: true },\n    pagination: { infinite: true },\n    emptyNote: { title: i18next.t('text.invoice-lines-empty') },\n    columns: [\n      { type: 'gutter', gutterName: 'sequence' },\n      ...(editable ? [{ type: 'gutter', gutterName: 'row-selector', multiple: true }] : []),\n      { type: 'string', name: 'description', header: i18next.t('field.invoice-line-description'), width: 220, record: { editable } },\n      number('quantity', i18next.t('field.invoice-quantity'), 60),\n      { type: 'string', name: 'unit', header: i18next.t('field.invoice-unit'), width: 60, record: { editable, align: 'center' } },\n      number('unitPrice', i18next.t('field.invoice-unit-price'), 110),\n      number('discount', i18next.t('field.invoice-discount'), 80),\n      {\n        type: 'select',\n        name: 'taxKind',\n        header: i18next.t('field.invoice-tax-kind'),\n        width: 70,\n        record: {\n          editable,\n          options: [\n            { value: 'TAXABLE', display: i18next.t('text.invoice-tax-kind-taxable') },\n            { value: 'ZERO_RATED', display: i18next.t('text.invoice-tax-kind-zero-rated') },\n            { value: 'EXEMPT', display: i18next.t('text.invoice-tax-kind-exempt') }\n          ]\n        }\n      },\n      number('taxRate', i18next.t('field.invoice-tax-rate-percent'), 56),\n      ...(received ? [number('receivedTaxAmount', i18next.t('field.invoice-received-tax-amount'), 120)] : []),\n      {\n        type: 'float',\n        name: 'supplyAmount',\n        header: i18next.t('field.invoice-supply-amount'),\n        width: 130,\n        record: { editable: false, align: 'right', renderer: (value: number) => documentAmount(value, currency) },\n        accumulator: 'sum'\n      }\n    ]\n  }\n}\n\n/** The lines on the grid, as the save mutation takes them; blank rows are left out. */\nexport function linesOf(grist: DataGrist | null | undefined) {\n  const records = (grist?.dirtyData?.records ?? []) as any[]\n  return records\n    .filter(record => record.__dirty__ !== '-' && String(record.description ?? '').trim())\n    .map(record => ({\n      description: String(record.description).trim(),\n      quantity: Number(record.quantity ?? 1),\n      unit: String(record.unit ?? '').trim() || null,\n      unitPrice: Number(record.unitPrice ?? 0),\n      discount: Number(record.discount ?? 0),\n      taxKind: record.taxKind || 'TAXABLE',\n      taxRate: Number(record.taxRate ?? 0),\n      ...(record.receivedTaxAmount === undefined || record.receivedTaxAmount === null || record.receivedTaxAmount === ''\n        ? {}\n        : { receivedTaxAmount: Number(record.receivedTaxAmount) })\n    }))\n}\n\nconst blank = (value: unknown) => value === undefined || value === null || value === ''\n\n/**\n * What a line typed into is missing, filled - a quantity of one, no discount, taxable at the standard rate - and its\n * rate following its tax kind when the kind is what changed (taxable 10 %, zero-rated and exempt none). A select shows\n * its first option for an empty value, so 「과세」 looked chosen and choosing it changed nothing; the line now holds it.\n */\nexport function settleLine(record: any, changed?: string) {\n  if (!record || record.__dirty__ === '-') return\n  if (blank(record.quantity)) record.quantity = 1\n  if (blank(record.discount)) record.discount = 0\n  if (!record.taxKind) record.taxKind = 'TAXABLE'\n  if (changed === 'taxKind' || blank(record.taxRate)) record.taxRate = defaultTaxRate(record.taxKind)\n}\n\n/**\n * The lines on the grid reckoned as the document will keep them (shared/document-amounts.ts): each row's supply is\n * written onto it for the grid to show, and the document's tax groups and totals - after `discountAmount`, the\n * discount of the whole document - are returned for the totals table.\n */\nexport function reckonLines(grist: DataGrist | null | undefined, currency: string, received = false, discountAmount: unknown = 0): DocumentAmounts {\n  const records = ((grist?.dirtyData?.records ?? []) as any[]).filter(record => record.__dirty__ !== '-' && String(record.description ?? '').trim())\n  const amounts = documentAmounts(records, currency || 'KRW', received, discountAmount)\n  records.forEach((record, index) => (record.supplyAmount = amounts.lines[index].supplyAmount ?? null))\n  return amounts\n}\n\n/**\n * A change on the grid as an editor takes it: the changed line settled, every line reckoned, the grid redrawn with\n * the supplies. Returns the totals to show.\n */\nexport function onLineChange(grist: DataGrist | null | undefined, event: CustomEvent, currency: string, received = false, discountAmount: unknown = 0): DocumentAmounts {\n  settleLine(event.detail?.after, event.detail?.column?.name)\n  const amounts = reckonLines(grist, currency, received, discountAmount)\n  grist?.refresh()\n  return amounts\n}\n"]}

package/dist-client/document/document-party.d.ts

@@ -0,0 +1,37 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+/** A counterparty as a document's party - which one, its name and registration number (`counterpartyChoices`). */
+export type DocumentParty = {
+    id: string;
+    name: string;
+    businessNumber?: string | null;
+};
+/**
+ * The counterparty a party's name is - the one choice of that name, case and spaces aside (ADR-0170 decision 11); null
+ * when none or more than one is, or the choices cannot be read. Searched by the name's longest word, so 「(주) 하티오랩」
+ * finds 「(주)하티오랩」.
+ */
+export declare function partyOfName(name: unknown): Promise<DocumentParty | null>;
+declare const DocumentPartySelect_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * Picking a counterparty for a document - one field that finds as it is typed and lists what it found under it; a
+ * click takes one and fires `party` with it (or with null when cleared). Every editor of a commercial document picks
+ * its party here - invoice and quotation (ADR-0120 decision 1). Reads `counterpartyChoices`, which every seat may.
+ */
+export declare class DocumentPartySelect extends DocumentPartySelect_base {
+    static styles: import("lit").CSSResult[];
+    /** The party chosen, shown as the field's placeholder until something is typed. */
+    party: DocumentParty | null;
+    disabled: boolean;
+    private search;
+    private found;
+    private active;
+    private timer?;
+    private asked;
+    render(): import("lit-html").TemplateResult<1>;
+    private findSoon;
+    private find;
+    private key;
+    private choose;
+}
+export {};

package/dist-client/document/document-party.js

@@ -0,0 +1,217 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { ButtonStyles } from '@operato/styles';
+import { partyNamed } from '@things-factory/invoice/dist-shared/document-start.js';
+const CHOICES = gql `
+  query ($search: String, $pagination: Pagination) {
+    counterparties: counterpartyChoices(search: $search, pagination: $pagination) {
+      items { id name businessNumber }
+    }
+  }
+`;
+/**
+ * The counterparty a party's name is - the one choice of that name, case and spaces aside (ADR-0170 decision 11); null
+ * when none or more than one is, or the choices cannot be read. Searched by the name's longest word, so 「(주) 하티오랩」
+ * finds 「(주)하티오랩」.
+ */
+export async function partyOfName(name) {
+    const word = String(name ?? '')
+        .split(/\s+/)
+        .reduce((longest, one) => (one.length > longest.length ? one : longest), '');
+    if (!word)
+        return null;
+    try {
+        const response = await client.query({ query: CHOICES, variables: { search: word, pagination: { page: 1, limit: 100 } }, fetchPolicy: 'no-cache' });
+        return partyNamed(name, (response.data?.counterparties?.items ?? [])) ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Picking a counterparty for a document - one field that finds as it is typed and lists what it found under it; a
+ * click takes one and fires `party` with it (or with null when cleared). Every editor of a commercial document picks
+ * its party here - invoice and quotation (ADR-0120 decision 1). Reads `counterpartyChoices`, which every seat may.
+ */
+let DocumentPartySelect = class DocumentPartySelect extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The party chosen, shown as the field's placeholder until something is typed. */
+        this.party = null;
+        this.disabled = false;
+        this.search = '';
+        this.found = null;
+        this.active = 0;
+        this.asked = 0;
+    }
+    static { this.styles = [
+        ButtonStyles,
+        css `
+      :host {
+        position: relative;
+        display: block;
+      }
+      .field {
+        display: flex;
+        gap: var(--spacing-small, 4px);
+        align-items: center;
+      }
+      input {
+        flex: 1;
+        min-width: 0;
+        box-sizing: border-box;
+        height: var(--form-element-height-medium, 32px);
+        padding: 0 var(--spacing-medium, 8px);
+        border: var(--input-field-border, 1px solid var(--md-sys-color-outline));
+        border-radius: var(--input-field-border-radius, var(--md-sys-shape-corner-small, 4px));
+        background: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+        font: inherit;
+        font-size: var(--ui-t-body, 13px);
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+      }
+      input:focus-visible {
+        outline: none;
+        border-color: var(--md-sys-color-primary);
+      }
+      ul {
+        position: absolute;
+        z-index: 10;
+        left: 0;
+        right: 0;
+        top: calc(100% + 2px);
+        max-height: 260px;
+        overflow-y: auto;
+        margin: 0;
+        padding: var(--spacing-small, 4px) 0;
+        list-style: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--ui-r, 10px);
+        background: var(--md-sys-color-surface-container-lowest);
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+      }
+      li {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--spacing-large, 12px);
+        padding: 6px var(--spacing-large, 12px);
+        cursor: pointer;
+        font-size: var(--ui-t-body, 13px);
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+      }
+      li:hover,
+      li[active] {
+        background: var(--md-sys-color-surface-container-high);
+      }
+      li small {
+        white-space: nowrap;
+      }
+      li small,
+      li.none {
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      li.none {
+        cursor: default;
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <div class="field">
+        <input
+          .value=${this.search}
+          placeholder=${this.party?.name ?? i18next.t('text.invoice-counterparty-search')}
+          aria-label=${i18next.t('field.invoice-counterparty')}
+          ?disabled=${this.disabled}
+          @focus=${() => this.find()}
+          @input=${(e) => ((this.search = e.target.value), this.findSoon())}
+          @keydown=${(e) => this.key(e)}
+          @blur=${() => setTimeout(() => (this.found = null), 150)}
+        />
+        ${this.party && !this.disabled
+            ? html `<button quiet icon-only title=${i18next.t('button.invoice-counterparty-clear')} aria-label=${i18next.t('button.invoice-counterparty-clear')} @click=${() => this.choose(null)}>
+              <md-icon>close</md-icon>
+            </button>`
+            : nothing}
+      </div>
+      ${this.found
+            ? html `<ul role="listbox">
+            ${this.found.length
+                ? this.found.map((one, index) => html `<li role="option" ?active=${index === this.active} @mousedown=${(e) => (e.preventDefault(), this.choose(one))}>
+                      <span>${one.name}</span>${one.businessNumber ? html `<small>${one.businessNumber}</small>` : nothing}
+                    </li>`)
+                : html `<li class="none">${i18next.t('text.invoice-counterparty-none')}</li>`}
+          </ul>`
+            : nothing}
+    `;
+    }
+    findSoon() {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => this.find(), 250);
+    }
+    async find() {
+        if (this.disabled)
+            return;
+        const asked = ++this.asked;
+        try {
+            const response = await client.query({ query: CHOICES, variables: { search: this.search.trim() || undefined, pagination: { page: 1, limit: 30 } }, fetchPolicy: 'no-cache' });
+            /* Only the answer to the last thing typed is shown. */
+            if (asked !== this.asked)
+                return;
+            this.found = response.data?.counterparties?.items ?? [];
+            this.active = 0;
+        }
+        catch {
+            this.found = null;
+        }
+    }
+    key(e) {
+        if (!this.found?.length || e.isComposing)
+            return;
+        if (e.key === 'ArrowDown')
+            this.active = Math.min(this.active + 1, this.found.length - 1);
+        else if (e.key === 'ArrowUp')
+            this.active = Math.max(this.active - 1, 0);
+        else if (e.key === 'Enter')
+            this.choose(this.found[this.active]);
+        else if (e.key === 'Escape')
+            this.found = null;
+        else
+            return;
+        e.preventDefault();
+    }
+    choose(party) {
+        this.search = '';
+        this.found = null;
+        this.dispatchEvent(new CustomEvent('party', { detail: party, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DocumentPartySelect.prototype, "party", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], DocumentPartySelect.prototype, "disabled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DocumentPartySelect.prototype, "search", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], DocumentPartySelect.prototype, "found", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DocumentPartySelect.prototype, "active", void 0);
+DocumentPartySelect = __decorate([
+    customElement('document-party-select')
+], DocumentPartySelect);
+export { DocumentPartySelect };
+//# sourceMappingURL=document-party.js.map

package/dist-client/document/document-party.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-party.js","sourceRoot":"","sources":["../../client/document/document-party.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ButtonStyles } from '@operato/styles'\nimport { partyNamed } from '@things-factory/invoice/dist-shared/document-start.js'\n\n/** A counterparty as a document's party - which one, its name and registration number (`counterpartyChoices`). */\nexport type DocumentParty = { id: string; name: string; businessNumber?: string | null }\n\nconst CHOICES = gql`\n  query ($search: String, $pagination: Pagination) {\n    counterparties: counterpartyChoices(search: $search, pagination: $pagination) {\n      items { id name businessNumber }\n    }\n  }\n`\n\n/**\n * The counterparty a party's name is - the one choice of that name, case and spaces aside (ADR-0170 decision 11); null\n * when none or more than one is, or the choices cannot be read. Searched by the name's longest word, so 「(주) 하티오랩」\n * finds 「(주)하티오랩」.\n */\nexport async function partyOfName(name: unknown): Promise<DocumentParty | null> {\n  const word = String(name ?? '')\n    .split(/\\s+/)\n    .reduce((longest, one) => (one.length > longest.length ? one : longest), '')\n  if (!word) return null\n  try {\n    const response = await client.query({ query: CHOICES, variables: { search: word, pagination: { page: 1, limit: 100 } }, fetchPolicy: 'no-cache' })\n    return partyNamed(name, (response.data?.counterparties?.items ?? []) as DocumentParty[]) ?? null\n  } catch {\n    return null\n  }\n}\n\n/**\n * Picking a counterparty for a document - one field that finds as it is typed and lists what it found under it; a\n * click takes one and fires `party` with it (or with null when cleared). Every editor of a commercial document picks\n * its party here - invoice and quotation (ADR-0120 decision 1). Reads `counterpartyChoices`, which every seat may.\n */\n@customElement('document-party-select')\nexport class DocumentPartySelect extends localize(i18next)(LitElement) {\n  static styles = [\n    ButtonStyles,\n    css`\n      :host {\n        position: relative;\n        display: block;\n      }\n      .field {\n        display: flex;\n        gap: var(--spacing-small, 4px);\n        align-items: center;\n      }\n      input {\n        flex: 1;\n        min-width: 0;\n        box-sizing: border-box;\n        height: var(--form-element-height-medium, 32px);\n        padding: 0 var(--spacing-medium, 8px);\n        border: var(--input-field-border, 1px solid var(--md-sys-color-outline));\n        border-radius: var(--input-field-border-radius, var(--md-sys-shape-corner-small, 4px));\n        background: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n        font: inherit;\n        font-size: var(--ui-t-body, 13px);\n        color: var(--ui-ink, var(--md-sys-color-on-surface));\n      }\n      input:focus-visible {\n        outline: none;\n        border-color: var(--md-sys-color-primary);\n      }\n      ul {\n        position: absolute;\n        z-index: 10;\n        left: 0;\n        right: 0;\n        top: calc(100% + 2px);\n        max-height: 260px;\n        overflow-y: auto;\n        margin: 0;\n        padding: var(--spacing-small, 4px) 0;\n        list-style: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: var(--ui-r, 10px);\n        background: var(--md-sys-color-surface-container-lowest);\n        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);\n      }\n      li {\n        display: flex;\n        justify-content: space-between;\n        gap: var(--spacing-large, 12px);\n        padding: 6px var(--spacing-large, 12px);\n        cursor: pointer;\n        font-size: var(--ui-t-body, 13px);\n        color: var(--ui-ink, var(--md-sys-color-on-surface));\n      }\n      li:hover,\n      li[active] {\n        background: var(--md-sys-color-surface-container-high);\n      }\n      li small {\n        white-space: nowrap;\n      }\n      li small,\n      li.none {\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      }\n      li.none {\n        cursor: default;\n      }\n    `\n  ]\n\n  /** The party chosen, shown as the field's placeholder until something is typed. */\n  @property({ attribute: false }) party: DocumentParty | null = null\n  @property({ type: Boolean }) disabled = false\n\n  @state() private search = ''\n  @state() private found: DocumentParty[] | null = null\n  @state() private active = 0\n\n  private timer?: ReturnType<typeof setTimeout>\n  private asked = 0\n\n  render() {\n    return html`\n      <div class=\"field\">\n        <input\n          .value=${this.search}\n          placeholder=${this.party?.name ?? i18next.t('text.invoice-counterparty-search')}\n          aria-label=${i18next.t('field.invoice-counterparty')}\n          ?disabled=${this.disabled}\n          @focus=${() => this.find()}\n          @input=${(e: any) => ((this.search = e.target.value), this.findSoon())}\n          @keydown=${(e: KeyboardEvent) => this.key(e)}\n          @blur=${() => setTimeout(() => (this.found = null), 150)}\n        />\n        ${this.party && !this.disabled\n          ? html`<button quiet icon-only title=${i18next.t('button.invoice-counterparty-clear')} aria-label=${i18next.t('button.invoice-counterparty-clear')} @click=${() => this.choose(null)}>\n              <md-icon>close</md-icon>\n            </button>`\n          : nothing}\n      </div>\n      ${this.found\n        ? html`<ul role=\"listbox\">\n            ${this.found.length\n              ? this.found.map(\n                  (one, index) =>\n                    html`<li role=\"option\" ?active=${index === this.active} @mousedown=${(e: Event) => (e.preventDefault(), this.choose(one))}>\n                      <span>${one.name}</span>${one.businessNumber ? html`<small>${one.businessNumber}</small>` : nothing}\n                    </li>`\n                )\n              : html`<li class=\"none\">${i18next.t('text.invoice-counterparty-none')}</li>`}\n          </ul>`\n        : nothing}\n    `\n  }\n\n  private findSoon() {\n    clearTimeout(this.timer)\n    this.timer = setTimeout(() => this.find(), 250)\n  }\n\n  private async find() {\n    if (this.disabled) return\n    const asked = ++this.asked\n    try {\n      const response = await client.query({ query: CHOICES, variables: { search: this.search.trim() || undefined, pagination: { page: 1, limit: 30 } }, fetchPolicy: 'no-cache' })\n      /* Only the answer to the last thing typed is shown. */\n      if (asked !== this.asked) return\n      this.found = response.data?.counterparties?.items ?? []\n      this.active = 0\n    } catch {\n      this.found = null\n    }\n  }\n\n  private key(e: KeyboardEvent) {\n    if (!this.found?.length || e.isComposing) return\n    if (e.key === 'ArrowDown') this.active = Math.min(this.active + 1, this.found.length - 1)\n    else if (e.key === 'ArrowUp') this.active = Math.max(this.active - 1, 0)\n    else if (e.key === 'Enter') this.choose(this.found[this.active])\n    else if (e.key === 'Escape') this.found = null\n    else return\n    e.preventDefault()\n  }\n\n  private choose(party: DocumentParty | null) {\n    this.search = ''\n    this.found = null\n    this.dispatchEvent(new CustomEvent('party', { detail: party, bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/document/document-preview.d.ts

@@ -0,0 +1,37 @@
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-select.js';
+import '@operato/popup/ox-popup-list.js';
+import { LitElement } from 'lit';
+import { type PrintLanguage } from './document-print';
+/** The two forms the server makes a document in (`DocumentFileFormat`): the page to preview and print, and the PDF. */
+export type DocumentFileFormat = 'HTML' | 'PDF';
+/** A file the server made - its name, media type and bytes in base64 (`DocumentFile`). */
+export type DocumentFile = {
+    fileName: string;
+    mimeType: string;
+    content: string;
+};
+/** How a kind's editor asks the server for its document in a form and a language - the invoice's door, the quotation's. */
+export type DocumentFileLoader = (format: DocumentFileFormat, language: PrintLanguage) => Promise<DocumentFile>;
+declare const DocumentPreview_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * A saved invoice or quotation as it goes out, before it does (ADR-0170 decision 10): the server's page of A4 in a
+ * frame, the language of the print to change - the document's own first - and the PDF to download or the same page to
+ * print, in that language. Every commercial document's editor opens it with its own loader.
+ */
+export declare class DocumentPreview extends DocumentPreview_base {
+    static styles: import("lit").CSSResult[];
+    loader: DocumentFileLoader;
+    language: PrintLanguage;
+    private page;
+    private busy;
+    firstUpdated(): void;
+    private show;
+    private download;
+    /** As tall as its page - read from its document, which is ours (same origin, no script). */
+    private fit;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/** Open the preview of a saved document, in its own language when the print has words for it. */
+export declare function openDocumentPreview(loader: DocumentFileLoader, language: string | null | undefined, title: string): import("@operato/layout").PopupHandle<unknown>;
+export {};

package/dist-client/document/document-preview.js

@@ -0,0 +1,181 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-select.js';
+import '@operato/popup/ox-popup-list.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, ScrollbarStyles } from '@operato/styles';
+import { PRINT_LANGUAGES, printDocument } from './document-print';
+const bytesOf = (content) => Uint8Array.from(atob(content), char => char.charCodeAt(0));
+/** Hand a file the server made to the browser to save. */
+function saveDocumentFile({ fileName, mimeType, content }) {
+    const url = URL.createObjectURL(new Blob([bytesOf(content)], { type: mimeType }));
+    const link = Object.assign(document.createElement('a'), { href: url, download: fileName });
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+/**
+ * A saved invoice or quotation as it goes out, before it does (ADR-0170 decision 10): the server's page of A4 in a
+ * frame, the language of the print to change - the document's own first - and the PDF to download or the same page to
+ * print, in that language. Every commercial document's editor opens it with its own loader.
+ */
+let DocumentPreview = class DocumentPreview extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.language = PRINT_LANGUAGES[0];
+        this.page = '';
+        this.busy = false;
+    }
+    static { this.styles = [
+        ButtonStyles,
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        background: var(--ui-bg, var(--md-sys-color-surface));
+      }
+      .bar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-bottom: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .bar .spacer {
+        flex: 1;
+      }
+      ox-select {
+        min-width: 120px;
+      }
+      /* The frame grows to its page and this box scrolls it - with the house scrollbar, not the frame's own. */
+      .frame {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+        background: #e9edf1;
+      }
+      iframe {
+        display: block;
+        width: 100%;
+        border: 0;
+        overflow: hidden;
+      }
+      .loading {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        background: rgba(233, 237, 241, 0.6);
+        font-size: var(--ui-t-body, 13px);
+      }
+    `
+    ]; }
+    firstUpdated() {
+        this.show();
+    }
+    async show() {
+        this.busy = true;
+        try {
+            this.page = new TextDecoder().decode(bytesOf((await this.loader('HTML', this.language)).content));
+        }
+        catch (error) {
+            notify({ level: 'error', message: error?.graphQLErrors?.[0]?.message ?? error?.message ?? String(error) });
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    async download() {
+        this.busy = true;
+        try {
+            saveDocumentFile(await this.loader('PDF', this.language));
+        }
+        catch (error) {
+            notify({ level: 'error', message: error?.graphQLErrors?.[0]?.message ?? error?.message ?? String(error) });
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    /** As tall as its page - read from its document, which is ours (same origin, no script). */
+    fit(frame) {
+        const height = frame.contentDocument?.documentElement?.scrollHeight;
+        if (height)
+            frame.style.height = `${height}px`;
+    }
+    render() {
+        const word = (language) => (language === 'en' ? i18next.t('text.invoice-language-en') : i18next.t('text.invoice-language-ko'));
+        return html `
+      <div class="bar">
+        <span>${i18next.t('title.invoice-print-language')}</span>
+        <ox-select
+          .value=${this.language}
+          aria-label=${i18next.t('title.invoice-print-language')}
+          @change=${(e) => {
+            const next = PRINT_LANGUAGES.find(one => one === e.detail);
+            if (!next || next === this.language)
+                return;
+            this.language = next;
+            this.show();
+        }}
+        >
+          <span slot="label">${word(this.language)}</span>
+          <ox-popup-list align-left nowrap>${PRINT_LANGUAGES.map(one => html `<div option value=${one}>${word(one)}</div>`)}</ox-popup-list>
+        </ox-select>
+        <span class="spacer"></span>
+        <button ?disabled=${this.busy || !this.page} @click=${() => printDocument(this.page)}><md-icon>print</md-icon>${i18next.t('button.invoice-print')}</button>
+        <button raised ?disabled=${this.busy} @click=${() => this.download()}><md-icon>picture_as_pdf</md-icon>${i18next.t('button.invoice-download-pdf')}</button>
+      </div>
+      <div class="frame">
+        <!-- No script runs in the frame; an empty sandbox also kept the page from drawing in the app's browser. -->
+        <iframe
+          title=${i18next.t('title.invoice-preview')}
+          sandbox="allow-same-origin"
+          scrolling="no"
+          .srcdoc=${this.page}
+          @load=${(e) => this.fit(e.target)}
+        ></iframe>
+        ${this.busy ? html `<div class="loading">${i18next.t('text.loading')}</div>` : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], DocumentPreview.prototype, "loader", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], DocumentPreview.prototype, "language", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DocumentPreview.prototype, "page", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DocumentPreview.prototype, "busy", void 0);
+DocumentPreview = __decorate([
+    customElement('document-preview')
+], DocumentPreview);
+export { DocumentPreview };
+/** Open the preview of a saved document, in its own language when the print has words for it. */
+export function openDocumentPreview(loader, language, title) {
+    const own = PRINT_LANGUAGES.find(one => one === language) ?? PRINT_LANGUAGES[0];
+    return openPopup(html `<document-preview .loader=${loader} .language=${own}></document-preview>`, {
+        backdrop: true,
+        size: 'large',
+        title
+    });
+}
+//# sourceMappingURL=document-preview.js.map