@fmsim/board 1.0.83 → 2.0.0-beta.2

package/demo/index-player.html

@@ -80,11 +80,7 @@
                 mode: 0,
                 refProvider: provider,
                 handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler'],
-                layers: [
-                  { type: 'decorator-layer' },
-                  { type: 'scroll-layer' },
-                  { type: 'movement-layer', id: 'movement-layer' }
-                ]
+                layers: [{ type: 'scroll-layer' }, { type: 'movement-layer', id: 'movement-layer' }]
               })
             }
             resolve(scene, board)

package/demo/index-viewer.html

@@ -80,11 +80,7 @@
                 mode: 0,
                 refProvider: provider,
                 handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler'],
-                layers: [
-                  { type: 'decorator-layer' },
-                  { type: 'scroll-layer' },
-                  { type: 'movement-layer', id: 'movement-layer' }
-                ]
+                layers: [{ type: 'scroll-layer' }, { type: 'movement-layer', id: 'movement-layer' }]
               })
             }
             resolve(scene, board)

package/demo/index.html

@@ -80,11 +80,7 @@
                 mode: 0,
                 refProvider: provider,
                 handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler'],
-                layers: [
-                  { type: 'decorator-layer' },
-                  { type: 'scroll-layer' },
-                  { type: 'movement-layer', id: 'movement-layer' }
-                ]
+                layers: [{ type: 'scroll-layer' }, { type: 'movement-layer', id: 'movement-layer' }]
               })
             }
             resolve(scene, board)

package/dist/src/component/restful-attachment-creation-card.js

@@ -156,7 +156,7 @@ RestfulAttachmentCreationCard.styles = [
         background-color: #fffde9;
       }
 
-      [front] mwc-icon {
+      [front] md-icon {
         margin-top: 55px;
         display: block;
         font-size: 3.5em;

package/dist/src/component/restful-attachment-creation-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"restful-attachment-creation-card.js","sourceRoot":"","sources":["../../../src/component/restful-attachment-creation-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/image-uploader-ui/client/image-upload-previewer'\nimport './restful-file-selector'\n\nimport { LitElement, html, css, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FileDropHelper } from '@operato/utils'\n\nconst btnAddBoard = require('../../../icons/board/btn-add-board.svg')\n\n@customElement('restful-attachment-creation-card')\nexport class RestfulAttachmentCreationCard 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        box-shadow: var(--box-shadow);\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        text-align: center;\n        font-size: 0.8em;\n        color: var(--card-list-create-color);\n        text-transform: capitalize;\n      }\n\n      :host(.candrop) [front],\n      :host(.candrop) [back] {\n        border-width: 2px;\n        background-color: #fffde9;\n      }\n\n      [front] mwc-icon {\n        margin-top: 55px;\n        display: block;\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      }\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: repeat(10, 1fr);\n        grid-template-rows: min-content min-content 1fr min-content;\n        grid-row-gap: 7px;\n        justify-content: center;\n        align-items: center;\n      }\n\n      [back] form 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 input,\n      [back] form 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        padding: var(--card-list-create-input-padding);\n        font: var(--card-list-create-input-font);\n        color: var(--card-list-create-input-color);\n      }\n\n      restful-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      #thumbnail-area {\n        grid-column: span 10;\n        align-self: stretch;\n        text-align: center;\n        overflow: hidden;\n        overflow-x: auto;\n        white-space: nowrap;\n      }\n\n      image-upload-previewer {\n        display: inline-block;\n        height: 100%;\n      }\n\n      [back] input[type='submit'] {\n        background-color: var(--button-background-color) !important;\n        margin: var(--button-margin);\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        margin: 0;\n      }\n\n      .btn-add-board {\n        width: 3.8em;\n        height: 3.8em;\n        margin: auto;\n        margin-top: 20%;\n        background: url(${unsafeCSS(btnAddBoard)}) no-repeat;\n        display: block;\n      }\n    `\n  ]\n\n  @property({ type: String }) defaultCategory?: string\n  @property({ type: Array }) categories: string[] = []\n  @property({ type: Array }) _files: any[] = []\n  @property({ type: String }) _currentCategory?: string\n  @property({ type: String }) fileId?: string\n\n  render() {\n    var categories = this.categories || []\n\n    return html`\n      <div @click=${(e: Event) => this.onClickFlip(e)} front>\n        <i class=\"btn-add-board\"></i>\n        ${i18next.t('text.create attachment')}\n      </div>\n\n      <div @click=${(e: Event) => this.onClickFlip(e)} back>\n        <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n          <label>${i18next.t('label.category')}</label>\n          <select\n            .value=${String(this.defaultCategory)}\n            name=\"category\"\n            @change=${(e: Event) => {\n              this._currentCategory = (e.currentTarget as HTMLSelectElement).value\n            }}\n          >\n            <option value=\"\">--${i18next.t('text.please choose a category')}--</option>\n            ${categories.map(\n              category => html`\n                <option value=${category} ?selected=${this.defaultCategory == category}>${category}</option>\n              `\n            )}\n          </select>\n\n          <label>${i18next.t('label.file')}</label>\n          <restful-file-selector\n            name=\"file\"\n            label=${String(i18next.t('label.select file'))}\n            accept=\"${this._currentCategory || '*'}/*\"\n            multiple\n            @file-change=${(e: Event) => {\n              this.fileId = (e as CustomEvent).detail.fileId\n              this._files = Array.from((e as CustomEvent).detail.files)\n            }}\n          ></restful-file-selector>\n\n          <div id=\"thumbnail-area\">\n            ${this._files.map(file => html` <image-upload-previewer .file=${file}></image-upload-previewer> `)}\n          </div>\n\n          <input type=\"submit\" value=${String(i18next.t('button.create'))} />\n        </form>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n  }\n\n  onClickFlip(e: Event) {\n    const currentTarget = e.currentTarget as HTMLElement\n    const target = e.target as HTMLElement\n\n    if (\n      currentTarget.hasAttribute('front') ||\n      (currentTarget.hasAttribute('back') && target.tagName != 'INPUT' && target.tagName != 'SELECT')\n    ) {\n      this.classList.toggle('flipped')\n    }\n\n    e.stopPropagation()\n  }\n\n  onClickSubmit(e: Event) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    var form = e.target as HTMLFormElement\n\n    var category = ((form.elements as any)['category'] as HTMLSelectElement).value\n    var files = this._files\n    var fileId = this.fileId\n\n    const extension = fileId?.substring(fileId.length - 3)\n    if (!extension || extension !== extension?.toLowerCase()) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'Error : File extension is not available.',\n            ex: 'Error : File extension is not available.'\n          }\n        })\n      )\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('create-attachment', {\n        detail: {\n          category,\n          files,\n          fileId\n        }\n      })\n    )\n  }\n\n  reset() {\n    var form = this.renderRoot.querySelector('form')\n    if (form) {\n      form.reset()\n      this._files = []\n    }\n\n    this.classList.remove('flipped')\n  }\n}\n"]}
+{"version":3,"file":"restful-attachment-creation-card.js","sourceRoot":"","sources":["../../../src/component/restful-attachment-creation-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/image-uploader-ui/client/image-upload-previewer'\nimport './restful-file-selector'\n\nimport { LitElement, html, css, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FileDropHelper } from '@operato/utils'\n\nconst btnAddBoard = require('../../../icons/board/btn-add-board.svg')\n\n@customElement('restful-attachment-creation-card')\nexport class RestfulAttachmentCreationCard 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        box-shadow: var(--box-shadow);\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        text-align: center;\n        font-size: 0.8em;\n        color: var(--card-list-create-color);\n        text-transform: capitalize;\n      }\n\n      :host(.candrop) [front],\n      :host(.candrop) [back] {\n        border-width: 2px;\n        background-color: #fffde9;\n      }\n\n      [front] md-icon {\n        margin-top: 55px;\n        display: block;\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      }\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: repeat(10, 1fr);\n        grid-template-rows: min-content min-content 1fr min-content;\n        grid-row-gap: 7px;\n        justify-content: center;\n        align-items: center;\n      }\n\n      [back] form 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 input,\n      [back] form 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        padding: var(--card-list-create-input-padding);\n        font: var(--card-list-create-input-font);\n        color: var(--card-list-create-input-color);\n      }\n\n      restful-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      #thumbnail-area {\n        grid-column: span 10;\n        align-self: stretch;\n        text-align: center;\n        overflow: hidden;\n        overflow-x: auto;\n        white-space: nowrap;\n      }\n\n      image-upload-previewer {\n        display: inline-block;\n        height: 100%;\n      }\n\n      [back] input[type='submit'] {\n        background-color: var(--button-background-color) !important;\n        margin: var(--button-margin);\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        margin: 0;\n      }\n\n      .btn-add-board {\n        width: 3.8em;\n        height: 3.8em;\n        margin: auto;\n        margin-top: 20%;\n        background: url(${unsafeCSS(btnAddBoard)}) no-repeat;\n        display: block;\n      }\n    `\n  ]\n\n  @property({ type: String }) defaultCategory?: string\n  @property({ type: Array }) categories: string[] = []\n  @property({ type: Array }) _files: any[] = []\n  @property({ type: String }) _currentCategory?: string\n  @property({ type: String }) fileId?: string\n\n  render() {\n    var categories = this.categories || []\n\n    return html`\n      <div @click=${(e: Event) => this.onClickFlip(e)} front>\n        <i class=\"btn-add-board\"></i>\n        ${i18next.t('text.create attachment')}\n      </div>\n\n      <div @click=${(e: Event) => this.onClickFlip(e)} back>\n        <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n          <label>${i18next.t('label.category')}</label>\n          <select\n            .value=${String(this.defaultCategory)}\n            name=\"category\"\n            @change=${(e: Event) => {\n              this._currentCategory = (e.currentTarget as HTMLSelectElement).value\n            }}\n          >\n            <option value=\"\">--${i18next.t('text.please choose a category')}--</option>\n            ${categories.map(\n              category => html`\n                <option value=${category} ?selected=${this.defaultCategory == category}>${category}</option>\n              `\n            )}\n          </select>\n\n          <label>${i18next.t('label.file')}</label>\n          <restful-file-selector\n            name=\"file\"\n            label=${String(i18next.t('label.select file'))}\n            accept=\"${this._currentCategory || '*'}/*\"\n            multiple\n            @file-change=${(e: Event) => {\n              this.fileId = (e as CustomEvent).detail.fileId\n              this._files = Array.from((e as CustomEvent).detail.files)\n            }}\n          ></restful-file-selector>\n\n          <div id=\"thumbnail-area\">\n            ${this._files.map(file => html` <image-upload-previewer .file=${file}></image-upload-previewer> `)}\n          </div>\n\n          <input type=\"submit\" value=${String(i18next.t('button.create'))} />\n        </form>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n  }\n\n  onClickFlip(e: Event) {\n    const currentTarget = e.currentTarget as HTMLElement\n    const target = e.target as HTMLElement\n\n    if (\n      currentTarget.hasAttribute('front') ||\n      (currentTarget.hasAttribute('back') && target.tagName != 'INPUT' && target.tagName != 'SELECT')\n    ) {\n      this.classList.toggle('flipped')\n    }\n\n    e.stopPropagation()\n  }\n\n  onClickSubmit(e: Event) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    var form = e.target as HTMLFormElement\n\n    var category = ((form.elements as any)['category'] as HTMLSelectElement).value\n    var files = this._files\n    var fileId = this.fileId\n\n    const extension = fileId?.substring(fileId.length - 3)\n    if (!extension || extension !== extension?.toLowerCase()) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: 'Error : File extension is not available.',\n            ex: 'Error : File extension is not available.'\n          }\n        })\n      )\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('create-attachment', {\n        detail: {\n          category,\n          files,\n          fileId\n        }\n      })\n    )\n  }\n\n  reset() {\n    var form = this.renderRoot.querySelector('form')\n    if (form) {\n      form.reset()\n      this._files = []\n    }\n\n    this.classList.remove('flipped')\n  }\n}\n"]}

package/dist/src/component/restful-attachment-selector.js

@@ -3,7 +3,7 @@ import './restful-attachment-creation-card.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { ScrollbarStyles, TooltipStyles } from '@operato/styles';
+import { ScrollbarStyles } from '@operato/styles';
 import { sleep } from '@operato/utils';
 import { fetchAttachmentList, getRestServiceFullPath, createAttachment, deleteAttachment, deleteFile } from '@fmsim/api/restful.js';
 const btnOpenDropboxColor = require('../../../icons/group-bar/btn-open-dropbox-color.png');
@@ -265,7 +265,6 @@ let RestfulAttachmentSelector = class RestfulAttachmentSelector extends localize
 };
 RestfulAttachmentSelector.styles = [
     ScrollbarStyles,
-    TooltipStyles,
     css `
       :host {
         display: flex;
@@ -336,7 +335,7 @@ RestfulAttachmentSelector.styles = [
         max-width: 100%;
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         right: 0px;
         text-align: center;
@@ -348,8 +347,8 @@ RestfulAttachmentSelector.styles = [
         color: var(--attachment-selector-icon-color);
       }
 
-      mwc-icon:hover,
-      mwc-icon:active,
+      md-icon:hover,
+      md-icon:active,
       span:hover,
       span:active {
         background-color: var(--primary-color);
@@ -381,8 +380,8 @@ RestfulAttachmentSelector.styles = [
         float: right;
       }
 
-      [etc] mwc-icon:hover,
-      [etc] mwc-icon:active {
+      [etc] md-icon:hover,
+      [etc] md-icon:active {
         background-color: initial;
         color: initial;
       }
@@ -393,7 +392,7 @@ RestfulAttachmentSelector.styles = [
         position: relative;
       }
 
-      [etc] mwc-icon {
+      [etc] md-icon {
         position: initial;
         opacity: 0.2;
         width: initial;
@@ -459,7 +458,7 @@ RestfulAttachmentSelector.styles = [
         background-color: #f8c2cc;
       }
 
-      mwc-icon {
+      md-icon {
         vertical-align: middle;
       }
 

package/dist/src/component/restful-attachment-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"restful-attachment-selector.js","sourceRoot":"","sources":["../../../src/component/restful-attachment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './restful-attachment-creation-card.js'\n\nimport { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nimport {\n  fetchAttachmentList,\n  getRestServiceFullPath,\n  createAttachment,\n  deleteAttachment,\n  deleteFile\n} from '@fmsim/api/restful.js'\n\nimport { RestfulAttachmentCreationCard } from './restful-attachment-creation-card.js'\n\nconst btnOpenDropboxColor = require('../../../icons/group-bar/btn-open-dropbox-color.png')\nconst btnCloseDropbox = require('../../../icons/group-bar/btn-close-dropbox.png')\nconst btnAddList = require('../../../icons/group-bar/btn-add-list.png')\nconst btnZoom = require('../../../icons/attachment/btn-zoom.svg')\nconst btnZoomHover = require('../../../icons/attachment/btn-zoom-hover.svg')\nconst btnCopyLink = require('../../../icons/attachment/btn-copy-link.svg')\nconst btnCopyLinkHover = require('../../../icons/attachment/btn-copy-link-hover.svg')\nconst btnDelete = require('../../../icons/attachment/btn-delete.svg')\nconst btnDeleteHover = require('../../../icons/attachment/btn-delete-hover.svg')\nconst btnDownload = require('../../../icons/attachment/btn-download.svg')\nconst btnDownloadHover = require('../../../icons/attachment/btn-download-hover.svg')\nconst file = require('../../../icons/attachment/file.svg')\n\n@customElement('restful-attachment-selector')\nexport class RestfulAttachmentSelector extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background-color: #fff;\n        /* --card-list-create-color: var(--primary-color); */\n\n        position: relative;\n      }\n\n      :host(.candrop) {\n        background: orange;\n        cursor: pointer;\n      }\n\n      #main {\n        overflow: auto;\n        padding: var(--popup-content-padding);\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n        grid-auto-rows: var(--card-list-rows-height);\n        grid-gap: 20px;\n        padding-top: 10px !important;\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(--attachment-selector-border);\n        background-color: var(--attachment-selector-background-color);\n\n        position: relative;\n      }\n\n      #main .card.create {\n        overflow: visible;\n        background-color: initial;\n        min-height: 120px;\n      }\n\n      #main .card:hover {\n        cursor: pointer;\n      }\n\n      .name {\n        background-color: var(--primary-color);\n        opacity: 0.8;\n        position: absolute;\n        bottom: 0px;\n        width: 100%;\n        padding: 2px 5px;\n        font: var(--attachment-selector-name-font);\n        color: #fff;\n        text-indent: 7px;\n      }\n\n      [show] {\n        height: 100%;\n      }\n\n      .card img,\n      .card video {\n        max-height: 100%;\n        max-width: 100%;\n      }\n\n      mwc-icon {\n        position: absolute;\n        right: 0px;\n        text-align: center;\n\n        background-color: var(--attachment-selector-icon-background-color);\n        width: var(--attachment-selector-icon-size);\n        height: var(--attachment-selector-icon-size);\n        font: var(--attachment-selector-icon-font);\n        color: var(--attachment-selector-icon-color);\n      }\n\n      mwc-icon:hover,\n      mwc-icon:active,\n      span:hover,\n      span:active {\n        background-color: var(--primary-color);\n        color: #fff;\n      }\n\n      [open-in-new] {\n        top: 0px;\n      }\n\n      [delete] {\n        top: 35px;\n      }\n\n      [download] {\n        top: 70px;\n        border-bottom-left-radius: 12px;\n      }\n\n      #filter {\n        padding: 12px 12px 12px 20px;\n        background-color: var(--group-bar-background-color);\n        height: 28px;\n        z-index: 1;\n      }\n\n      select {\n        text-transform: capitalize;\n        float: right;\n      }\n\n      [etc] mwc-icon:hover,\n      [etc] mwc-icon:active {\n        background-color: initial;\n        color: initial;\n      }\n\n      [etc] {\n        margin: auto;\n        margin-top: 45px;\n        position: relative;\n      }\n\n      [etc] mwc-icon {\n        position: initial;\n        opacity: 0.2;\n        width: initial;\n        height: initial;\n\n        font: var(--attachment-selector-etc-icon-font);\n        color: var(--attachment-selector-etc-icon-color);\n      }\n\n      [etc] span {\n        position: absolute;\n        bottom: 25px;\n        right: 8px;\n        padding: 1px 2px;\n        color: #fff;\n        text-transform: uppercase;\n        opacity: 0.8;\n\n        background-color: var(--attachment-selector-etc-background-color);\n        font: var(--attachment-selector-etc-font);\n      }\n\n      ul {\n        display: flex;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        white-space: nowrap;\n        clear: both;\n      }\n\n      li {\n        padding: 0px 3px;\n      }\n\n      li:hover {\n        background-color: rgba(255, 180, 180, 1);\n      }\n\n      li a {\n        width: calc(100% - 24px);\n        padding: 5px 4px 1px 4px;\n        text-decoration: none;\n        font-size: 12px;\n        font-weight: bold;\n        color: rgb(233, 103, 128);\n        display: inline-block;\n      }\n\n      li span {\n        height: 16px;\n        margin-top: 4px;\n        border-radius: 2px;\n        float: right;\n        display: none;\n      }\n\n      li:hover span {\n        display: inline-block;\n      }\n\n      li span:hover {\n        background-color: #f8c2cc;\n      }\n\n      mwc-icon {\n        vertical-align: middle;\n      }\n\n      .group-select-box {\n        position: absolute;\n        width: 200px;\n        min-height: 22px;\n        font-size: 12px;\n        font-weight: bold;\n        color: #e96780;\n        border: 1px solid #ccc;\n        padding: 5px;\n        background-color: #fff;\n        float: left;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .group-select-box span {\n        background-color: #fff !important;\n        color: #e96780 !important;\n      }\n\n      .group-select-box > span:nth-child(1) {\n        padding: 4px 0 0 6px;\n        float: left;\n      }\n\n      .group-select-box > span:nth-child(2) {\n        float: right;\n        margin-top: 1px;\n      }\n\n      .select-box {\n        display: none;\n      }\n\n      .select-box.on {\n        display: block;\n        padding-top: 2px;\n      }\n\n      .select-box.active {\n        background-color: #1344;\n      }\n\n      .add-group {\n        cursor: pointer;\n      }\n\n      .btn-open-dropbox {\n        width: 8px;\n        height: 5px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnOpenDropboxColor)}) no-repeat;\n      }\n\n      .btn-close-dropbox {\n        width: 8px;\n        height: 5px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnCloseDropbox)}) no-repeat;\n      }\n\n      .btn-add-list-wrap {\n        margin: 5px 0 0 172px;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .btn-add-list {\n        width: 9px;\n        height: 9px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnAddList)}) no-repeat;\n      }\n\n      select {\n        position: absolute;\n        width: 150px;\n        min-height: 22px;\n        font-size: 12px;\n        font-weight: bold;\n        color: #e96780;\n        border: 1px solid #ccc;\n        padding: 5px;\n        background-color: #fff;\n        z-index: 1;\n        float: left;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .card > span,\n      .card > a > span {\n        position: absolute;\n        width: 35px;\n        height: 35px;\n        right: 0px;\n      }\n\n      .btn-zoom-cover {\n        top: 0px;\n      }\n      .btn-zoom {\n        width: 20px;\n        height: 20px;\n        margin: 7px;\n        background: url(${unsafeCSS(btnZoom)}) no-repeat;\n        display: inline-block;\n      }\n      .btn-zoom-cover:hover > .btn-zoom {\n        background: url(${unsafeCSS(btnZoomHover)}) no-repeat;\n      }\n\n      .btn-copy-link {\n        width: 20px;\n        height: 20px;\n        margin: 7px;\n        background: url(${unsafeCSS(btnCopyLink)}) no-repeat;\n        display: inline-block;\n      }\n      .card > span:hover > .btn-copy-link {\n        background: url(${unsafeCSS(btnCopyLinkHover)}) no-repeat;\n      }\n\n      .btn-delete {\n        width: 20px;\n        height: 20px;\n        margin: 7px;\n        background: url(${unsafeCSS(btnDelete)}) no-repeat;\n        display: inline-block;\n      }\n      .card > span:hover > .btn-delete {\n        background: url(${unsafeCSS(btnDeleteHover)}) no-repeat;\n      }\n\n      .btn-download {\n        width: 20px;\n        height: 20px;\n        margin: 7px;\n        background: url(${unsafeCSS(btnDownload)}) no-repeat;\n        display: inline-block;\n      }\n      .btn-download-cover:hover > .btn-download {\n        background: url(${unsafeCSS(btnDownloadHover)}) no-repeat;\n      }\n\n      .file {\n        width: 52px;\n        height: 65px;\n        background: url(${unsafeCSS(file)}) no-repeat;\n        display: inline-block;\n      }\n    `\n  ]\n\n  @property({ type: Array }) categories: string[] = ['audio', 'video', 'image', 'text', 'application']\n  @property({ type: Array }) attachments: any[] = []\n  @property({ type: String }) category?: string\n  @property({ type: Number }) _page: number = 1\n  @property({ type: Number }) _total: number = 0\n  @property({ type: Boolean }) creatable?: boolean\n  @property({ type: String }) selectBoxToggle?: string | null\n  @property({ type: String }) btnDropBoxIcon: string = 'btn-open-dropbox'\n  @property({ type: String }) userName?: string = localStorage.getItem('FMB_userNM') || ''\n\n  @query('#main') main!: HTMLDivElement\n  @query('attachment-creation-card') creationCard!: RestfulAttachmentCreationCard\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <div class=\"group-select-box\" @click=${this.toggleSelectBox}>\n          ${this.category\n            ? html` <span>${this.category}</span> `\n            : html` <span>${i18next.t('text.please choose a category')}</span> `}\n          <span><i class=${this.btnDropBoxIcon}></i></span>\n          <ul class=${`select-box ${this.selectBoxToggle}`}>\n            <li\n              value=\"\"\n              @click=${(e: Event) => {\n                this.category = ''\n                this.requestUpdate()\n              }}\n            >\n              <a>${i18next.t('text.please choose a category')}</a>\n            </li>\n            ${this.categories.map(\n              category =>\n                html` <li\n                  value=${category}\n                  @click=${(e: Event) => {\n                    this.category = category\n                    this.requestUpdate()\n                  }}\n                >\n                  <a>${category}</a>\n                </li>`\n            )}\n          </ul>\n        </div>\n      </div>\n\n      <div id=\"main\">\n        ${this.creatable\n          ? html`\n              <restful-attachment-creation-card\n                class=\"card create\"\n                .categories=${this.categories}\n                .defaultCategory=${this.category}\n                @create-attachment=${(e: Event) => this.onCreateAttachment(e)}\n                @file-drop=${(e: Event) => this.onAttachmentDropped(e)}\n              ></restful-attachment-creation-card>\n            `\n          : html``}\n        ${this.attachments.map(attachment => {\n          var url = getRestServiceFullPath() + attachment.fullpath\n          return html`\n            <div class=\"card\" @click=${(e: Event) => this.onClickSelect(attachment)}>\n              <div show>\n                ${attachment.category == 'image'\n                  ? html` <img src=${url} /> `\n                  : attachment.category == 'video'\n                    ? html` <video src=${url} controls></video> `\n                    : html`\n                        <div etc>\n                          <i class=\"file\"></i>\n                          <span>${attachment.path?.substr(attachment.path.lastIndexOf('.'))}</span>\n                        </div>\n                      `}\n              </div>\n              <a target=\"_blank\" href=${url}>\n                <span class=\"btn-zoom-cover\"><i class=\"btn-zoom\"></i></span>\n              </a>\n              <div class=\"name\">${attachment.name}</div>\n              <span @click=${(e: Event) => this.onDeleteAttachment(attachment.id)} delete>\n                <i class=\"btn-delete\"></i>\n              </span>\n              <a href=${getRestServiceFullPath() + attachment.download} download=${attachment.name}>\n                <span class=\"btn-download-cover\" download><i class=\"btn-download\"></i></span>\n              </a>\n            </div>\n          `\n        })}\n      </div>\n    `\n  }\n\n  toggleSelectBox() {\n    if (this.selectBoxToggle === 'on') {\n      this.selectBoxToggle = null\n      this.btnDropBoxIcon = 'btn-close-dropbox'\n    } else {\n      this.selectBoxToggle = 'on'\n      this.btnDropBoxIcon = 'btn-open-dropbox'\n    }\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('click', async e => {\n      var target = e.target as HTMLElement\n      var url = target.getAttribute('data-clipboard-url')\n      if (url) {\n        var { protocol, hostname, port } = location\n        await this.copy(`${protocol}//${hostname}:${port}${url}`)\n\n        target.setAttribute('data-tooltip', 'url copied!')\n        await sleep(2000)\n        target.removeAttribute('data-tooltip')\n      }\n    })\n\n    this.refreshAttachments()\n  }\n\n  updated(changed: PropertyValues<this>) {\n    if (changed.has('category')) {\n      this.refreshAttachments()\n    }\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 onAttachmentDropped(e: Event) {\n    var files = (e as CustomEvent).detail\n\n    await this.createAttachments('', files)\n    this.refreshAttachments()\n  }\n\n  async onCreateAttachment(e: Event) {\n    var { category, files, fileId } = (e as CustomEvent).detail\n\n    files = Array.from(files)\n    await this.createAttachments(category, files, fileId)\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    var attachments = await this.getAttachments()\n    this.attachments = [...attachments]\n\n    if (this.creationCard) {\n      this.creationCard.reset()\n    }\n  }\n\n  async appendAttachments() {\n    var attachments = await this.getAttachments({ page: this._page + 1 })\n    this.attachments = [...this.attachments, ...attachments]\n  }\n\n  async getAttachments({ page = 1, limit = 1000 } = {}) {\n    var filters = [] as any[]\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.category)\n      filters.push({\n        name: 'category',\n        operator: 'eq',\n        value: this.category\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    let response = (await fetchAttachmentList(params))?.data\n    if (!response || !response.status) {\n      throw new Error('Error : fetchAttachmentList')\n    }\n\n    let attachmentListResponse = response.attachments\n\n    if (!attachmentListResponse || !attachmentListResponse.items.length) return []\n    attachmentListResponse.items.forEach((attachment: any) => {\n      attachment.fullpath = '/images/' + attachment.path\n      attachment.download = '/downloadFile/' + attachment.path + '/' + encodeURIComponent(attachment.name)\n    })\n    this._total = attachmentListResponse.total\n    this._page = page\n\n    return attachmentListResponse.items\n  }\n\n  async createAttachments(category: string, files: any[], fileId?: string) {\n    try {\n      files[0].category = category\n      files[0].fileId = fileId\n      const body = {\n        category: files[0].category,\n        name: files[0].name,\n        size: files[0].size,\n        type: files[0].type,\n        fileId: files[0].fileId,\n        userName: this.userName\n      }\n      let result = (await createAttachment(body))?.data\n      if (!result || !result.status) throw new Error('Create Error')\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: ex,\n            ex: ex\n          }\n        })\n      )\n    }\n  }\n\n  async deleteAttachment(id: string) {\n    let server = 'Primary'\n    try {\n      const result = (await deleteAttachment(id))?.data\n      if (!result || !result.status) throw new Error('DB Error')\n\n      const deleteFileResult = (await deleteFile(result.attachment.path, 'primary'))?.data\n      if (!deleteFileResult || !deleteFileResult.status) {\n        throw new Error('Primary Server File Delete Error')\n      }\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: server + ' Server File Delete Error // ' + ex,\n            ex: ex\n          }\n        })\n      )\n    }\n  }\n\n  async copy(copied: any) {\n    var textArea = document.createElement('textarea')\n    textArea.style.position = 'absolute'\n    textArea.style.opacity = '0'\n    textArea.value = copied\n    document.body.appendChild(textArea)\n\n    await sleep(100)\n\n    textArea.select()\n\n    document.execCommand('copy')\n    document.body.removeChild(textArea)\n  }\n}\n"]}
+{"version":3,"file":"restful-attachment-selector.js","sourceRoot":"","sources":["../../../src/component/restful-attachment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './restful-attachment-creation-card.js'\n\nimport { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nimport {\n  fetchAttachmentList,\n  getRestServiceFullPath,\n  createAttachment,\n  deleteAttachment,\n  deleteFile\n} from '@fmsim/api/restful.js'\n\nimport { RestfulAttachmentCreationCard } from './restful-attachment-creation-card.js'\n\nconst btnOpenDropboxColor = require('../../../icons/group-bar/btn-open-dropbox-color.png')\nconst btnCloseDropbox = require('../../../icons/group-bar/btn-close-dropbox.png')\nconst btnAddList = require('../../../icons/group-bar/btn-add-list.png')\nconst btnZoom = require('../../../icons/attachment/btn-zoom.svg')\nconst btnZoomHover = require('../../../icons/attachment/btn-zoom-hover.svg')\nconst btnCopyLink = require('../../../icons/attachment/btn-copy-link.svg')\nconst btnCopyLinkHover = require('../../../icons/attachment/btn-copy-link-hover.svg')\nconst btnDelete = require('../../../icons/attachment/btn-delete.svg')\nconst btnDeleteHover = require('../../../icons/attachment/btn-delete-hover.svg')\nconst btnDownload = require('../../../icons/attachment/btn-download.svg')\nconst btnDownloadHover = require('../../../icons/attachment/btn-download-hover.svg')\nconst file = require('../../../icons/attachment/file.svg')\n\n@customElement('restful-attachment-selector')\nexport class RestfulAttachmentSelector extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background-color: #fff;\n        /* --card-list-create-color: var(--primary-color); */\n\n        position: relative;\n      }\n\n      :host(.candrop) {\n        background: orange;\n        cursor: pointer;\n      }\n\n      #main {\n        overflow: auto;\n        padding: var(--popup-content-padding);\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n        grid-auto-rows: var(--card-list-rows-height);\n        grid-gap: 20px;\n        padding-top: 10px !important;\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(--attachment-selector-border);\n        background-color: var(--attachment-selector-background-color);\n\n        position: relative;\n      }\n\n      #main .card.create {\n        overflow: visible;\n        background-color: initial;\n        min-height: 120px;\n      }\n\n      #main .card:hover {\n        cursor: pointer;\n      }\n\n      .name {\n        background-color: var(--primary-color);\n        opacity: 0.8;\n        position: absolute;\n        bottom: 0px;\n        width: 100%;\n        padding: 2px 5px;\n        font: var(--attachment-selector-name-font);\n        color: #fff;\n        text-indent: 7px;\n      }\n\n      [show] {\n        height: 100%;\n      }\n\n      .card img,\n      .card video {\n        max-height: 100%;\n        max-width: 100%;\n      }\n\n      md-icon {\n        position: absolute;\n        right: 0px;\n        text-align: center;\n\n        background-color: var(--attachment-selector-icon-background-color);\n        width: var(--attachment-selector-icon-size);\n        height: var(--attachment-selector-icon-size);\n        font: var(--attachment-selector-icon-font);\n        color: var(--attachment-selector-icon-color);\n      }\n\n      md-icon:hover,\n      md-icon:active,\n      span:hover,\n      span:active {\n        background-color: var(--primary-color);\n        color: #fff;\n      }\n\n      [open-in-new] {\n        top: 0px;\n      }\n\n      [delete] {\n        top: 35px;\n      }\n\n      [download] {\n        top: 70px;\n        border-bottom-left-radius: 12px;\n      }\n\n      #filter {\n        padding: 12px 12px 12px 20px;\n        background-color: var(--group-bar-background-color);\n        height: 28px;\n        z-index: 1;\n      }\n\n      select {\n        text-transform: capitalize;\n        float: right;\n      }\n\n      [etc] md-icon:hover,\n      [etc] md-icon:active {\n        background-color: initial;\n        color: initial;\n      }\n\n      [etc] {\n        margin: auto;\n        margin-top: 45px;\n        position: relative;\n      }\n\n      [etc] md-icon {\n        position: initial;\n        opacity: 0.2;\n        width: initial;\n        height: initial;\n\n        font: var(--attachment-selector-etc-icon-font);\n        color: var(--attachment-selector-etc-icon-color);\n      }\n\n      [etc] span {\n        position: absolute;\n        bottom: 25px;\n        right: 8px;\n        padding: 1px 2px;\n        color: #fff;\n        text-transform: uppercase;\n        opacity: 0.8;\n\n        background-color: var(--attachment-selector-etc-background-color);\n        font: var(--attachment-selector-etc-font);\n      }\n\n      ul {\n        display: flex;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        white-space: nowrap;\n        clear: both;\n      }\n\n      li {\n        padding: 0px 3px;\n      }\n\n      li:hover {\n        background-color: rgba(255, 180, 180, 1);\n      }\n\n      li a {\n        width: calc(100% - 24px);\n        padding: 5px 4px 1px 4px;\n        text-decoration: none;\n        font-size: 12px;\n        font-weight: bold;\n        color: rgb(233, 103, 128);\n        display: inline-block;\n      }\n\n      li span {\n        height: 16px;\n        margin-top: 4px;\n        border-radius: 2px;\n        float: right;\n        display: none;\n      }\n\n      li:hover span {\n        display: inline-block;\n      }\n\n      li span:hover {\n        background-color: #f8c2cc;\n      }\n\n      md-icon {\n        vertical-align: middle;\n      }\n\n      .group-select-box {\n        position: absolute;\n        width: 200px;\n        min-height: 22px;\n        font-size: 12px;\n        font-weight: bold;\n        color: #e96780;\n        border: 1px solid #ccc;\n        padding: 5px;\n        background-color: #fff;\n        float: left;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .group-select-box span {\n        background-color: #fff !important;\n        color: #e96780 !important;\n      }\n\n      .group-select-box > span:nth-child(1) {\n        padding: 4px 0 0 6px;\n        float: left;\n      }\n\n      .group-select-box > span:nth-child(2) {\n        float: right;\n        margin-top: 1px;\n      }\n\n      .select-box {\n        display: none;\n      }\n\n      .select-box.on {\n        display: block;\n        padding-top: 2px;\n      }\n\n      .select-box.active {\n        background-color: #1344;\n      }\n\n      .add-group {\n        cursor: pointer;\n      }\n\n      .btn-open-dropbox {\n        width: 8px;\n        height: 5px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnOpenDropboxColor)}) no-repeat;\n      }\n\n      .btn-close-dropbox {\n        width: 8px;\n        height: 5px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnCloseDropbox)}) no-repeat;\n      }\n\n      .btn-add-list-wrap {\n        margin: 5px 0 0 172px;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .btn-add-list {\n        width: 9px;\n        height: 9px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnAddList)}) no-repeat;\n      }\n\n      select {\n        position: absolute;\n        width: 150px;\n        min-height: 22px;\n        font-size: 12px;\n        font-weight: bold;\n        color: #e96780;\n        border: 1px solid #ccc;\n        padding: 5px;\n        background-color: #fff;\n        z-index: 1;\n        float: left;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .card > span,\n      .card > a > span {\n        position: absolute;\n        width: 35px;\n        height: 35px;\n        right: 0px;\n      }\n\n      .btn-zoom-cover {\n        top: 0px;\n      }\n      .btn-zoom {\n        width: 20px;\n        height: 20px;\n        margin: 7px;\n        background: url(${unsafeCSS(btnZoom)}) no-repeat;\n        display: inline-block;\n      }\n      .btn-zoom-cover:hover > .btn-zoom {\n        background: url(${unsafeCSS(btnZoomHover)}) no-repeat;\n      }\n\n      .btn-copy-link {\n        width: 20px;\n        height: 20px;\n        margin: 7px;\n        background: url(${unsafeCSS(btnCopyLink)}) no-repeat;\n        display: inline-block;\n      }\n      .card > span:hover > .btn-copy-link {\n        background: url(${unsafeCSS(btnCopyLinkHover)}) no-repeat;\n      }\n\n      .btn-delete {\n        width: 20px;\n        height: 20px;\n        margin: 7px;\n        background: url(${unsafeCSS(btnDelete)}) no-repeat;\n        display: inline-block;\n      }\n      .card > span:hover > .btn-delete {\n        background: url(${unsafeCSS(btnDeleteHover)}) no-repeat;\n      }\n\n      .btn-download {\n        width: 20px;\n        height: 20px;\n        margin: 7px;\n        background: url(${unsafeCSS(btnDownload)}) no-repeat;\n        display: inline-block;\n      }\n      .btn-download-cover:hover > .btn-download {\n        background: url(${unsafeCSS(btnDownloadHover)}) no-repeat;\n      }\n\n      .file {\n        width: 52px;\n        height: 65px;\n        background: url(${unsafeCSS(file)}) no-repeat;\n        display: inline-block;\n      }\n    `\n  ]\n\n  @property({ type: Array }) categories: string[] = ['audio', 'video', 'image', 'text', 'application']\n  @property({ type: Array }) attachments: any[] = []\n  @property({ type: String }) category?: string\n  @property({ type: Number }) _page: number = 1\n  @property({ type: Number }) _total: number = 0\n  @property({ type: Boolean }) creatable?: boolean\n  @property({ type: String }) selectBoxToggle?: string | null\n  @property({ type: String }) btnDropBoxIcon: string = 'btn-open-dropbox'\n  @property({ type: String }) userName?: string = localStorage.getItem('FMB_userNM') || ''\n\n  @query('#main') main!: HTMLDivElement\n  @query('attachment-creation-card') creationCard!: RestfulAttachmentCreationCard\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <div class=\"group-select-box\" @click=${this.toggleSelectBox}>\n          ${this.category\n            ? html` <span>${this.category}</span> `\n            : html` <span>${i18next.t('text.please choose a category')}</span> `}\n          <span><i class=${this.btnDropBoxIcon}></i></span>\n          <ul class=${`select-box ${this.selectBoxToggle}`}>\n            <li\n              value=\"\"\n              @click=${(e: Event) => {\n                this.category = ''\n                this.requestUpdate()\n              }}\n            >\n              <a>${i18next.t('text.please choose a category')}</a>\n            </li>\n            ${this.categories.map(\n              category =>\n                html` <li\n                  value=${category}\n                  @click=${(e: Event) => {\n                    this.category = category\n                    this.requestUpdate()\n                  }}\n                >\n                  <a>${category}</a>\n                </li>`\n            )}\n          </ul>\n        </div>\n      </div>\n\n      <div id=\"main\">\n        ${this.creatable\n          ? html`\n              <restful-attachment-creation-card\n                class=\"card create\"\n                .categories=${this.categories}\n                .defaultCategory=${this.category}\n                @create-attachment=${(e: Event) => this.onCreateAttachment(e)}\n                @file-drop=${(e: Event) => this.onAttachmentDropped(e)}\n              ></restful-attachment-creation-card>\n            `\n          : html``}\n        ${this.attachments.map(attachment => {\n          var url = getRestServiceFullPath() + attachment.fullpath\n          return html`\n            <div class=\"card\" @click=${(e: Event) => this.onClickSelect(attachment)}>\n              <div show>\n                ${attachment.category == 'image'\n                  ? html` <img src=${url} /> `\n                  : attachment.category == 'video'\n                    ? html` <video src=${url} controls></video> `\n                    : html`\n                        <div etc>\n                          <i class=\"file\"></i>\n                          <span>${attachment.path?.substr(attachment.path.lastIndexOf('.'))}</span>\n                        </div>\n                      `}\n              </div>\n              <a target=\"_blank\" href=${url}>\n                <span class=\"btn-zoom-cover\"><i class=\"btn-zoom\"></i></span>\n              </a>\n              <div class=\"name\">${attachment.name}</div>\n              <span @click=${(e: Event) => this.onDeleteAttachment(attachment.id)} delete>\n                <i class=\"btn-delete\"></i>\n              </span>\n              <a href=${getRestServiceFullPath() + attachment.download} download=${attachment.name}>\n                <span class=\"btn-download-cover\" download><i class=\"btn-download\"></i></span>\n              </a>\n            </div>\n          `\n        })}\n      </div>\n    `\n  }\n\n  toggleSelectBox() {\n    if (this.selectBoxToggle === 'on') {\n      this.selectBoxToggle = null\n      this.btnDropBoxIcon = 'btn-close-dropbox'\n    } else {\n      this.selectBoxToggle = 'on'\n      this.btnDropBoxIcon = 'btn-open-dropbox'\n    }\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('click', async e => {\n      var target = e.target as HTMLElement\n      var url = target.getAttribute('data-clipboard-url')\n      if (url) {\n        var { protocol, hostname, port } = location\n        await this.copy(`${protocol}//${hostname}:${port}${url}`)\n\n        target.setAttribute('data-tooltip', 'url copied!')\n        await sleep(2000)\n        target.removeAttribute('data-tooltip')\n      }\n    })\n\n    this.refreshAttachments()\n  }\n\n  updated(changed: PropertyValues<this>) {\n    if (changed.has('category')) {\n      this.refreshAttachments()\n    }\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 onAttachmentDropped(e: Event) {\n    var files = (e as CustomEvent).detail\n\n    await this.createAttachments('', files)\n    this.refreshAttachments()\n  }\n\n  async onCreateAttachment(e: Event) {\n    var { category, files, fileId } = (e as CustomEvent).detail\n\n    files = Array.from(files)\n    await this.createAttachments(category, files, fileId)\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    var attachments = await this.getAttachments()\n    this.attachments = [...attachments]\n\n    if (this.creationCard) {\n      this.creationCard.reset()\n    }\n  }\n\n  async appendAttachments() {\n    var attachments = await this.getAttachments({ page: this._page + 1 })\n    this.attachments = [...this.attachments, ...attachments]\n  }\n\n  async getAttachments({ page = 1, limit = 1000 } = {}) {\n    var filters = [] as any[]\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.category)\n      filters.push({\n        name: 'category',\n        operator: 'eq',\n        value: this.category\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    let response = (await fetchAttachmentList(params))?.data\n    if (!response || !response.status) {\n      throw new Error('Error : fetchAttachmentList')\n    }\n\n    let attachmentListResponse = response.attachments\n\n    if (!attachmentListResponse || !attachmentListResponse.items.length) return []\n    attachmentListResponse.items.forEach((attachment: any) => {\n      attachment.fullpath = '/images/' + attachment.path\n      attachment.download = '/downloadFile/' + attachment.path + '/' + encodeURIComponent(attachment.name)\n    })\n    this._total = attachmentListResponse.total\n    this._page = page\n\n    return attachmentListResponse.items\n  }\n\n  async createAttachments(category: string, files: any[], fileId?: string) {\n    try {\n      files[0].category = category\n      files[0].fileId = fileId\n      const body = {\n        category: files[0].category,\n        name: files[0].name,\n        size: files[0].size,\n        type: files[0].type,\n        fileId: files[0].fileId,\n        userName: this.userName\n      }\n      let result = (await createAttachment(body))?.data\n      if (!result || !result.status) throw new Error('Create Error')\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: ex,\n            ex: ex\n          }\n        })\n      )\n    }\n  }\n\n  async deleteAttachment(id: string) {\n    let server = 'Primary'\n    try {\n      const result = (await deleteAttachment(id))?.data\n      if (!result || !result.status) throw new Error('DB Error')\n\n      const deleteFileResult = (await deleteFile(result.attachment.path, 'primary'))?.data\n      if (!deleteFileResult || !deleteFileResult.status) {\n        throw new Error('Primary Server File Delete Error')\n      }\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: server + ' Server File Delete Error // ' + ex,\n            ex: ex\n          }\n        })\n      )\n    }\n  }\n\n  async copy(copied: any) {\n    var textArea = document.createElement('textarea')\n    textArea.style.position = 'absolute'\n    textArea.style.opacity = '0'\n    textArea.value = copied\n    document.body.appendChild(textArea)\n\n    await sleep(100)\n\n    textArea.select()\n\n    document.execCommand('copy')\n    document.body.removeChild(textArea)\n  }\n}\n"]}

package/dist/src/component/restful-input-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 './restful-attachment-selector.js';
 import { LitElement } from 'lit';
 export declare class RestfulInputAttachmentSelector extends LitElement {

package/dist/src/component/restful-input-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 './restful-attachment-selector.js';
 import { LitElement, css, html } from 'lit';
 import { openPopup } from '@operato/layout';
@@ -22,7 +22,7 @@ let RestfulInputAttachmentSelector = class RestfulInputAttachmentSelector extend
         @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 @@ RestfulInputAttachmentSelector.styles = [
         border: 1px solid rgba(0, 0, 0, 0.2);
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         top: 0;
         right: 3px;

package/dist/src/component/restful-input-attachment-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"restful-input-attachment-selector.js","sourceRoot":"","sources":["../../../src/component/restful-input-attachment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './restful-attachment-selector.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('restful-input-attachment-selector')\nexport class RestfulInputAttachmentSelector 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      <restful-attachment-selector\n        .creatable=${true}\n        .category=${category}\n        @attachment-selected=${async (e: CustomEvent) => {\n          var attachment = e.detail.attachment\n          this.value = `$base_url${attachment.download}`\n\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n          this.popup && this.popup.close()\n        }}\n      ></restful-attachment-selector>\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":"restful-input-attachment-selector.js","sourceRoot":"","sources":["../../../src/component/restful-input-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 './restful-attachment-selector.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('restful-input-attachment-selector')\nexport class RestfulInputAttachmentSelector 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      <restful-attachment-selector\n        .creatable=${true}\n        .category=${category}\n        @attachment-selected=${async (e: CustomEvent) => {\n          var attachment = e.detail.attachment\n          this.value = `$base_url${attachment.download}`\n\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n          this.popup && this.popup.close()\n        }}\n      ></restful-attachment-selector>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select attachment')\n    })\n  }\n}\n"]}

package/dist/src/component/restful-input-fill-style.d.ts

@@ -7,14 +7,24 @@ import '@operato/input/ox-input-color-stops.js';
 import '@operato/input/ox-input-color-gradient.js';
 import './restrul-input-background-pattern.js';
 import { PropertyValues } from 'lit';
-import { ColorStop, GradientOption, OxFormField } from '@operato/input';
+import { OxFormField } from '@operato/input';
+type ColorStop = {
+    color: string;
+    position: number;
+};
+type GradientOption = {
+    type?: 'linear' | 'radial';
+    colorStops?: ColorStop[];
+    rotation?: number;
+    center?: string;
+};
 import { BackgroundPatternOption } from './restrul-input-background-pattern.js';
 export type FillStyle = {
     type?: 'no' | 'solid' | 'gradient' | 'pattern';
     gradientType?: 'linear' | 'radial';
     colorStops?: ColorStop[];
     rotation?: number;
-    center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom';
+    center?: string;
     image?: HTMLImageElement | string;
     offsetX?: number;
     offsetY?: number;
@@ -43,3 +53,4 @@ export declare class RestfulInputColorStyle extends OxFormField {
     _onChandedGradient(e: Event): void;
     _onChangedPattern(e: Event): void;
 }
+export {};

package/dist/src/component/restful-input-fill-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"restful-input-fill-style.js","sourceRoot":"","sources":["../../../src/component/restful-input-fill-style.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AACzC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,2CAA2C,CAAA;AAClD,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAA6B,WAAW,EAAwB,MAAM,gBAAgB,CAAA;AA0BtF,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,WAAW;IAAhD;;QAsDiD,cAAS,GAAY,KAAK,CAAA;QAExE,iBAAY,GAAY,KAAK,CAAA;IA6RvC,CAAC;IA3RC,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA;IAChE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;;;;;;qBAMxC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI;;;2FAG+B,IAAI,CAAC,QAAQ,IAAI,OAAO;;;;;;;qBAO9F,IAAI,CAAC,QAAQ,IAAI,UAAU;;;;;UAKtC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;;;2BAMW,IAAI,CAAC,QAAQ,IAAI,SAAS;;;aAGxC;;;;uBAIU,IAAI,CAAC,QAAQ,IAAI,IAAI;;uCAEL,IAAI,CAAC,QAAQ,IAAI,OAAO;;oCAE3B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,KAAK;;;uBAGvE,IAAI,CAAC,QAAQ,IAAI,UAAU;6CACL,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,QAAQ;;;;uBAItF,IAAI,CAAC,QAAQ,IAAI,SAAS;sDACK,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,OAAO;;;;KAI/G,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,KAAgB;QACpC;;WAEG;QACH,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;QAE1B,6BAA6B;QAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;YAEpB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;gBACtB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;gBACzB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;YAC1B,CAAC;YAED,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;YACzB,OAAM;QACR,CAAC;QAED,QAAQ,OAAO,KAAK,EAAE,CAAC;YACrB,KAAK,QAAQ;gBACX,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;gBACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;gBAElB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;oBACvB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;oBACzB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;gBAC1B,CAAC;gBACD,MAAK;YACP,KAAK,QAAQ;gBACX,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAA;gBAE1B,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;oBAC9B,IAAI,CAAC,QAAQ,GAAG;wBACd,IAAI,EAAE,KAAK,CAAC,YAAY,IAAI,QAAQ;wBACpC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI;4BAC9B;gCACE,QAAQ,EAAE,CAAC;gCACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;6BAC/B;4BACD;gCACE,QAAQ,EAAE,CAAC;gCACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;6BAC/B;yBACF;wBACD,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;wBACrC,MAAM,EAAE,KAAK,CAAC,MAAM;qBACrB,CAAA;oBAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;wBACvB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;wBACxB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;oBACxB,CAAC;gBACH,CAAC;qBAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;oBACpC,IAAI,CAAC,OAAO,GAAG;wBACb,KAAK,EAAE,KAAK,CAAC,KAAK;wBAClB,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;wBACnC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;wBACnC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;wBAC1B,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;wBAC5B,KAAK,EAAE,KAAK,CAAC,KAAK;wBAClB,UAAU,EAAE,KAAK,CAAC,UAAU;wBAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ;wBACxB,SAAS,EAAE,KAAK,CAAC,SAAS;wBAC1B,KAAK,EAAE,KAAK,CAAC,KAAK;qBACnB,CAAA;oBAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;wBACvB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;wBACzB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;oBACxB,CAAC;gBACH,CAAC;gBAED,MAAK;YACP,QAAQ;QACV,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;IAC3B,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,MAAM,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC5C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAA;QAE7B,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,UAAU;gBACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACnB,IAAI,CAAC,QAAQ,GAAG;wBACd,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE;4BACV;gCACE,QAAQ,EAAE,CAAC;gCACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;6BAC/B;4BACD;gCACE,QAAQ,EAAE,CAAC;gCACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;6BAC/B;yBACF;wBACD,QAAQ,EAAE,CAAC;wBACX,MAAM,EAAE,QAAQ;qBACjB,CAAA;gBACH,CAAC;gBAED,IAAI,CAAC,KAAK,GAAG;oBACX,IAAI,EAAE,UAAU;oBAChB,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ;oBAC5C,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI;wBACtC;4BACE,QAAQ,EAAE,CAAC;4BACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;yBAC/B;wBACD;4BACE,QAAQ,EAAE,CAAC;4BACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;yBAC/B;qBACF;oBACD,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;oBAC7C,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM;iBAC7B,CAAA;gBACD,MAAK;YAEP,KAAK,SAAS;gBACZ,IAAI,CAAC,IAAI,CAAC,OAAO;oBAAE,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;gBAEpC,IAAI,CAAC,KAAK,GAAG;oBACX,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;oBACzB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;oBAC1C,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;oBAC1C,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;oBACjC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;oBACnC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;oBACzB,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU;oBACnC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;oBAC/B,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;oBACjC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;iBAC1B,CAAA;gBACD,MAAK;YAEP,KAAK,OAAO;gBACV,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;gBACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;gBACvB,MAAK;YAEP,KAAK,IAAI;gBACP,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;gBACf,MAAK;QACT,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,eAAe,CAAC,CAAQ;QACtB,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO;YAAE,OAAM;QAErC,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAEvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB;;;WAGG;QAEH,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;YACjC,OAAM;QACR,CAAC;QAED,IAAI,CAAC,QAAQ,GAAI,CAAC,CAAC,MAA+B,CAAC,KAAK,CAAA;QAExD,IAAI,CAAC,KAAK,GAAG;YACX,IAAI,EAAE,UAAU;YAChB,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ;YAC5C,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI;gBACtC;oBACE,QAAQ,EAAE,CAAC;oBACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;iBAC/B;gBACD;oBACE,QAAQ,EAAE,CAAC;oBACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS;iBAC/B;aACF;YACD,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;YAC7C,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM;SAC7B,CAAA;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,iBAAiB,CAAC,CAAQ;;QACxB,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;YAAE,OAAM;QAEvC,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAAwC,CAAC,KAAK,CAAA;QAEhE,IAAI,CAAC,KAAK,GAAG;YACX,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK;YAC1B,OAAO,EAAE,MAAM,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,CAAC,IAAI,CAAC;YAC3C,OAAO,EAAE,MAAM,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,CAAC,IAAI,CAAC;YAC3C,KAAK,EAAE,MAAM,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,CAAC;YAClC,MAAM,EAAE,MAAM,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,CAAC;YACpC,KAAK,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK;YAC1B,UAAU,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;YACpC,QAAQ,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ;YAChC,SAAS,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS;YAClC,KAAK,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK;SAC3B,CAAA;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAnVM,6BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6ClB,AA7CY,CA6CZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAkC;AAEP;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;yDAA2B;AAtDrE,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAqVlC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-color-stops.js'\nimport '@operato/input/ox-input-color-gradient.js'\nimport './restrul-input-background-pattern.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop, GradientOption, OxFormField, OxInputColorGradient } from '@operato/input'\n\nimport { BackgroundPatternOption, RestfulInputBackgroundPattern } from './restrul-input-background-pattern.js'\n\nexport type FillStyle =\n  | {\n      type?: 'no' | 'solid' | 'gradient' | 'pattern'\n      gradientType?: 'linear' | 'radial'\n      colorStops?: ColorStop[]\n      rotation?: number\n      center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n      image?: HTMLImageElement | string\n      offsetX?: number\n      offsetY?: number\n      width?: number\n      height?: number\n      align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n      fitPattern?: boolean\n      noRepeat?: boolean\n      guideOnly?: boolean\n      color?: string\n    }\n  | 'no'\n  | string\n\n@customElement('restful-input-fill-style')\nexport class RestfulInputColorStyle extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    [fill-type] {\n      display: flex;\n      margin: 0 0 14px 0;\n    }\n\n    [fill-type] * {\n      flex: auto;\n      margin: 0;\n      text-align: left;\n      align-self: center;\n    }\n\n    .grid-10 {\n      display: grid;\n\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n    }\n\n    .grid-10 > ox-input-color {\n      grid-column: span 4;\n    }\n\n    .grid-10 > .icon-only-label {\n      grid-column: span 1;\n\n      background: var(--url-icon-properties-label) no-repeat;\n      float: left;\n      margin: 0;\n    }\n\n    .icon-only-label.color {\n      background-position: 100% -500px;\n    }\n\n    [editors] > :not([active]) {\n      display: none;\n    }\n  `\n\n  @property({ type: Object }) value?: FillStyle\n  @property({ type: String }) fillType?: string\n  @property({ type: String }) solid?: string\n  @property({ type: Object }) gradient?: GradientOption\n  @property({ type: Object }) pattern?: BackgroundPatternOption\n\n  @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\n\n  private _block_reset: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChangedValue(this.value || {})\n  }\n\n  render() {\n    return html`\n      <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n        <input\n          type=\"radio\"\n          id=\"fill-type-no\"\n          name=\"fill-type\"\n          value=\"no\"\n          .checked=${!this.fillType || this.fillType == 'no'}\n        />\n        <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n        <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n        <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n        <input\n          type=\"radio\"\n          id=\"fill-type-gradient\"\n          name=\"fill-type\"\n          value=\"gradient\"\n          .checked=${this.fillType == 'gradient'}\n        />\n\n        <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n        ${this.colorOnly\n          ? html``\n          : html`\n              <input\n                type=\"radio\"\n                id=\"fill-type-pattern\"\n                name=\"fill-type\"\n                value=\"pattern\"\n                .checked=${this.fillType == 'pattern'}\n              />\n              <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n            `}\n      </div>\n\n      <div editors>\n        <div ?active=${this.fillType == 'no'}></div>\n\n        <div class=\"grid-10\" ?active=${this.fillType == 'solid'}>\n          <label class=\"icon-only-label color\"></label>\n          <ox-input-color @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}> </ox-input-color>\n        </div>\n\n        <div ?active=${this.fillType == 'gradient'}>\n          <ox-input-color-gradient @change=${(e: Event) => this._onChandedGradient(e)} .value=${this.gradient}>\n          </ox-input-color-gradient>\n        </div>\n\n        <div ?active=${this.fillType == 'pattern'}>\n          <restful-input-background-pattern @change=${(e: Event) => this._onChangedPattern(e)} .value=${this.pattern}>\n          </restful-input-background-pattern>\n        </div>\n      </div>\n    `\n  }\n\n  async _onChangedValue(value: FillStyle) {\n    /*\n     * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n     */\n    await this.requestUpdate()\n\n    /* 설정 값에 따라서, 멤버 속성을 설정한다. */\n    if (!value) {\n      this.fillType = 'no'\n\n      if (!this._block_reset) {\n        this.solid = undefined\n        this.gradient = undefined\n        this.pattern = undefined\n      }\n\n      this._block_reset = false\n      return\n    }\n\n    switch (typeof value) {\n      case 'string':\n        this.fillType = 'solid'\n        this.solid = value\n\n        if (!this._block_reset) {\n          this.gradient = undefined\n          this.pattern = undefined\n        }\n        break\n      case 'object':\n        this.fillType = value.type\n\n        if (value.type === 'gradient') {\n          this.gradient = {\n            type: value.gradientType || 'linear',\n            colorStops: value.colorStops || [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: Number(value.rotation) || 0,\n            center: value.center\n          }\n\n          if (!this._block_reset) {\n            this.pattern = undefined\n            this.solid = undefined\n          }\n        } else if (value.type === 'pattern') {\n          this.pattern = {\n            image: value.image,\n            offsetX: Number(value.offsetX) || 0,\n            offsetY: Number(value.offsetY) || 0,\n            width: Number(value.width),\n            height: Number(value.height),\n            align: value.align,\n            fitPattern: value.fitPattern,\n            noRepeat: value.noRepeat,\n            guideOnly: value.guideOnly,\n            color: value.color\n          }\n\n          if (!this._block_reset) {\n            this.gradient = undefined\n            this.solid = undefined\n          }\n        }\n\n        break\n      default:\n    }\n\n    this._block_reset = false\n  }\n\n  _onChangedFillType(e: Event) {\n    const element = e.target as HTMLInputElement\n    this.fillType = element.value\n\n    switch (this.fillType) {\n      case 'gradient':\n        if (!this.gradient) {\n          this.gradient = {\n            type: 'linear',\n            colorStops: [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: 0,\n            center: 'center'\n          }\n        }\n\n        this.value = {\n          type: 'gradient',\n          gradientType: this.gradient.type || 'linear',\n          colorStops: this.gradient.colorStops || [\n            {\n              position: 0,\n              color: this.solid || '#000000'\n            },\n            {\n              position: 1,\n              color: this.solid || '#FFFFFF'\n            }\n          ],\n          rotation: Number(this.gradient.rotation) || 0,\n          center: this.gradient.center\n        }\n        break\n\n      case 'pattern':\n        if (!this.pattern) this.pattern = {}\n\n        this.value = {\n          type: 'pattern',\n          image: this.pattern.image,\n          offsetX: Number(this.pattern.offsetX) || 0,\n          offsetY: Number(this.pattern.offsetY) || 0,\n          width: Number(this.pattern.width),\n          height: Number(this.pattern.height),\n          align: this.pattern.align,\n          fitPattern: this.pattern.fitPattern,\n          noRepeat: this.pattern.noRepeat,\n          guideOnly: this.pattern.guideOnly,\n          color: this.pattern.color\n        }\n        break\n\n      case 'solid':\n        if (!this.solid) this.solid = '#fff'\n        this.value = this.solid\n        break\n\n      case 'no':\n        this.value = ''\n        break\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedSolid(e: Event) {\n    if (this.fillType !== 'solid') return\n\n    this.solid = (e.target as HTMLInputElement).value\n\n    this.value = this.solid\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChandedGradient(e: Event) {\n    /*\n     * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.\n     * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.\n     */\n\n    if (this.fillType !== 'gradient') {\n      return\n    }\n\n    this.gradient = (e.target as OxInputColorGradient).value\n\n    this.value = {\n      type: 'gradient',\n      gradientType: this.gradient.type || 'linear',\n      colorStops: this.gradient.colorStops || [\n        {\n          position: 0,\n          color: this.solid || '#000000'\n        },\n        {\n          position: 1,\n          color: this.solid || '#FFFFFF'\n        }\n      ],\n      rotation: Number(this.gradient.rotation) || 0,\n      center: this.gradient.center\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedPattern(e: Event) {\n    if (this.fillType !== 'pattern') return\n\n    this.pattern = (e.target as RestfulInputBackgroundPattern).value\n\n    this.value = {\n      type: 'pattern',\n      image: this.pattern?.image,\n      offsetX: Number(this.pattern?.offsetX) || 0,\n      offsetY: Number(this.pattern?.offsetY) || 0,\n      width: Number(this.pattern?.width),\n      height: Number(this.pattern?.height),\n      align: this.pattern?.align,\n      fitPattern: this.pattern?.fitPattern,\n      noRepeat: this.pattern?.noRepeat,\n      guideOnly: this.pattern?.guideOnly,\n      color: this.pattern?.color\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"restful-input-fill-style.js","sourceRoot":"","sources":["../../../src/component/restful-input-fill-style.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-color-stops.js'\nimport '@operato/input/ox-input-color-gradient.js'\nimport './restrul-input-background-pattern.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\ntype ColorStop = { color: string; position: number }\ntype GradientOption = {\n  type?: 'linear' | 'radial'\n  colorStops?: ColorStop[]\n  rotation?: number\n  center?: string\n}\ntype OxInputColorGradient = HTMLElement & { value: GradientOption }\n\nimport { BackgroundPatternOption, RestfulInputBackgroundPattern } from './restrul-input-background-pattern.js'\n\nexport type FillStyle =\n  | {\n      type?: 'no' | 'solid' | 'gradient' | 'pattern'\n      gradientType?: 'linear' | 'radial'\n      colorStops?: ColorStop[]\n      rotation?: number\n      center?: string\n      image?: HTMLImageElement | string\n      offsetX?: number\n      offsetY?: number\n      width?: number\n      height?: number\n      align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n      fitPattern?: boolean\n      noRepeat?: boolean\n      guideOnly?: boolean\n      color?: string\n    }\n  | 'no'\n  | string\n\n@customElement('restful-input-fill-style')\nexport class RestfulInputColorStyle extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    [fill-type] {\n      display: flex;\n      margin: 0 0 14px 0;\n    }\n\n    [fill-type] * {\n      flex: auto;\n      margin: 0;\n      text-align: left;\n      align-self: center;\n    }\n\n    .grid-10 {\n      display: grid;\n\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n    }\n\n    .grid-10 > ox-input-color {\n      grid-column: span 4;\n    }\n\n    .grid-10 > .icon-only-label {\n      grid-column: span 1;\n\n      background: var(--url-icon-properties-label) no-repeat;\n      float: left;\n      margin: 0;\n    }\n\n    .icon-only-label.color {\n      background-position: 100% -500px;\n    }\n\n    [editors] > :not([active]) {\n      display: none;\n    }\n  `\n\n  @property({ type: Object }) value?: FillStyle\n  @property({ type: String }) fillType?: string\n  @property({ type: String }) solid?: string\n  @property({ type: Object }) gradient?: GradientOption\n  @property({ type: Object }) pattern?: BackgroundPatternOption\n\n  @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\n\n  private _block_reset: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChangedValue(this.value || {})\n  }\n\n  render() {\n    return html`\n      <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n        <input\n          type=\"radio\"\n          id=\"fill-type-no\"\n          name=\"fill-type\"\n          value=\"no\"\n          .checked=${!this.fillType || this.fillType == 'no'}\n        />\n        <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n        <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n        <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n        <input\n          type=\"radio\"\n          id=\"fill-type-gradient\"\n          name=\"fill-type\"\n          value=\"gradient\"\n          .checked=${this.fillType == 'gradient'}\n        />\n\n        <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n        ${this.colorOnly\n          ? html``\n          : html`\n              <input\n                type=\"radio\"\n                id=\"fill-type-pattern\"\n                name=\"fill-type\"\n                value=\"pattern\"\n                .checked=${this.fillType == 'pattern'}\n              />\n              <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n            `}\n      </div>\n\n      <div editors>\n        <div ?active=${this.fillType == 'no'}></div>\n\n        <div class=\"grid-10\" ?active=${this.fillType == 'solid'}>\n          <label class=\"icon-only-label color\"></label>\n          <ox-input-color @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}> </ox-input-color>\n        </div>\n\n        <div ?active=${this.fillType == 'gradient'}>\n          <ox-input-color-gradient @change=${(e: Event) => this._onChandedGradient(e)} .value=${this.gradient}>\n          </ox-input-color-gradient>\n        </div>\n\n        <div ?active=${this.fillType == 'pattern'}>\n          <restful-input-background-pattern @change=${(e: Event) => this._onChangedPattern(e)} .value=${this.pattern}>\n          </restful-input-background-pattern>\n        </div>\n      </div>\n    `\n  }\n\n  async _onChangedValue(value: FillStyle) {\n    /*\n     * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n     */\n    await this.requestUpdate()\n\n    /* 설정 값에 따라서, 멤버 속성을 설정한다. */\n    if (!value) {\n      this.fillType = 'no'\n\n      if (!this._block_reset) {\n        this.solid = undefined\n        this.gradient = undefined\n        this.pattern = undefined\n      }\n\n      this._block_reset = false\n      return\n    }\n\n    switch (typeof value) {\n      case 'string':\n        this.fillType = 'solid'\n        this.solid = value\n\n        if (!this._block_reset) {\n          this.gradient = undefined\n          this.pattern = undefined\n        }\n        break\n      case 'object':\n        this.fillType = value.type\n\n        if (value.type === 'gradient') {\n          this.gradient = {\n            type: value.gradientType || 'linear',\n            colorStops: value.colorStops || [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: Number(value.rotation) || 0,\n            center: value.center\n          }\n\n          if (!this._block_reset) {\n            this.pattern = undefined\n            this.solid = undefined\n          }\n        } else if (value.type === 'pattern') {\n          this.pattern = {\n            image: value.image,\n            offsetX: Number(value.offsetX) || 0,\n            offsetY: Number(value.offsetY) || 0,\n            width: Number(value.width),\n            height: Number(value.height),\n            align: value.align,\n            fitPattern: value.fitPattern,\n            noRepeat: value.noRepeat,\n            guideOnly: value.guideOnly,\n            color: value.color\n          }\n\n          if (!this._block_reset) {\n            this.gradient = undefined\n            this.solid = undefined\n          }\n        }\n\n        break\n      default:\n    }\n\n    this._block_reset = false\n  }\n\n  _onChangedFillType(e: Event) {\n    const element = e.target as HTMLInputElement\n    this.fillType = element.value\n\n    switch (this.fillType) {\n      case 'gradient':\n        if (!this.gradient) {\n          this.gradient = {\n            type: 'linear',\n            colorStops: [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: 0,\n            center: 'center'\n          }\n        }\n\n        this.value = {\n          type: 'gradient',\n          gradientType: this.gradient.type || 'linear',\n          colorStops: this.gradient.colorStops || [\n            {\n              position: 0,\n              color: this.solid || '#000000'\n            },\n            {\n              position: 1,\n              color: this.solid || '#FFFFFF'\n            }\n          ],\n          rotation: Number(this.gradient.rotation) || 0,\n          center: this.gradient.center\n        }\n        break\n\n      case 'pattern':\n        if (!this.pattern) this.pattern = {}\n\n        this.value = {\n          type: 'pattern',\n          image: this.pattern.image,\n          offsetX: Number(this.pattern.offsetX) || 0,\n          offsetY: Number(this.pattern.offsetY) || 0,\n          width: Number(this.pattern.width),\n          height: Number(this.pattern.height),\n          align: this.pattern.align,\n          fitPattern: this.pattern.fitPattern,\n          noRepeat: this.pattern.noRepeat,\n          guideOnly: this.pattern.guideOnly,\n          color: this.pattern.color\n        }\n        break\n\n      case 'solid':\n        if (!this.solid) this.solid = '#fff'\n        this.value = this.solid\n        break\n\n      case 'no':\n        this.value = ''\n        break\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedSolid(e: Event) {\n    if (this.fillType !== 'solid') return\n\n    this.solid = (e.target as HTMLInputElement).value\n\n    this.value = this.solid\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChandedGradient(e: Event) {\n    /*\n     * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.\n     * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.\n     */\n\n    if (this.fillType !== 'gradient') {\n      return\n    }\n\n    this.gradient = (e.target as OxInputColorGradient).value\n\n    this.value = {\n      type: 'gradient',\n      gradientType: this.gradient.type || 'linear',\n      colorStops: this.gradient.colorStops || [\n        {\n          position: 0,\n          color: this.solid || '#000000'\n        },\n        {\n          position: 1,\n          color: this.solid || '#FFFFFF'\n        }\n      ],\n      rotation: Number(this.gradient.rotation) || 0,\n      center: this.gradient.center\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedPattern(e: Event) {\n    if (this.fillType !== 'pattern') return\n\n    this.pattern = (e.target as RestfulInputBackgroundPattern).value\n\n    this.value = {\n      type: 'pattern',\n      image: this.pattern?.image,\n      offsetX: Number(this.pattern?.offsetX) || 0,\n      offsetY: Number(this.pattern?.offsetY) || 0,\n      width: Number(this.pattern?.width),\n      height: Number(this.pattern?.height),\n      align: this.pattern?.align,\n      fitPattern: this.pattern?.fitPattern,\n      noRepeat: this.pattern?.noRepeat,\n      guideOnly: this.pattern?.guideOnly,\n      color: this.pattern?.color\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/layers/movement-layer.d.ts

@@ -1,4 +1,4 @@
-import { Component, Layer, POINT, Properties } from '@hatiolab/things-scene';
+import { Component, Layer, POINT } from '@hatiolab/things-scene';
 export type PathType = 'COMMAND' | 'JOB';
 export type PathStatus = 'NORMAL' | 'DELAY' | 'ALTER' | 'WARN';
 export type TipType = 'none' | 'arrow' | 'open-arrow' | 'sharp-arrow' | 'diamond' | 'oval';
@@ -38,8 +38,8 @@ export type MOVEMENT = PATH[];
 export default class MovementLayer extends Layer {
     drawInstructionHandler: (e: Event) => void;
     clickComponentHandler: (e: Event) => void;
-    onchangeTarget: (after: Properties, before: Properties) => void;
-    ready(): void;
+    onchangeTarget: (after: Record<string, any>, before: Record<string, any>) => void;
+    ready(): Promise<void>;
     dispose(): void;
     get pointerEvents(): string;
     get capturable(): boolean;
@@ -49,13 +49,14 @@ export default class MovementLayer extends Layer {
     private clearMonitoringTargets;
     private addMonitoringTarget;
     render(ctx: CanvasRenderingContext2D): void;
+    private render3D;
     get eventMap(): {
         'model-layer': {
             '(self)': {
-                change: (after: Properties, before: Properties, hint: any) => void;
+                change: (after: Record<string, any>, before: Record<string, any>, hint: any) => void;
             };
         };
     };
-    onchangeModelLayer(after: Properties, before: Properties, hint: any): void;
-    onchangeData(after: Properties, before: Properties): void;
+    onchangeModelLayer(after: Record<string, any>, before: Record<string, any>, hint: any): void;
+    onchangeData(after: Record<string, any>, before: Record<string, any>): void;
 }