@operato/attachment 2.0.0-alpha.13 → 2.0.0-alpha.132

package/dist/src/ox-attachment-list.js

@@ -142,6 +142,7 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
                             element.setAttribute('download', record.name);
                             document.body.appendChild(element);
                             element.click();
+                            element.remove();
                         }
                     }
                 },
@@ -200,11 +201,11 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
                                 : record.category == 'video'
                                     ? html ` <video src=${record.fullpath} style="width: 100%; height: 100%;" controls></video> `
                                     : html `
-                    <div style="width: 100%; height: 100%;" etc>
-                      <mwc-icon outlined>insert_drive_file</mwc-icon>
-                      <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>
-                    </div>
-                  `;
+                      <div style="width: 100%; height: 100%;" etc>
+                        <md-icon style="--md-icon-size: 24px;">insert_drive_file</md-icon>
+                        <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>
+                      </div>
+                    `;
                         }
                     },
                     handlers: {

package/dist/src/ox-attachment-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-attachment-list.js","sourceRoot":"","sources":["../../src/ox-attachment-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport {\n  ColumnConfig,\n  DataGrist,\n  FetchOption,\n  FieldRenderer,\n  FilterValue,\n  GristData,\n  GristRecord,\n  PaginationConfig,\n  SortersConfig\n} from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\nimport { copyToClipboard, sleep } from '@operato/utils'\n\nconst FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    attachments(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        mimetype\n        encoding\n        category\n        fullpath\n        path\n        createdAt\n        updatedAt\n      }\n      total\n    }\n  }\n`\n}\n\nconst DELETE_ATTACHMENT_GQL = gql`\n  mutation DeleteAttachment($id: String!) {\n    deleteAttachment(id: $id)\n  }\n`\n\nconst CREATE_ATTACHMENTS_GQL = gql`\n  mutation ($attachments: [NewAttachment!]!) {\n    createAttachments(attachments: $attachments) {\n      id\n      name\n      description\n      mimetype\n      encoding\n      category\n      path\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-attachment-list')\nexport class OxAttachmentList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      #headroom {\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        place-content: space-between;\n        margin: var(--margin-default) 0;\n      }\n\n      select {\n        border: 0;\n        outline: none;\n        text-align: right;\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) category: string = ''\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n  @query('ox-input-file') fileUploader!: any\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n          </div>\n\n          <ox-input-file\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n            @change=${this.onCreateAttachment.bind(this)}\n          ></ox-input-file>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const { items: records, total } = await this.getAttachments({ page, limit, filters, sortings })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['updatedAt']\n      },\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'dirty'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'open_in_new',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              window.open(record.fullpath, '_blank')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'link',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              var { protocol, hostname, port } = location\n              await copyToClipboard(`${protocol}//${hostname}:${port}${record.fullpath}`)\n\n              target.setAttribute('data-tooltip', 'url copied!')\n              await sleep(2000)\n              target.removeAttribute('data-tooltip')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'delete',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              await this.deleteAttachment(record.id!)\n              this.refreshAttachments()\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'save_alt',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              const element = document.createElement('a')\n              element.setAttribute('href', record.fullpath)\n              element.setAttribute('download', record.name!)\n              document.body.appendChild(element)\n              element.click()\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search'\n        },\n        {\n          type: 'select-buttons',\n          name: 'category',\n          header: 'category',\n          record: {\n            editable: false\n          },\n          hidden: true,\n          filter: {\n            operator: 'in',\n            options: ['audio', 'video', 'image', 'text', 'application'],\n            value: this.category,\n            label: ''\n          }\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false,\n            renderer: function (value, column, record, rowIndex, owner) {\n              return record.category == 'image'\n                ? html` <img src=${record.fullpath} style=\"max-width: 100%; max-height: 100%;\" /> `\n                : record.category == 'video'\n                ? html` <video src=${record.fullpath} style=\"width: 100%; height: 100%;\" controls></video> `\n                : html`\n                    <div style=\"width: 100%; height: 100%;\" etc>\n                      <mwc-icon outlined>insert_drive_file</mwc-icon>\n                      <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>\n                    </div>\n                  `\n            } as FieldRenderer\n          },\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              this.onClickSelect(record)\n            }\n          },\n          width: 120\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: 'updated at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: 'created at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        }\n      ],\n      rows: {\n        appendable: false,\n        selectable: {\n          multiple: true\n        },\n        handlers: {\n          click: 'select-row-toggle'\n        },\n        classifier: function (\n          record: GristRecord,\n          rowIndex: number\n        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshAttachments()\n  }\n\n  onClickSelect(attachment: any) {\n    this.dispatchEvent(\n      new CustomEvent('attachment-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          attachment\n        }\n      })\n    )\n  }\n\n  async onCreateAttachment(e: CustomEvent) {\n    const files = e.detail\n\n    await this.createAttachments(files)\n    this.refreshAttachments()\n  }\n\n  async onDeleteAttachment(id: string) {\n    await this.deleteAttachment(id)\n\n    this.refreshAttachments()\n  }\n\n  async refreshAttachments() {\n    this.grist.fetch()\n  }\n\n  async getAttachments({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var attachmentListResponse = await client.query({\n      query: FETCH_ATTACHMENT_LIST_GQL(params)\n    })\n\n    return attachmentListResponse?.data?.attachments || {}\n  }\n\n  async createAttachments(files: File[]) {\n    /*\n      ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client\n    */\n\n    const response = await client.mutate({\n      mutation: CREATE_ATTACHMENTS_GQL,\n      variables: {\n        attachments: files.map(file => {\n          return { file }\n        })\n      },\n      context: {\n        hasUpload: true\n      }\n    })\n  }\n\n  async deleteAttachment(id: string) {\n    const response = await client.mutate({\n      mutation: DELETE_ATTACHMENT_GQL,\n      variables: {\n        id\n      }\n    })\n\n    return response.data\n  }\n}\n"]}
+{"version":3,"file":"ox-attachment-list.js","sourceRoot":"","sources":["../../src/ox-attachment-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport {\n  ColumnConfig,\n  DataGrist,\n  FetchOption,\n  FieldRenderer,\n  FilterValue,\n  GristData,\n  GristRecord,\n  PaginationConfig,\n  SortersConfig\n} from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\nimport { copyToClipboard, sleep } from '@operato/utils'\n\nconst FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    attachments(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        mimetype\n        encoding\n        category\n        fullpath\n        path\n        createdAt\n        updatedAt\n      }\n      total\n    }\n  }\n`\n}\n\nconst DELETE_ATTACHMENT_GQL = gql`\n  mutation DeleteAttachment($id: String!) {\n    deleteAttachment(id: $id)\n  }\n`\n\nconst CREATE_ATTACHMENTS_GQL = gql`\n  mutation ($attachments: [NewAttachment!]!) {\n    createAttachments(attachments: $attachments) {\n      id\n      name\n      description\n      mimetype\n      encoding\n      category\n      path\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-attachment-list')\nexport class OxAttachmentList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      #headroom {\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        place-content: space-between;\n        margin: var(--margin-default) 0;\n      }\n\n      select {\n        border: 0;\n        outline: none;\n        text-align: right;\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) category: string = ''\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n  @query('ox-input-file') fileUploader!: any\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n          </div>\n\n          <ox-input-file\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n            @change=${this.onCreateAttachment.bind(this)}\n          ></ox-input-file>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const { items: records, total } = await this.getAttachments({ page, limit, filters, sortings })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['updatedAt']\n      },\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'dirty'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'open_in_new',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              window.open(record.fullpath, '_blank')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'link',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              var { protocol, hostname, port } = location\n              await copyToClipboard(`${protocol}//${hostname}:${port}${record.fullpath}`)\n\n              target.setAttribute('data-tooltip', 'url copied!')\n              await sleep(2000)\n              target.removeAttribute('data-tooltip')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'delete',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              await this.deleteAttachment(record.id!)\n              this.refreshAttachments()\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'save_alt',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              const element = document.createElement('a')\n              element.setAttribute('href', record.fullpath)\n              element.setAttribute('download', record.name!)\n              document.body.appendChild(element)\n              element.click()\n              element.remove()\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search'\n        },\n        {\n          type: 'select-buttons',\n          name: 'category',\n          header: 'category',\n          record: {\n            editable: false\n          },\n          hidden: true,\n          filter: {\n            operator: 'in',\n            options: ['audio', 'video', 'image', 'text', 'application'],\n            value: this.category,\n            label: ''\n          }\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false,\n            renderer: function (value, column, record, rowIndex, owner) {\n              return record.category == 'image'\n                ? html` <img src=${record.fullpath} style=\"max-width: 100%; max-height: 100%;\" /> `\n                : record.category == 'video'\n                  ? html` <video src=${record.fullpath} style=\"width: 100%; height: 100%;\" controls></video> `\n                  : html`\n                      <div style=\"width: 100%; height: 100%;\" etc>\n                        <md-icon style=\"--md-icon-size: 24px;\">insert_drive_file</md-icon>\n                        <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>\n                      </div>\n                    `\n            } as FieldRenderer\n          },\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              this.onClickSelect(record)\n            }\n          },\n          width: 120\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: 'updated at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: 'created at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        }\n      ],\n      rows: {\n        appendable: false,\n        selectable: {\n          multiple: true\n        },\n        handlers: {\n          click: 'select-row-toggle'\n        },\n        classifier: function (\n          record: GristRecord,\n          rowIndex: number\n        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshAttachments()\n  }\n\n  onClickSelect(attachment: any) {\n    this.dispatchEvent(\n      new CustomEvent('attachment-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          attachment\n        }\n      })\n    )\n  }\n\n  async onCreateAttachment(e: CustomEvent) {\n    const files = e.detail\n\n    await this.createAttachments(files)\n    this.refreshAttachments()\n  }\n\n  async onDeleteAttachment(id: string) {\n    await this.deleteAttachment(id)\n\n    this.refreshAttachments()\n  }\n\n  async refreshAttachments() {\n    this.grist.fetch()\n  }\n\n  async getAttachments({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var attachmentListResponse = await client.query({\n      query: FETCH_ATTACHMENT_LIST_GQL(params)\n    })\n\n    return attachmentListResponse?.data?.attachments || {}\n  }\n\n  async createAttachments(files: File[]) {\n    /*\n      ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client\n    */\n\n    const response = await client.mutate({\n      mutation: CREATE_ATTACHMENTS_GQL,\n      variables: {\n        attachments: files.map(file => {\n          return { file }\n        })\n      },\n      context: {\n        hasUpload: true\n      }\n    })\n  }\n\n  async deleteAttachment(id: string) {\n    const response = await client.mutate({\n      mutation: DELETE_ATTACHMENT_GQL,\n      variables: {\n        id\n      }\n    })\n\n    return response.data\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import './ox-attachment-list.js';
 import { LitElement } from 'lit';
 export declare class OxAttachmentSelector extends LitElement {
@@ -9,7 +9,7 @@ export declare class OxAttachmentSelector extends LitElement {
     value: string;
     properties: any;
     private popup?;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     getIconByCategory(): "image" | "library_music" | "video_library" | "attachment";
     _onInputChanged(e: KeyboardEvent): void;
     openSelector(): void;

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

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import './ox-attachment-list.js';
 import { LitElement, css, html } from 'lit';
 import { openPopup } from '@operato/layout';
@@ -22,7 +22,7 @@ let OxAttachmentSelector = class OxAttachmentSelector extends LitElement {
         @change=${(e) => this._onInputChanged(e)}
       />
 
-      <mwc-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</mwc-icon>
+      <md-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</md-icon>
     `;
     }
     getIconByCategory() {
@@ -88,7 +88,7 @@ OxAttachmentSelector.styles = [
         border: 1px solid rgba(0, 0, 0, 0.2);
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         top: 0;
         right: 3px;

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

@@ -1 +1 @@
-{"version":3,"file":"ox-attachment-selector.js","sourceRoot":"","sources":["../../src/ox-attachment-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAe,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGhC,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAuBuB,UAAK,GAAW,EAAE,CAAA;IAyEhD,CAAC;IApEC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;kBACf,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;;;yBAGtC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE;KACzE,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;QACxC,QAAQ,QAAQ,EAAE,CAAC;YACjB,KAAK,OAAO;gBACV,OAAO,eAAe,CAAA;YACxB,KAAK,OAAO;gBACV,OAAO,eAAe,CAAA;YACxB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAA;YAChB,KAAK,MAAM,CAAC;YACZ,KAAK,aAAa,CAAC;YACnB;gBACE,OAAO,YAAY,CAAA;QACvB,CAAC;IACH,CAAC;IAED,eAAe,CAAC,CAAgB;QAC9B,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,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAA;QACnB,CAAC;QAED;;;;WAIG;QACH,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC5B,IAAI,EAAE,QAAQ,GAAG,aAAa,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;QAExD,IAAI,QAAQ,GAAG,IAAI,CAAA;;qBAEF,IAAI;oBACL,QAAQ;+BACG,KAAK,EAAE,CAAc,EAAE,EAAE;YAC9C,IAAI,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,UAAU,CAAA;YACpC,IAAI,CAAC,KAAK,GAAG,eAAe,UAAU,CAAC,IAAI,EAAE,CAAA;YAE7C,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,yBAAyB,CAAC;SAC5C,CAAC,CAAA;IACJ,CAAC;;AA9FM,2BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;CACF,AApBY,CAoBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAgB;AAxBhC,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CAgGhC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './ox-attachment-list.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { PopupHandle, openPopup } from '@operato/layout'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-attachment-selector')\nexport class OxAttachmentSelector 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: 3px;\n      }\n    `\n  ]\n\n  @property({ type: String }) value: string = ''\n  @property({ type: Object }) properties: any\n\n  private popup?: PopupHandle\n\n  render() {\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: KeyboardEvent) => this._onInputChanged(e)}\n      />\n\n      <mwc-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</mwc-icon>\n    `\n  }\n\n  getIconByCategory() {\n    var { category } = this.properties || {}\n    switch (category) {\n      case 'audio':\n        return 'library_music'\n      case 'video':\n        return 'video_library'\n      case 'image':\n        return 'image'\n      case 'text':\n      case 'application':\n      default:\n        return 'attachment'\n    }\n  }\n\n  _onInputChanged(e: KeyboardEvent) {\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    var { category = 'application' } = this.properties || {}\n\n    var template = html`\n      <ox-attachment-list\n        .creatable=${true}\n        .category=${category}\n        @attachment-selected=${async (e: CustomEvent) => {\n          var attachment = e.detail.attachment\n          this.value = `/attachment/${attachment.path}`\n\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n          this.popup && this.popup.close()\n        }}\n      ></ox-attachment-list>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select attachment')\n    })\n  }\n}\n"]}
+{"version":3,"file":"ox-attachment-selector.js","sourceRoot":"","sources":["../../src/ox-attachment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport './ox-attachment-list.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { PopupHandle, openPopup } from '@operato/layout'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-attachment-selector')\nexport class OxAttachmentSelector 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      md-icon {\n        position: absolute;\n        top: 0;\n        right: 3px;\n      }\n    `\n  ]\n\n  @property({ type: String }) value: string = ''\n  @property({ type: Object }) properties: any\n\n  private popup?: PopupHandle\n\n  render() {\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: KeyboardEvent) => this._onInputChanged(e)}\n      />\n\n      <md-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</md-icon>\n    `\n  }\n\n  getIconByCategory() {\n    var { category } = this.properties || {}\n    switch (category) {\n      case 'audio':\n        return 'library_music'\n      case 'video':\n        return 'video_library'\n      case 'image':\n        return 'image'\n      case 'text':\n      case 'application':\n      default:\n        return 'attachment'\n    }\n  }\n\n  _onInputChanged(e: KeyboardEvent) {\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    var { category = 'application' } = this.properties || {}\n\n    var template = html`\n      <ox-attachment-list\n        .creatable=${true}\n        .category=${category}\n        @attachment-selected=${async (e: CustomEvent) => {\n          var attachment = e.detail.attachment\n          this.value = `/attachment/${attachment.path}`\n\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n          this.popup && this.popup.close()\n        }}\n      ></ox-attachment-list>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select attachment')\n    })\n  }\n}\n"]}