@operato/font 1.0.0-beta.16 → 1.0.0-beta.19

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

@@ -0,0 +1,18 @@
+import './ox-file-selector';
+import { LitElement } from 'lit';
+declare const FontCreationCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class FontCreationCard extends FontCreationCard_base {
+    static styles: import("lit").CSSResult[];
+    provider: string;
+    googleFonts: Array<string>;
+    files?: Array<any>;
+    providers: Array<{
+        value: string;
+        display: string;
+    }>;
+    render(): import("lit-html").TemplateResult<1>;
+    onClickFlip(e: Event): void;
+    onClickSubmit(e: Event): Promise<void>;
+    reset(): void;
+}
+export {};

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

@@ -0,0 +1,258 @@
+import { __decorate } from "tslib";
+import './ox-file-selector';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+let FontCreationCard = class FontCreationCard extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.provider = 'google';
+        this.googleFonts = [];
+        this.providers = [
+            { value: 'google', display: 'Google' },
+            // TODO 구글 외 폰트 서비스 구현
+            // { value: 'typekit', display: 'Typekit' },
+            { value: 'custom', display: 'Custom' }
+        ];
+    }
+    render() {
+        let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0;
+        let isFileAttached = this.files && this.files.length > 0 ? true : false;
+        return html `
+      <div @click=${(e) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create font</div>
+
+      <div @click=${(e) => this.onClickFlip(e)} back>
+        <form @submit=${(e) => this.onClickSubmit(e)}>
+          <div class="props">
+            <label>${i18next.t('label.provider')}</label>
+            <select
+              name="provider"
+              @change=${(e) => {
+            this.provider = e.target.value;
+            if (this.provider === 'google') {
+                fetch(`/all-google-fonts`).then(async (response) => {
+                    if (response.ok)
+                        this.googleFonts = await response.json();
+                    else {
+                        console.warn(`(${response.url}) ${response.status} ${response.statusText}. Could not load Google fonts.`);
+                    }
+                });
+            }
+        }}
+            >
+              ${this.providers.map(p => html ` <option value=${p.value} ?selected=${this.provider == p.value}>${p.display}</option> `)}
+            </select>
+
+            <label>${i18next.t('label.name')}</label>
+            <input type="text" name="${isProviderGoogle ? '' : 'name'}" ?hidden=${isProviderGoogle} />
+            <select name="${isProviderGoogle ? 'name' : ''}" ?hidden=${!isProviderGoogle}>
+              <option value="">&nbsp;</option>
+              ${isProviderGoogle && this.googleFonts.map(f => html ` <option value=${f}>${f}</option> `)}
+            </select>
+
+            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.uri')}</label>
+            <input
+              ?hidden=${this.provider != 'custom'}
+              ?disabled=${isFileAttached}
+              .value=${isFileAttached ? this.files[0].name : ''}
+              type="text"
+              name="uri"
+            />
+            <!-- display when attachment module is imported -->
+            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>
+            <ox-file-selector
+              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);
+        }}
+            ></ox-file-selector>
+            <!------------------------------------------------>
+
+            <label for="checkbox-active" @click=${(e) => e.stopPropagation()}>
+              ${i18next.t('label.active')}
+            </label>
+            <input id="checkbox-active" type="checkbox" name="active" checked />
+          </div>
+          <div></div>
+          <input type="submit" value=${i18next.t('button.create')} />
+        </form>
+      </div>
+    `;
+    }
+    onClickFlip(e) {
+        const target = e.target;
+        const currentTarget = e.currentTarget;
+        if (!['INPUT', 'SELECT', 'OPTION'].find(tagName => tagName === target.tagName)) {
+            if (currentTarget.hasAttribute('front'))
+                this.reset(); // 입력 폼으로 뒤집기 전에 한 번 리셋
+            this.classList.toggle('flipped');
+        }
+    }
+    async onClickSubmit(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var form = e.target;
+        var detail = {};
+        detail.name = form.elements.namedItem('name').value;
+        detail.provider = form.elements.namedItem('provider').value;
+        detail.active = form.elements.namedItem('active').checked;
+        if (this.provider === 'custom') {
+            detail.uri = form.elements.namedItem('uri').value;
+            if (this.files && this.files.length > 0) {
+                detail.files = this.files;
+            }
+        }
+        this.dispatchEvent(new CustomEvent('create-font', { detail }));
+    }
+    reset() {
+        var form = this.renderRoot.querySelector('form');
+        if (form) {
+            form.reset();
+        }
+        this.files = [];
+        this.classList.remove('flipped');
+    }
+};
+FontCreationCard.styles = [
+    css `
+      :host {
+        position: relative;
+
+        padding: 0;
+        margin: 0;
+        height: 100%;
+
+        -webkit-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        -webkit-transition: all 0.5s ease-in-out;
+        transition: all 0.5s ease-in-out;
+      }
+
+      :host(.flipped) {
+        -webkit-transform: var(--card-list-flip-transform);
+        transform: var(--card-list-flip-transform);
+      }
+
+      [front],
+      [back] {
+        position: absolute;
+
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+
+        border: var(--card-list-create-border);
+        border-radius: var(--card-list-create-border-radius);
+
+        background-color: #fff;
+
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+      }
+
+      [front] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        text-align: center;
+        font-size: 0.8em;
+        color: var(--card-list-create-color);
+        text-transform: capitalize;
+      }
+
+      [front] mwc-icon {
+        font-size: 3.5em;
+        color: var(--card-list-create-icon-color);
+      }
+
+      [back] {
+        -webkit-transform: var(--card-list-flip-transform);
+        transform: var(--card-list-flip-transform);
+        box-sizing: border-box;
+        display: grid;
+      }
+
+      [back] form {
+        padding: var(--card-list-create-form-padding);
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr auto;
+        justify-content: center;
+        align-items: center;
+      }
+
+      [back] form .props {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-row-gap: 7px;
+        justify-content: center;
+        align-items: center;
+      }
+
+      [back] form .props label {
+        grid-column: span 4;
+        font: var(--card-list-create-label-font);
+        color: var(--card-list-create-label-color);
+      }
+
+      [back] form .props input,
+      [back] form .props select {
+        grid-column: span 6;
+        background-color: #fff;
+        border: var(--card-list-create-input-border);
+        border-radius: var(--card-list-create-input-border-radius);
+        font: var(--card-list-create-input-font);
+        color: var(--card-list-create-input-color);
+        width: -moz-available;
+      }
+
+      ox-file-selector {
+        grid-column: span 6;
+        font: var(--card-list-create-input-font);
+        border: none;
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      [back] input[type='submit'] {
+        background-color: var(--button-background-color) !important;
+        font: var(--button-font);
+        color: var(--button-color) !important;
+        border-radius: var(--button-radius);
+        border: var(--button-border);
+        grid-column: span 10;
+        grid-row: auto / -1;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], FontCreationCard.prototype, "provider", void 0);
+__decorate([
+    property({ type: Array })
+], FontCreationCard.prototype, "googleFonts", void 0);
+__decorate([
+    property({ type: Array })
+], FontCreationCard.prototype, "files", void 0);
+FontCreationCard = __decorate([
+    customElement('font-creation-card')
+], FontCreationCard);
+export { FontCreationCard };
+//# sourceMappingURL=font-creation-card.js.map

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

@@ -0,0 +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'\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      :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\n        border: var(--card-list-create-border);\n        border-radius: var(--card-list-create-border-radius);\n\n        background-color: #fff;\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\n        text-align: center;\n        font-size: 0.8em;\n        color: var(--card-list-create-color);\n        text-transform: capitalize;\n      }\n\n      [front] mwc-icon {\n        font-size: 3.5em;\n        color: var(--card-list-create-icon-color);\n      }\n\n      [back] {\n        -webkit-transform: var(--card-list-flip-transform);\n        transform: var(--card-list-flip-transform);\n        box-sizing: border-box;\n        display: grid;\n      }\n\n      [back] form {\n        padding: var(--card-list-create-form-padding);\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        display: grid;\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n        justify-content: center;\n        align-items: center;\n      }\n\n      [back] form .props {\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-row-gap: 7px;\n        justify-content: center;\n        align-items: center;\n      }\n\n      [back] form .props label {\n        grid-column: span 4;\n        font: var(--card-list-create-label-font);\n        color: var(--card-list-create-label-color);\n      }\n\n      [back] form .props input,\n      [back] form .props select {\n        grid-column: span 6;\n        background-color: #fff;\n        border: var(--card-list-create-input-border);\n        border-radius: var(--card-list-create-input-border-radius);\n        font: var(--card-list-create-input-font);\n        color: var(--card-list-create-input-color);\n        width: -moz-available;\n      }\n\n      ox-file-selector {\n        grid-column: span 6;\n        font: var(--card-list-create-input-font);\n        border: none;\n        box-sizing: border-box;\n        padding: 0;\n      }\n\n      [back] input[type='submit'] {\n        background-color: var(--button-background-color) !important;\n        font: var(--button-font);\n        color: var(--button-color) !important;\n        border-radius: var(--button-radius);\n        border: var(--button-border);\n        grid-column: span 10;\n        grid-row: auto / -1;\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><mwc-icon>add_circle_outline</mwc-icon>create font</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          <div></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"]}

package/dist/src/font-selector.d.ts

@@ -0,0 +1,36 @@
+import './font-creation-card';
+import { LitElement, PropertyValues } from 'lit';
+declare const FontSelector_base: (new (...args: any[]) => LitElement) & (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class FontSelector extends FontSelector_base {
+    static styles: import("lit").CSSResult[];
+    fonts: Array<any>;
+    creatable: boolean;
+    provider: string;
+    main: HTMLElement;
+    filter: HTMLElement;
+    creationCard: {
+        reset: () => {};
+    };
+    showGotoTop: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    stateChanged(state: any): void;
+    updated(changes: PropertyValues<this>): void;
+    refresh(): Promise<any>;
+    toggleActive(font: {
+        id: string;
+        active: boolean;
+    }): Promise<void>;
+    onCreateFont(e: CustomEvent): Promise<void>;
+    deleteFont(font: {
+        id: string;
+    }): Promise<void>;
+    onClickSelect(font: any): void;
+}
+export {};

package/dist/src/font-selector.js

@@ -0,0 +1,285 @@
+import { __decorate } from "tslib";
+import './font-creation-card';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import Headroom from '@operato/headroom';
+import { i18next, localize } from '@operato/i18n';
+import { pulltorefresh } from '@operato/pull-to-refresh';
+import { store } from '@operato/shell';
+import { HeadroomStyles, ScrollbarStyles } from '@operato/styles';
+import { createFont, deleteFont, updateFont } from './graphql-client';
+import { actionUpdateFontList } from './redux-font-actions';
+let FontSelector = class FontSelector extends localize(i18next)(connect(store)(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.fonts = [];
+        this.creatable = false;
+        this.provider = '';
+        this.showGotoTop = false;
+    }
+    render() {
+        var fonts = this.fonts || [];
+        return html `
+      <div id="filter">
+        <select
+          @change=${(e) => {
+            this.provider = e.currentTarget.value;
+        }}
+        >
+          <option value="">--${i18next.t('text.please choose a provider')}--</option>
+          ${['google', 'custom'].map(provider => html ` <option value=${provider}>${provider}</option> `)}
+        </select>
+      </div>
+
+      <div id="main">
+        ${this.creatable
+            ? html `
+              <font-creation-card
+                class="card create"
+                @create-font=${(e) => this.onCreateFont(e)}
+              ></font-creation-card>
+            `
+            : html ``}
+        ${fonts
+            .filter(font => (this.provider ? font.provider === this.provider : true))
+            .map(font => html `
+              <div class="card" @click=${(e) => this.onClickSelect(font)}>
+                <div face>
+                  <font .face=${font.name}>ABCDEFGHIJKLMN</font>
+                  <font .face=${font.name}>abcdefghijklmn</font>
+                </div>
+                <div name>${font.name}</div>
+                <div provider>${font.provider}</div>
+                <div class="button-container">
+                  <mwc-icon
+                    @click=${(e) => {
+            e.stopPropagation();
+            this.toggleActive(font);
+        }}
+                    >${font.active ? 'check_box' : 'check_box_outline_blank'}</mwc-icon
+                  >
+                  <mwc-icon
+                    @click=${(e) => {
+            e.stopPropagation();
+            this.deleteFont(font);
+        }}
+                    >delete</mwc-icon
+                  >
+                </div>
+              </div>
+            `)}
+      </div>
+    `;
+    }
+    async firstUpdated() {
+        var list = this.renderRoot.querySelector('#main');
+        pulltorefresh({
+            container: this.renderRoot,
+            scrollable: list,
+            refresh: () => {
+                return this.refresh();
+            }
+        });
+        /* for headroom */
+        this.main.addEventListener('scroll', e => {
+            const target = e.target;
+            this.showGotoTop = target.scrollTop !== 0;
+        });
+        await this.requestUpdate();
+        var originPaddingTop = parseFloat(getComputedStyle(this.main, null).getPropertyValue('padding-top'));
+        this.main.style.paddingTop = this.filter.clientHeight + originPaddingTop + 'px';
+        var headroom = new Headroom(this.filter, {
+            scroller: this.main
+        });
+        headroom.init();
+    }
+    stateChanged(state) {
+        this.fonts = state.font;
+    }
+    updated(changes) {
+        if (changes.has('fonts')) {
+            this.creationCard.reset();
+        }
+    }
+    async refresh() {
+        return store.dispatch(actionUpdateFontList());
+    }
+    async toggleActive(font) {
+        try {
+            await updateFont({ id: font.id, active: !font.active });
+            this.refresh();
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }
+    async onCreateFont(e) {
+        try {
+            await createFont(e.detail);
+            this.refresh();
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }
+    async deleteFont(font) {
+        try {
+            await deleteFont(font.id);
+            this.refresh();
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }
+    onClickSelect(font) {
+        this.dispatchEvent(new CustomEvent('font-selected', {
+            composed: true,
+            bubbles: true,
+            detail: {
+                font
+            }
+        }));
+    }
+};
+FontSelector.styles = [
+    ScrollbarStyles,
+    HeadroomStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--popup-content-background-color);
+
+        position: relative;
+      }
+
+      #main {
+        overflow: auto;
+        padding: var(--popup-content-padding);
+        display: grid;
+        grid-template-columns: var(--card-list-template);
+        grid-auto-rows: var(--card-list-rows-height);
+        grid-gap: 20px;
+        box-sizing: border-box;
+      }
+
+      #main .card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
+        border-radius: var(--card-list-border-radius);
+        border: var(--font-selector-border);
+        background-color: var(--card-list-background-color);
+
+        position: relative;
+      }
+
+      .card .button-container {
+        position: absolute;
+        right: 0;
+        height: 100%;
+        display: flex;
+        direction: rtl;
+        flex-direction: column;
+        flex-wrap: wrap;
+      }
+
+      .card .button-container > mwc-icon {
+        background-color: var(--font-selector-icon-background-color);
+        text-align: center;
+        width: var(--font-selector-icon-size);
+        height: var(--font-selector-icon-size);
+        font: var(--font-selector-icon-font);
+        color: var(--font-selector-icon-color);
+      }
+
+      .card .button-container > mwc-icon:last-child {
+        border-bottom-left-radius: 12px;
+      }
+
+      .card .button-container > mwc-icon:hover,
+      .card .button-container > mwc-icon:active {
+        background-color: var(--primary-color);
+        color: #fff;
+      }
+
+      #main .card.create {
+        overflow: visible;
+        background-color: initial;
+      }
+
+      #main .card:hover {
+        cursor: pointer;
+      }
+
+      [face] {
+        flex: 1;
+      }
+
+      [name] {
+        background-color: var(--board-renderer-name-background-color);
+        opacity: 0.8;
+        margin-top: -35px;
+        width: 100%;
+        color: #fff;
+        font-weight: bolder;
+        font-size: 13px;
+        text-indent: 7px;
+      }
+
+      [provider] {
+        background-color: rgba(0, 0, 0, 0.7);
+        width: 100%;
+        min-height: 15px;
+        font-size: 0.6rem;
+        color: #fff;
+        text-indent: 7px;
+      }
+
+      #filter {
+        padding: var(--popup-content-padding);
+        background-color: var(--font-tools-background-color);
+        box-shadow: var(--box-shadow);
+
+        position: absolute;
+        width: 100%;
+        box-sizing: border-box;
+        z-index: 1;
+      }
+
+      #filter * {
+        font-size: 15px;
+      }
+
+      select {
+        text-transform: capitalize;
+        float: right;
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], FontSelector.prototype, "fonts", void 0);
+__decorate([
+    property({ type: Boolean })
+], FontSelector.prototype, "creatable", void 0);
+__decorate([
+    property({ type: String })
+], FontSelector.prototype, "provider", void 0);
+__decorate([
+    query('#main')
+], FontSelector.prototype, "main", void 0);
+__decorate([
+    query('#filter')
+], FontSelector.prototype, "filter", void 0);
+__decorate([
+    query('font-creation-card')
+], FontSelector.prototype, "creationCard", void 0);
+FontSelector = __decorate([
+    customElement('font-selector')
+], FontSelector);
+export { FontSelector };
+//# sourceMappingURL=font-selector.js.map

package/dist/src/font-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-selector.js","sourceRoot":"","sources":["../../src/font-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './font-creation-card'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport Headroom from '@operato/headroom'\nimport { i18next, localize } from '@operato/i18n'\nimport { pulltorefresh } from '@operato/pull-to-refresh'\nimport { store } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { createFont, deleteFont, updateFont } from './graphql-client'\nimport { actionUpdateFontList } from './redux-font-actions'\n\n@customElement('font-selector')\nexport class FontSelector extends localize(i18next)(connect(store)(LitElement)) {\n  static styles = [\n    ScrollbarStyles,\n    HeadroomStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background-color: var(--popup-content-background-color);\n\n        position: relative;\n      }\n\n      #main {\n        overflow: auto;\n        padding: var(--popup-content-padding);\n        display: grid;\n        grid-template-columns: var(--card-list-template);\n        grid-auto-rows: var(--card-list-rows-height);\n        grid-gap: 20px;\n        box-sizing: border-box;\n      }\n\n      #main .card {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        border-radius: var(--card-list-border-radius);\n        border: var(--font-selector-border);\n        background-color: var(--card-list-background-color);\n\n        position: relative;\n      }\n\n      .card .button-container {\n        position: absolute;\n        right: 0;\n        height: 100%;\n        display: flex;\n        direction: rtl;\n        flex-direction: column;\n        flex-wrap: wrap;\n      }\n\n      .card .button-container > mwc-icon {\n        background-color: var(--font-selector-icon-background-color);\n        text-align: center;\n        width: var(--font-selector-icon-size);\n        height: var(--font-selector-icon-size);\n        font: var(--font-selector-icon-font);\n        color: var(--font-selector-icon-color);\n      }\n\n      .card .button-container > mwc-icon:last-child {\n        border-bottom-left-radius: 12px;\n      }\n\n      .card .button-container > mwc-icon:hover,\n      .card .button-container > mwc-icon:active {\n        background-color: var(--primary-color);\n        color: #fff;\n      }\n\n      #main .card.create {\n        overflow: visible;\n        background-color: initial;\n      }\n\n      #main .card:hover {\n        cursor: pointer;\n      }\n\n      [face] {\n        flex: 1;\n      }\n\n      [name] {\n        background-color: var(--board-renderer-name-background-color);\n        opacity: 0.8;\n        margin-top: -35px;\n        width: 100%;\n        color: #fff;\n        font-weight: bolder;\n        font-size: 13px;\n        text-indent: 7px;\n      }\n\n      [provider] {\n        background-color: rgba(0, 0, 0, 0.7);\n        width: 100%;\n        min-height: 15px;\n        font-size: 0.6rem;\n        color: #fff;\n        text-indent: 7px;\n      }\n\n      #filter {\n        padding: var(--popup-content-padding);\n        background-color: var(--font-tools-background-color);\n        box-shadow: var(--box-shadow);\n\n        position: absolute;\n        width: 100%;\n        box-sizing: border-box;\n        z-index: 1;\n      }\n\n      #filter * {\n        font-size: 15px;\n      }\n\n      select {\n        text-transform: capitalize;\n        float: right;\n      }\n    `\n  ]\n\n  @property({ type: Array }) fonts: Array<any> = []\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) provider: string = ''\n\n  @query('#main') main!: HTMLElement\n  @query('#filter') filter!: HTMLElement\n  @query('font-creation-card') creationCard!: { reset: () => {} }\n\n  showGotoTop: boolean = false\n\n  render() {\n    var fonts = this.fonts || []\n\n    return html`\n      <div id=\"filter\">\n        <select\n          @change=${(e: Event) => {\n            this.provider = (e.currentTarget as HTMLInputElement).value\n          }}\n        >\n          <option value=\"\">--${i18next.t('text.please choose a provider')}--</option>\n          ${['google', 'custom'].map(provider => html` <option value=${provider}>${provider}</option> `)}\n        </select>\n      </div>\n\n      <div id=\"main\">\n        ${this.creatable\n          ? html`\n              <font-creation-card\n                class=\"card create\"\n                @create-font=${(e: CustomEvent) => this.onCreateFont(e)}\n              ></font-creation-card>\n            `\n          : html``}\n        ${fonts\n          .filter(font => (this.provider ? font.provider === this.provider : true))\n          .map(\n            font => html`\n              <div class=\"card\" @click=${(e: Event) => this.onClickSelect(font)}>\n                <div face>\n                  <font .face=${font.name}>ABCDEFGHIJKLMN</font>\n                  <font .face=${font.name}>abcdefghijklmn</font>\n                </div>\n                <div name>${font.name}</div>\n                <div provider>${font.provider}</div>\n                <div class=\"button-container\">\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      e.stopPropagation()\n                      this.toggleActive(font)\n                    }}\n                    >${font.active ? 'check_box' : 'check_box_outline_blank'}</mwc-icon\n                  >\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      e.stopPropagation()\n                      this.deleteFont(font)\n                    }}\n                    >delete</mwc-icon\n                  >\n                </div>\n              </div>\n            `\n          )}\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    var list = this.renderRoot.querySelector('#main')\n\n    pulltorefresh({\n      container: this.renderRoot,\n      scrollable: list,\n      refresh: () => {\n        return this.refresh()\n      }\n    })\n\n    /* for headroom */\n    this.main.addEventListener('scroll', e => {\n      const target = e.target as HTMLElement\n      this.showGotoTop = target.scrollTop !== 0\n    })\n\n    await this.requestUpdate()\n\n    var originPaddingTop = parseFloat(getComputedStyle(this.main, null).getPropertyValue('padding-top'))\n    this.main.style.paddingTop = this.filter.clientHeight + originPaddingTop + 'px'\n    var headroom = new Headroom(this.filter, {\n      scroller: this.main\n    })\n    headroom.init()\n  }\n\n  stateChanged(state: any) {\n    this.fonts = state.font\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('fonts')) {\n      this.creationCard.reset()\n    }\n  }\n\n  async refresh() {\n    return store.dispatch(actionUpdateFontList() as any)\n  }\n\n  async toggleActive(font: { id: string; active: boolean }) {\n    try {\n      await updateFont({ id: font.id, active: !font.active })\n      this.refresh()\n    } catch (e) {\n      console.error(e)\n    }\n  }\n\n  async onCreateFont(e: CustomEvent) {\n    try {\n      await createFont(e.detail)\n      this.refresh()\n    } catch (e) {\n      console.error(e)\n    }\n  }\n\n  async deleteFont(font: { id: string }) {\n    try {\n      await deleteFont(font.id)\n      this.refresh()\n    } catch (e) {\n      console.error(e)\n    }\n  }\n\n  onClickSelect(font: any) {\n    this.dispatchEvent(\n      new CustomEvent('font-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          font\n        }\n      })\n    )\n  }\n}\n"]}

package/dist/src/graphql-client.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @param {Object} listParam {filters, pagination, sortings}
+ */
+export declare function fetchFontList(listParam?: {
+    sortings?: any;
+    filters?: any;
+    pagination?: any;
+}): Promise<any>;
+/**
+ * @param {Object} font Font patch
+ */
+export declare function createFont(font: any): Promise<any>;
+/**
+ * @param {Object} font Font patch
+ */
+export declare function updateFont(font: any): Promise<any>;
+/**
+ * @param {String} id Font id
+ */
+export declare function deleteFont(id: string): Promise<any>;