@operato/process 1.1.77 → 1.1.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.1.77",
+  "version": "1.1.80",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -67,18 +67,18 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^1.1.77",
-    "@operato/board": "^1.1.77",
-    "@operato/data-grist": "^1.1.77",
-    "@operato/font": "^1.1.77",
-    "@operato/graphql": "^1.1.53",
-    "@operato/i18n": "^1.1.53",
-    "@operato/input": "^1.1.77",
-    "@operato/markdown": "^1.1.77",
-    "@operato/popup": "^1.1.77",
-    "@operato/property-editor": "^1.1.77",
-    "@operato/styles": "^1.1.77",
-    "@operato/utils": "^1.1.66",
+    "@operato/app": "^1.1.80",
+    "@operato/board": "^1.1.80",
+    "@operato/data-grist": "^1.1.80",
+    "@operato/font": "^1.1.80",
+    "@operato/graphql": "^1.1.79",
+    "@operato/i18n": "^1.1.79",
+    "@operato/input": "^1.1.80",
+    "@operato/markdown": "^1.1.79",
+    "@operato/popup": "^1.1.80",
+    "@operato/property-editor": "^1.1.80",
+    "@operato/styles": "^1.1.79",
+    "@operato/utils": "^1.1.79",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -127,5 +127,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "58e6e0aa8134ef783d85f42bf4e789edc6566f87"
+  "gitHead": "d35d64d05d106e8039e98312414223c5b9c2cb39"
 }

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-process-selector.js","sourceRoot":"","sources":["../../src/ox-process-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAC7C,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;OAkBF;SACF,CAAA;IACH,CAAC;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;4CAC6B,IAAI,CAAC,KAAK,IAAI,EAAE,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;;yBAEpF,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;KAC1D,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAQ;;QACtB,IAAI,CAAC,KAAK,GAAG,MAAC,CAAC,CAAC,MAAc,0CAAE,KAAK,CAAA;QACrC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE5B,IAAI,QAAQ,GAAG,IAAI,CAAA;;qBAEF,IAAI;iBACR,KAAK;4BACM,KAAK,EAAE,CAAc,EAAE,EAAE;YAC3C,IAAI,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA;YAC9B,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,EAAE,CAAA;YAEvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAEhF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;SACzC,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAiB;AA1BjC,eAAe;IAD3B,aAAa,CAAC,qBAAqB,CAAC;GACxB,eAAe,CA4E3B;SA5EY,eAAe","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './selector/process-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-process-selector')\nexport class ProcessSelector extends LitElement {\n  static get styles() {\n    return [\n      css`\n        :host {\n          position: relative;\n          display: inline-block;\n        }\n\n        input[type='text'] {\n          box-sizing: border-box;\n          width: 100%;\n          height: 100%;\n          border: 1px solid rgba(0, 0, 0, 0.2);\n        }\n\n        mwc-icon {\n          position: absolute;\n          top: 0;\n          right: 0;\n        }\n      `\n    ]\n  }\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties?: any\n\n  private popup: any\n\n  render() {\n    return html`\n      <input id=\"text\" type=\"text\" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />\n\n      <mwc-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</mwc-icon>\n    `\n  }\n\n  _onInputChanged(e: Event) {\n    this.value = (e.target as any)?.value\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var value = this.value || {}\n\n    var template = html`\n      <process-selector\n        .creatable=${true}\n        .value=${value}\n        @process-selected=${async (e: CustomEvent) => {\n          var process = e.detail.process\n          this.value = process.id\n\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n          this.popup && this.popup.close()\n        }}\n      ></process-selector>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select process')\n    })\n  }\n}\n"]}

package/dist/src/selector/process-creation-card.d.ts

@@ -1,14 +0,0 @@
-import '@material/mwc-icon';
-import './process-creation-popup';
-import { LitElement } from 'lit';
-declare const ProcessCreationCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
-export declare class ProcessCreationCard extends ProcessCreationCard_base {
-    static get styles(): import("lit").CSSResult[];
-    defaultGroup?: string;
-    groups: any;
-    private popup;
-    render(): import("lit-html").TemplateResult<1>;
-    onClick(): void;
-    reset(): void;
-}
-export {};

package/dist/src/selector/process-creation-card.js

@@ -1,87 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/mwc-icon';
-import './process-creation-popup';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { i18next, localize } from '@operato/i18n';
-import { openPopup } from '@operato/layout';
-let ProcessCreationCard = class ProcessCreationCard extends localize(i18next)(LitElement) {
-    static get styles() {
-        return [
-            css `
-        :host {
-          display: flex;
-          border: var(--card-list-create-border);
-          border-radius: var(--card-list-create-border-radius);
-
-          background-color: #fff;
-
-          align-content: center;
-          justify-content: center;
-        }
-
-        div {
-          text-align: center;
-          font-size: 0.8em;
-          color: var(--card-list-create-color);
-          text-transform: capitalize;
-        }
-
-        mwc-icon {
-          display: block;
-          font-size: 3.5em;
-          color: var(--card-list-create-icon-color);
-        }
-      `
-        ];
-    }
-    render() {
-        return html `<div @click=${(e) => this.onClick()}>
-      <mwc-icon>add_circle_outline</mwc-icon>create process
-    </div> `;
-    }
-    onClick() {
-        if (this.popup) {
-            delete this.popup;
-        }
-        /*
-         * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
-         * 주의. value는 object일 수도 있고, string일 수도 있다.
-         * string인 경우에는 해당 보드의 id로 해석한다.
-         */
-        var template = html `
-      <process-creation-popup
-        .defaultGroup=${this.defaultGroup}
-        .groups=${this.groups}
-        @create-process=${async (e) => {
-            var { name, description, groupId } = e.detail;
-            this.dispatchEvent(new CustomEvent('create-process', {
-                detail: {
-                    name,
-                    description,
-                    groupId
-                }
-            }));
-            this.popup && this.popup.close();
-        }}
-      ></process-creation-popup>
-    `;
-        this.popup = openPopup(template, {
-            backdrop: true,
-            size: 'large',
-            title: i18next.t('title.create-process')
-        });
-    }
-    reset() { }
-};
-__decorate([
-    property({ type: String })
-], ProcessCreationCard.prototype, "defaultGroup", void 0);
-__decorate([
-    property({ type: Array })
-], ProcessCreationCard.prototype, "groups", void 0);
-ProcessCreationCard = __decorate([
-    customElement('process-creation-card')
-], ProcessCreationCard);
-export { ProcessCreationCard };
-//# sourceMappingURL=process-creation-card.js.map

package/dist/src/selector/process-creation-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"process-creation-card.js","sourceRoot":"","sources":["../../../src/selector/process-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IACpE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;OAwBF;SACF,CAAA;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;;YAE9C,CAAA;IACV,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,QAAQ,GAAG,IAAI,CAAA;;wBAEC,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;0BACH,KAAK,EAAE,CAAc,EAAE,EAAE;YACzC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE;oBACN,IAAI;oBACJ,WAAW;oBACX,OAAO;iBACR;aACF,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;SACzC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,KAAI,CAAC;CACX,CAAA;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAAY;AAjC3B,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAmF/B;SAnFY,mBAAmB","sourcesContent":["import '@material/mwc-icon'\nimport './process-creation-popup'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('process-creation-card')\nexport class ProcessCreationCard extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          border: var(--card-list-create-border);\n          border-radius: var(--card-list-create-border-radius);\n\n          background-color: #fff;\n\n          align-content: center;\n          justify-content: center;\n        }\n\n        div {\n          text-align: center;\n          font-size: 0.8em;\n          color: var(--card-list-create-color);\n          text-transform: capitalize;\n        }\n\n        mwc-icon {\n          display: block;\n          font-size: 3.5em;\n          color: var(--card-list-create-icon-color);\n        }\n      `\n    ]\n  }\n\n  /* default group id */\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups: any\n\n  private popup: any\n\n  render() {\n    return html`<div @click=${(e: Event) => this.onClick()}>\n      <mwc-icon>add_circle_outline</mwc-icon>create process\n    </div> `\n  }\n\n  onClick() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var template = html`\n      <process-creation-popup\n        .defaultGroup=${this.defaultGroup}\n        .groups=${this.groups}\n        @create-process=${async (e: CustomEvent) => {\n          var { name, description, groupId } = e.detail\n\n          this.dispatchEvent(\n            new CustomEvent('create-process', {\n              detail: {\n                name,\n                description,\n                groupId\n              }\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></process-creation-popup>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.create-process')\n    })\n  }\n\n  reset() {}\n}\n"]}

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

@@ -1,44 +0,0 @@
-import './process-creation-card';
-import { LitElement, PropertyValues } from 'lit';
-declare const ProcessSelector_base: (new (...args: any[]) => {
-    _infiniteScrollOptions: {
-        threshold: number;
-        limit: number;
-        totalProp: string;
-        pageProp: string;
-    };
-    onScroll: import("lodash").DebouncedFunc<(e: any) => void>;
-    readonly scrollTargetEl: HTMLElement | null;
-    scrollAction(): Promise<void>;
-}) & (new (...args: any[]) => LitElement) & typeof LitElement;
-export declare class ProcessSelector extends ProcessSelector_base {
-    static get styles(): import("lit").CSSResult[];
-    groups: {
-        id: string;
-        name: string;
-        description: string;
-    }[];
-    processes: any[];
-    group?: string;
-    creatable: boolean;
-    value?: string;
-    private _page;
-    private _total;
-    constructor();
-    render(): import("lit-html").TemplateResult<1>;
-    get scrollTargetEl(): HTMLElement | null;
-    scrollAction(): Promise<void>;
-    firstUpdated(): void;
-    updated(changed: PropertyValues<this>): Promise<void>;
-    onClickSelect(process: any): void;
-    onCreateProcess(e: CustomEvent): Promise<void>;
-    refreshGroups(): Promise<void>;
-    refreshProcesses(): Promise<void>;
-    appendProcesses(): Promise<void>;
-    getProcesses({ page, limit }?: {
-        page?: number | undefined;
-        limit?: number | undefined;
-    }): Promise<any>;
-    createProcess(name: string, description: string, groupId: string): Promise<any>;
-}
-export {};

package/dist/src/selector/process-selector.js

@@ -1,306 +0,0 @@
-import { __decorate } from "tslib";
-import './process-creation-card';
-import gql from 'graphql-tag';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { buildArgs, client, gqlContext } from '@operato/graphql';
-import { i18next, localize } from '@operato/i18n';
-import { ScrollbarStyles } from '@operato/styles';
-import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js';
-const FETCH_PROCESS_LIST_GQL = (listParam) => {
-    return gql `
-  {
-    processes(${buildArgs(listParam)}) {
-      items {
-        id
-        name
-        description
-        thumbnail
-      }
-      total
-    }
-  }
-`;
-};
-const FETCH_PROCESS_GROUP_LIST_GQL = gql `
-  {
-    processGroups {
-      items {
-        id
-        name
-        description
-      }
-      total
-    }
-  }
-`;
-const CREATE_PROCESS_GQL = gql `
-  mutation CreateProcess($process: NewProcess!) {
-    createProcess(process: $process) {
-      id
-      name
-      description
-      model
-      createdAt
-      updatedAt
-    }
-  }
-`;
-let ProcessSelector = class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {
-    static get styles() {
-        return [
-            ScrollbarStyles,
-            css `
-        :host {
-          display: grid;
-          grid-template-rows: auto auto 1fr;
-          overflow: hidden;
-          background-color: var(--popup-content-background-color);
-        }
-
-        #main {
-          overflow: auto;
-          padding: var(--popup-content-padding);
-          display: grid;
-          grid-template-columns: var(--card-list-template);
-          grid-auto-rows: var(--card-list-rows-height);
-          grid-gap: 20px;
-        }
-
-        .card {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          overflow: hidden;
-          border-radius: var(--card-list-border-radius);
-          background-color: var(--card-list-background-color);
-        }
-
-        .card[selected] {
-          border: red solid;
-        }
-
-        .card.create {
-          overflow: visible;
-        }
-
-        .card:hover {
-          cursor: pointer;
-        }
-
-        .card > .name {
-          background-color: var(--board-renderer-name-background-color);
-          opacity: 0.8;
-          margin-top: -35px;
-          width: 100%;
-          color: #fff;
-          font-weight: bolder;
-          font-size: 13px;
-          text-indent: 7px;
-        }
-
-        .card > .description {
-          background-color: rgba(0, 0, 0, 0.7);
-          width: 100%;
-          min-height: 15px;
-          font-size: 0.6rem;
-          color: #fff;
-          text-indent: 7px;
-        }
-        .card img {
-          max-height: 100%;
-          min-height: 100%;
-        }
-
-        #filter {
-          padding: var(--popup-content-padding);
-          background-color: #fff;
-          box-shadow: var(--box-shadow);
-        }
-
-        #filter * {
-          font-size: 15px;
-        }
-
-        select {
-          text-transform: capitalize;
-          float: right;
-        }
-      `
-        ];
-    }
-    constructor() {
-        super();
-        this.groups = [];
-        this.processes = [];
-        this.creatable = false;
-        this._page = 1;
-        this._total = 0;
-        this._infiniteScrollOptions.limit = 20;
-    }
-    render() {
-        return html `
-      <div id="filter">
-        <select
-          @change=${(e) => {
-            var _a;
-            this.group = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
-            this.requestUpdate();
-        }}
-        >
-          <option value="">${i18next.t('label.all')}</option>
-          ${this.groups.map(group => html ` <option value=${group.id}>${group.description}</option> `)}
-        </select>
-      </div>
-
-      <div
-        id="main"
-        @scroll=${(e) => {
-            this.onScroll(e);
-        }}
-      >
-        ${this.creatable
-            ? html `
-              <process-creation-card
-                class="card create"
-                .groups=${this.groups}
-                .defaultGroup=${this.group}
-                @create-process=${(e) => this.onCreateProcess(e)}
-              ></process-creation-card>
-            `
-            : html ``}
-        ${this.processes.map(process => html `
-            <div
-              class="card"
-              @click=${(e) => this.onClickSelect(process)}
-              ?selected=${this.value === process.id}
-            >
-              <img src=${process.thumbnail} />
-              <div class="name">${process.name}</div>
-              <div class="description">${process.description}</div>
-            </div>
-          `)}
-      </div>
-    `;
-    }
-    //@ts-ignore
-    get scrollTargetEl() {
-        return this.renderRoot.querySelector('#main');
-    }
-    async scrollAction() {
-        return this.appendProcesses();
-    }
-    firstUpdated() {
-        this.refreshGroups();
-    }
-    async updated(changed) {
-        if (changed.has('group')) {
-            this.refreshProcesses();
-        }
-    }
-    onClickSelect(process) {
-        this.dispatchEvent(new CustomEvent('process-selected', {
-            composed: true,
-            bubbles: true,
-            detail: {
-                process
-            }
-        }));
-    }
-    async onCreateProcess(e) {
-        var { name, description, groupId } = e.detail;
-        await this.createProcess(name, description, groupId);
-        this.refreshProcesses();
-    }
-    async refreshGroups() {
-        var groupListResponse = await client.query({
-            query: FETCH_PROCESS_GROUP_LIST_GQL,
-            context: gqlContext()
-        });
-        if (!groupListResponse || !groupListResponse.data)
-            return;
-        var groups = groupListResponse.data.processGroups.items;
-        this.groups = [...groups];
-        this.group = groups.filter((group) => group.id == this.group).length > 0 ? this.group : '';
-    }
-    async refreshProcesses() {
-        var processes = await this.getProcesses();
-        this.processes = [...processes];
-        var creationCard = this.renderRoot.querySelector('process-creation-card');
-        if (creationCard) {
-            ;
-            creationCard.reset();
-        }
-    }
-    async appendProcesses() {
-        var processes = await this.getProcesses({ page: this._page + 1 });
-        this.processes = [...this.processes, ...processes];
-    }
-    async getProcesses({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
-        var filters = [];
-        var sortings = [];
-        var pagination = {
-            limit,
-            page
-        };
-        if (this.group)
-            filters.push({
-                name: 'groupId',
-                operator: 'eq',
-                value: this.group
-            });
-        var params = {
-            filters,
-            sortings,
-            pagination
-        };
-        var processListResponse = await client.query({
-            query: FETCH_PROCESS_LIST_GQL(params),
-            context: gqlContext()
-        });
-        if (!processListResponse || !processListResponse.data)
-            return [];
-        this._total = processListResponse.data.processes.total;
-        this._page = page;
-        return processListResponse.data.processes.items;
-    }
-    async createProcess(name, description, groupId) {
-        var model = JSON.stringify({
-            width: 800,
-            height: 600
-        });
-        const response = await client.mutate({
-            mutation: CREATE_PROCESS_GQL,
-            variables: {
-                process: {
-                    name,
-                    description,
-                    groupId,
-                    model
-                }
-            },
-            context: gqlContext()
-        });
-        return response.data;
-    }
-};
-__decorate([
-    property({ type: Array })
-], ProcessSelector.prototype, "groups", void 0);
-__decorate([
-    property({ type: Array })
-], ProcessSelector.prototype, "processes", void 0);
-__decorate([
-    property({ type: String })
-], ProcessSelector.prototype, "group", void 0);
-__decorate([
-    property({ type: Boolean })
-], ProcessSelector.prototype, "creatable", void 0);
-__decorate([
-    property({ type: String })
-], ProcessSelector.prototype, "value", void 0);
-ProcessSelector = __decorate([
-    customElement('process-selector')
-], ProcessSelector);
-export { ProcessSelector };
-//# sourceMappingURL=process-selector.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"process-selector.js","sourceRoot":"","sources":["../../../src/selector/process-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './process-creation-card'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { buildArgs, client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\n\nconst FETCH_PROCESS_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    processes(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_PROCESS_GROUP_LIST_GQL = gql`\n  {\n    processGroups {\n      items {\n        id\n        name\n        description\n      }\n      total\n    }\n  }\n`\n\nconst CREATE_PROCESS_GQL = gql`\n  mutation CreateProcess($process: NewProcess!) {\n    createProcess(process: $process) {\n      id\n      name\n      description\n      model\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('process-selector')\nexport class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          background-color: var(--popup-content-background-color);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: var(--card-list-template);\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: red solid;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          background-color: var(--board-renderer-name-background-color);\n          opacity: 0.8;\n          margin-top: -35px;\n          width: 100%;\n          color: #fff;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          background-color: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          min-height: 15px;\n          font-size: 0.6rem;\n          color: #fff;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          padding: var(--popup-content-padding);\n          background-color: #fff;\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          text-transform: capitalize;\n          float: right;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) processes: any[] = []\n  @property({ type: String }) group?: string\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 20\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <select\n          @change=${(e: Event) => {\n            this.group = (e.currentTarget as any)?.value\n            this.requestUpdate()\n          }}\n        >\n          <option value=\"\">${i18next.t('label.all')}</option>\n          ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n        </select>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <process-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-process=${(e: CustomEvent) => this.onCreateProcess(e)}\n              ></process-creation-card>\n            `\n          : html``}\n        ${this.processes.map(\n          process => html`\n            <div\n              class=\"card\"\n              @click=${(e: Event) => this.onClickSelect(process)}\n              ?selected=${this.value === process.id}\n            >\n              <img src=${process.thumbnail} />\n              <div class=\"name\">${process.name}</div>\n              <div class=\"description\">${process.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  //@ts-ignore\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendProcesses()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('group')) {\n      this.refreshProcesses()\n    }\n  }\n\n  onClickSelect(process: any) {\n    this.dispatchEvent(\n      new CustomEvent('process-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          process\n        }\n      })\n    )\n  }\n\n  async onCreateProcess(e: CustomEvent) {\n    var { name, description, groupId } = e.detail\n\n    await this.createProcess(name, description, groupId)\n    this.refreshProcesses()\n  }\n\n  async refreshGroups() {\n    var groupListResponse = await client.query({\n      query: FETCH_PROCESS_GROUP_LIST_GQL,\n      context: gqlContext()\n    })\n\n    if (!groupListResponse || !groupListResponse.data) return\n\n    var groups = groupListResponse.data.processGroups.items\n    this.groups = [...groups]\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshProcesses() {\n    var processes = await this.getProcesses()\n    this.processes = [...processes]\n\n    var creationCard = this.renderRoot.querySelector('process-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendProcesses() {\n    var processes = await this.getProcesses({ page: this._page + 1 })\n    this.processes = [...this.processes, ...processes]\n  }\n\n  async getProcesses({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    var filters = []\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.group)\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n    var processListResponse = await client.query({\n      query: FETCH_PROCESS_LIST_GQL(params),\n      context: gqlContext()\n    })\n\n    if (!processListResponse || !processListResponse.data) return []\n    this._total = processListResponse.data.processes.total\n    this._page = page\n\n    return processListResponse.data.processes.items\n  }\n\n  async createProcess(name: string, description: string, groupId: string) {\n    var model = JSON.stringify({\n      width: 800,\n      height: 600\n    })\n\n    const response = await client.mutate({\n      mutation: CREATE_PROCESS_GQL,\n      variables: {\n        process: {\n          name,\n          description,\n          groupId,\n          model\n        }\n      },\n      context: gqlContext()\n    })\n\n    return response.data\n  }\n}\n"]}