@operato/attachment 1.0.0-alpha.9 → 1.0.0-beta.10

package/src/ox-attachment-selector.ts

@@ -0,0 +1,111 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+import './ox-attachment-list.js'
+
+import { LitElement, css, html } from 'lit'
+import { PopupHandle, openPopup } from '@operato/layout'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+@customElement('ox-attachment-selector')
+export class OxPropertyEditorAttachmentSelector extends LitElement {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      input[type='text'] {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+
+      mwc-icon {
+        position: absolute;
+        top: 0;
+        right: 3px;
+      }
+    `
+  ]
+
+  @property({ type: String }) value: string = ''
+  @property({ type: Object }) properties: any
+
+  private popup?: PopupHandle
+
+  render() {
+    return html`
+      <input
+        id="text"
+        type="text"
+        .value=${this.value || ''}
+        @change=${(e: KeyboardEvent) => this._onInputChanged(e)}
+      />
+
+      <mwc-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</mwc-icon>
+    `
+  }
+
+  getIconByCategory() {
+    var { category } = this.properties || {}
+    switch (category) {
+      case 'audio':
+        return 'library_music'
+      case 'video':
+        return 'video_library'
+      case 'image':
+        return 'image'
+      case 'text':
+      case 'application':
+      default:
+        return 'attachment'
+    }
+  }
+
+  _onInputChanged(e: KeyboardEvent) {
+    this.value = (e.target as HTMLInputElement).value
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    /*
+     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var value = this.value || {}
+    var { category = 'application' } = this.properties || {}
+
+    var template = html`
+      <ox-attachment-list
+        .creatable=${true}
+        .category=${category}
+        @attachment-selected=${async (e: CustomEvent) => {
+          var attachment = e.detail.attachment
+          this.value = `/attachment/${attachment.path}`
+
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+
+          this.popup && this.popup.close()
+        }}
+      ></ox-attachment-list>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select attachment')
+    })
+  }
+}

package/src/ox-property-editor-attachment-selector.ts

@@ -1,112 +1,14 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/mwc-icon'
-import './ox-attachment-list.js'
-
-import { PopupHandle, openPopup } from '@operato/layout'
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import './ox-attachment-selector'
 
 import { OxPropertyEditor } from '@operato/property-editor'
-import { i18next } from '@operato/i18n'
+import { customElement } from 'lit/decorators.js'
+import { html } from 'lit'
 
 @customElement('ox-property-editor-attachment-selector')
-export class OxPropertyEditorAttachmentSelector extends OxPropertyEditor {
-  static styles = [
-    css`
-      :host {
-        position: relative;
-        display: inline-block;
-      }
-
-      input[type='text'] {
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-
-      mwc-icon {
-        position: absolute;
-        top: 0;
-        right: 3px;
-      }
-    `
-  ]
-
-  @property({ type: String }) value: string = ''
-  @property({ type: Object }) properties: any
-
-  private popup?: PopupHandle
-
-  render() {
+class OxPropertyEditorAttachmentSelector extends OxPropertyEditor {
+  editorTemplate() {
     return html`
-      <input
-        id="text"
-        type="text"
-        .value=${this.value || ''}
-        @change=${(e: KeyboardEvent) => this._onInputChanged(e)}
-      />
-
-      <mwc-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</mwc-icon>
+      <ox-attachment-selector id="editor" .value=${this.value} .properties=${this.property}></ox-attachment-selector>
     `
   }
-
-  getIconByCategory() {
-    var { category } = this.properties || {}
-    switch (category) {
-      case 'audio':
-        return 'library_music'
-      case 'video':
-        return 'video_library'
-      case 'image':
-        return 'image'
-      case 'text':
-      case 'application':
-      default:
-        return 'attachment'
-    }
-  }
-
-  _onInputChanged(e: KeyboardEvent) {
-    this.value = (e.target as HTMLInputElement).value
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    /*
-     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
-     * 주의. value는 object일 수도 있고, string일 수도 있다.
-     * string인 경우에는 해당 보드의 id로 해석한다.
-     */
-    var value = this.value || {}
-    var { category = 'application' } = this.properties || {}
-
-    var template = html`
-      <ox-attachment-list
-        .creatable=${true}
-        .category=${category}
-        @attachment-selected=${async (e: CustomEvent) => {
-          var attachment = e.detail.attachment
-          this.value = `/attachment/${attachment.path}`
-
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-          this.popup && this.popup.close()
-        }}
-      ></ox-attachment-list>
-    `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.select attachment')
-    })
-  }
 }

package/src/ox-property-editor-image-selector.ts

@@ -0,0 +1,21 @@
+import './ox-attachment-selector'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+import { customElement } from 'lit/decorators.js'
+import { html } from 'lit'
+
+@customElement('ox-property-editor-image-selector')
+class OxPropertyEditorImageSelector extends OxPropertyEditor {
+  editorTemplate() {
+    return html`
+      <ox-attachment-selector
+        id="editor"
+        .value=${this.value}
+        .properties=${{
+          ...this.property,
+          category: 'image'
+        }}
+      ></ox-attachment-selector>
+    `
+  }
+}

package/dist/src/ox-input-background-pattern.d.ts

@@ -1,31 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@operato/i18n/ox-i18n.js';
-import './ox-attachment-list.js';
-import { OxFormField } from '@operato/input';
-export declare type BackgroundPatternOption = {
-    image?: HTMLImageElement | string;
-    align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom';
-    offsetX?: number;
-    offsetY?: number;
-    width?: number;
-    height?: number;
-    fitPattern?: boolean;
-};
-/**
- * 컴포넌트의 fill pattern을 편집하는 element
- *
- * Example:
- *  <ox-input-background-pattern
- *    @change="${e => { this.pattern = e.target.value }}"
- *    .value=${this.pattern}"
- *  ></ox-input-background-pattern>
- */
-export declare class OxInputBackgroundPattern extends OxFormField {
-    static styles: import("lit").CSSResult;
-    value?: BackgroundPatternOption;
-    render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
-    _onChange(e: Event): void;
-}

package/dist/src/ox-input-background-pattern.js

@@ -1,147 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import '@operato/i18n/ox-i18n.js';
-import './ox-attachment-list.js';
-import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { OxFormField } from '@operato/input';
-/**
- * 컴포넌트의 fill pattern을 편집하는 element
- *
- * Example:
- *  <ox-input-background-pattern
- *    @change="${e => { this.pattern = e.target.value }}"
- *    .value=${this.pattern}"
- *  ></ox-input-background-pattern>
- */
-let OxInputBackgroundPattern = class OxInputBackgroundPattern extends OxFormField {
-    render() {
-        const value = this.value || {};
-        return html `
-      <label> <ox-i18n msgid="label.image" auto="">image</ox-i18n> </label>
-
-      <ox-property-editor-attachment-selector
-        value-key="image"
-        .value=${value.image || ''}
-        custom-editor
-      ></ox-property-editor-attachment-selector>
-
-      <label> <ox-i18n msgid="label.align" auto="">align</ox-i18n> </label>
-
-      <select value-key="align" class="select-content" .value=${value.align}>
-        <option value="left-top">Left Top</option>
-        <option value="top">Top</option>
-        <option value="right-top">Right Top</option>
-        <option value="left">Left</option>
-        <option value="center">Center</option>
-        <option value="right">Right</option>
-        <option value="left-bottom">Left Bottom</option>
-        <option value="bottom">Bottom</option>
-        <option value="right-bottom">Right Bottom</option>
-      </select>
-
-      <div class="grid-10">
-        <label> <ox-i18n msgid="label.offset-x" auto="">offsetX</ox-i18n> </label>
-        <input type="number" value-key="offsetX" .value=${value.offsetX} />
-
-        <label> <ox-i18n msgid="label.offset-y" auto="">offsetY</ox-i18n> </label>
-        <input type="number" value-key="offsetY" .value=${value.offsetY} />
-
-        <label> <ox-i18n msgid="label.width" auto="">width</ox-i18n> </label>
-        <input type="number" value-key="width" .value=${value.width} />
-
-        <label> <ox-i18n msgid="label.height" auto="">height</ox-i18n> </label>
-        <input type="number" value-key="height" .value=${value.height} />
-      </div>
-
-      <div class="grid-10">
-        <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
-        <label> <ox-i18n msgid="label.fit" auto="">Fit</ox-i18n> </label>
-      </div>
-    `;
-    }
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onChange.bind(this));
-    }
-    _onChange(e) {
-        var element = e.target;
-        var key = element.getAttribute('value-key');
-        var value = element.value;
-        if (key == 'fitPattern') {
-            value = element.checked;
-        }
-        this.value = {
-            ...this.value,
-            [key]: value
-        };
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-};
-OxInputBackgroundPattern.styles = css `
-    :host,
-    .grid-10 {
-      display: grid;
-      grid-template-columns: repeat(10, 1fr);
-      grid-gap: 5px;
-      grid-auto-rows: minmax(24px, auto);
-
-      align-items: center;
-    }
-
-    * {
-      align-self: stretch;
-    }
-
-    label {
-      grid-column: span 2;
-      text-align: right;
-      text-transform: capitalize;
-
-      align-self: center;
-    }
-
-    .grid-10 {
-      grid-column: span 10;
-    }
-
-    select,
-    input,
-    [custom-editor] {
-      grid-column: span 8;
-    }
-
-    select {
-      height: 100%;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    input[type='checkbox'] {
-      grid-column: 3 / 4;
-      align-self: center;
-    }
-
-    input[type='checkbox'] ~ label {
-      grid-column: span 7;
-      text-align: left;
-    }
-
-    .grid-10 > input[type='number'] {
-      grid-column: span 3;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    .grid-10 > label {
-      grid-column: span 2;
-      text-align: right;
-    }
-  `;
-__decorate([
-    property({ type: Object })
-], OxInputBackgroundPattern.prototype, "value", void 0);
-OxInputBackgroundPattern = __decorate([
-    customElement('ox-input-background-pattern')
-], OxInputBackgroundPattern);
-export { OxInputBackgroundPattern };
-//# sourceMappingURL=ox-input-background-pattern.js.map

package/dist/src/ox-input-background-pattern.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-background-pattern.js","sourceRoot":"","sources":["../../src/ox-input-background-pattern.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAY5C;;;;;;;;GAQG;AAGH,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,WAAW;IA8DvD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAK,EAA8B,CAAA;QAE3D,OAAO,IAAI,CAAA;;;;;iBAKE,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;gEAM8B,KAAK,CAAC,KAAK;;;;;;;;;;;;;;0DAcjB,KAAK,CAAC,OAAO;;;0DAGb,KAAK,CAAC,OAAO;;;wDAGf,KAAK,CAAC,KAAK;;;yDAGV,KAAK,CAAC,MAAM;;;;iEAIJ,KAAK,CAAC,UAAU;;;KAG5E,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAC3C,IAAI,KAAK,GAAQ,OAAO,CAAC,KAAK,CAAA;QAE9B,IAAI,GAAG,IAAI,YAAY,EAAE;YACvB,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;SACxB;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAI,CAAC,EAAE,KAAK;SACd,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AAhIQ,+BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAgC;AA5DhD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAiIpC;SAjIY,wBAAwB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-attachment-list.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\nexport type BackgroundPatternOption = {\n  image?: HTMLImageElement | string\n  align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n  offsetX?: number\n  offsetY?: number\n  width?: number\n  height?: number\n  fitPattern?: boolean\n}\n\n/**\n * 컴포넌트의 fill pattern을 편집하는 element\n *\n * Example:\n *  <ox-input-background-pattern\n *    @change=\"${e => { this.pattern = e.target.value }}\"\n *    .value=${this.pattern}\"\n *  ></ox-input-background-pattern>\n */\n\n@customElement('ox-input-background-pattern')\nexport class OxInputBackgroundPattern extends OxFormField {\n  static styles = css`\n    :host,\n    .grid-10 {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n\n      align-items: center;\n    }\n\n    * {\n      align-self: stretch;\n    }\n\n    label {\n      grid-column: span 2;\n      text-align: right;\n      text-transform: capitalize;\n\n      align-self: center;\n    }\n\n    .grid-10 {\n      grid-column: span 10;\n    }\n\n    select,\n    input,\n    [custom-editor] {\n      grid-column: span 8;\n    }\n\n    select {\n      height: 100%;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    input[type='checkbox'] {\n      grid-column: 3 / 4;\n      align-self: center;\n    }\n\n    input[type='checkbox'] ~ label {\n      grid-column: span 7;\n      text-align: left;\n    }\n\n    .grid-10 > input[type='number'] {\n      grid-column: span 3;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    .grid-10 > label {\n      grid-column: span 2;\n      text-align: right;\n    }\n  `\n\n  @property({ type: Object }) value?: BackgroundPatternOption\n\n  render() {\n    const value = this.value || ({} as BackgroundPatternOption)\n\n    return html`\n      <label> <ox-i18n msgid=\"label.image\" auto=\"\">image</ox-i18n> </label>\n\n      <ox-property-editor-attachment-selector\n        value-key=\"image\"\n        .value=${value.image || ''}\n        custom-editor\n      ></ox-property-editor-attachment-selector>\n\n      <label> <ox-i18n msgid=\"label.align\" auto=\"\">align</ox-i18n> </label>\n\n      <select value-key=\"align\" class=\"select-content\" .value=${value.align}>\n        <option value=\"left-top\">Left Top</option>\n        <option value=\"top\">Top</option>\n        <option value=\"right-top\">Right Top</option>\n        <option value=\"left\">Left</option>\n        <option value=\"center\">Center</option>\n        <option value=\"right\">Right</option>\n        <option value=\"left-bottom\">Left Bottom</option>\n        <option value=\"bottom\">Bottom</option>\n        <option value=\"right-bottom\">Right Bottom</option>\n      </select>\n\n      <div class=\"grid-10\">\n        <label> <ox-i18n msgid=\"label.offset-x\" auto=\"\">offsetX</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetX\" .value=${value.offsetX} />\n\n        <label> <ox-i18n msgid=\"label.offset-y\" auto=\"\">offsetY</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetY\" .value=${value.offsetY} />\n\n        <label> <ox-i18n msgid=\"label.width\" auto=\"\">width</ox-i18n> </label>\n        <input type=\"number\" value-key=\"width\" .value=${value.width} />\n\n        <label> <ox-i18n msgid=\"label.height\" auto=\"\">height</ox-i18n> </label>\n        <input type=\"number\" value-key=\"height\" .value=${value.height} />\n      </div>\n\n      <div class=\"grid-10\">\n        <input value-key=\"fitPattern\" type=\"checkbox\" .checked=${value.fitPattern} required />\n        <label> <ox-i18n msgid=\"label.fit\" auto=\"\">Fit</ox-i18n> </label>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n    var value: any = element.value\n\n    if (key == 'fitPattern') {\n      value = element.checked\n    }\n\n    this.value = {\n      ...this.value,\n      [key!]: value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/ox-input-color-gradient.d.ts

@@ -1,25 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@operato/i18n/ox-i18n.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@polymer/paper-listbox/paper-listbox';
-import '@polymer/paper-item/paper-item';
-import '@operato/input/ox-input-angle.js';
-import '@operato/input/ox-input-color-stops.js';
-import { ColorStop, OxFormField } from '@operato/input';
-export declare type GradientOption = {
-    type: 'linear' | 'radial';
-    rotation: number;
-    direction?: 'left-to-right' | 'lefttop-to-rightbottom' | 'top-to-bottom' | 'righttop-to-leftbottom' | 'right-to-left' | 'rightbottom-to-lefttop' | 'bottom-to-top' | 'leftbottom-to-righttop' | 'left-to-right' | 'center-to-corner';
-    center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom';
-    colorStops?: ColorStop[];
-};
-export declare class OxInputColorGradient extends OxFormField {
-    static styles: import("lit").CSSResult;
-    value: GradientOption;
-    firstUpdated(): void;
-    _onChange(e: Event): void;
-    render(): import("lit-html").TemplateResult<1>;
-    _convertDirectionToRotation(direction: string): number;
-}