@operato/font 10.29.33 → 10.29.36

package/dist/src/font-creation-card.d.ts

@@ -1,4 +1,4 @@
-import './ox-file-selector.js';
+import '@operato/input/ox-input-file.js';
 import { LitElement } from 'lit';
 declare const FontCreationCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class FontCreationCard extends FontCreationCard_base {

package/dist/src/font-creation-card.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import './ox-file-selector.js';
+import '@operato/input/ox-input-file.js';
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
@@ -62,16 +62,16 @@ let FontCreationCard = class FontCreationCard extends localize(i18next)(LitEleme
             />
             <!-- display when attachment module is imported -->
             <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>
-            <ox-file-selector
+            <ox-input-file
+              quiet
               class="${this.provider != 'custom' ? 'hidden' : ''}"
-              name="file"
               label="${i18next.t('label.select file')}"
               accept=".ttf,.otf,.woff,.woff2,.eot,.svg,.svgz"
               multiple
-              @file-change=${(e) => {
-            this.files = Array.from(e.detail.files);
+              @change=${(e) => {
+            this.files = [...(e.detail || [])];
         }}
-            ></ox-file-selector>
+            ></ox-input-file>
             <!------------------------------------------------>
 
             <label for="checkbox-active" @click=${(e) => e.stopPropagation()}>
@@ -87,7 +87,7 @@ let FontCreationCard = class FontCreationCard extends localize(i18next)(LitEleme
     onClickFlip(e) {
         const target = e.target;
         const currentTarget = e.currentTarget;
-        if (!['INPUT', 'SELECT', 'OPTION'].find(tagName => tagName === target.tagName)) {
+        if (!['INPUT', 'SELECT', 'OPTION', 'OX-INPUT-FILE'].find(tagName => tagName === target.tagName)) {
             if (currentTarget.hasAttribute('front'))
                 this.reset(); // 입력 폼으로 뒤집기 전에 한 번 리셋
             this.classList.toggle('flipped');
@@ -110,11 +110,13 @@ let FontCreationCard = class FontCreationCard extends localize(i18next)(LitEleme
         this.dispatchEvent(new CustomEvent('create-font', { detail }));
     }
     reset() {
+        var _a;
         var form = this.renderRoot.querySelector('form');
         if (form) {
             form.reset();
         }
         this.files = [];
+        (_a = this.renderRoot.querySelector('ox-input-file')) === null || _a === void 0 ? void 0 : _a.reset();
         this.classList.remove('flipped');
     }
 };
@@ -230,7 +232,7 @@ FontCreationCard.styles = [
 
       input,
       select,
-      ox-file-selector {
+      ox-input-file {
         color: var(--md-sys-color-on-surface);
       }
 
@@ -265,11 +267,8 @@ FontCreationCard.styles = [
         accent-color: var(--md-sys-color-primary);
       }
 
-      ox-file-selector {
+      ox-input-file {
         font-size: 0.78rem;
-        border: none;
-        box-sizing: border-box;
-        padding: 0;
         min-width: 0;
       }
 

package/dist/src/font-creation-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"font-creation-card.js","sourceRoot":"","sources":["../../src/font-creation-card.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-file-selector.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('font-creation-card')\nexport class FontCreationCard extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      /*\n       * The first card in the list: an offer on its front, the short form on its back. Both faces\n       * take the list's card shape; the front is dashed because nothing is there yet.\n       */\n      :host {\n        position: relative;\n\n        padding: 0;\n        margin: 0;\n        height: 100%;\n\n        -webkit-transform-style: preserve-3d;\n        transform-style: preserve-3d;\n        -webkit-transition: all 0.5s ease-in-out;\n        transition: all 0.5s ease-in-out;\n      }\n\n      :host(.flipped) {\n        -webkit-transform: var(--card-list-flip-transform);\n        transform: var(--card-list-flip-transform);\n      }\n\n      [front],\n      [back] {\n        position: absolute;\n\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        border-radius: 12px;\n\n        color: var(--md-sys-color-on-surface);\n\n        -webkit-backface-visibility: hidden;\n        backface-visibility: hidden;\n      }\n\n      [front] {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n\n        border: 1px dashed var(--md-sys-color-outline-variant);\n        background: transparent;\n        color: var(--md-sys-color-on-surface-variant);\n        text-align: center;\n        font-size: 0.82rem;\n        text-transform: capitalize;\n        cursor: pointer;\n      }\n\n      [front]:hover {\n        border-color: var(--md-sys-color-outline);\n        color: var(--md-sys-color-on-surface);\n        background: var(--md-sys-color-surface-container-low);\n      }\n\n      [front] md-icon {\n        --md-icon-size: 30px;\n        color: var(--md-sys-color-primary);\n        font-variation-settings: 'wght' 300;\n      }\n\n      [back] {\n        -webkit-transform: var(--card-list-flip-transform);\n        transform: var(--card-list-flip-transform);\n        display: grid;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));\n      }\n\n      [back] form {\n        padding: 14px 16px;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        display: grid;\n        grid-template-columns: 1fr;\n        grid-template-rows: 1fr auto;\n        gap: 10px;\n        align-items: start;\n      }\n\n      [back] form .props {\n        width: 100%;\n        box-sizing: border-box;\n        display: grid;\n        grid-template-columns: 4fr 6fr;\n        gap: 6px 10px;\n        align-items: center;\n      }\n\n      [back] form .props label {\n        font-size: 0.74rem;\n        text-align: right;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [back] form .props label[hidden],\n      [back] form .props input[hidden],\n      [back] form .props select[hidden] {\n        display: none;\n      }\n\n      input,\n      select,\n      ox-file-selector {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      [back] form .props input:not([type='checkbox']),\n      [back] form .props select {\n        min-width: 0;\n        width: 100%;\n        height: 26px;\n        padding: 0 8px;\n        box-sizing: border-box;\n        border: 1px solid transparent;\n        border-radius: 6px;\n        background: var(--property-input-background, var(--md-sys-color-surface-container-high));\n        font: inherit;\n        font-size: 0.78rem;\n        outline: none;\n      }\n\n      [back] form .props input:not([type='checkbox']):hover,\n      [back] form .props select:hover {\n        border-color: var(--md-sys-color-outline-variant);\n      }\n\n      [back] form .props input:not([type='checkbox']):focus,\n      [back] form .props select:focus {\n        border-color: var(--md-sys-color-primary);\n      }\n\n      [back] form .props input[type='checkbox'] {\n        justify-self: start;\n        margin: 0;\n        accent-color: var(--md-sys-color-primary);\n      }\n\n      ox-file-selector {\n        font-size: 0.78rem;\n        border: none;\n        box-sizing: border-box;\n        padding: 0;\n        min-width: 0;\n      }\n\n      [back] input[type='submit'] {\n        justify-self: end;\n        height: 28px;\n        padding: 0 16px;\n        border: 0;\n        border-radius: 999px;\n        background: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        font: inherit;\n        font-size: 0.78rem;\n        font-weight: 500;\n        cursor: pointer;\n      }\n\n      [back] input[type='submit']:hover {\n        filter: brightness(1.08);\n      }\n\n      .hidden {\n        display: none !important;\n      }\n    `\n  ]\n\n  @property({ type: String }) provider: string = 'google'\n  @property({ type: Array }) googleFonts: Array<string> = []\n  @property({ type: Array }) files?: Array<any>\n\n  providers: Array<{ value: string; display: string }> = [\n    { value: 'google', display: 'Google' },\n    // TODO 구글 외 폰트 서비스 구현\n    // { value: 'typekit', display: 'Typekit' },\n    { value: 'custom', display: 'Custom' }\n  ]\n\n  render() {\n    let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0\n    let isFileAttached = this.files && this.files.length > 0 ? true : false\n\n    return html`\n      <div @click=${(e: Event) => this.onClickFlip(e)} front>\n        <md-icon>add</md-icon>${i18next.t('button.create font', { defaultValue: 'Create font' })}\n      </div>\n\n      <div @click=${(e: Event) => this.onClickFlip(e)} back>\n        <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n          <div class=\"props\">\n            <label>${i18next.t('label.provider')}</label>\n            <select\n              name=\"provider\"\n              @change=${(e: Event) => {\n                this.provider = (e.target as HTMLInputElement).value\n                if (this.provider === 'google') {\n                  fetch(`/all-google-fonts`).then(async response => {\n                    if (response.ok) this.googleFonts = await response.json()\n                    else {\n                      console.warn(\n                        `(${response.url}) ${response.status} ${response.statusText}. Could not load Google fonts.`\n                      )\n                    }\n                  })\n                }\n              }}\n            >\n              ${this.providers.map(\n                p => html` <option value=${p.value} ?selected=${this.provider == p.value}>${p.display}</option> `\n              )}\n            </select>\n\n            <label>${i18next.t('label.name')}</label>\n            <input type=\"text\" name=\"${isProviderGoogle ? '' : 'name'}\" ?hidden=${isProviderGoogle} />\n            <select name=\"${isProviderGoogle ? 'name' : ''}\" ?hidden=${!isProviderGoogle}>\n              <option value=\"\">&nbsp;</option>\n              ${isProviderGoogle && this.googleFonts.map(f => html` <option value=${f}>${f}</option> `)}\n            </select>\n\n            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.uri')}</label>\n            <input\n              ?hidden=${this.provider != 'custom'}\n              ?disabled=${isFileAttached}\n              .value=${isFileAttached ? this.files![0].name : ''}\n              type=\"text\"\n              name=\"uri\"\n            />\n            <!-- display when attachment module is imported -->\n            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>\n            <ox-file-selector\n              class=\"${this.provider != 'custom' ? 'hidden' : ''}\"\n              name=\"file\"\n              label=\"${i18next.t('label.select file')}\"\n              accept=\".ttf,.otf,.woff,.woff2,.eot,.svg,.svgz\"\n              multiple\n              @file-change=${(e: CustomEvent) => {\n                this.files = Array.from(e.detail.files)\n              }}\n            ></ox-file-selector>\n            <!------------------------------------------------>\n\n            <label for=\"checkbox-active\" @click=${(e: Event) => e.stopPropagation()}>\n              ${i18next.t('label.active')}\n            </label>\n            <input id=\"checkbox-active\" type=\"checkbox\" name=\"active\" checked />\n          </div>\n          <input type=\"submit\" value=${i18next.t('button.create')} />\n        </form>\n      </div>\n    `\n  }\n\n  onClickFlip(e: Event) {\n    const target = e.target as HTMLElement\n    const currentTarget = e.currentTarget as HTMLElement\n\n    if (!['INPUT', 'SELECT', 'OPTION'].find(tagName => tagName === target.tagName)) {\n      if (currentTarget.hasAttribute('front')) this.reset() // 입력 폼으로 뒤집기 전에 한 번 리셋\n      this.classList.toggle('flipped')\n    }\n  }\n\n  async onClickSubmit(e: Event) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    var form = e.target as HTMLFormElement\n\n    var detail = {} as any\n\n    detail.name = (form.elements.namedItem('name') as HTMLInputElement).value\n    detail.provider = (form.elements.namedItem('provider') as HTMLInputElement).value\n    detail.active = (form.elements.namedItem('active') as HTMLInputElement).checked\n\n    if (this.provider === 'custom') {\n      detail.uri = (form.elements.namedItem('uri') as HTMLInputElement).value\n      if (this.files && this.files.length > 0) {\n        detail.files = this.files\n      }\n    }\n\n    this.dispatchEvent(new CustomEvent('create-font', { detail }))\n  }\n\n  reset() {\n    var form = this.renderRoot.querySelector('form')\n    if (form) {\n      form.reset()\n    }\n\n    this.files = []\n    this.classList.remove('flipped')\n  }\n}\n"]}
+{"version":3,"file":"font-creation-card.js","sourceRoot":"","sources":["../../src/font-creation-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('font-creation-card')\nexport class FontCreationCard extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      /*\n       * The first card in the list: an offer on its front, the short form on its back. Both faces\n       * take the list's card shape; the front is dashed because nothing is there yet.\n       */\n      :host {\n        position: relative;\n\n        padding: 0;\n        margin: 0;\n        height: 100%;\n\n        -webkit-transform-style: preserve-3d;\n        transform-style: preserve-3d;\n        -webkit-transition: all 0.5s ease-in-out;\n        transition: all 0.5s ease-in-out;\n      }\n\n      :host(.flipped) {\n        -webkit-transform: var(--card-list-flip-transform);\n        transform: var(--card-list-flip-transform);\n      }\n\n      [front],\n      [back] {\n        position: absolute;\n\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        border-radius: 12px;\n\n        color: var(--md-sys-color-on-surface);\n\n        -webkit-backface-visibility: hidden;\n        backface-visibility: hidden;\n      }\n\n      [front] {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n\n        border: 1px dashed var(--md-sys-color-outline-variant);\n        background: transparent;\n        color: var(--md-sys-color-on-surface-variant);\n        text-align: center;\n        font-size: 0.82rem;\n        text-transform: capitalize;\n        cursor: pointer;\n      }\n\n      [front]:hover {\n        border-color: var(--md-sys-color-outline);\n        color: var(--md-sys-color-on-surface);\n        background: var(--md-sys-color-surface-container-low);\n      }\n\n      [front] md-icon {\n        --md-icon-size: 30px;\n        color: var(--md-sys-color-primary);\n        font-variation-settings: 'wght' 300;\n      }\n\n      [back] {\n        -webkit-transform: var(--card-list-flip-transform);\n        transform: var(--card-list-flip-transform);\n        display: grid;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));\n      }\n\n      [back] form {\n        padding: 14px 16px;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        display: grid;\n        grid-template-columns: 1fr;\n        grid-template-rows: 1fr auto;\n        gap: 10px;\n        align-items: start;\n      }\n\n      [back] form .props {\n        width: 100%;\n        box-sizing: border-box;\n        display: grid;\n        grid-template-columns: 4fr 6fr;\n        gap: 6px 10px;\n        align-items: center;\n      }\n\n      [back] form .props label {\n        font-size: 0.74rem;\n        text-align: right;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [back] form .props label[hidden],\n      [back] form .props input[hidden],\n      [back] form .props select[hidden] {\n        display: none;\n      }\n\n      input,\n      select,\n      ox-input-file {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      [back] form .props input:not([type='checkbox']),\n      [back] form .props select {\n        min-width: 0;\n        width: 100%;\n        height: 26px;\n        padding: 0 8px;\n        box-sizing: border-box;\n        border: 1px solid transparent;\n        border-radius: 6px;\n        background: var(--property-input-background, var(--md-sys-color-surface-container-high));\n        font: inherit;\n        font-size: 0.78rem;\n        outline: none;\n      }\n\n      [back] form .props input:not([type='checkbox']):hover,\n      [back] form .props select:hover {\n        border-color: var(--md-sys-color-outline-variant);\n      }\n\n      [back] form .props input:not([type='checkbox']):focus,\n      [back] form .props select:focus {\n        border-color: var(--md-sys-color-primary);\n      }\n\n      [back] form .props input[type='checkbox'] {\n        justify-self: start;\n        margin: 0;\n        accent-color: var(--md-sys-color-primary);\n      }\n\n      ox-input-file {\n        font-size: 0.78rem;\n        min-width: 0;\n      }\n\n      [back] input[type='submit'] {\n        justify-self: end;\n        height: 28px;\n        padding: 0 16px;\n        border: 0;\n        border-radius: 999px;\n        background: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        font: inherit;\n        font-size: 0.78rem;\n        font-weight: 500;\n        cursor: pointer;\n      }\n\n      [back] input[type='submit']:hover {\n        filter: brightness(1.08);\n      }\n\n      .hidden {\n        display: none !important;\n      }\n    `\n  ]\n\n  @property({ type: String }) provider: string = 'google'\n  @property({ type: Array }) googleFonts: Array<string> = []\n  @property({ type: Array }) files?: Array<any>\n\n  providers: Array<{ value: string; display: string }> = [\n    { value: 'google', display: 'Google' },\n    // TODO 구글 외 폰트 서비스 구현\n    // { value: 'typekit', display: 'Typekit' },\n    { value: 'custom', display: 'Custom' }\n  ]\n\n  render() {\n    let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0\n    let isFileAttached = this.files && this.files.length > 0 ? true : false\n\n    return html`\n      <div @click=${(e: Event) => this.onClickFlip(e)} front>\n        <md-icon>add</md-icon>${i18next.t('button.create font', { defaultValue: 'Create font' })}\n      </div>\n\n      <div @click=${(e: Event) => this.onClickFlip(e)} back>\n        <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n          <div class=\"props\">\n            <label>${i18next.t('label.provider')}</label>\n            <select\n              name=\"provider\"\n              @change=${(e: Event) => {\n                this.provider = (e.target as HTMLInputElement).value\n                if (this.provider === 'google') {\n                  fetch(`/all-google-fonts`).then(async response => {\n                    if (response.ok) this.googleFonts = await response.json()\n                    else {\n                      console.warn(\n                        `(${response.url}) ${response.status} ${response.statusText}. Could not load Google fonts.`\n                      )\n                    }\n                  })\n                }\n              }}\n            >\n              ${this.providers.map(\n                p => html` <option value=${p.value} ?selected=${this.provider == p.value}>${p.display}</option> `\n              )}\n            </select>\n\n            <label>${i18next.t('label.name')}</label>\n            <input type=\"text\" name=\"${isProviderGoogle ? '' : 'name'}\" ?hidden=${isProviderGoogle} />\n            <select name=\"${isProviderGoogle ? 'name' : ''}\" ?hidden=${!isProviderGoogle}>\n              <option value=\"\">&nbsp;</option>\n              ${isProviderGoogle && this.googleFonts.map(f => html` <option value=${f}>${f}</option> `)}\n            </select>\n\n            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.uri')}</label>\n            <input\n              ?hidden=${this.provider != 'custom'}\n              ?disabled=${isFileAttached}\n              .value=${isFileAttached ? this.files![0].name : ''}\n              type=\"text\"\n              name=\"uri\"\n            />\n            <!-- display when attachment module is imported -->\n            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>\n            <ox-input-file\n              quiet\n              class=\"${this.provider != 'custom' ? 'hidden' : ''}\"\n              label=\"${i18next.t('label.select file')}\"\n              accept=\".ttf,.otf,.woff,.woff2,.eot,.svg,.svgz\"\n              multiple\n              @change=${(e: CustomEvent) => {\n                this.files = [...(e.detail || [])]\n              }}\n            ></ox-input-file>\n            <!------------------------------------------------>\n\n            <label for=\"checkbox-active\" @click=${(e: Event) => e.stopPropagation()}>\n              ${i18next.t('label.active')}\n            </label>\n            <input id=\"checkbox-active\" type=\"checkbox\" name=\"active\" checked />\n          </div>\n          <input type=\"submit\" value=${i18next.t('button.create')} />\n        </form>\n      </div>\n    `\n  }\n\n  onClickFlip(e: Event) {\n    const target = e.target as HTMLElement\n    const currentTarget = e.currentTarget as HTMLElement\n\n    if (!['INPUT', 'SELECT', 'OPTION', 'OX-INPUT-FILE'].find(tagName => tagName === target.tagName)) {\n      if (currentTarget.hasAttribute('front')) this.reset() // 입력 폼으로 뒤집기 전에 한 번 리셋\n      this.classList.toggle('flipped')\n    }\n  }\n\n  async onClickSubmit(e: Event) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    var form = e.target as HTMLFormElement\n\n    var detail = {} as any\n\n    detail.name = (form.elements.namedItem('name') as HTMLInputElement).value\n    detail.provider = (form.elements.namedItem('provider') as HTMLInputElement).value\n    detail.active = (form.elements.namedItem('active') as HTMLInputElement).checked\n\n    if (this.provider === 'custom') {\n      detail.uri = (form.elements.namedItem('uri') as HTMLInputElement).value\n      if (this.files && this.files.length > 0) {\n        detail.files = this.files\n      }\n    }\n\n    this.dispatchEvent(new CustomEvent('create-font', { detail }))\n  }\n\n  reset() {\n    var form = this.renderRoot.querySelector('form')\n    if (form) {\n      form.reset()\n    }\n\n    this.files = []\n    ;(this.renderRoot.querySelector('ox-input-file') as any)?.reset()\n    this.classList.remove('flipped')\n  }\n}\n"]}

package/dist/test/font-creation-card.test.d.ts

@@ -0,0 +1 @@
+import '../src/font-creation-card.js';

package/dist/test/font-creation-card.test.js

@@ -0,0 +1,53 @@
+import { aTimeout, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/font-creation-card.js';
+/**
+ * The font card's file pick.
+ *
+ * ## Why this is tested
+ *
+ * The card picked font files with its own `ox-file-selector`, one of several file pickers that did
+ * the same thing. It now uses `ox-input-file`, the one picker. What must hold: picked font files
+ * reach `create-font`, a file that is not a font is refused, picking does not flip the card, and
+ * reset empties the pick.
+ */
+describe('font-creation-card', () => {
+    const drop = (area, ...files) => {
+        const dataTransfer = new DataTransfer();
+        files.forEach(one => dataTransfer.items.add(one));
+        area.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true, cancelable: true }));
+    };
+    it('takes the picked font files into create-font', async () => {
+        const card = await fixture(html `<font-creation-card></font-creation-card>`);
+        card.provider = 'custom';
+        await card.updateComplete;
+        const picker = card.renderRoot.querySelector('ox-input-file');
+        expect(picker, 'the card has no picker').to.exist;
+        drop(picker, new File(['x'], 'brand.woff2'), new File(['x'], 'notes.txt', { type: 'text/plain' }));
+        await aTimeout(0);
+        await card.updateComplete;
+        expect(card.files.map((one) => one.name), 'a non-font was taken').to.deep.equal(['brand.woff2']);
+        let detail;
+        card.addEventListener('create-font', (e) => (detail = e.detail));
+        const form = card.renderRoot.querySelector('form');
+        form.elements.namedItem('name').value = 'Brand';
+        form.dispatchEvent(new Event('submit', { cancelable: true }));
+        expect(detail.files.map((one) => one.name)).to.deep.equal(['brand.woff2']);
+    });
+    it('does not flip when the picker is clicked, and reset empties the pick', async () => {
+        const card = await fixture(html `<font-creation-card></font-creation-card>`);
+        card.provider = 'custom';
+        card.classList.add('flipped');
+        await card.updateComplete;
+        const picker = card.renderRoot.querySelector('ox-input-file');
+        picker.click();
+        expect(card.classList.contains('flipped'), 'clicking the picker flipped the card').to.equal(true);
+        drop(picker, new File(['x'], 'brand.ttf'));
+        await aTimeout(0);
+        card.reset();
+        await card.updateComplete;
+        expect(card.files).to.deep.equal([]);
+        expect(picker.value).to.deep.equal([]);
+    });
+});
+//# sourceMappingURL=font-creation-card.test.js.map

package/dist/test/font-creation-card.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-creation-card.test.js","sourceRoot":"","sources":["../../test/font-creation-card.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { aTimeout, expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\n\nimport '../src/font-creation-card.js'\n\n/**\n * The font card's file pick.\n *\n * ## Why this is tested\n *\n * The card picked font files with its own `ox-file-selector`, one of several file pickers that did\n * the same thing. It now uses `ox-input-file`, the one picker. What must hold: picked font files\n * reach `create-font`, a file that is not a font is refused, picking does not flip the card, and\n * reset empties the pick.\n */\ndescribe('font-creation-card', () => {\n  const drop = (area: HTMLElement, ...files: File[]) => {\n    const dataTransfer = new DataTransfer()\n    files.forEach(one => dataTransfer.items.add(one))\n    area.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true, cancelable: true }))\n  }\n\n  it('takes the picked font files into create-font', async () => {\n    const card: any = await fixture(html`<font-creation-card></font-creation-card>`)\n    card.provider = 'custom'\n    await card.updateComplete\n\n    const picker = card.renderRoot.querySelector('ox-input-file')\n    expect(picker, 'the card has no picker').to.exist\n\n    drop(picker, new File(['x'], 'brand.woff2'), new File(['x'], 'notes.txt', { type: 'text/plain' }))\n    await aTimeout(0)\n    await card.updateComplete\n\n    expect(card.files.map((one: File) => one.name), 'a non-font was taken').to.deep.equal(['brand.woff2'])\n\n    let detail: any\n    card.addEventListener('create-font', (e: CustomEvent) => (detail = e.detail))\n    const form = card.renderRoot.querySelector('form')\n    ;(form.elements.namedItem('name') as HTMLInputElement).value = 'Brand'\n    form.dispatchEvent(new Event('submit', { cancelable: true }))\n\n    expect(detail.files.map((one: File) => one.name)).to.deep.equal(['brand.woff2'])\n  })\n\n  it('does not flip when the picker is clicked, and reset empties the pick', async () => {\n    const card: any = await fixture(html`<font-creation-card></font-creation-card>`)\n    card.provider = 'custom'\n    card.classList.add('flipped')\n    await card.updateComplete\n\n    const picker = card.renderRoot.querySelector('ox-input-file')\n    picker.click()\n    expect(card.classList.contains('flipped'), 'clicking the picker flipped the card').to.equal(true)\n\n    drop(picker, new File(['x'], 'brand.ttf'))\n    await aTimeout(0)\n    card.reset()\n    await card.updateComplete\n\n    expect(card.files).to.deep.equal([])\n    expect(picker.value).to.deep.equal([])\n  })\n})\n"]}