@operato/font 1.0.0-beta.8 → 1.0.1

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 './font-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 './font-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/index.d.ts

@@ -0,0 +1,5 @@
+export * from './font-selector.js';
+export * from './ox-font-selector.js';
+export * from './ox-property-editor-font-selector.js';
+export * from './redux-font-actions.js';
+export { default as ReducerFont } from './redux-font-reducers.js';

package/dist/src/index.js

@@ -0,0 +1,6 @@
+export * from './font-selector.js';
+export * from './ox-font-selector.js';
+export * from './ox-property-editor-font-selector.js';
+export * from './redux-font-actions.js';
+export { default as ReducerFont } from './redux-font-reducers.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uCAAuC,CAAA;AAErD,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAA","sourcesContent":["export * from './font-selector.js'\nexport * from './ox-font-selector.js'\nexport * from './ox-property-editor-font-selector.js'\n\nexport * from './redux-font-actions.js'\nexport { default as ReducerFont } from './redux-font-reducers.js'\n"]}

package/dist/src/ox-file-selector.d.ts

@@ -0,0 +1,12 @@
+import '@material/mwc-icon';
+import '@material/mwc-icon-button';
+import { LitElement } from 'lit';
+export declare class OxFileSelector extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    accept?: string;
+    showFilename: boolean;
+    multiple: boolean;
+    _files: Array<any>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/ox-file-selector.js

@@ -0,0 +1,129 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import '@material/mwc-icon-button';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxFileSelector = class OxFileSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = 'select file';
+        this.showFilename = false;
+        this.multiple = false;
+        this._files = [];
+    }
+    render() {
+        return html `
+      <div id="input-box">
+        ${this.showFilename
+            ? html `
+              <input class="upload-name" value=${this._files.map(f => f.name).join(', ') || this.label} disabled />
+            `
+            : html ``}
+        <label for="input-file">${this.label}</label>
+        <input
+          id="input-file"
+          type="file"
+          accept="${this.accept}"
+          class="upload-hidden"
+          ?multiple=${this.multiple}
+          hidden
+          @change=${(e) => {
+            const el = e.currentTarget;
+            this.dispatchEvent(new CustomEvent('file-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    files: el.files
+                }
+            }));
+            el.value = '';
+        }}
+        />
+      </div>
+    `;
+    }
+};
+OxFileSelector.styles = [
+    css `
+      :host {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+      }
+
+      #input-box {
+        display: flex;
+        width: 100%;
+        height: 100%;
+      }
+
+      input[type='file'] {
+        position: absolute;
+        width: 0px;
+        height: 0px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      label {
+        padding: unset;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--file-selector-color, #999);
+        font-size: inherit;
+        line-height: normal;
+        vertical-align: middle;
+        background-color: var(--file-selector-bg-color, #fdfdfd);
+        cursor: pointer;
+        border: var(--file-selector-border, 1px solid #ebebeb);
+        border-radius: var(--file-selector-border-radius, 0.25em);
+      }
+
+      /* named upload */
+      .upload-name {
+        flex: 1;
+        padding: 0.5em 0.75em; /* label의 패딩값과 일치 */
+        font-size: inherit;
+        font-family: inherit;
+        line-height: normal;
+        vertical-align: middle;
+        background-color: #f5f5f5;
+        border: 1px solid #ebebeb;
+        border-bottom-color: #e2e2e2;
+        border-radius: 0.25em;
+        -webkit-appearance: none; /* 네이티브 외형 감추기 */
+        -moz-appearance: none;
+        appearance: none;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxFileSelector.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], OxFileSelector.prototype, "accept", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-filename' })
+], OxFileSelector.prototype, "showFilename", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'multiple' })
+], OxFileSelector.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Array })
+], OxFileSelector.prototype, "_files", void 0);
+OxFileSelector = __decorate([
+    customElement('ox-file-selector')
+], OxFileSelector);
+export { OxFileSelector };
+//# sourceMappingURL=ox-file-selector.js.map

package/dist/src/ox-file-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-file-selector.js","sourceRoot":"","sources":["../../src/ox-file-selector.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAkE8B,UAAK,GAAW,aAAa,CAAA;QAEA,iBAAY,GAAY,KAAK,CAAA;QAClC,aAAQ,GAAY,KAAK,CAAA;QAClD,WAAM,GAAe,EAAE,CAAA;IAoCpD,CAAC;IAlCC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA;iDACiC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK;aACzF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;kCACgB,IAAI,CAAC,KAAK;;;;oBAIxB,IAAI,CAAC,MAAM;;sBAET,IAAI,CAAC,QAAQ;;oBAEf,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,EAAE,GAAG,CAAC,CAAC,aAAiC,CAAA;YAC9C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,KAAK,EAAE,EAAE,CAAC,KAAK;iBAChB;aACF,CAAC,CACH,CAAA;YAED,EAAE,CAAC,KAAK,GAAG,EAAE,CAAA;QACf,CAAC;;;KAGN,CAAA;IACH,CAAC;CACF,CAAA;AAzGQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAA8B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACc;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;oDAA8B;AAClC;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;gDAA0B;AAClD;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CAAwB;AAtEvC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA0G1B;SA1GY,cAAc","sourcesContent":["import '@material/mwc-icon'\nimport '@material/mwc-icon-button'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-file-selector')\nexport class OxFileSelector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        overflow: hidden;\n      }\n\n      #input-box {\n        display: flex;\n        width: 100%;\n        height: 100%;\n      }\n\n      input[type='file'] {\n        position: absolute;\n        width: 0px;\n        height: 0px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n\n      label {\n        padding: unset;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--file-selector-color, #999);\n        font-size: inherit;\n        line-height: normal;\n        vertical-align: middle;\n        background-color: var(--file-selector-bg-color, #fdfdfd);\n        cursor: pointer;\n        border: var(--file-selector-border, 1px solid #ebebeb);\n        border-radius: var(--file-selector-border-radius, 0.25em);\n      }\n\n      /* named upload */\n      .upload-name {\n        flex: 1;\n        padding: 0.5em 0.75em; /* label의 패딩값과 일치 */\n        font-size: inherit;\n        font-family: inherit;\n        line-height: normal;\n        vertical-align: middle;\n        background-color: #f5f5f5;\n        border: 1px solid #ebebeb;\n        border-bottom-color: #e2e2e2;\n        border-radius: 0.25em;\n        -webkit-appearance: none; /* 네이티브 외형 감추기 */\n        -moz-appearance: none;\n        appearance: none;\n      }\n    `\n  ]\n\n  @property({ type: String }) label: string = 'select file'\n  @property({ type: String }) accept?: string\n  @property({ type: Boolean, attribute: 'show-filename' }) showFilename: boolean = false\n  @property({ type: Boolean, attribute: 'multiple' }) multiple: boolean = false\n  @property({ type: Array }) _files: Array<any> = []\n\n  render() {\n    return html`\n      <div id=\"input-box\">\n        ${this.showFilename\n          ? html`\n              <input class=\"upload-name\" value=${this._files.map(f => f.name).join(', ') || this.label} disabled />\n            `\n          : html``}\n        <label for=\"input-file\">${this.label}</label>\n        <input\n          id=\"input-file\"\n          type=\"file\"\n          accept=\"${this.accept}\"\n          class=\"upload-hidden\"\n          ?multiple=${this.multiple}\n          hidden\n          @change=${(e: Event) => {\n            const el = e.currentTarget as HTMLInputElement\n            this.dispatchEvent(\n              new CustomEvent('file-change', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  files: el.files\n                }\n              })\n            )\n\n            el.value = ''\n          }}\n        />\n      </div>\n    `\n  }\n}\n"]}

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

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/mwc-icon';
+import './font-selector';
+import { LitElement } from 'lit';
+export default class OxFontSelector extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: string;
+    properties: any;
+    popup: any;
+    render(): import("lit-html").TemplateResult<1>;
+    _onInputChanged(e: Event): void;
+    openSelector(): void;
+}

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

@@ -0,0 +1,88 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './font-selector';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+let OxFontSelector = class OxFontSelector extends LitElement {
+    render() {
+        return html `
+      <input
+        id="text"
+        type="text"
+        .value=${this.value || ''}
+        @change=${(e) => this._onInputChanged(e)}
+        .placeholder=${this.getAttribute('placeholder') || ''}
+      />
+
+      <mwc-icon @click=${() => this.openSelector()}>font_download</mwc-icon>
+    `;
+    }
+    _onInputChanged(e) {
+        this.value = e.target.value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        /*
+         * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+         * 주의. value는 object일 수도 있고, string일 수도 있다.
+         * string인 경우에는 해당 보드의 id로 해석한다.
+         */
+        var value = this.value || {};
+        var template = html `
+      <font-selector
+        .creatable=${true}
+        @font-selected=${async (e) => {
+            var font = e.detail.font;
+            this.value = font.name;
+            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+            this.popup && this.popup.close();
+        }}
+      ></font-selector>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.select font')
+        });
+    }
+};
+OxFontSelector.styles = [
+    css `
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      input[type='text'] {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+
+      mwc-icon {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxFontSelector.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxFontSelector.prototype, "properties", void 0);
+OxFontSelector = __decorate([
+    customElement('ox-font-selector')
+], OxFontSelector);
+export default OxFontSelector;
+//# sourceMappingURL=ox-font-selector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-font-selector.js","sourceRoot":"","sources":["../../src/ox-font-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAG3C,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IA4BpD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;kBACf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBAChC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;;yBAGpC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;KAC7C,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAQ;QACtB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE5B,IAAI,QAAQ,GAAG,IAAI,CAAA;;qBAEF,IAAI;yBACA,KAAK,EAAE,CAAc,EAAE,EAAE;YACxC,IAAI,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA;YACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAA;YAEtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAEhF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;SACtC,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AA9EQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAgB;AAxBxB,cAAc;IADlC,aAAa,CAAC,kBAAkB,CAAC;GACb,cAAc,CA+ElC;eA/EoB,cAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './font-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-font-selector')\nexport default class OxFontSelector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        display: inline-block;\n      }\n\n      input[type='text'] {\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n\n      mwc-icon {\n        position: absolute;\n        top: 0;\n        right: 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties: any\n\n  popup: any\n\n  render() {\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n      />\n\n      <mwc-icon @click=${() => this.openSelector()}>font_download</mwc-icon>\n    `\n  }\n\n  _onInputChanged(e: Event) {\n    this.value = (e.target as HTMLInputElement).value\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var value = this.value || {}\n\n    var template = html`\n      <font-selector\n        .creatable=${true}\n        @font-selected=${async (e: CustomEvent) => {\n          var font = e.detail.font\n          this.value = font.name\n\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n          this.popup && this.popup.close()\n        }}\n      ></font-selector>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select font')\n    })\n  }\n}\n"]}

package/dist/src/ox-property-editor-font-selector.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './ox-font-selector';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+export declare class OxPropertyEditorFontSelector extends OxPropertyEditor {
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
+}

package/dist/src/ox-property-editor-font-selector.js

@@ -0,0 +1,13 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './ox-font-selector';
+import { html } from 'lit';
+import { OxPropertyEditor } from '@operato/property-editor';
+export class OxPropertyEditorFontSelector extends OxPropertyEditor {
+    editorTemplate(value, spec) {
+        return html ` <ox-font-selector id="editor" .value=${value} .properties=${spec.property}></ox-font-selector> `;
+    }
+}
+customElements.define('ox-property-editor-font-selector', OxPropertyEditorFontSelector);
+//# sourceMappingURL=ox-property-editor-font-selector.js.map

package/dist/src/ox-property-editor-font-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-property-editor-font-selector.js","sourceRoot":"","sources":["../../src/ox-property-editor-font-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAEzE,MAAM,OAAO,4BAA6B,SAAQ,gBAAgB;IAChE,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,yCAAyC,KAAK,gBAAgB,IAAI,CAAC,QAAQ,uBAAuB,CAAA;IAC/G,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,kCAAkC,EAAE,4BAA4B,CAAC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-font-selector'\n\nimport { html } from 'lit'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\nexport class OxPropertyEditorFontSelector extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    return html` <ox-font-selector id=\"editor\" .value=${value} .properties=${spec.property}></ox-font-selector> `\n  }\n}\n\ncustomElements.define('ox-property-editor-font-selector', OxPropertyEditorFontSelector)\n"]}

package/dist/src/redux-font-actions.d.ts

@@ -0,0 +1,7 @@
+export declare const UPDATE_FONT_LIST = "UPDATE_FONT_LIST";
+export declare const CLEAR_FONT_LIST = "CLEAR_FONT_LIST";
+export declare const actionUpdateFontList: (listParams?: {
+    sortings?: any;
+    filters?: any;
+    pagination?: any;
+}) => (dispatch: any) => Promise<void>;

package/dist/src/redux-font-actions.js

@@ -0,0 +1,19 @@
+import * as client from './font-graphql-client';
+export const UPDATE_FONT_LIST = 'UPDATE_FONT_LIST';
+export const CLEAR_FONT_LIST = 'CLEAR_FONT_LIST';
+export const actionUpdateFontList = (listParams) => async (dispatch) => {
+    try {
+        const fonts = await client.fetchFontList(listParams || { filters: [] });
+        dispatch({
+            type: UPDATE_FONT_LIST,
+            list: fonts && fonts.items
+        });
+    }
+    catch (error) {
+        console.error(error);
+        dispatch({
+            type: CLEAR_FONT_LIST
+        });
+    }
+};
+//# sourceMappingURL=redux-font-actions.js.map

package/dist/src/redux-font-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"redux-font-actions.js","sourceRoot":"","sources":["../../src/redux-font-actions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAA;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAA;AAClD,MAAM,CAAC,MAAM,eAAe,GAAG,iBAAiB,CAAA;AAEhD,MAAM,CAAC,MAAM,oBAAoB,GAC/B,CAAC,UAAgE,EAAE,EAAE,CAAC,KAAK,EAAE,QAAa,EAAE,EAAE;IAC5F,IAAI;QACF,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,aAAa,CAAC,UAAU,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;QAEvE,QAAQ,CAAC;YACP,IAAI,EAAE,gBAAgB;YACtB,IAAI,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK;SAC3B,CAAC,CAAA;KACH;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACpB,QAAQ,CAAC;YACP,IAAI,EAAE,eAAe;SACtB,CAAC,CAAA;KACH;AACH,CAAC,CAAA","sourcesContent":["import * as client from './font-graphql-client'\n\nexport const UPDATE_FONT_LIST = 'UPDATE_FONT_LIST'\nexport const CLEAR_FONT_LIST = 'CLEAR_FONT_LIST'\n\nexport const actionUpdateFontList =\n  (listParams?: { sortings?: any; filters?: any; pagination?: any }) => async (dispatch: any) => {\n    try {\n      const fonts = await client.fetchFontList(listParams || { filters: [] })\n\n      dispatch({\n        type: UPDATE_FONT_LIST,\n        list: fonts && fonts.items\n      })\n    } catch (error) {\n      console.error(error)\n      dispatch({\n        type: CLEAR_FONT_LIST\n      })\n    }\n  }\n"]}